In this project, you’re going to build a web server with an ESP8266 to remotely control an RGB LED. This project is called ESP8266 RGB Color Picker.
First, watch the video demonstration
To learn more about the ESP8266 and RGB LEDs use the following tutorials as a reference:
- How do RGB LEDs work?
- Getting started with the ESP8266
- ESP8266 web server with NodeMCU
- Flashing NodeMCU firmware
- ESP8266 troubleshooting guide
If you like the ESP and you want to do more projects you can download my eBook Home Automation using ESP8266 here.
Let’s get started!
Parts List
Here’s the hardware that you need to complete this project:
- 1x ESP8266-12E – read Best ESP8266 Wi-Fi Development Board
- 1x RGB LED Common Anode (read How do RGB LEDs work?)
- 3x 470Ω Resistors
- 1x Breadboard
You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!
Flashing Your ESP with NodeMCU
In this tutorial we are going to use the NodeMCU firmware. You have to flash your ESP with NodeMCU firmare.
Downloading ESPlorer IDE
I recommend using the ESPlorer IDE which is a program created by 4refr0nt to send commands to your ESP8266.
Follow these instructions to download and install ESPlorer IDE:
- Click here to download ESPlorer
- Unzip that folder
- Go to the main folder
- Run “ESPlorer.jar” file
- Open the ESPlorer IDE
Uploading Code
You should see a window similar to the preceding Figure, follow these instructions to upload a Lua file:
- Connect your ESP8266-12E that has built-in programmer to your computer
- Select your ESP8266-12E port
- Press Open/Close
- Select NodeMCU+MicroPtyhon tab
- Create a new file called init.lua
- Press Save to ESP
Everything that you need to worry about or change is highlighted in red box.
Code
Upload the following code into your ESP8266 using the preceding software. Your file should be named “init.lua“.
Don’t forget to add your network name (SSID) and password to the script below.
-- Rui Santos
-- Complete project details at https://randomnerdtutorials.com
wifi.setmode(wifi.STATION)
wifi.sta.config("YOUR_NETWORK_NAME","YOUR_NETWORK_PASSWORD")
print(wifi.sta.getip())
function led(r, g, b)
pwm.setduty(1, r)
pwm.setduty(2, g)
pwm.setduty(3, b)
end
pwm.setup(1, 1000, 1023)
pwm.setup(2, 1000, 1023)
pwm.setup(3, 1000, 1023)
pwm.start(1)
pwm.start(2)
pwm.start(3)
srv=net.createServer(net.TCP)
srv:listen(80,function(conn)
conn:on("receive", function(client,request)
local buf = "";
buf = buf.."HTTP/1.1 200 OK\n\n"
local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP");
if(method == nil)then
_, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP");
end
local _GET = {}
if (vars ~= nil)then
for k, v in string.gmatch(vars, "(%w+)=(%w+)&*") do
_GET[k] = v
end
end
buf = buf.."<!DOCTYPE html><html><head>";
buf = buf.."<meta charset=\"utf-8\">";
buf = buf.."<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">";
buf = buf.."<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
buf = buf.."<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\">";
buf = buf.."<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\"></script>";
buf = buf.."<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js\"></script>";
buf = buf.."</head><body><div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1>";
buf = buf.."<a type=\"submit\" id=\"change_color\" type=\"button\" class=\"btn btn-primary\">Change Color</a> ";
buf = buf.."<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div></div>";
buf = buf.."<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' + Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);";
buf = buf.."document.getElementById(\"change_color\").href=\"?r=\" + Math.round(picker.rgb[0]*4.0117) + \"&g=\" + Math.round(picker.rgb[1]*4.0117) + \"&b=\" + Math.round(picker.rgb[2]*4.0117);}</script></body></html>";
if(_GET.r or _GET.g or _GET.b) then
-- This is for RGB Common Cathode
-- led(_GET.r, _GET.g,_GET.b)
-- This is for RGB Common Anode
led(1023-_GET.r, 1023-_GET.g,1023-_GET.b)
end
client:send(buf);
client:close();
collectgarbage();
end)
end)
Important: If you’re using an RGB LED common cathode, you need to comment and uncomment some code in the if(_GET.r or _GET.g or _GET.b) statement as described in the script comments.
Schematics
Now follow these schematics to create the circuit that the RGB LED common anode.
Important: If you’re using an RGB LED common cathode, you need to connect the longer lead to GND.
Your ESP IP Address
When your ESP8266 restarts, it prints in your serial monitor the ESP IP address. Save that IP address, because you’ll need it later.
In my case, the ESP IP address is 192.168.1.7. If you experience problems seeing your IP read this troubleshooting guide.
You’re all set!
Opening Your Web Server
Go to any browser and enter the IP address of your ESP8266. This what you should see:
Click the field and a small window opens with a color picker. Simply drag your mouse or finger and select the color for your RGB LED:
Then simply click the “Change Color” button:
Now your RGB LED changes to the blue color:
Go to the top of this page to see a video demonstration of this project.
Taking It Further
This is a basic example that shows you how easy it is to remotely control an RGB LED with an ESP8266. You can take this example and modify it to control an actual lamp.
Do you have any questions? Leave a comment down below!
Thanks for reading. If you like this post probably you might like my next ones, so please support me by subscribing my blog.
Hi Luis, thanks a lot for this article, I really like this.
One point get me a bit confused, in the text you are speaking about an ESP 8266-12E, but in the pictures I see a ESP8266-01.
Can you explain please ?
Kind regards
Hans
Hi Hans,
I had a mistake in the blog post, but it is fixed now and it should be easier to follow now.
I only use the ESP-12E.
Thanks for reading,
Rui
Very nice just what I was looking for. As soon i get my hands on the MCU esp i will give it a try.
One thing Please don’t copy paste from other projects as it will confuse the lesser experienced under us. now you start withe a piece of the esp 8266-1 while you use the esp 8266-12….
Thanks for all youre work on these amazing little boards.
Greetings W.Lagerveld
Hi Willem,
Thanks for bringing that up, I totally missed that part. But both the code and schematics are fixed now.
Thank you,
Rui
When i try to upload the file it says
stdin:1: pwm 16 does not exist
Thanks Cesar, I had a mistake both in the code and in the schematics. It’s should be all fixed now.
Thanks for pointing that out!
Hi Rui. You should make tutorial for esp8266 using arduino ide. It would be greatly appreciated.
Thanks for the suggestion!
Generously gave me just what I needed. Thanks Rui.
I’m glad it helped!
Hi,
nice Project. I am trying to do in arduino IDE. Please help me to write the arduino code
Thanks,
Harish
I’ll be trying to re-write the code in a couple of weeks…
Hi
how to use the following lines in arduino ide?
buf = buf..””;
buf = buf..””;
buf = buf..””;
How do you load the bootdtrap files locally onto the esp8266 instead of using the cdn links?
There’s not a good way of doing that…
Great project but… Would it be easy to change the port and ip adres?
Also would this work using a webserver 5100 or have you made that one some were else?
Yes, you can easily set the port and set the ip address. Just search for ESP8266 static IP address
Thanks for the tutorial. It inspire me to do some project applied to robotics. The idea is to control a couple of steper motors using a webpage like you did. instead of color gradient use a canvas to get movements from user and convert them to gcode commands, and make a robocar to resemble the movements. I want to use ESP8266-01 and A4988 motor driver (2 pieces at last). Please could you give me some advice about the java code to modify your script and adecuate to this idea?
Hi,
I don’t write Java code, but thanks for asking,
Rui
i realy apreciate this tutorial, i tried others, but this one is the best, muchas gracias Rui Santos. i still find a sketch with wifimanager. don’t put the ssid and password in the sketch.
Hi.
Thank you 🙂