Arduino + WebUSB + Circuit Simulator = Fun

WebUSB + Arduino + Web-Based Circuit Simulator = Fun!

WebUSB connects remote devices directly to the browser via the web

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.

Compatible hardware for this demo

WebUSB requires an Arduino model that gives the sketch complete control over the USB hardware. This library has been tested with the following models:

• Arduino Leonardo

• Arduino/Genuino Micro

Getting started

There two parts to getting this work

Installing Arduino WebUSB library

• Install at least version 1.8.6 of the Arduino IDE.

• 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 hardware/arduino/avr/cores/arduino/USBCore.h. Then find the line #define USB_VERSION 0x200 andchange 0x200 to 0x210. That's it!

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.

macOS: Right click on the Ardunio application icon and then click on show package contents menu item. Navigate to Contents/Java/hardware/arduino/avr/cores/arduino/USBCore.h

Warning: 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 "WebUSB" 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.

• Copy (or symlink) the arduino/library/WebUSB directory from this repository into the libraries folder in your sketchbooks directory.

• Launch the Arduino IDE. You should see "WebUSB" as an option under "Sketch > Include Library".

• Load up arduino/brainbox.ino and program it to your device.

Install the Arduino demo sketch

Load up arduino/brainbox.ino and program it to your device.

Access the web application demo

• Plug the device into your PC/Mac and click on the Chrome browser notification

• Chrome opens https://freegroup.github.io/brainbox/circuit/ for you (the home page of the USB device)

• Click on the ‘device’ icon to pair the device

• Run the demo circuit to see the blinking light

The Result you get

Video (without any comments from my side) what happens if you you plugin the Arduino with my demo sketch.

You see:

• The Chrome desktop notification.

• Open the Browser with the Arduino "Home Page".

• Pairing the USB device.

• Run the simulation circuit.