Control Adafruit NeoPixel over WebUSB using an Arduino
MIT License
Manage a NeoPixels with an Arduino-based controller directly from the browser by leveraging WebUSB.
👉 To fully understand the background of this module you should read the article How to build a WebUSB DMX512 Controller by using an Arduino. 👈
The module can be used in projects where you want to control a NeoPixel controller over WebUSB. It's written in JavaScript and contains only one Class called Controller
.
Install the webusb-neopixel-controller
module into your project:
npm install webusb-neopixel-controller
Can be found on API documentation.
import Controller from 'webusb-neopixel-controller/controller.js'
const controller = new Controller({ leds: 30 })
const activateButton = document.getElementById('activateWebUsb')
// Listen for click events on the activate button, because
// `controller.enable` must be triggered by a user gesture
activateButton.addEventListener('click', e => {
// Enable WebUSB and select the Arduino
controller.enable().then(() => {
// Create a connection to the selected Arduino
controller.connect().then(() => {
// Set the 1 LED of the NeoPixel strip to yellow (rgb(255, 255, 0))
controller.update(1, [255, 0, 255])
})
})
})
Also make sure to take a look the code behind the demo to get more usage examples.
The module is also used in luminave.
In order to use the module you have to use a browser that supports WebUSB:
chrome://flags/#enable-experimental-web-platform-features
To transform the Arduino into a WebUSB NeoPixel Controller, you need to get some code:
# Clone the repository
git clone [email protected]/NERDDISCO/webusb-neopixel-controller.git
# Get dependencies
git submodule init
git submodule update
It clones the following submodules:
The code was tested on these Arduino:
The code that runs on the Arduino is organized in a Sketch. In order to use the sketch from this repository, you have to follow these steps:
5. Close the Arduino IDE and then open it again (this is needed to load the new sketchbook that we selected in the step before) 6. Now we need to configure the Arduino IDE so that it can recognize our Arduino Leonardo:
**Attention**: This can only be selected if your Arduino is actually attached to your computer via USB!
Sketch uses 7624 bytes (26%) of program storage space. Maximum is 28672 bytes.
Global variables use 569 bytes (22%) of dynamic memory, leaving 1991 bytes for local variables. Maximum is 2560 bytes.
Attention: If the steps 8 or 9 did not work as promised, please open an issue on GitHub
When you are done your Arduino IDE should look like this:
You can use any NeoPixels and (in theory) every other LED that is based on the WS2812 or SK6812 chipset.
For testing purposes you can connect the NeoPixels directly to the Arduino.
Caution: This only works if you are using less than 30 NeoPixels at the same time. Everything else will require an external power source. In order to handle that you should read the guide from Adafruit.
Caution: The order of the three pins can vary between different strip densities and batches. ALWAYS use the labels printed ON THE STRIP. Look closely, NEVER blindly follow a NeoPixel strip wiring diagram; it might be based on a different strip type!
In order to test the WebUSB NeoPixel Controller directly in the browser you can use the demo on GitHub. The code behind the demo can be found in the repository.
npm install
inside the repositorynpm start
to start the local web server