Simulator Improvements: Final Report

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


Project Details
Initial ProposalProject 4
Duration~4 Months (4 May'20 - 24 Aug'20)


Revamp User Interface on simulatorcompleted/mergedRevamp UI of the Simulator [Task 1.1.1]
Hotkeyscompleted/openHotkeys [Task 1.2]
Color Themescompleted/openColor Themes
Built-in tutorialscompleted/openBuilt-in tutorials / getting started tutorials
Support for Touch Screenscompleted/openEnabling support for touch screen #1570
Features & Improvementscompleted/openfeatures & improvements


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


  1. Established communication channel with mentors/students (working on the same repository).
  2. Weekly E-meetings with all members, discussing about 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 development environment.


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


  1. Breaking apart the current User Interface, transitioning to 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 in order 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.


  • The SMACSS architecture were created but un-used 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)


  1. Setting up required library to be used for Hotkeys feature.
  2. Building the hotkey preference panel.
  3. Generating the defaultkeys metadata.
  4. Core logic generation for hotkeys & actions file.
  5. Added keyevent normalization library.
  6. Merging Webpacker branch into NewUI branch through PR.
  7. Addition of color variables, changing all hexcode into css vars & separating all theme related ruleset it into color_theme.scss.
  8. Core logic generation of color themer.
  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.


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


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


  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.


  • For complete touch screen support major UI changes 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 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 have a new set of logic particularly for the touch screens, one can also look at library such as Hammer.js, possibly integrating it with the simulator could be highly benificial. Also, User Interface changes would be required for element that are non-operable without a pointing device.
  • Not letting elements overlap inside the canvas is another challenge, as HTML canvas element doesn’t holds 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 dimension of each elements 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 actual target user.
  • The themer of simulator can further be extended to make it more customizable by letting user customize particular elements &/or even let them build a complete theme for the simulator through the client side itself.



I never thought I would be spending the summer of 2020 as a GSoC student developer, being very excited & thrilled being 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 learning 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.



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.

comments powered by Disqus