ESP8266 RGB Lighting Template

Having a WEB enabled project provides a little something else and I have developed many lighting projects over the years with these devices.

The software has been written in the Arduino IDE and has a number of lighting effects.

• 0—>Solid – Fade
• 1—>Solid – Spiral
• 2—>Rainbow
• 3—>Rainbow Fade
• 4—>Rainbow Cycle
• 5—>Flame
• 6—>Dinner
• 7—>Bed Time
• 8—>Too Loud

The user interface can be called up on a phone / tablet or laptop and “should” rescale its self to suit the device.

The code allows for a custom background, logos and headings to be applied to the Webpage. In this post I intend to guide you through installing the template and configuring it for your project. Its quite a arduous process if you haven’t use the Arduino IDE for some projects before, but not unmanageable. I can’t go through every fine detail in one post so what I have done is a sequence that will guide you to other resource to complete for different stages.

Please note that I can only guide you through how its done on a Windows machine as I don’t own an Apple laptop.

Some of the posts that utilise this ESP8266 device and the template are Overwatch Lamp, Minecraft Torches

The Hardware

The ESP8266 is a Wi-Fi capable Microcontroller and in this post I intend to explain how to use my template with this hardware to create a Web enabled lighting project.

I won’t be describing how to do the coding or how to use the Arduino IDE to program devices, this is too big a topic for a simple post but I intend to explain where I found the most useful resources to gather information on how to use these devices, program them and explain how you an take my template and customize it for your projects.

The ESP8266 can be bought in many different guises and form factors, Wikipedia has a nice breakdown of all the parts utilising the ESP8266. The one I’m using here is the NodeMCU which provides:-

• Microcontroller: Tensilica 32-bit RISC CPU Xtensa LX106.
• Operating Voltage: 3.3V.
• Input Voltage: 7-12V.
• Digital I/O Pins (DIO): 16.
• Analog Input Pins (ADC): 1.
• UARTs: 1.
• SPIs: 1.
• I2Cs: 1.
• Flash Memory: 4 MB
• SRAM: 64 KB
• Clock Speed: 80 MHz
• USB-TTL interface based on CP2102 is included onboard, Enabling Plug n Play
• PCB Antenna
• Small Size

Solder headers bringing out all the pins for easy soldering of the unit into projects.

The USB interface is very helpful for programming the part without extra hardware other than a USB lead to your laptop.

I use a prototyping board to mock all my projects. These cheap boards allow you to quickly wire up circuits without the need for any soldering, allowing you to make quick changes as your project develops.

A must have with these protoboards is a set of jumper wires, you can cut your own but these kits provide a clean set of sizes that make using these boards a pleasure. Amazon also stock some starter kits with all you need to get a number of little Wi-Fi projects up and running.

The LEDs & Wiring

The LEDs I’m using in my projects are WS2812B LEDs, these are addressable RGB LEDs. This means that each LED just requires power, GND and a serial data connection.

The LEDs run from 5V and thus a suitable PSU (power supply) is required. Each LED can if each element is driven fully on (white) draw 60mA thus a suitably sized 5V PSU needs to be selected by multiplying 60mA by the number of LED’s you intend to have on the project.

This post explains in detail the current requirements of different LED types https://docs.audectra.com/guides/hardware/led-power-consumption/

This calculation gives you the total current requirement, this can then be converted to Watts as most PSUs are described by the wattage.

milli Watts = (Supply Volts which is 5v for these LEDs) X (current in mA)

Thus a 9 LED project will draw 540ma (9 X 60mA) and a power supply of 2700mWatts or 2.7W (5 X 540 ) minimum will be required.

In my unedited template the LEDs are wired to GPIO3, the NodeMCU operates on a 3V3 supply where as the LEDs require 5V. I have in the past required to provide a level shifter to adjust the data thresholds of the GPIO pin to the requirements of the LEDs but in this case everything seemed to run smoothly so I didn’t bother (this is after all a home hobby project not a product).

If you do run into problems please have a look at this post that explains everything you need to know about level shifting https://forum.arduino.cc/index.php?topic=594165.0

The power and ground feeds to each of the LED strips making up your light can be fed to the strips any way you like, I try and make a ring of the power connections where I can, returning them back to the PSU due to the losses in long strips of LEDs.

The data however must be fed sequentially from the GPIO pin to the first LED and then from the back of that strip to the next. I wired the data to the main loop first, then from the data output of the main loop to the the segment at the top. Out of the segment a the top I then wired the the data inputs of both arrows in parallel so they illuminate at the same time with the same data.

If you want more info on these LEDs have a look at this post https://www.pololu.com/product/2547

The Software Template

My template provides a number of features to control a RGB Lighting project.

• Customisable graphical interface
• Work well on tablets, PC’s and Phones
• Control addressable RGB LEDs
• Have a number of lighting effects.

Some more detailed / advanced requirements are:

• Easy method to update the program over WiFi
• Use MDNS so users don’t have to remember an IP address
• Use a file system to allow for web page to be developed in easily understood and editable HTML & CSS files
• Utilize Java scripts
• Pass data in readable JSON structures through web-sockets
• Allow for HTTP control for my home automation system.

See my software resources post for all the places I use to learn different coding languages and libraries I have utilised within my projects.

Getting Started

I use the Arduino IDE to develop programs at home, its been developed with the home hobbyist in mind and provides a wealth of Arduino and user developed libraries for the more complicated functions / features a hobbyist may wish to develop.

Arduino IDE

The Arduino IDE (Integrated Development Environment) is free to download and use. It provides a clean easy to follow user interface and you will need this to compile and download my template onto your hardware.

Installing NodeMCU board manager

The Arduino IDE needs to understand the hardware it is compiling for and talking to. To do this the boards manager needs installing. http://arduino.esp8266.com/stable/package_esp8266com_index.json

This website provides a great tutorial for performing the steps to getting the Arduino IDE ready to work with NodeMCU parts.

Installing the Libraries for the Template

For my template to work the following libraries need to be installed in the IDE, if you want more information on these libraries please see my ESP8266 Software Resources post.

ESP8266WiFi.h
ESP8266WebServer.h
WebSocketsServer.h
ESP8266mDNS.h
ESP8266HTTPUpdateServer.h
FS.h
ArduinoJson.h
NeoPixelBrightnessBus.h

To achieve this you need to go to the Library manager in the Arduino IDE under “Sketch” “Include Library” then at the top of the list “Manage Librarys…”

Type in each of the library names and install, after installing you must ensure you close the IDE and reboot it for any changes to take effect.

The Template

Download the template from my Github repository and copy the files into the Arduino projects directory on your computer. This can be found in your documents directory then Arduino.

You can rename the project to your liking by renaming the folder containing the project and the .ino code file within it. Make sure both names are identical before opening the project in the IDE otherwise it will complain.

Configure the template.

I have tried to make this as easy as possible by marking any sections of code that need your attention with the following string:

XXXX->EDIT REQUIRED HERE<-XXXX

Just search for the comment and follow the instructions in the comments as to what you should be doing.

If your copying my project completely the only file you need to edit is the RGB_Light_Template.ino file.

Connecting to your router

Edit the code to add your router SSID and password before progressing to compiling and downloading the project.

/* XXXX->EDIT REQUIRED HERE<-XXXX - WIFI Interface settings          */
/* Edit these for your Wifi Router settings                          */
/* Change SSID for your router SSID name                             */
/* Change PASSWORD for your router Password                          */
const char* ssid = "SSID";
const char* password = "PASSWORD";

Altering the Images

As I copied my images from different web sites you will have to resource your own images and format them correctly. The template just has the images I used for the Overwatch light. When selecting and scaling images you priority has to be to make the file size as small as possible to achieve the effect you are looking for. The smaller the file the quicker your web page will load.

Background

This image should be scaled to be roughly 1024 x 600 image, must be formatted as a JPG and named “background.jpg”. You can use other image sizes but these may not scale correctly or have higher refresh times on the web page if they are larger.

Logo

The Logo must be roughly a 500 x 500 pixel image, formatted as a PNG and named “logo.png”. You can use other image sizes but these may not scale correctly or fit well into the Web page.

NOTE: Using a PNG format allows you to have a transparency in the image so it sits over the background better.

Compiling and Downloading Firmware

This is all done within the IDE but you must tell it what processor you are intending to compile and download to and where it is.

Select NodeMCU from the boards list and plug in your NodeMCU into your computer via a USB lead.

Now se the IDE to the correct port in “Tools” then “Port” you should see just one port number for the device you have plugged in.

To initiate the compile / linking and uploading of the program to the hardware just press the right arrow button at the top of the screen.

NOTE: I have had fun with some ESP8266 modules and getting them to upload for the first time, all I can advise is to google the error text and see what’s out there. Once they have been programmed everything settles down or you revert to the far easier OTA update built into my template.

First run

If your monitoring the serial data debug you will be able to monitor the ESP8266 connecting to your router and if successful the IP address of the device will be shown.

If your not monitoring the debug you can attempt to log into the device by typing the name you gave the MDNSfollowed by .loacal

/* XXXX->EDIT REQUIRED HERE<-XXXX - MDNS name and responder.         */
/* Give your unit a name so that you dont need to search for         */
/* addresses just change Overwatch to the name you wish to use       */
const char* host = "Overwatch";
MDNSResponder mdns;
/*Final name will be http://Overwatch.local/                         */

Because there are no files in the SPIFFS file system when you enter the ip address or MDNS name there will be nothing to view. You can however move to the download page at /Update.

Downloading SPIFFS files

This has to be done separately to the firmware and can be achieved in the IDE see this post on how to install the features into the IDE to achieve this https://randomnerdtutorials.com/install-esp32-filesystem-uploader-arduino-ide/

Or an easier method is via the OTA updater built into the firmware. However you still have to install the IDE method above and run it with no device connected as this is the code that generates the file we are uploading.

To perform the OTA update, type in the MDNS name followed by /Update

E.G. https://Overwatch.local/Update

Select Choose File from the FileSystem section and find the .spiffs.bin file.

If your utilising the OTA download the Ardino IDE stores the binary files at this location, you will find a folder called arduino_build with the latest date with the files you require in it.

C:\Users\”username”\AppData\Local\Temp

Please note that the folder AppData is hidden and will need to be made visible and “username” is your logged in username folder.

You should now be fully up and running….

To store a default set of setting for power on, set the settings you desire for the lamp, this includes on/off.

Then in the address bar type the IP address or MDNS address followed by “/Store” this will write the settings to a config file in SPIFFS. You can then return to the standard page address.

Now each time the unit is powered up the lighting will immediately start at the default setting.