WebUSB + Arduino + Web-Based Circuit Simulator = Fun!
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.
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
There two parts to getting this work
- 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 0x200andchange
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
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/WebUSBdirectory from this repository into the
librariesfolder 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.
arduino/brainbox.ino and program it to your device.
- 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
Video (without any comments from my side) what happens if you you plugin the Arduino with my demo sketch.
- The Chrome desktop notification.
- Open the Browser with the Arduino "Home Page".
- Pairing the USB device.
- Run the simulation circuit.