Let's Code Arduino Simulator from Scratch (with JavaScript) 😬

You'll learn how to build a simple Arduino simulator with JavaScript and React, using the open-source AVR8js library. We'll build it from scratch, and see how it runs a simple program that blinks an LED (virtual one, of course).
Code: codesandbox.io...
Elements library: elements.wokwi...
AVR8js source code: github.com/wok...

[@nishantkurade1581]

Thank you so much for making this video .

[@eXpire163]

How could i live through last 16 years with out that!!! Will start building on it tomorrow

[@Wokwi]

😁

[@fernandonavarrete9839]

You are a genius

[@rfly-fpv]

Oh man, this is out of this world! Amazing project and website. One question - is it possible to compile C code in the browser as well? I assume that on that endpoint under the hood server uses "normal" C compiler to output hex.

[@Wokwi]

Thank you! C - Yes, there are some projects that ported c compilers to the browser. Google "clang wasm" for information. Arduino code - I did some initial experimentation compiling an Arduino project entirely in the browser. But my initial results were not promising - you had to download nearly 100mb of binaries and libraries, and even then, it took nearly two minutes just to compile "blink". So while it's possible, it's not very practical, at least not without spending a lot of time on optimizing the process.

[@oscar-unj]

Congratulations!

[@MrNix2012]

Very great video, thx for that. Are you still planning to make the videos to have a deeper look into the avr8js lib that you mentioned at the end? Or are there already available?

[@Wokwi]

Thanks for the feedback! There's another series of videos where we create a simulation library for a different chip, the Raspberry Pi Pico, from scratch. It's a different architecture (ARM), but the principals are similar. You can find it here: kzbin.info/www/bejne/hoCmhpWNnaeLjKM

[@ricardojlrufino]

Wow , Crazy ...

[@何长青-z6w]

The right pin (anode) of an LED is 13, so how is the left pin (cnode) gnd written in the code?

[@asifmulla7567]

Very good🤩

[@Wokwi]

Thanks 🤗

[@innokart5699]

Hi really great initiative. I tried above code in node js react with npm install @wokwi/elements However in browser led is not visible. when i do npm start

[@Wokwi]

Thanks Inno! There could be numerous of reasons for that. You can also try to import the elements script directly into your HTML file, see here for an example: stackblitz.com/edit/wokwi-elements-cdn?file=index.html

[@shannonlombardo9196]

This is great! I was wondering though, instead of , I wanted to use the NeoPixel Matrix 8x8. Im able to call it and display it on the screen, however I wanted to display 2 directly beside each other and 2 directly below those (think like a 16x16 matrix but created with 4 8x8 matrices). How would I do that? Whenever I create 4 different 8x8 matrices, they're all displayed above/below of each other... Any help would be greatly appreciated!

[@Wokwi]

Hi Shannon, happy to hear that :-) You can use CSS grid to position your matrices in a grid. You can hop on our discord server (wokwi.com/discord) to chat about this!

[@the555timer]

2:45 shouldn't it be gnd instead of d13?

[@Wokwi]

It should! good spot :)

[@shashank2509]

How Can we simulate HTTP call? Does any of the existing Arduino wokwi board has wifi built in, so that it can be used for IOT project?

[@Wokwi]

No, AVR chips do not have built-in WiFi. For more context, see this discussion on GitHub: github.com/wokwi/avr8js/issues/63

[@Wokwi]

Note that nowdays there's also ESP32 simulation with upcoming WiFi support: docs.wokwi.com/guides/esp32