copyright 1998-2018 by Mark Verboom
ipv6 ready RSS Feed Schakel naar Nederlands

Go back to What's new

Wifi christmas tree coding

To blog index

Wednesday, 21 December, 2016

Wifi christmas tree coding

Since the last posting I connected the christmas tree to an esp8266. I used a Wemos D1 mini for this, which is a very nice and complete board to develop with.

For more info, see the Wemos website.

I used the basic Arduino environment with the Arduino esp8266 extensions to develop the code. There is lots of information on the internet on how to set that up, so I'm not going to put that in this posting.

What I wanted to get working is a setup with the following features:

  • Configuration of the wifi interface through the browser
  • Webinterface for controlling the led's with a "virtual" christmas tree in the browser
  • Ability to choose between different patterns
  • Ability to choose a specific color or use random colors
  • Ability to set the animation speed or use random animation speed

In order to get this working, I have used a number of different libraries that are available.


This library makes it very easy to configure the wifi. When starting the first time, the esp will be configured as an accesspoint. When connnected to the accesspoint you can configure the wifi settings of the network the esp should connect to. On the next boot, the esp will automatically try to connect to the stored accesspoint.

Adafruit Neopixel library

This library makes it very easy to control different kinds of daisychained RGB leds. The PL9823's I used are nicely supported by this library.

ESP8266 Webserver

This is part of the default library. Again, this library makes it very simple to serve up a webpage from the esp. I use this to serve 1 page, which contains all code that should run in the webbrowser.


This library is an easy way to make a websocket connection between the webbrowser and the esp to exchange data.


The design I ended up using for the code splits the code up in two parts:

  • Webbrowser code
  • esp code
The webbrowser code is served by the esp and is included in the esp sketch. The webbrowser code contains some simple HTML and javascript for communication with the esp.

The core communication between the webbrowser and the esp is done through a websocket connection. This allows for quick exchange of data between the browser and the esp. In the code this is used to update the browser for the current status of the leds, current select color, pattern etc.

Next to handling the websocket and webpage requests, the esp also handles the updates of the leds. I implemented a couple of patterns, just to see if I could get the whole setup working. And it seems to do what I want.

Source code

The code is available on github, see the link below. Please note that it isn't cleaned up or anything and could be more robust and readable. But it should make for a quick start for anyone wanting to try something like this.

GitHub link


Below are two video's of the tree with the current version of the software. First is a kind of star pattern with the leds fading in and out at random positions. As you can hear, Maika (my cat) doesn't agree with me working on the code for the tree ;)

The second is a dual loop pattern in the tree.

The last video is the webinterface through which the tree can be controlled. It shows the effects present in the code at the time of recording, and some other settings that can be changed.


Total cost of this project (excluding the hours coding and discovering how to work with the esp8266):

  • Kwantum Christmas Tree: EUR 4,00
  • Wemos mini D1: EUR 3,00
  • 10 PL9823 F8 8mm LED's: EUR 5,14
So total cost of around EUR 12,14. Not too bad :)