Recent changes

Multiple LEDs’ brightness controlled over a web server

Student: Delia Luca, ACES
Code archive: esp32_multiple_sliders_web_server.zip
Presentation: wi-fi_multipled_leds_controller.zip

1. Introduction. Description of the project

The goal of this project is to give the end-user the possibility to control the brightness of several LEDs (for exemplification I used 6 LEDs) through a friendly web interface. The internet page provides a number of slides equal to the number of LEDs and with their help, a person, that has access to the internet from the same access point as the server does, can simply choose how intense they want each of their LEDs to sparkle.

2. Hardware components and wiring

The hardware components needed for this project are:

ESP32 board
Breadboard
Jumper wires
220 Ohm resistors
LEDs
Micro USB data cable
Any PC with an internet connection and with Arduino IDE

The electric scheme of the project that I did is the following (done in https://www.circuit-diagram.org/editor/):

3. Software implementation and how it works

The software part of this project consists of 3 parts:

the main code written and run in Arduino IDE that programs the ESP32 board and set the webserver;

The libraries used are

#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "SPIFFS.h"
#include <Arduino_JSON.h>

One of the most important first parts is writing the network credentials:

const char* ssid = "DIGI-2MJf";
const char* password = "aaaaaaaa";

And then setting the I/O pins corresponding to the LEDs:

const int ledPin1 = 12;
const int ledPin2 = 14;
const int ledPin3 = 33;
const int ledPin4 = 13;
const int ledPin5 = 27;
const int ledPin6 = 32;

Then, the function getSliderValues() creates a JSON string with the slider value:

String getSliderValues(){
  sliderValues["sliderValue1"] = String(sliderValue1);
  sliderValues["sliderValue2"] = String(sliderValue2);
  sliderValues["sliderValue3"] = String(sliderValue3);
  sliderValues["sliderValue4"] = String(sliderValue4);
  sliderValues["sliderValue5"] = String(sliderValue5);
  sliderValues["sliderValue6"] = String(sliderValue6);

  String jsonString = JSON.stringify(sliderValues);
  return jsonString;
}

Following, the webserver and the wi-fi are initialized. The function notifyClients() updates all clients connected to the web page with the latest changes of the sliders' values (for example, if two people are connected at the same time at the webpage, both of them will see the same output; in other words, if one of them makes a change in any slider position, this will also be seen by the other user) and the handleWebSocketMessage() function handles what happens when the webserver receives a request from a user through the WebSocket protocol. The message that the webserver gets has the form “4s75” which means that the LED corresponding the fourth slider should have brightness - duty cycle of 40%. In the loop() the duty cycles of the LEDs are updated when a change in their corresponding slider occurs.

void loop() {
  ledcWrite(ledChannel1, dutyCycle1);
  ledcWrite(ledChannel2, dutyCycle2);
  ledcWrite(ledChannel3, dutyCycle3);
  ledcWrite(ledChannel4, dutyCycle4);
  ledcWrite(ledChannel5, dutyCycle5);
  ledcWrite(ledChannel6, dutyCycle6);
  }

the .html and .css files that create the content and design the web page - the web page for this project looks like this:

the javascript file that initializes a WebSocket connection with the server, sends a message to the server to get the slider values and uses the response to update the slider values on the web page.

An important aspect is how these files are organized. The .hmtm, .css, and javascript .js files must be in a same folder that should be in the same parent folder with the Arduino sketch (see an exemplification figure from https://randomnerdtutorials.com/esp32-web-server-websocket-sliders/.

How the program runs is shown in the below flowchart:

4. Demonstration

A video demonstrating the functionality of this project can be seen in the video from this archive: iot_project_multiple_leds_controlled_through_wi_fi.rar

5. Overlook and conclusion

The proposed project has reached its goal. I understood how ESP32 board can be used as a web server, and I employed this functionality for creating an interactive and easy way for a user to control multiple LEDs. It could be further improved by adding more security, using a HTTPS connection. Moreover, it could also be scaled up to more complex installations or adding different functionalities such as automatically turning on the LEDs when the light intensity is low and consulting their level of brightness through a web server.