This sketch demonstrates a microcontroller receiving color information from a browser with WebUSB support (re. Chrome).
Quickstart for Circuit Playground Express
If you're using a Circuit Playground Express, you can download this UF2, and install it by double-clicking into CPLAYBOOT mode and dragging over the UF2 file
Load the Example Code to Your Microcontroller
Click Download in the code window below and save the Arduino sketch in your Arduino file folder. Open the code with the Arduino IDE File -> Open command.
/*********************************************************************
Adafruit invests time and resources providing this open source code,
please support Adafruit and open-source hardware by purchasing
products from Adafruit!
MIT license, check LICENSE for more information
Copyright (c) 2019 Ha Thach for Adafruit Industries
All text above, and the splash screen below must be included in
any redistribution
*********************************************************************/
/* This sketch demonstrates WebUSB as web serial with browser with WebUSB support (e.g Chrome).
* After enumerated successfully, Browser will pop-up notification
* with URL to landing page, click on it to test
* - Click "Connect" and select device, When connected the neopixel LED will change color to Green.
* - When received color from browser in format '#RRGGBB', device will change the color of neopixel accordingly
*
* Note:
* - The WebUSB landing page notification is currently disabled in Chrome
* on Windows due to Chromium issue 656702 (https://crbug.com/656702). You have to
* go to landing page (below) to test
*
* - On Windows 7 and prior: You need to use Zadig tool to manually bind the
* WebUSB interface with the WinUSB driver for Chrome to access. From windows 8 and 10, this
* is done automatically by firmware.
*/
#include "Adafruit_TinyUSB.h"
#include <Adafruit_NeoPixel.h>
// Which pin on the Arduino is connected to the NeoPixels?
// On a Trinket or Gemma we suggest changing this to 1
// use on-board neopixel PIN_NEOPIXEL if existed
#ifndef PIN_NEOPIXEL
#define PIN_NEOPIXEL 8
#endif
// How many NeoPixels are attached to the Arduino?
// use on-board defined NEOPIXEL_NUM if existed
#ifndef NEOPIXEL_NUM
#define NEOPIXEL_NUM 10
#endif
// When we setup the NeoPixel library, we tell it how many pixels, and which pin to use to send signals.
// Note that for older NeoPixel strips you might need to change the third parameter--see the strandtest
// example for more information on possible values.
Adafruit_NeoPixel pixels = Adafruit_NeoPixel(NEOPIXEL_NUM, PIN_NEOPIXEL, NEO_GRB + NEO_KHZ800);
// USB WebUSB object
Adafruit_USBD_WebUSB usb_web;
// Landing Page: scheme (0: http, 1: https), url
// Page source can be found at https://github.com/hathach/tinyusb-webusb-page/tree/main/webusb-rgb
WEBUSB_URL_DEF(landingPage, 1 /*https*/, "example.tinyusb.org/webusb-rgb/index.html");
// the setup function runs once when you press reset or power the board
void setup()
{
#if defined(ARDUINO_ARCH_MBED) && defined(ARDUINO_ARCH_RP2040)
// Manual begin() is required on core without built-in support for TinyUSB such as mbed rp2040
TinyUSB_Device_Init(0);
#endif
//usb_web.setStringDescriptor("TinyUSB WebUSB");
usb_web.setLandingPage(&landingPage);
usb_web.setLineStateCallback(line_state_callback);
usb_web.begin();
Serial.begin(115200);
// This initializes the NeoPixel with RED
#ifdef NEOPIXEL_POWER
pinMode(NEOPIXEL_POWER, OUTPUT);
digitalWrite(NEOPIXEL_POWER, NEOPIXEL_POWER_ON);
#endif
pixels.begin();
pixels.setBrightness(50);
pixels.fill(0xff0000);
pixels.show();
// wait until device mounted
while( !TinyUSBDevice.mounted() ) delay(1);
Serial.println("TinyUSB WebUSB RGB example");
}
// convert a hex character to number
uint8_t char2num(char c)
{
if (c >= 'a') return c - 'a' + 10;
if (c >= 'A') return c - 'A' + 10;
return c - '0';
}
void loop()
{
// Landing Page 7 characters as hex color '#RRGGBB'
if (usb_web.available() < 7) return;
uint8_t input[7];
usb_web.readBytes(input, 7);
// Print to serial for debugging
Serial.write(input, 7);
Serial.println();
uint8_t red = 16*char2num(input[1]) + char2num(input[2]);
uint8_t green = 16*char2num(input[3]) + char2num(input[4]);
uint8_t blue = 16*char2num(input[5]) + char2num(input[6]);
uint32_t color = (red << 16) | (green << 8) | blue;
pixels.fill(color);
pixels.show();
}
void line_state_callback(bool connected)
{
// connected = green, disconnected = red
pixels.fill(connected ? 0x00ff00 : 0xff0000);
pixels.show();
}
Ensure you have set up the IDE per the previous instructions for the board type, correct library, and use of TinyUSB.
Connect the microcontroller to your computer/device via the USB cabling discussed previously.
Place your Circuit Playground Express in bootloader mode by pressing the tiny onboard reset button once or twice (depending on how it was programmed earlier). The board should flash red briefly and then display a green circle of lights. Select the correct port for the board in the IDE by going to Tools -> Port in the menus and you should see the Circuit Playground Express listed as a possible selection.
Use Sketch -> Upload (or the circle with the right arrow button) to load the Arduino code onto the Circuit Playground Express. If you get any compile errors, look on the previous page for library requirements, the correct board definition file, and selecting TinyUSB.
After upload, the ring of NeoPixel LEDs will turn red. The board is now ready to test.
After enumerating successfully Chrome will pop-up a notification with a URL to a landing page, click on it to test. On Windows there is a known bug, you'll have to click on the button below to go to the test web page.
Click Connect and select your microcontroller. For example: Circuit Playground Express.
If you see text "Unknown Device", that can happen and it should connect if selected. Changing USB ports often clears this text up.
Now click the green circle. You will see an operating system dependent pop-up asking you to pick a new color for the NeoPixels. Select a color and click "Ok". I'll pick blue for my choice.
You will then see the web page again and all the LEDs will now be blue (or whatever color you chose).
Behind the Scenes
The computer/mobile device will, behind the scenes, send a color value from the browser in the format '#RRGGBB'. The Arduino sketch will change the color of the microcontroller's onboard NeoPixels accordingly.
When connected, this process may continue indefinitely, the board will change color to whatever color you chose in the browser.
This demonstrates one way communication from the browser to the microcontroller.
When done, you can click the Disconnect button to stop communications.
