Introduction: Change RGB LED Connected to ESP12E From Web Page Using Knob

Change RGB LED connected to ESP12E NodeMCU from Web Page using knob - Breadboard Setup is the first part of this lesson. In this lesson we are going to setup the breadboard with an ESP12E NodeMCU module with 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 lets start.

Step 1: Breadboard Connection

Make pin connections as specified in the image. Tally your breadboard circuit with the circuit diagram provided in the image.

Step 2: Programming ESP12E NodeMCU

Now download this repository and copy paste this into a new arduino sketch. Make sure you make changes in

https://github.com/vikkey321/Change-RGB-LED-connec...

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

const char* password = "your wifi password"; //Replace your wifi password

Where you have to replaced the wifi username and password with your own credentials. And flash the ESP12E NodeMCU module with the code. Copy the IP address of your ESP12E NodeMCU module which you will find in 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 like show in the image.

Step 3: Make the HTML Page With Knobs

Simply go to the below repository and download the whole file.

https://github.com/vikkey321/Change-RGB-LED-connec...

and inside the folder edit "index.html" and make the following changes:

Replace your IP(IP of ESP12E NodeMCU which you found in serial terminal) with the default variable

Example : xxx.xxx.x.xx to 192.168.0.0

var ip = "xxx.xxx.x.xx"

and hit save.If everything is good then your output should look like as shown in the video.

Hope you like my tutorial :)
My original Project here :

http://iotmonk.com/courses/change-rgb-led-connecte...

Comments

About This Instructable

324views

14favorites

License:

Bio: Works full time in corporate. Makes free tutorial in free time for open source community.
More by vikkey321:Laser Sound and LED Flasher Using 555 Timer ICChange RGB LED Connected to ESP12E From Web Page Using KnobCONTROLLING ESP12E NODEMCU WITH LED FROM WEBSITE (LOCAL NETWORK)
Add instructable to: