Rockin’ around the JavaScript tree ????????

The API runs on port 2811 and provides the following core HTTP routes:/pixels/brightness— for controlling the brightness of the string of lights/pixel/:pixelId — for controlling the colour value for a specific LED/pixels — for controlling the colour value of many LEDs at once/tree — for getting the layout of the tree (depending on how the lights are placed on a physical tree)/mode/:mode — for controlling the various modes (static, random, and cycle)/connect — for initialising the connection to the lights via the web UIDuring the development process, I found myself working away from the LEDs themselves..This made it difficult to understand the physical effects of the changes I was making..To combat this, I abstracted out the WS2811 connection into a renderers layer, and created two interfaces for rendering out the pixel data..One, to the WS2811 LED lights, and one to my console, for easy debugging.On a Raspberry Pi (running Raspbian), you can run the server automatically on startup using rc.local..There is some good guidance on how this works here: https://www.raspberrypi.org/documentation/linux/usage/rc-local.mdTypeScript the statically-typed reindeer ????A screenshot of the “artist’s palette” ????To build out the web UI, I chose React (mostly due to familiarity) and TypeScript, and put together a simple interface for connecting to the HTTP server, and calling the appropriate endpoints..I’ve wanted to explore TypeScript for a long time, having worked with Flow in the past, and this seemed like a good opportunity.I crafted a simple tree-shaped layout for the lights, and used the brilliant React Color library (https://casesandberg.github.io/react-color/) to provide the colour picker.Upon first launching the UI, the user is asked to enter the hostname:port of the HTTP server..This gets stored in localstorage for an improved UX when the user returns to the app, automatically connecting them to their tree..This also builds out the base structure required to support multiple LED strings with different configurations (assuming each set would run a standalone server).The UI uses webpack for the build process, and leverages webpack-dev-server for local development.Bonus!.Ho-Ho-HomeKit support ????After running the lights for a few days, I was left wanting the ability to quickly turn them on and off, control their brightness level, and even get Siri to help out.I already run Homebridge (http://homebridge.io/) in my house — an open-source platform for interfacing with Apple’s HomeKit — via another Raspberry Pi, but had never built out a plugin for it before..After doing a bit of reading (see https://github.com/nfarina/homebridge#writing-plugins, http://blog.theodo.fr/2017/08/make-siri-perfect-home-companion-devices-not-supported-apple-homekit/ and https://www.npmjs.com/package/homebridge-http-rgb-bulb) I thought I’d give it a go, and I was blown away by how easy it was.Note: all the code for the Homebridge plugin is on the GitHub repo linked at the top of this postAfter a few hours of wrangling, I had a simple on / off switch running through the Home app on my iPhone..A little longer, and I had brightness controls too!.I also understand that Homebridge plugins can control the colour value of the accessories they talk to.. More details

Leave a Reply