Controlling RGB Lights From ESP32 Web Server

Controlling RGB Lights From ESP32 Web Server

Introduction

In this project we are going to make a web server in ESP32 with an interactive web page to controls the color and brightness of a 12 volt RGB LED strip.

Video

Hardwares Used

ComponentsAmazon.inamazonAmazon.comamazonBanggoodbanggoodAliExpressali express
ESP32 or cart iconcart iconcart iconcart icon
ESP8266 cart iconcart iconcart iconcart icon
Bread Boardcart iconcart iconcart iconcart icon
TIP120cart iconcart iconcart iconcart icon
10k Resistorcart iconcart iconcart iconcart icon
RGB LED Stripcart iconcart iconcart iconcart icon

Choose the trainsistor according to the current consumtion of the LED strip you are using

Softwares Needed

Arduino IDE arduino icondownload icon

Working Theory

A five-meter 12 volt RGB LED strip has been connected to an ESP32 NodeMCU board because the NodeMCU board cannot directly drive the LED strip we have used a NPN transistor(TIP120) to drive the LED strip from the NodeMCU. The transistors are connected to the PWM supported pins of the ESP32 development board each for red, green and blue lines of the LED strip.

In the coding part we have created a web server with a small and light weight web page which will load in the browser when we typed the IP address of our ESP32. The web page contains some buttons to turn on/off each colors and there are also buttons for mixing the red, green, blue colors to make any color combination.

TIP120 Pinout Diagram

tip120 pin out

Circuit

  • Connect the R, G & B terminal of the LED strip to the collector of the transistor as shown.
  • Through a 10Kohm resistance connect the base of the transistors to the D25, D26 & D27 pins of the ESP32 NodeMCU.
  • All the grounds has to be connected together as shown, ground of ESP32, ground of transistors and ground of the 12v power supply used for the RGB LED strip.
  • You can power the NodeMCU board either through the usb cable or through the VIN terminal.

Code

Pros & Cons Of Current Implementation

Pros

  • Easy for beginners to understand the concept and code.
  • Only HTML and CSS used for webpage.

Cons

  • Webpage refresh every-time a button is pressed.

Whats On Next Update

  • Implementing java script for the web page to avoid full reload of the page when the buttons are clicked.
  • Storing the code for web page in PROGRAME memory instead of flash memory.
  • Soft coded WiFi credentials with WiFi manager.
  • Access point when no WiFi network is found.
  • So, subscribe to our mailing list to not to miss the update

Success! You're on the list.

You might also like…

Leave a Reply

×
×

Basket