This is the report produced as a part of the final evaluation of the GSoC 2020 project titled Enhancing Simulator User Interface with the organization CircuitVerse.

Student: Samiran Konwar

Mentors: Nitin Singhal, Dustin Harris

Community Bonding Period (May 4, 2020 - June 1, 2020)

Activities:

1. Established communication channel with mentors/students (working on the same repository).
2. Weekly E-meetings with all members, discussing project workflow.
3. Researching about color schema, WCGA 2.0 guidelines, Color Blind Support, etc.
4. Blogs wrote during this phase (in-order): blog 0, Blog 1, Blog 2.
5. Finishing up the User Interface Design prototype.
6. Setting up the development environment.

First Phase (June 1, 2020 - June 29, 2020)

Activities:

1. Breaking apart the current User Interface, transitioning to a new User Interface on a separate branch.
2. Generating the SMACSS architecture schema for breaking down the old stylesheet into new main.stylesheet.css.
3. Generating all assets required for the UI.
4. Addition of UI plugins to achieve custom shadow elements.
5. Complete restructuring of edit.html.erb.
6. Blogs wrote during this phase (in-order): blog 0, Blog 1, Blog 2, Blog 3.

TODOs:

• The SMACSS architecture was created but unused due to webpacker setup unavailability, needs to break down main.stylesheet.css into their dedicated files/folder structure.
• Merging Webpacker branch into NewUI branch.

Second Phase (July 4, 2020 - July 27, 2020)

Activities:

1. Setting up required library to be used for Hotkeys feature.
2. Building the hotkey preference panel.
3. Generating the default keys metadata.
4. Core logic generation for hotkeys & actions file.
5. Added key event normalization library.
6. Merging Webpacker branch into NewUI branch through PR.
7. Addition of color variables, changing all hex code into CSS vars & separating all theme-related ruleset it into color_theme.scss.
8. Core logic generation of color theme feature.
9. Editing all module\js --> customDraw() from hardcoded color code to query from DOM.
10. Research about colors, generating color palettes, building themes mock-ups.
11. Weekly e-meets about project-related work.
12. Blogs written during this phase Blog 0, Blog 1.

TODOs:

• Make use of webpacker for the hotkey feature, moving all files from /js to /src, making use of modular javascript.
• Make theme feature more efficient by grouping & reducing the number of color variables.

Final Phase (August 1, 2020 - August 24, 2020)

Activities:

1. Generating color theme configuration UI panel, with SVG preview generation.
2. Implementation of Filter Search on modules panel.
3. Feature panel drag ability.
4. Implementation & replace zoom buttons with zoom range slider.
5. Module property & Element panels minimization ability.
6. Added circuit preview feature.
7. Multi-add element on Ctrl hold ability.
8. Modular hotkey files, making use of webpacker.
9. Regular e-meets about project-related work.
10. Blogs written during this phase blog 0, blog 1
11. Various UI-fixes.
12. Addition of touch listeners for touch screen detection.

TODOs:

• For complete touch screen support major UI changes are required for a touch detected device, as well as changing core logic of simulationArea to accommodate support.
• Elements overlapping inside the canvas should be avoided, currently, there is no proper logic to detect element objects present/placed inside the canvas. Further research is required on the canvas & logic.
• "What's new" popup to be built, presenting the various changes/features done on the simulator.
• Partialize SVG from edit.html.erb & reduce file line length.

Future Development

• Working on the simulator is a real challenge even enabling touch listeners, the same logic of the simulator are used for the touch listeners as for the others, a proper implementation would be to have a new set of logic particularly for the touch screens, one can also look at the library such as Hammer.js, possibly integrating it with the simulator could be highly beneficial. Also, User Interface changes would be required for an element that is non-operable without a pointing device.
• Not letting elements overlap inside the canvas is another challenge, as HTML canvas element doesn’t hold the position of elements drawn, even though there is x, y coordinates are defined in the simulationArea object, we’d need more than just hold coordinates, as the dimension of each element differs & elements can be moved inside the canvas thus more research is needed on this.
• Even though the color blind theme was made using a color-blind color palette, it’s still not tested or built by someone who’s a professional in this field, it requires further improvement & feedback from the actual target user.
• The theme feature of the simulator can further be extended to make it more customizable by letting the user customize particular elements &/or even let them build a complete theme for the simulator through the client-side itself.

Experience:

I never thought I would be spending the summer of 2020 as a GSoC student developer, being very excited & thrilled to be selected I started working immediately after the announcement of the student projects. The summer was quite different having a pandemic going on & everybody held on their homes, but I had a very productive 4 months learning & growing with this program.

The most important skill I had learned during this period is to not stress out too much on something for a long period if things aren’t coming out as expected, sometimes we need to hold back & take a break, one could spend hours or days trying to solve some bugs on some days, but might just take a few minutes on some other days. The key is to look at a problem with a fresh perspective & a clear mind.

Acknowledgment:

I am very grateful to my mentors Nitin Singhal & Dustin Harris for helping me throughout the Google Summer of Code Period for making this project a success, special thanks to all the core members of the organization Satvik Ramaprasad, Aboobacker MK for looking out at my work & guiding me throughout. Lastly, Sincere gratitude to Google for offering me this great opportunity to contribute to this wonderful community.