Arduino + WebUSB + Circuit Simulator = Fun

Brainbox

Draw2D

Arduino Leonardo

<p >WebUSB + Arduino + Web-Based Circuit Simulator = Fun! </p><figure><img src=https://projects.arduinocontent.cc/509388d6-9fe8-4c1e-927e-2d048ba076dc.png /><figcaption>Web-based Logic Simulator</figcaption></figure><h3 >WebUSB connects remote devices directly to the browser via the web</h3><p >A awesome feature in Chrome is support for the WebUSB API, which allows web apps to communicate with USB devices, once user consent is given. This opens up a ton of cool possibilities for the future of web application and hardware interoperability, but may also worry both users and developers when it comes to privacy and security concerns. </p><div class="se-component se-video-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%; margin: 0px;"><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/0lGBe4qoYWE" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" style="width: 100%; height: 100%;" data-index="0" data-file-size="0" data-origin="100%,56.25%"></iframe></figure></div><h3 >Compatible hardware for this demo</h3><p >WebUSB requires an Arduino model that gives the sketch complete control over the USB hardware. This library has been tested with the following models:</p><ul ><li >Arduino Leonardo</li></ul><ul ><li >Arduino/Genuino Micro</li></ul><h3 >Getting started</h3><p >There two parts to getting this work</p><h3 >Installing Arduino WebUSB library</h3><ul ><li ><span >Install at least version 1.8.6 of the </span><a href="https://www.arduino.cc/en/Main/Software">Arduino IDE</a><span >.</span></li></ul><ul ><li ><span >The WebUSB library provides all the extra low-level USB code necessary for WebUSB support except for one thing: Yourdevice must be upgraded from USB 2.0 to USB 2.1. To do this go into the SDK installation directory andopen </span><code >hardware/arduino/avr/cores/arduino/USBCore.h</code><span >. Then find the line </span><code >#define USB_VERSION 0x200</code><span > andchange </span><code >0x200</code><span > to </span><code >0x210</code><span >. That's it!</span></li></ul><p >USB 2.1 is required so that the host knows that the device exposes a Binary Object Store descriptor, which is wherethe WebUSB descriptor (and Microsoft OS Descriptor 2.0) reading sequence starts.</p><p ><strong >macOS:</strong><span > Right click on the Ardunio application icon and then click on show package contents menu item. Navigate to </span><code >Contents/Java/hardware/arduino/avr/cores/arduino/USBCore.h</code></p><p ><strong >Warning:</strong><span > Windows requires USB 2.1 devices to present a Binary Object Store (BOS) descriptor when they are enumerated. The code to support this is added by including the &#34;WebUSB&#34; library in your sketch. If you do not include this library after making this change to the SDK then Windows will no longer be able to recognize your device and you will not be able to upload new sketches to it.</span></p><ul ><li ><span >Copy (or symlink) the </span><code >arduino/library/WebUSB</code><span > directory from this repository into the </span><code >libraries</code><span > folder in your sketchbooks directory.</span></li></ul><ul ><li >Launch the Arduino IDE. You should see &#34;WebUSB&#34; as an option under &#34;Sketch &gt; Include Library&#34;.</li></ul><ul ><li ><span >Load up </span><a href="https://github.com/freegroup/brainbox-webusb-arduino/blob/master/arduino/brainbox.ino">arduino/brainbox.ino</a><span > and program it to your device.</span></li></ul><h3 >Install the Arduino demo sketch</h3><p ><span >Load up </span><code ><a href="https://github.com/freegroup/brainbox-webusb-arduino/blob/master/arduino/brainbox.ino">arduino/brainbox.ino</a></code><span > and program it to your device.</span></p><h3 >Access the web application demo</h3><ul ><li >Plug the device into your PC/Mac and click on the Chrome browser notification</li></ul><ul ><li ><span >Chrome opens </span><a href="https://freegroup.github.io/brainbox/circuit/">https://freegroup.github.io/brainbox/circuit/</a><span > for you (the home page of the USB device)</span></li></ul><ul ><li >Click on the ‘device’ icon to pair the device</li></ul><ul ><li >Run the demo circuit to see the blinking light</li></ul><h3 >The Result you get</h3><p >Video (without any comments from my side) what happens if you you plugin the Arduino with my demo sketch.</p><p >You see:</p><ul ><li >The Chrome desktop notification.</li></ul><ul ><li >Open the Browser with the Arduino &#34;Home Page&#34;.</li></ul><ul ><li >Pairing the USB device.</li></ul><ul ><li >Run the simulation circuit.</li></ul><p ></p><div class="se-component se-video-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%; margin: 0px;"><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/a8ulkXU3qAY" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" style="width: 100%; height: 100%;" data-index="0" data-file-size="0" data-origin="100%,56.25%"></iframe><figcaption contenteditable="true"><div>Arduino WebUSB directors cut</div></figcaption></figure></div><p > </p>

Arduino + WebUSB + Circuit Simulator = Fun

Connect your Arduino via WebUSB with an web application circuit simulator.