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 (eBay)
- 1x RGB LED Common Anode (read the How do RGB LEDs work?)
- 3x 470Ω Resistors
- 1x Breadboard
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 http://randomnerdtutorials.com wifi.setmode(wifi.STATION) wifi.sta.config("YOUR_NETWORK_NAME","YOUR_NETWORK_PASSWORD") tmr.delay(5000) print(wifi.sta.getip()) function led(r, g, b) pwm.setduty(1, r) pwm.setduty(2) 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.
For More Details: ESP8266 RGB Color Picker
