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 – Programming ESP12E NodeMCU

In this lesson, we will program ESP12E NodeMCU such that it will accept the URL and parameters inside the URL. It will be simple get request.  We will get in detail about the parameters which we will be sending as get request. The color is form of three primary colors - Red, Green and Blue. Each color ranges from 0-255 and the combination of the value of each primary colors represent a color. So its obvious that we have to pass three colors value in the parameter.

So let's say that I want to show :

color : x

so I have to pass the following paramters:

R : x

G : x

B : x

and my url will look something like this :

http://IP-of-ESP12E-Nodemcu/arguments?r=x&g=x&b=x 

and it will be a simple get request which I can directly call from my browser.

Now copy paste the following code in Arduino IDE and program your ESP12E NodeMCU Module. (Make sure you replace the SSID and password of your wifi in the code)

Arduino Code

Once you have successfully programmed your ESP12E NodeMCU Module with the above code, open your serial terminal and you will get the IP address of your ESP12E NodeMCU Module as shown in the below image:

Change-RGB-LED-connected-to-ESP12E-from-Web-Page-using-knob-breadboard-setup-serial-terminal

Change-RGB-LED-connected-to-ESP12E-from-Web-Page-using-knob-breadboard-setup-serial-terminal

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 open a web browser, copy and paste the copied url and hit enter(Make sure your ESP12E NodeMCU module is connected to your computer via USB ). If everything is alright then you will get the following output and your RGB LED should lit up with a color.

Change-RGB-LED-connected-to-ESP12E-from-Web-Page-using-knob-breadboard-setup-programming-console

Change-RGB-LED-connected-to-ESP12E-from-Web-Page-using-knob-breadboard-setup-programming-console

 

Try to change the parameter values and it will produce different colors depending upon the red, green and blue values. I hope you enjoyed the tutorial.

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

youtube-iotmonk-subscribe

In the next tutorial, We will make a web page with three knobs which you can use to directly control the colors of Groove RGB chainable LED V1.0 connected to ESP12E NodeMCU module in real time.

To go to the next chapter, simply select the "goto next chapater(with right arrow)" below.

Please login to get access to the quiz
Change RGB LED connected to ESP12E from Web Page using knob – Breadboard Setup (Prev Lesson)
(Next Lesson) Change RGB LED connected to ESP12E from Web Page using knob – Creating HTML Page with Knob
Back to Change RGB LED connected to ESP12E from Web Page using knob

Comments ( 6 )

  • Galois

    Hi, i can not upload the code. i joined the two code like from 1 to 49 + from 1 to 37 but still error during uploading. im sure everything is okay in my computer.

  • Haider Ali

    Suppose we have 10 LEDs so how can we send data 30 bytes for r g b

    • Haider, thanks for watching this tutorial. Since, the LEDs are addressable individually, you can send the bytes for r,g and b one by one to all the 30 leds by their address. This is why this specific module which I have used is costly but quite effective when you want to control them individually.

  • Sra

    Super laut. :))
    Fucker schön düster deine Seite.
    Ich war im Besitz eines ESP und eines Servers mit db, qss, php. usw.
    Ich habe auch google gesucht, um von ESP zu sprechen, um zu dienen, um sich in dB-Werten zu merken, und ich habe etwas getan. Die Phase ist, dass ich Werte auf einer HTML-Seite auf meinem Server nicht schreiben und es in db speichern kann. dann in der Lage sein, von esp gelesen zu werden und angemessen zu handeln.
    Werte können von esp senden, um in db zu merken, ich kann sie auf der Seite sehen, aber ich kann nicht über GHET senden, aber die Zeit auf dem Server, aber was mich interessiert, kann nicht in die Tabelle in db schreiben. Werte in HTML dann in der Lage sein, sie zu lesen, esp 🙁

    • All I can read is fucker in the comment. Please write in english.

Post a Reply