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 – Creating HTML Page with Knob

Introduction

In this tutorial, we are going to create an HTML page along with javascript, jquery and css where we will create three knobs to control ESP12E RGB LED. In the previous tutorial, we saw tutorial to program ESP12E NodeMCU module to accept parameters from a URL in get request. Since we already tested out the working of the circuit in the browser, we will now create the elements of HTML page. We will be creating three knobs for Red, Green and blue color. And we will also give a color pallet where when we rotate knobs, will change the color of the pallet depending upon the value selected by the user. This will help user to understanding which color he is changing groove chainable RGB LED V1.0 to. So lets begin.

In this project I have used this beautiful jquery knob library : https://github.com/aterrien/jQuery-Knob (Just in case you want to check out)

Open notepad++ and create a new file and save it as index.html.

Copy the below code and paste it in the file:

And save the whole file. Make sure that you have replaced the Ip address to your Ip address in the code.

If you have done everything right, then you will see the following output:

 

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
Change RGB LED connected to ESP12E from Web Page using knob – Programming ESP12E NodeMCU (Prev Lesson)
Back to Change RGB LED connected to ESP12E from Web Page using knob

No Comments

Post a Reply