Skip to content
Tim Pietrusky edited this page Apr 16, 2018 · 4 revisions

In depth

Virtual WebUSB device

You can open chrome://usb-internals in Google Chrome to add a virtual device to your browser.

Arduino

Update the USB version in Arduino IDE

Attention: You don't need to do this if you are using the sketchbook as provided in this repository.

  • Upgrade the Arduino IDE from USB 2.0 to 2.1: Go into the installation directory of your Arduino IDE and open hardware/arduino/avr/cores/arduino/USBCore.h. Then find the line #define USB_VERSION 0x200 and change 0x200 to 0x210. (@see Step 3)

Using other boards

  1. Start the Arduino IDE
  2. Find out which Arduino you are using or to which Arduino your microcontroller is compatible to
  3. Use the instructions provided for your model (for example Leonardo / Micro) to configure the Arduino IDE
    1. Select the model: Tools -> Board
    2. Select the USB port: Tools -> Port

Which Arduino do I have?

Using Google Chrome

Chrome provides a build-in device-log chrome://device-log which can be used to identify the connected USB device:

[21:46:31] USB device added: vendor=10755 "Unknown", product=32832 "Arduino Leonardo ETH", serial="WUART", guid=fb98cfd4-48aa-4795-b439-ecc736986cee
  • vendor=10755: The ID of the USB device Vendor
  • product=32832: The ID of the USB device
  • "Arduino Leonardo ETH": The exact name of the USB device

vendor & product can be converted to hex in order to use them as a filter for WebUSB.

Using MacOS

  • Connect the Arduino via USB to your computer
  • Execute the following command:
ioreg -p IOUSB -w0 -l

This will list all USB devices, for example (which means you have an "Arduino Micro"):

    +-o Arduino Micro@14100000  <class AppleUSBDevice, id 0x100002626, registered, matched, active, busy 0 (40 ms), retain 22>
        {
          "sessionID" = 119957228755640
          "iManufacturer" = 1
          "bNumConfigurations" = 1
          "idProduct" = 32823
          "bcdDevice" = 256
          "Bus Power Available" = 500
          "USB Address" = 21
          "bMaxPacketSize0" = 64
          "iProduct" = 2
          "iSerialNumber" = 3
          "bDeviceClass" = 239
          "Built-In" = No
          "locationID" = 336592896
          "bDeviceSubClass" = 2
          "bcdUSB" = 528
          "USB Product Name" = "Arduino Micro"
          "PortNum" = 1
          "non-removable" = "no"
          "IOCFPlugInTypes" = {"9dc7b780-9ec0-11d4-a54f-000a27052861"="IOUSBFamily.kext/Contents/PlugIns/IOUSBLib.bundle"}
          "bDeviceProtocol" = 1
          "IOUserClientClass" = "IOUSBDeviceUserClientV2"
          "IOPowerManagement" = {"DevicePowerState"=0,"CurrentPowerState"=3,"CapabilityFlags"=65536,"MaxPowerState"=4,"DriverPowerState"=3}
          "Device Speed" = 1
          "USB Vendor Name" = "Arduino LLC"
          "idVendor" = 9025
          "IOGeneralInterest" = "IOCommand is not serializable"
          "USB Serial Number" = "WUART"
          "IOClassNameOverride" = "IOUSBDevice"
        }
  • USB Product Name: The exact name of the USB device
  • idVendor: The ID of the USB device Vendor (for example Arduino LLC)
  • idProduct: The ID of the USB device

idVendor & idProduct can be converted to hex in order to use them as a filter for WebUSB.


Arduino Shield: 2.5kV Isolated DMX 512

Library: Conceptinetics

Update to newer version

The following steps are not needed (if you are using an Arduino Leonardo ETH), because you can find an updated version of the Conceptinetics lib already in this repo.

  • Install the lib into your Arduino library folder
  • Change the following lines in Conceptinetics.h
// Fix some settings for Arduino Leonardo ETH  
// https://sourceforge.net/p/dmxlibraryforar/wiki/Getting%20DMX%20library%20to%20work%20on%20Arduino%20Leonardo/
// Comment this line
// #define USE_DMX_SERIAL_0

// Uncomment this line
#define USE_DMX_SERIAL_1

// Decrease the length of the automatic baudrate breaks  
// Comment this line
// #define DMX_BREAK_RATE 	 	    49950

// Uncomment this line
#define DMX_BREAK_RATE 	 	    99900

Convert decimal to hex

In JavaScript you can convert a decimal number into a hex like this (e.g. in the console of your browser):

let vendorId = 10755
vendorId.toString(16) // 2a03

let productId = 32832
productId.toString(16) // 8040

These values with the prefix 0x can be used as a filter when you request access to a specific USB device:

navigator.usb.requestDevice({
  filters: [{
      'vendorId': 0x2a03,
      'productId': 0x8040
  }]
}).then(device => console.log(device))

USB Descriptors

TK usb_descriptors.png USB Descriptors

https://wicg.github.io/webusb/#appendix-descriptors

USB devices identify themselves to the host by providing a set of binary structures known as descriptors. The first one read by the host is the device descriptor which contains basic information such as the vendor and product IDs assigned by the USB-IF and the manufacturer.


WebUSB

Browser Support

Chrome 61 + 62

  • Native support for ES6 modules
  • Enable flags for WebUSB
    • chrome://flags/#enable-experimental-web-platform-features

Chrome 63+

  • Native support for WebUSB