Achievement
Individual Contributions
Work Packages | Choi Lam Wong | Nian Ran | Eduardo Battistini |
---|---|---|---|
Partner Liaison | 35 | 20 | 45 |
Requirement Analysis | 0 | 10 | 90 |
Research | 45 | 10 | 45 |
HCI & UI Design | 20 | 0 | 80 |
Development | 45 | 10 | 45 |
Website | 0 | 0 | 100 |
Reporting | 25 | 50 | 25 |
Videos | 15 | 30 | 55 |
Presentation & Poster | 0 | 20 | 80 |
Overall Contribution | 40 | 7.5 | 52.5 |
Roles | Back End Developer, Researcher | Development Support, Reporter | Front End Developer, Website Editor |
Future Work
Even though a large majority of the application’s functionalities are finished, we plan to take additional time to polish it and intend to publish it on the Microsoft Store during the summer. Although the drawing mechanism is functional and easy to use, it could benefit from further testing and fine-tuning. Small details, like the dwell time required for each action, and the linking radius for connecting lines together may have room for optimisation. In addition, features that are not currently included, such as Bucket fill and Zooming in and out of the canvas could make for a richer creative experience.
After its publication, we hope to continue to work with our partners at Microsoft to ensure we are able to get the app out to as many users as possible. A particular avenue we discussed involved setting up Avant-Garde in an interactive playground at Morgan’s Wonderland, in San Antonio, Texas. It is the world’s first completely accessible theme park, with attractions for people with many different disabilities. In addition, our partner Mr. Jarnail Chudge was able to put us in contact with a representative from the Motor Neuron Disease Association who agreed to promote Avant-Garde through their platform upon its completion.
Critical Evaluation
Seeing as a large majority of the required functionalities were completed to a high standard, it seems the development of Avant-Garde was a resounding success. However, the process utilised to achieve these outcomes could have been improved. The following key areas are of interest:
During the project’s ideation phase, it was hard to imagine the sheer quantity of functionalities that would be required (see Moscow table below). Eight subsystems had to be designed, implemented, and tested, and many of them required multiple iterations to be completed. Their delivery was an enormous challenge, and it was achieved with tremendous effort from our team. Furthermore, the drawing mechanism that was created is completely unique and original. In our view, our greatest accomplishment was ideating and implementing this mechanism, as it is a completely novel form of human computer interaction.
The development process began quite slowly, as none of the team members had experience using C#, XAML, or Visual Studio. By January, the team had become more familiar with these tools, however, given the desired scope of the project, a very large amount of development needed to be done in little time. Therefore, delivering features was prioritised over quality assurance. As a result, the code hygiene is satisfactory, but qualities such as code efficiency, naming conventions, and code readability could be improved. In addition, a lot of the early development was made under the assumption that the final product would not stray from the original plan, which was not the case. If the initial structure had been made more flexible, the system’s architecture would likely be more elegant and efficient.
Avant-Garde is a system with many interconnected moving parts, which were simultaneously developed from different locations. To manage this, team meetings were held regularly and communication happened daily. Although these processes prevented any major blunders, inconsistencies between code branches and bugs related to component integration still arose occasionally. This could also have been improved by having a strict, test-driven code management protocol.
MoSCoW Feature Completion
ID | Requirement | Priority | Difficulty | Completed | Credit |
---|---|---|---|---|---|
Drawing Mechanism | |||||
1.1 | Mechanism conceptual design and testing | M | 3 | Y | CW, EB |
1.2 | Integration of UWP Gaze Input library with InkCanvas, in order to draw utilising Eye Tracker | M | 3 | Y | CW |
1.3 | Gaze from Point A to Point B to draw a straight line | M | 1 | Y | CW |
1.4 | Utilise Bezier Curves to curve existing lines | M | 3 | Y | CW |
1.5 | Generate indication points appearing at the end and middle of each line (which are gazed upon to toggle additional drawing functionalities) | M | 2 | Y | CW |
1.6 | 4-Point and 2-Point joystick front-end design | M | 1 | Y | EB |
1.7 | Joystick implementation and integration into drawing mechanism | M | 2 | Y | CW |
1.8 | Undo/Redo features | M | 2 | Y | CW, NR |
1.9 | Reposition Bezier Curve control points to accurately curve lines utilising joystick | M | 1 | Y | CW |
1.1 | Mandala drawing algorithm | M | 2 | Y | CW |
1.11 | Delete existing lines | M | 1 | Y | CW |
1.12 | Reposition points after they are placed utilising joystick | S | 1 | Y | CW |
1.13 | Connect line to already existing points | S | 2 | Y | CW |
1.14 | Begin new lines from already existing points | S | 1 | Y | CW |
1.15 | Integrate and update radial progress bar attributes | S | 1 | Y | CW, EB |
1.16 | Bucket fill tool | S | 3 | N | |
1.17 | Support for drawing Shapes directly | C | 3 | N | |
UI | |||||
2.1 | General application usage flow design | M | 2 | Y | EB |
2.2 | Responsive Design | M | 2 | Y | CW |
2.3 | Toggling between Draw mode, and View mode | M | 1 | Y | EB |
2.4 | Button layout for View Mode | M | 1 | Y | EB |
2.5 | Button repeating-click property for ease of use with Eye-Tracking | M | 1 | Y | EB |
2.6 | Grid overlay in Draw Mode, for ease of focus when selecting points to draw | M | 2 | Y | CW |
2.7 | Home screen | M | 1 | Y | EB |
2.8 | Playback animation of mandala creation | S | 3 | Y | CW |
2.9 | Zoom in/out of canvas | S | 3 | N | |
Toolbox | |||||
3.1 | Toolbox front-end (4 iterations) | M | 3 | Y | EB |
3.2 | Colour palette: implementation | M | 2 | Y | EB, NR |
3.3 | Colour palette: display selected colour | M | 1 | Y | EB |
3.4 | Integration of tools and components (data flow, property updates, etc.) | M | 3 | Y | EB |
3.5 | Clear canvas functionality | M | 1 | Y | EB, CW |
3.6 | Finding and editing licensed icons and images | M | 1 | Y | EB |
3.7 | Colour Palette: auto-switch colour on completion of each stroke | M | 2 | Y | EB, NR |
Colour Manager | |||||
4.1 | Colour Manager front-end (3 iterations) | M | 3 | Y | EB |
4.2 | Colour ID system for saving/loading colours, and enabling users to edit them at any point | M | 3 | Y | EB |
4.3 | Set background colour | M | 1 | Y | EB |
4.4 | 13 different colour profiles, each with 10 different brightness settings, and 20 different opacities | S | 2 | Y | EB |
4.5 | Colour theme picker menu | S | 2 | N | |
4.6 | Automatic saving/loading of Colour Themes | S | 1 | N | |
File Manager | |||||
5.1 | File Manager front-end (1 iteration) | M | 1 | Y | EB |
5.2 | Slot system for storing projects | M | 1 | Y | EB |
5.3 | Exporting images as JPG/PNG | M | 1 | Y | NR |
5.4 | Saving/Loading files | M | 1 | Y | EB |
5.5 | Storing stroke data, and updating it on every stroke | M | 3 | Y | EB, CW |
5.6 | Serialising/De-serialising canvas data | M | 3 | Y | EB |
5.7 | Regenerating canvas strokes from loaded data | M | 2 | Y | CW |
5.8 | Regenerating colour palette and background from loaded data | M | 1 | Y | EB |
5.9 | Automatically loading pre-set files containing finished mandalas, as examples for users | S | 2 | Y | EB |
5.10 | Displaying canvas image in File Manager front-end slots | S | 2 | N | |
Brush Tool | |||||
6.1 | Brush Tool front-end (2 iterations) | M | 1 | Y | EB |
6.2 | Adjusting brush attributes (size and brush type) | S | 1 | Y | EB |
6.3 | Adjusting number of mandala line reflections | S | 1 | Y | EB, CW |
Confirm Tool | |||||
7.1 | Confirm Tool front-end | M | 1 | Y | EB |
7.2 | Confirm action implementation | M | 2 | Y | EB |
Tutorial | |||||
8.1 | Tutorial front-end | M | 1 | Y | EB |
8.2 | Tutorial content creation | M | 3 | Y | EB |
Bug Report
Bug Description | Priority |
---|---|
The animation quality decreases significantly with a large number of strokes on the canvas. | high |
Some of the buttons in the ToolBox are hard to select with eye-trackers on smaller screens. | medium |
The program doesn’t prompt for confirmation before exporting designs as a jpg images. | medium |
The grid lines in draw mode overlap with the user drawn strokes. | low |
Saving and loading do not support all screen resolutions. | low |
The drawn pattern and the mandala pattern do not re-center themselves when the application window is resized. | low |
Pop ups do not recenter themselves if window size is changed. | low |
The drawn strokes overlap with each other in incorrect order. | low |
The application draws a new line with the menu expanded after switching to other windows and then switching back. | low |