Wi-Fi Remote Controlled Ws2811 RGB LED Sign With ESP8266

Very recently, I wanted to surprise a very good

friend with an extraordinary birthday present. I decided to build a custom LED-sign controlled by a microcontroller showing his dream car manufacturer’s logo.

Remote controlled LED’s of high prestigious manufacturer can be quite expensive. Combining controllable LED-strips with cheap but powerful microcontrollers create the same illumination experience by a fraction of the costs. The way the hardware and software of this project works together is very simple. You connect your smartphone or tablet to the WiFi Access Point of the microcontroller and use a web interface to control the colour of the RGB-LED strip remotely.

The project offers a great opportunity to get some insights of the WiFi capabilities of the Espressif microcontrollers. The used code to handle the web interface can be used as a blueprint and adapted for other IOT projects with the need of a control interface.

Tools

• Laser cutter
• USB micro connector cable
• Screw clamps
• Soldering iron
• Drilling machine
• 3.5mm diameter drill
• Scissor

Materials

• 5mm MDF wood
• 5mm Acrylic glass
• Wood glue
• Black spray paint
• 330 Ohm resistor
• 4 Female-Female Jumper wires
• Double side adhesive tape
• Solder
• 18 mm*18 mm cross section Wood strip
• Second adhesive
• WS 2812 RGB LED stripe
• 2 x M3 30mm screws
• 2x M3 nuts

The wooden parts for the base and the acrylic sign are made using a laser cutter. You should use 5 mm MDF wood and 5 mm acrylic when using the provided DXF-files. The clearances and slots are designed for these material thicknesses. For cutting, please make sure to select the correct cutting parameters for your laser. I would advise you to engrave the acrylic first, and then cut out the shape. To increase the holographic impression of the sign and the perceived depth of the image, you should mirror-inverted the picture before engraving.

For the assembly of the base, a 110 mm piece of the wood strip needs to be cutted off. Two holes with the 3 mm drill need to be drilled into the piece. Afterwards the piece is glued under the top part of the box. To fix it you should use a screw clamp. Then the entire box is glued together without the bottom part and fixed with the screw clamps. After the glue is hardened, the bottom part is put on and the base and you can use the sandpaper to smoothen the surface and the make the edges align perfectly. Then the base can be painted.

The acrylic part is slided into the base and fixed in the position with the two screws. Before attaching the LED strip to the acrylic part, make sure that it has the same length as the bottom edge of the acrylic (approximately 210mm). Normally, it should not be a problem to cut the strip between the LEDs at the marked positions. Moreover, you have to solder three jumper wires at the strip. Therefore, cut of the female connector on one side of three jumper wires. One at the the VCC connector pad for the 5V, one at the gound pad and on at the control contact. The LED strip is then glued under the acrylic sheet with second adhesive.

The schematics show you how everything is wired up. The ESP8266 is connected to the LED strip with the 5V GPIO, the GND GPIO and the GPIO 4. The resistor on GPIO 4 is used to limit the control current from the ESP8266 GPIO. The strip and the microcontroller can be connected with the jumper wires only. However, if you prefer, you can also use a small PCB and solder everything on it together.

The ESP8266 is programmed using the Arduino C++ programming language version. The code uses the WiFi radio hardware of the ESP8266 to set up a Soft-Access-Point and host a web controller interface.The controller interface is a simple webpage consisting of some HTML, CSS and Javascript to present a GUI for the light color control.

For flashing the microcontroller, you could ether use the Arduino IDE or any other IDE supporting the PlatformIO plugin. If you have never flashed any software to an Espressif silicon, please make sure to install the Espressif toolchain. An extensive tutorial on how to do this can be found here:

https://randomnerdtutorials.com/how-to-install-esp8266-board-arduino-ide/

Furthermore, make sure that you have installed the required libraries:

• ESP8266WiFi
• ESPAsyncTCP
• ESPAsyncWebServer
• FastLED

You should change the network credentials for the Soft-Access-Point. Just replace the placeholders for the SSID and password with yours. Morover, you should adjust the number of LEDs declared at the top of the code. Afterwards select the COM-Port on which your microcontroller is connected to, choose the right DEV-board from the menu, the proper baudrate (for the ESP8266 115200) and upload the code to the microcontroller.

The code can be fairly is adopted for the ESP 32. Just make sure you use the proper WiFi library for ESP 32 and not the one for the ESP8266.

You are almost done. Just connect your smartphone or tablet to the microcontroller’s WiFi network. As soon as you are connected, open your web browser and type in the IP address 192.168.4.4 as URL and open the web page. You have completed your custom LED-sign are ready to enjoy it. Have fun!