Arduino Simulator in JavaScript

A new free and open source Arduino Simulator was released that has potential as an education tool

While working with Arduino boards and shields, I noticed that regarding emulators, there isn’t a free and open source solution that could work right out of the box in Web format. In most cases it is a closed-source service with an optional paid subscription that will allow you to unlock different features (Freemium). The issue with this, besides the fact that we don’t have access to the source code, is that we are relying on a company to keep running their service and we are assuming that they are going to be there for a long time. Investments for further development and to keep those servers running emulated Arduino boards is not a given. The access to what could be a free and open source education tool through a Web browser (so, through any modern device) should be a must because it would allow people in regions where the access to components (Arduino boards, components, etc.) is limited.

That’s why I wanted to develop an Arduino simulator with the following six main features:

● Be free and open source.

● Do not require the user to sign up.

● Do not require a subscription.

● Do not require a backend that is doing everything behind the curtains.

● It should be a Web project that can be used through any modern Web browser.

● The cost for hosting the simulator should be $0.

The project began 3 years ago and it had several stages. Initially it was designed using Vanilla JavaScript, but after a while it was migrated to React and recently to TypeScript in order to provide a modern code that meets a standard.

In order to implement a new solution without the need of a backend doing everything, it required a new technique. I didn't want a backend to be compiling and running the Sketch (like other Arduino emulators) or to require a pre-compiled machine code to run the simulator. That’s why I designed a React project with TypeScript that uses Ace Editor in order to provide a code editor and the project has a Web Worker where a C++ Interpreter will run the Sketch. The C++ Interpreter has the foundations to run a Sketch with Arduino Classes (like Serial) and external libraries (for now, only EEPROM). Regarding tests, I used Jest for Unit Testing and Puppeteer for Automated Tests. The result is a 100% frontend Arduino Simulator.

On the CI/CD side, the project has a CI pipeline that will check that if the codebase is passing all the unit tests, then it will launch the Web project within the pipeline and run the Automated Tests on it. The CD pipeline will deploy the WebApp to GitHub Pages, because of this, the maintenance cost to keep the project alive and working as a WebApp for the community is literally $0. This is one of the achieved goals.

Regarding the UI, I wanted to mimic the Arduino IDE by providing almost the same Code Editor (using the same theme) and a very similar Serial Monitor in order to provide a gradual learning curve.

When accessing the Web, you will see a code editor where you can write your own Sketch. That editor has all the standard features (an Arduino theme, search, replace and contract and expand functions). A toolbar is present at the top where the user can open and save local files. It’s also possible to select different Arduino boards that can be emulated (MEGA 1280, MEGA 2560, UNO and V3). When you click on the Run icon, the sketch is compiled and the Web Worker does all the work (100% client side), because of this, it doesn't require a backend or server to emulate the board (like other Arduino Web emulators).

This project is a work in progress and aims to be a tool useful for regions or countries where the access to components (Arduino boards, shields, etc.) is limited. In this case, the only thing that the person needs is a Web browser and would allow people to learn how to code in Arduino without the need of having a physical board. Also, this Arduino simulator is available in English, Spanish, Italian, French and Portuguese.

Regarding emulated components or shields, this Arduino Simulator allows the developer to handle analogs and digital pins and check the status of those (a demo of this can be found at https://lrusso.github.io/ArduinoSimulator/demo1.html). The next steps or implementations are to finish the EEPROM library and to work on emulating shields.

On the other hand, the project is free and open source, which means that any developer can report bugs, suggest improvements and even make their own version completely free.