WebUSB + Node-RED + Johnny-Five + Android = Kewlness

What if we can run IoT and robotics platform in our browser? What if our browser can connect to our USB ports and send instructions to an Arduino? What if we plug in our Arduino to our computer and it will tell us which website to start the application?

What if we can run Johnny-Five on a browser? Will you call this "Node-less" IoT?

What if I can run a browser from my phone, connect the Arduino device via USB-C port? Like what???

Let's start with blinking an LED in our Arduino to understand the concept.

WebUSB

WebUSB API provides a way to safely expose USB device services to the web. It solves a problem that occurs for the manufacturers of non-standard USB devices. The API eliminates the need for writing native drivers and SDKs to enable support for such hardware, and allow manufacturers to build cross-platform JavaScript SDKs for developers.

Here's the flow:

• Buy a USB device.

• Plug it into your computer.

• A notification appears right away, with the right website to go to for this device.

• Simply click on it. Website is there and ready to use!

• Click to connect and a USB device chooser shows up in Chrome, where you can pick your device.

• Tada!

That's the promise of WebUSB.

Here are some of the boards that are tested to work with WebUSB:

• Arduino Leonardo

• Arduino/Genuino Micro

• Arduino/Genuino Zero

• Arduino MKR1000

• Arduino MKRZero

• Arduino MKRFox1200

• Adafruit Feather 32u4

To learn more, here's the link.

Here's the link to WebUSB running on Arduino.

Follow the directions how to Get Started with WebUSB

• Install at least version 1.6.11 of the Arduino IDE.

• The WebUSB library provides all the extra low-level USB code necessary for WebUSB support except for one thing: Your device must be upgraded from USB 2.0 to USB 2.1. To do this go into the SDK installation directory and open hardware/arduino/avr/cores/arduino/USBCore.h. Then find the line #define USB_VERSION 0x200 and change 0x200 to 0x210. That's it!

WebUSB currently works with Chrome right now.

https://whatwebcando.today/usb.html

webusb-serial

There's a project on GitHub that has virtual node-serialport implementation that uses WebUSB as transport. Here's the link.

This is awesome because it enables us to have Firmata with WebUSB. All we have to do is to upload this sketch to your Arduino. Make sure that you install the WebUSB library.

https://github.com/monteslu/webusb-serial

Here's the sketch to upload to Arduino Leonardo.

https://github.com/monteslu/webusb-serial/blob/master/example/sketch/StandardFirmataWebUSB/StandardFirmataWebUSB.ino

Notice now that if you reconnect your Arduino, a small notification will popup that displays a link to a site. You can change that link by editing the sketch file.

WebUSB WebUSBSerial(1, "localhost:8000"); 

Chirpers

Chirpers allows us to connect our NodeBot to the browser. Chirpers is running Node-RED and streams commands to Nodebot over webUSB. It has Johnny-Five connectors. Try it out, https://chirpers.com/browser/

You can select Johnny-Five, add new nodebot, use Arduino/Firmata and select WebUSB Serial.

Click on the Authorize USB button. It will prompt the list of USB available. Select the Arduino device. And it will connect.

There are also code examples available. Let's try the LED-Blink.js.

Click the RUN button on the upper left and the Arduino will start blinking.

How about blinking an LED matrix. Or better yet, display a heart.

Here's the code.

Import this code to Node-RED.

[{"id":"7057229f.6e8c8c","type":"nodebot","z":"kYQnhHw2vsw","name":"","username":"","password":"","boardType":"firmata","serialportName":"","connectionType":"webusb-serial","mqttServer":"","socketServer":"","pubTopic":"","subTopic":"","tcpHost":"","tcpPort":"","sparkId":"","sparkToken":"","beanId":"","impId":"","uuid":"","token":"","sendUuid":""},{"id":"JdKE9RvIjVQ","type":"johnny5","z":"kYQnhHw2vsw","name":"","func":" node.on('input', function (msg){\n var inject = msg.payload.heart; \n /*var heart = [\n    \"01100110\",\n    \"10011001\",\n    \"10000001\",\n    \"10000001\",\n    \"01000010\",\n    \"00100100\",\n    \"00011000\",\n    \"00000000\"\n  ];*/\n\n\n \n  var matrix = new five.Led.Matrix({\n    pins: {\n      data: 12,\n      clock: 10,\n      cs: 11\n    }\n  });\n\n  matrix.on();\n\n\n   \n  //matrix.draw(heart);\n  matrix.draw(inject);\n/*    var msg = \"johnny-five\".split(\"\");\n\n  // Display each letter for 1 second\n  function next() {\n    var c;\n\n    if (c = msg.shift()) {\n      matrix.draw(c);\n      setTimeout(next, 1000);\n    }\n  }\n\n  next();\n*/\n});","board":"7057229f.6e8c8c","noerr":0,"x":362,"y":188,"wires":[["aqu9_6FrYX0"]]}]

It would look something like this:

The code would look like this:

Inject payload node would look like this:

{"heart": [ "01100110",     "10011001",     "10000001",     "10000001",     "01000010",     "00100100",     "00011000",     "00000000"   ]}

The Johnny-Five code would be this:

node.on('input', function (msg){
var inject = msg.payload.heart; 
 var matrix = new five.Led.Matrix({
   pins: {
     data: 12,
     clock: 10,
     cs: 11
   }
 });
 matrix.on();
 matrix.draw(inject);
});

Wiring looks like this:

Here's a video of what it would look like:

The cool thing is this works on an Android phone. The latest Android Chrome browser now supports WebUSB too.

I also tried this on my phone, and it works!

If you think this project made you interested with WebUSB, Chirpers, and also Elegoo Starter Kits, click the thumbs up button and follow me.

Thanks to Elegoo for providing starter kits.