control – Blog eTechPath https://blog.etechpath.com Tue, 03 Jan 2023 12:36:51 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.5 https://blog.etechpath.com/wp-content/uploads/2017/08/BrandLogo12-150x150.png control – Blog eTechPath https://blog.etechpath.com 32 32 How to control RGB LED wirelessly using ESP8266 WiFi web interface https://blog.etechpath.com/how-to-control-rgb-led-wirelessly-using-esp8266-wifi-web-interface/ https://blog.etechpath.com/how-to-control-rgb-led-wirelessly-using-esp8266-wifi-web-interface/#comments Tue, 21 Nov 2017 22:59:50 +0000 https://blog.etechpath.com/?p=476 About:

In this project we are going to control 1 watt RGB full color LED diode using WiFi module ESP8266-01. You can use any WiFi enabled device to access web interface to control this RGB LED. Watch video at the bottom of this page.




Things you will need: 

  • 1W RGB LED
  • ESP-01  WiFi module
  • 10Ω Resistance
  • ASM1117 3.3v  (or any 3.3v voltage source)
  • USB to TTL converter (for programming esp-01)
  • Momentary push button (optional)
  • Android / Apple / Windows  Phone or any WiFi enabled Laptop / Desktop (to control RGB LED)

Circuit Diagram for programming ESP-01 : 

esp-01_circuit

Steps :

    1. Connect the circuit on breadboard as shown in above circuit diagram for programming ESP-01 WiFi module. You must use only 3.3v logic setting in TTL device.
    2. In this tutorial we will used Arduino IDE to download code into ESP module. So, install Arduino IDE and add supporting board manager and ESP library into it. (Download links are given in download section)



  1. Download and save source code on your computer and open it up using Arduino IDE.
  2. Connect USB to TTL module to your computer.
  3. Open Arduino IDE – Select board ‘Generic ESP8266 Module’ – Select Port of your TTL device (Here’s How to)
  4. Open downloaded code.ino file into arduino and upload the code into ESP module by pressing upload button.
  5. After uploading, Disconnect the ESP module from USB-TTL module and connect it to RGB LED as shown in bellow diagram.

Circuit Diagram for connecting RGB LED:

Steps: 

    1. Connect the final circuit as shown in above diagram and power it up using 5v battery or wall adapter.
    2. ESP module will boot up and LED light will show fade effect in all three colors at startup.



  1. Then open your device WiFi in discovery mode and you will see a new WiFi access point, named as RGB in discovery list.
  2. Connect that WiFi access point, Open any web browser in that device and open ip address 192.168.1.1 , thats it, you will see a colorful RGB control screen to control your wireless RGB LED.
        Note: Do not feed more than 3.3v to ESP-01 module

Source Code : 

/* RGB web server with ESP8266-01 (ESP-01)
* There are only 2 GPIOs available in ESP-01: 0 and 2
* but RX and TX can also be used as: 3 and 1
* Wiring Circuit 
* 0=Red (GPIO0) D3
* 2=Green (GPIO2) D4
* 3=Blue (GPIO3) Rx
* www.etechpath.com
*/

#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>

const char *ssid = "RGB";
//Uncomment below line if you wish to set a password for ESP wifi network...
// const char *password = "87654321";  

const byte DNS_PORT = 53;
IPAddress apIP(192, 168, 1, 1);   //IP address of your ESP 
DNSServer dnsServer;
ESP8266WebServer webServer(80);

//Webpage html Code
String webpage = ""
"<!DOCTYPE html><html><head><title>RGB control eTechPath.com</title><meta name='mobile-web-app-capable' content='yes' />"
"<meta name='viewport' content='width=device-width' /></head><body style='margin: 0px; padding: 0px;'>"
"<canvas id='colorspace'></canvas>"
"</body>"
"<script type='text/javascript'>"
"(function () {"
" var canvas = document.getElementById('colorspace');"
" var ctx = canvas.getContext('2d');"
" function drawCanvas() {"
" var colours = ctx.createLinearGradient(0, 0, window.innerWidth, 0);"
" for(var i=0; i <= 360; i+=10) {"
" colours.addColorStop(i/360, 'hsl(' + i + ', 100%, 50%)');"
" }"
" ctx.fillStyle = colours;"
" ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);"
" var luminance = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);"
" luminance.addColorStop(0, '#ffffff');"
" luminance.addColorStop(0.05, '#ffffff');"
" luminance.addColorStop(0.5, 'rgba(0,0,0,0)');"
" luminance.addColorStop(0.95, '#000000');"
" luminance.addColorStop(1, '#000000');"
" ctx.fillStyle = luminance;"
" ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);"
" }"
" var eventLocked = false;"
" function handleEvent(clientX, clientY) {"
" if(eventLocked) {"
" return;"
" }"
" function colourCorrect(v) {"
" return Math.round(1023-(v*v)/64);"
" }"
" var data = ctx.getImageData(clientX, clientY, 1, 1).data;"
" var params = ["
" 'r=' + colourCorrect(data[0]),"
" 'g=' + colourCorrect(data[1]),"
" 'b=' + colourCorrect(data[2])"
" ].join('&');"
" var req = new XMLHttpRequest();"
" req.open('POST', '?' + params, true);"
" req.send();"
" eventLocked = true;"
" req.onreadystatechange = function() {"
" if(req.readyState == 4) {"
" eventLocked = false;"
" }"
" }"
" }"
" canvas.addEventListener('click', function(event) {"
" handleEvent(event.clientX, event.clientY, true);"
" }, false);"
" canvas.addEventListener('touchmove', function(event){"
" handleEvent(event.touches[0].clientX, event.touches[0].clientY);"
"}, false);"
" function resizeCanvas() {"
" canvas.width = window.innerWidth;"
" canvas.height = window.innerHeight;"
" drawCanvas();"
" }"
" window.addEventListener('resize', resizeCanvas, false);"
" resizeCanvas();"
" drawCanvas();"
" document.ontouchmove = function(e) {e.preventDefault()};"
" })();"
"</script></html>";
void handleRoot() 
{
// Serial.println("handle root..");
String red = webServer.arg(0); // read RGB arguments
String green = webServer.arg(1);  // read RGB arguments
String blue = webServer.arg(2);  // read RGB arguments

//for common anode
analogWrite(0, red.toInt());
analogWrite(2, green.toInt());
analogWrite(3, blue.toInt());
//for common cathode
//analogWrite(0,1023 - red.toInt());
//analogWrite(2,1023 - green.toInt());
//analogWrite(3,1023 - blue.toInt());
webServer.send(200, "text/html", webpage);
}
void setup() 
{
pinMode(0, OUTPUT);
pinMode(2, OUTPUT);
pinMode(3, OUTPUT);

analogWrite(0, 1023);
analogWrite(2, 1023);
analogWrite(3, 1023);
delay(1000);
WiFi.mode(WIFI_AP);
WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
WiFi.softAP(ssid);
dnsServer.start(DNS_PORT, "rgb", apIP);
webServer.on("/", handleRoot);
webServer.begin();
testRGB();
}
void loop() 
{
dnsServer.processNextRequest();
webServer.handleClient();
}
void testRGB() 
{ 
// fade in and out of Red, Green, Blue
analogWrite(0, 1023); // Red off
analogWrite(2, 1023); // Green off
analogWrite(3, 1023); // Blue off

fade(0); // Red fade effect
fade(2); // Green fade effect
fade(3); // Blue fade effect
}
void fade(int pin) 
{
for (int u = 0; u < 1024; u++) 
{
analogWrite(pin, 1023 - u);
delay(1);
}
for (int u = 0; u < 1024; u++) 
{
analogWrite(pin, u);
delay(1);
}
}

 





Downloads:

  1. Code.ino
  2. Arduino IDE
  3. ESP8266 Board link for IDE board manager
  4. ESP8266 Arduino Library

 

]]> https://blog.etechpath.com/how-to-control-rgb-led-wirelessly-using-esp8266-wifi-web-interface/feed/ 6