Change RGB LED connected to ESP12E from Web Page using knob

Teacher
Vivek Gupta
Vivek Gupta
Role : Writing free tutorials in free time
  • Website : http://vsgupta.in/
  • Experience : 5+ Years
  • Specialist in : IoT, NLP, Machine Learning, Chatbots, Voice Assistants, Hardware Engineering
Read More

Change RGB LED connected to ESP12E from Web Page using knob – Breadboard Setup

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.

Please use this circuit diagram for the reference when you are using the tutorial. At each step, please check your wiring with each step using this circuit diagram.

Change-RGB-LED-connected-to-ESP12E-from-Web-Page-using-knob-circuit-diagram

Change-RGB-LED-connected-to-ESP12E-from-Web-Page-using-knob-circuit-diagram

Now follow the below step by step tutorial to wire your breadboard:

  1. Take your breadboard, and connect the lanes of the breadboard as shown in the below image. Follow the blue dots. We are doing this to supply power source to rest of the breadboard from ESP12E NodeMCU Module.
Change-RGB-LED-connected-to-ESP12E-from-Web-Page-using-knob-breadboard-setup (1)

Change-RGB-LED-connected-to-ESP12E-from-Web-Page-using-knob-breadboard-setup (1)

2. Now Place your ESP12E NodeMCU module on breadboard as shown in the below image. Make sure that the ESP12E NodeMCU module is placed exactly aligned to the number.

After that connect GND pin of ESP12E NodeMCU module to the -ve lane of breadboard and 3.3V pin of ESP12E NodeMCU module to +ve lane of breadboard. Both the connections are on the right side of the breadboard.

Change-RGB-LED-connected-to-ESP12E-from-Web-Page-using-knob-breadboard-setup (2)

Change-RGB-LED-connected-to-ESP12E-from-Web-Page-using-knob-breadboard-setup (2)

 

3. Now take your RGB Chainable LED and connect it to ESP12E NodeMCU module in the following pin layout( you can also check the circuit diagram above for pin connection layout) .

 

Pin Connection

ESP12E NodeMCU module Groove RGB Chainable RGB LED
3.3V V
GND G
D7 D1
D6 C0
Change-RGB-LED-connected-to-ESP12E-from-Web-Page-using-knob-breadboard-setup (4)

Change-RGB-LED-connected-to-ESP12E-from-Web-Page-using-knob-breadboard-setup (4)

4. Since we are placing it on breadboard, you might have to extend the Groove RGB chainable LED by one to one male connector as shown in below image:

Change-RGB-LED-connected-to-ESP12E-from-Web-Page-using-knob-breadboard-setup (3)

Change-RGB-LED-connected-to-ESP12E-from-Web-Page-using-knob-breadboard-setup (3)

And that's it for this lesson. In the next lesson we will program ESP12E NodeMCU module which will act as a server and accept parameters from a URL.

Please subscribe to my youtube channel to stay updated to the latest tutorial in IoT,ML,AI, Analytics and Electronics.

youtube-iotmonk-subscribe

Please login to get access to the quiz
(Next Lesson) Change RGB LED connected to ESP12E from Web Page using knob – Programming ESP12E NodeMCU
Back to Change RGB LED connected to ESP12E from Web Page using knob

No Comments

Post a Reply