Control the brightness of LEDs (PWM)

This project demonstrates how to construct a web server with the ESP8266 NodeMCU board by displaying a web page that contains many sliders on the screen. The brightness of many LEDs can be adjusted by adjusting the duty cycle of several PWM signals, which is controlled by the sliders. This idea can be used to drive DC motors or other actuators that require a PWM signal in place of the LEDs if you so want. The WebSocket protocol is utilized in order to facilitate communication between the clients and the ESP8266. In addition, each time there is a modification, the values of the sliders on all of the clients are updated concurrently.

The web page we'll make for this project is shown in the picture below:

The web page has three cards: Fader 1, Fader 2, and Fader 3. Each card has its own paragraph with the title of the card. On each card is a range slider that you can use in order to adjust the amount of light emitted by the appropriate LED; Another paragraph on each card displays the brightness of the LEDs at the moment (shown as a percentage); If you have more than one tab open in your web browser (or more than one device), all of those tabs and devices will update almost instantly whenever there is a change. When you move the slider to a new position, all clients are notified of the change. How Does It Work? A web server that the ESP maintains and operates presents a webpage that has three sliders;

When you move a slider to a new location, the client will send the number of the slider as well as the value of the slider to the server via the WebSocket protocol. For instance, if you moved slider number 3 to position number 40, it would communicate that setting to the server with the message "3s40."

The server (ESP) will make the necessary adjustments to the PWM duty cycle after it has received the slider number and the related value. Additionally, it alerts all the other clients with the new current slider settings, which enables us to have all clients changed in what feels like almost no time at all. To adjust the level of brightness emitted by the LED, the ESP8266 sends out a PWM signal complete with the appropriate duty cycle. If the LED has a duty cycle of 0%, then it is completely dark; if it has a duty cycle of 50%, then it is only half lighted; and if it has a duty cycle of 100%, then it is completely lit; It will send a message to the ESP8266 (also using the WebSocket protocol) with the message getValues whenever you open a new web browser window. This is when a new client connects. When the ESP8266 receives this message, it will communicate the values of the slider at the current position. When you start a new tab, the values will always be displayed as they have been most recently changed in this manner.

Connect three LEDs to the ESP8266 using the wires. GPIOs 12 (D6), 13 (D7), and 14 are being utilized here (D5). You are free to use any other GPIOs that are appropriate. Prerequisites Before continuing with this tutorial, please ensure that you have satisfied all of the prerequisites listed below. 1) Parts Required

ESP8266 NodeMCU Board - read our Best ESP8266 Wi-Fi Development Board - Buying Guide for more information. 3x LEDs

3 resistors each rated at 220 ohms Jumper wires for the breadboard You can test this project with just one LED, the results of which can be seen in the Serial Monitor, or you can use other actuators whose operation requires a PWM signal. You do not need three LEDs to test this project. 2) Add-on for the Arduino Software and ESP8266 Boards Using Arduino IDE, we'll write some code for the ESP8266. Therefore, the ESP8266 add-on component needs to be installed on your system. 3) Filesystem Uploader Plugin We will be utilizing a plugin for the Arduino IDE known as the LittleFS Filesystem uploader in order to upload the HTML, CSS, and JavaScript files required to construct this project into the flash memory (LittleFS) of the ESP8266. 4) Libraries You will need to install the following libraries in order to construct this

ESPAsyncWebServer (a.zip folder), ESPAsyncTCP, and the Arduino JSON library by Arduino version 0.1.0 can be found in the Arduino Library Manager (.zip folder). Utilizing the Arduino Library Manager, you will be able to install the initial library. Find the library's name by going to Sketch > Include Library > Manage Libraries and searching for it there. Because the ESPAsynTCP and ESPAsynWebServer libraries cannot be installed through the Arduino Library Manager, you will need to manually copy the library files into the Arduino Installation Libraries folder. These libraries are not accessible for installation through the Arduino Library

Manager. You can also select the libraries you just downloaded by going to the Sketch menu in your Arduino IDE, selecting the Include Library option, and then clicking the Add.zip Library button. Performing Library Installation (VS Code + PlatformIO) If you are using PlatformIO to write code for the ESP8266, you need to add the following lines to the platformio.ini file in order to include the necessary libraries (you need also modify the speed of the Serial Monitor to 115200

Launch the Serial Monitor with a baud rate of 115200 once everything has been successfully uploaded. If you give the ESP8266 EN/RST button a press, you should see the IP address printed on the screen.

Copy the ESP8266 IP address, then open a browser on your local network and paste it there. It is recommended that you gain access to the web server

page so that you can adjust the intensity of the LEDs. To adjust the level of brightness emitted by the LEDs, use the sliders. When you switch between tabs on your browser or connect to the web server from a different device, you'll see that the values of the sliders update almost instantly whenever you make a modification.