Change RGB LED Connected to ESP12E from Web Page Using Knob

Overview

Breadboard setup is the first part of this lesson. In this lesson we are going to setup the breadboard with an ESP12E NodeMCU module and a Groove RGB Chainable LED V1.0. We will also create a web page with three knobs for controlling the three colors. I hope that you already have all the components ready for this tutorial which I specified in the introduction phase. So let's start.

Please use this circuit diagram for the reference (attached with this Hackster below). Make pin connections as specified below:

Now flash ESP12E NodeMCU with the provided Arduino code. Make sure that you are replacing the WiFi username and password with your credentials.

const char* ssid = "your wifi user name";   //Replace your wifi user name 
const char* password = "your wifi password"; //Replace your wifi password 

Copy the IP address of your ESP12E NodeMCU module which you will find in the serial terminal.

Then test it in the browser before making the HTML page. Copy the IP address and replace it with "xxx.xxx.xx.xx" in the following URL and copy the whole URL.

http://xxx.xxx.xx.xx/arguments?r=10&g=10&b=10

And then paste it in the browser and hit enter. If everything is alright, then you will get the following output and your RGB LED should lit up with a color.

Now download the HTML file which I have attached with this Hackster project. Make sure you make changes here:

				//------------------------------------------------- 
				//----Replace your IP with the default variable---- 
				//-----Example : xxx.xxx.x.xx to 192.168.0.0------- 
				//------------------------------------------------- 
				var ip = "xxx.xxx.x.xx" 
				//------------------------------------------------- 
				//************************************************* 
				//-------------------------------------------------  

Replace it with your IP and try to change the knob. You will be amazed to see the result.

Video

Here is the output video of the same.

Hope you like my tutorial. My original project here: http://iotmonk.com/courses/change-rgb-led-connected-esp12e-web-page-using-knob/