For quite some time I had my Raspi lying around. And some RGB Pixels as well. So it was about time to bring them together. The last couple of days I built a web interface that I can use to control my pixels. That’s more a technical demo, rather than something useful. But I learned quite a bit.
For the server part I decided to use node.js. For the client I wanted to use Angular.js and Bootstrap. To have the UI work on a mobile as well, I had to include Angular-touchevents.
The pixels are connected to the Raspi vi SPI. Although there are node modules for SPI and Adafruit pixels, they were not working out of the box. I had to poke around a bit to make them work. Changes are included in the node-pixel repository.
When put together, it works like this:
- The browser opens index.html and renders an array of 25 clickable batches.
- Clicking and dragging on a batch changes its color and lighting.
- These changes are send to the server over web sockets.
- The server receives the color changes, updates the pixels over SPI and then sends a broadcast via web sockets to all connected clients
As seen in the demo, there is a very noticeable lag between updates. For a more pro solution you may want custom build clients and your own custom protocol (or maybe DMX?) to get rid of that.
- node-pixel, repository for this demo at Github with details on how to install everything
- Adafruit RGB pixel strand (WS2801)
- How to connect a Raspi and a RGB pixel strand
- The Node Beginner Book, very helpful node.js tutorial.
- Angular-touchevents, make touch events available to Angular
- SPI, a node module to talk SPI
- Adafruit pixels, a node module to control Adafruit pixels
Comments are closed.