AiLight

AiLight

Some time ago I started working on the idea of making our house smarter. One of the first things I created was a sensor that measures temperature, humidity and atmospheric pressure. For monitoring and managing these devices, I am using the wonderful, open source HomeAssistant platform.

One thing that I didn't yet get around to, was actually having something to control like a wall switch or a light. That was until about 3 weeks ago when I read Xose Pérez' excellent article on how to upload your own firmware to an inexpensive WiFi RGB light bulb.

Ai-Thinker LED RGBW bulb

This got me very intrigued and so I started on a journey creating an alternative firmware called AiLight...

App

The Ai-Thinker LED Bulb is being made by a Chinese company called Ai-Thinker and has an ESP8266 at its core. This is a micro controller well known to me and the first release of a library was born quickly. Although the library was fine as it was, I felt compelled to build a complete firmware. A firmware that was easy to use and modify by other developers but more important - easy to use by anybody in our house. And of course, connecting to HomeAssistant without any pain.

Many Smart WiFi LED bulbs come with an app that allows you to manage the light over the Internet. Making an alternative firmware would also mean that such app can not work any longer. Having only minor experience in developing apps, I decided to develop a responsive HTML UI instead. With comparable features as the manufacturer's app. The ESP8266 is well suited for that as it can act as a decent HTTP server!

VueJS

In another project, I am using the Dashboard web application created by the Spatie team. This application runs on the PHP Laravel framework and uses VueJS for the frontend. VueJS is a JavaScript framework for building user interfaces, especially for single-page applications. It focuses only the view layer, applies a fast virtual DOM and is small in size. Pretty much what I my AiLight firmware would need.

Even though it has been a while that I developed actively in JavaScript, I considered this a great opportunity to learn more about VueJS. Also to see if I could manage VueJS to work as the embedded SPA part of the firmware.

At first, my main concern was the code size. Adding a JS framework to the limited memory space of the ESP8266 chip could turn out to be a deal breaker. The compressed size of VueJS is only about 18Kb, so one hurdle was out of the way :). The biggest pain came in fact from what makes VueJS so great. VueJS uses a reactivity system (Virtual DOM) where models are plain JavaScript objects. This system triggers an update to the view to as soon as these models get modified.

To explain why this became a challenge, we need to look at the ESP8266 HTTP server part. For the UI to show in real-time the brightness level, for example, fast data exchange is needed.

This is where the WebSocket protocol is a perfect partner. The WebSocket protocol enables interaction between a browser and a web server with lower overheads, facilitating real-time data transfer from and to the server.

Since VueJS's system is reactive, model updates caused unwanted WebSocket messages to the ESP8266. Even after spending about a week tinkering and debugging, I couldn't find an answer. That's when I decided to use plain JavaScript instead.

VueJS is a wonderful framework and I have truly started to enjoy it along the way. Perhaps my goal was too ambitious or my JavaScript knowledge too little...

Smart Light

After two weeks of hacking and modding, a first Alpha release is ready! So what can this AiLight firmware then do, you might ask? The AiLight firmware allows you via WiFi to:

  • switch the light on or off
  • set the level of the 4 colour channels (Red, Green, Blue and White)
  • set the brightness level
  • set the light at a particular colour temperature
  • let the light flash (with a defined colour and brightness)
  • after powering on the light again, the last known settings are remembered (colour, brightness, etc.)

This can all be done in HomeAssistant (using the MQTT integration) or the built in (mobile friendly) UI.

AiLight on HomeAssistant

The UI interface also gives you the ability to configure the light remotely. You can easily change your WiFi settings or the configuration of your MQTT broker.

AiLight on the iPhone

AiLight in action

The AiLight firmware is completely open source and can be found on GitHub. If you like to try it yourself please have a look at the Github page. The firmware is still at an early stage so some issues can be expected.

Enjoy! Please feel free to leave comments or feedback here. Happy to hear what you think!

Blog Comments powered by Disqus.