Show page

Differences

This shows you the differences between two versions of the page.

--- iothings:proiecte:2021:wifi_light_controller_with_esp32 [2022/01/27 18:27]
delia.luca
+++ iothings:proiecte:2021:wifi_light_controller_with_esp32 [2022/01/28 18:15] (current)
dan.tudose
@@ Line 1: / Line 1: @@
 ==== Multiple LEDs’ brightness controlled over a web server ====
-Student: Delia Luca, ACES
+Student: Delia Luca, ACES\\
+Code archive: {{:iothings:proiecte:2021:esp32_multiple_sliders_web_server.zip|}}\\
+Presentation: {{:iothings:proiecte:2021: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 their LEDs to sparkle.
+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.
@@ Line 15: / Line 17: @@
   * Any PC with an internet connection and with Arduino IDE
-The electric scheme of my project is the following (done in [[https://www.circuit-diagram.org/editor/]]):
+The electric scheme of the project that I did is the following (done in [[https://www.circuit-diagram.org/editor/]]):
-{{ :iothings:proiecte:2021:circuit_1_.png |}}
+{{ :iothings:proiecte:2021:circuit.png |}}
 === 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;
-  * //descriere părți imp
+//The libraries used are//
-  * the .html and .css files that create and design the web page;
+<code>
-  * //poză pagină
+#include <Arduino.h>
-  * the java script that programs the web page;
+#include <WiFi.h>
-  * //descriere părți importante
+#include <AsyncTCP.h>
+#include <ESPAsyncWebServer.h>
+#include "SPIFFS.h"
- {{ :iothings:proiecte:2021:diagrama.png |}}
+#include <Arduino_JSON.h>
+</code>
+//One of the most important first parts is writing the network credentials://
+<code>
+const char* ssid = "DIGI-2MJf";
+const char* password = "aaaaaaaa";
+</code>
+//And then setting the I/O pins corresponding to the LEDs://
+<code>
+const int ledPin1 = 12;
+const int ledPin2 = 14;
+const int ledPin3 = 33;
+const int ledPin4 = 13;
+const int ledPin5 = 27;
+const int ledPin6 = 32;
+</code>
+//Then, the function getSliderValues() creates a JSON string with the slider value://
+<code>
+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;
+}
+</code>
+//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.//
+<code>
+void loop() {
+  ledcWrite(ledChannel1, dutyCycle1);
+  ledcWrite(ledChannel2, dutyCycle2);
+  ledcWrite(ledChannel3, dutyCycle3);
+  ledcWrite(ledChannel4, dutyCycle4);
+  ledcWrite(ledChannel5, dutyCycle5);
+  ledcWrite(ledChannel6, dutyCycle6);
+  }
+</code>
+  * the .html and .css files that create the content and design the web page - the web page for this project looks like this:
+{{ :iothings:proiecte:2021:web_page.png?nolink&500 |}}
+  * 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/]]. //
+{{ :iothings:proiecte:2021:organizare.png?nolink&600 |}}
+//How the program runs is shown in the below flowchart://
+{{:iothings:proiecte:2021:diagrama.png?600|}}
 === 4. Demonstration ===
+A video demonstrating the functionality of this project can be seen in the video from this archive: {{:iothings:proiecte:2021: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.
 == 5. Resources ==
-  * [[https://randomnerdtutorials.com/esp32-web-server-slider-pwm/]]
+  * [[https://randomnerdtutorials.com/install-esp32-filesystem-uploader-arduino-ide/]]
   * [[https://randomnerdtutorials.com/esp32-pwm-arduino-ide/]]
   * [[https://randomnerdtutorials.com/esp32-web-server-websocket-sliders/]]
   * [[https://www.circuit-diagram.org/editor/]]
   * [[https://www.studiopieters.nl/esp32-pinout/]]