ESP8266 RGB Color Picker

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.

To learn more about the ESP8266 and RGB LEDs use the following tutorials as a reference:

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

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:

  1. Click here to download ESPlorer
  2. Unzip that folder
  3. Go to the main folder
  4. Run “ESPlorer.jar” file
  5. Open the ESPlorer IDE

Uploading Code

You should see a window similar to the preceding Figure, follow these instructions to upload a Lua file:

  1. Connect your ESP8266-12E that has built-in programmer to your computer
  2. Select your ESP8266-12E port
  3. Press Open/Close
  4. Select NodeMCU+MicroPtyhon tab
  5. Create a new file called init.lua
  6. 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.

<pre class="wp-block-syntaxhighlighter-code">-- Gnd_To_Vcc
-- 

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.."<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js</a>";
        buf = buf.."<a href="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js">https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js</a>";
        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)
</pre>

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.

Published by Gnd_To_Vcc

Here to spread my knowledge . Knowledge should always be spread not stored.

6 thoughts on “ESP8266 RGB Color Picker

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: