ESP32 Web Server with Slider

Will guide you to build a web server-controlled PWM in ESP32.

Jan 14, 2024

•

16229 views

•

4 respects

•

GPL3+

Devices & Components

ESP32

Software & Tools

Arduino IDE

Project description

Code

HTML Code

markup

1<!DOCTYPE HTML><html>
2<head>
3  <meta name="viewport" content="width=device-width, initial-scale=1">
4  <title>ESP32 PWM Controller</title>
5
6  <style>
7    html {font-family: Arial; display: inline-block; text-align: center;}
8    h2 {font-size: 2.3rem;}
9    p {font-size: 1.9rem;}
10    body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
11    .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #2ad713;
12      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
13    .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
14    .slider::-moz-range-thumb { width: 35px; height: 35px; background: #05abf8; cursor: pointer; } 
15  </style>
16  
17</head>
18<body>
19  <h2>ESP32 PWM Controller</h2>
20  <p><span id="textSliderValue">%SLIDERVALUE%</span></p>
21  <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>
22<script>
23function updateSliderPWM(element) {
24  var sliderValue = document.getElementById("pwmSlider").value;
25  document.getElementById("textSliderValue").innerHTML = sliderValue;
26  console.log(sliderValue);
27  var xhr = new XMLHttpRequest();
28  xhr.open("GET", "/slider?value="+sliderValue, true);
29  xhr.send();
30}
31</script>
32</body>
33</html>

<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ESP32 PWM Controller</title>

  <style>
    html {font-family: Arial; display: inline-block; text-align: center;}
    h2 {font-size: 2.3rem;}
    p {font-size: 1.9rem;}
    body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
    .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #2ad713;
      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
    .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
    .slider::-moz-range-thumb { width: 35px; height: 35px; background: #05abf8; cursor: pointer; } 
  </style>
  
</head>
<body>
  <h2>ESP32 PWM Controller</h2>
  <p><span id="textSliderValue">%SLIDERVALUE%</span></p>
  <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>
<script>
function updateSliderPWM(element) {
  var sliderValue = document.getElementById("pwmSlider").value;
  document.getElementById("textSliderValue").innerHTML = sliderValue;
  console.log(sliderValue);
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/slider?value="+sliderValue, true);
  xhr.send();
}
</script>
</body>
</html>

Arduino Sketch

1#include <WiFi.h>
2#include <AsyncTCP.h>
3#include <ESPAsyncWebServer.h>
4
5// Replace with your network credentials
6const char* ssid = "ELDRADO";
7const char* password = "amazon123";
8
9const int output = 2;
10
11String sliderValue = "0";
12
13// setting PWM properties
14const int freq = 5000;
15const int ledChannel = 0;
16const int resolution = 8;
17
18const char* PARAM_INPUT = "value";
19
20// Create AsyncWebServer object on port 80
21AsyncWebServer server(80);
22
23const char index_html[] PROGMEM = R"rawliteral(
24<!DOCTYPE HTML><html>
25<head>
26  <meta name="viewport" content="width=device-width, initial-scale=1">
27  <title>ESP32 PWM Controller</title>
28
29  <style>
30    html {font-family: Arial; display: inline-block; text-align: center;}
31    h2 {font-size: 2.3rem;}
32    p {font-size: 1.9rem;}
33    body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
34    .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #2ad713;
35      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
36    .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
37    .slider::-moz-range-thumb { width: 35px; height: 35px; background: #05abf8; cursor: pointer; } 
38  </style>
39  
40</head>
41<body>
42  <h2>ESP32 PWM Controller</h2>
43  <p><span id="textSliderValue">%SLIDERVALUE%</span></p>
44  <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>
45<script>
46function updateSliderPWM(element) {
47  var sliderValue = document.getElementById("pwmSlider").value;
48  document.getElementById("textSliderValue").innerHTML = sliderValue;
49  console.log(sliderValue);
50  var xhr = new XMLHttpRequest();
51  xhr.open("GET", "/slider?value="+sliderValue, true);
52  xhr.send();
53}
54</script>
55</body>
56</html>
57)rawliteral";
58
59// Replaces placeholder with button section in your web page
60String processor(const String& var){
61  //Serial.println(var);
62  if (var == "SLIDERVALUE"){
63    return sliderValue;
64  }
65  return String();
66}
67
68void setup(){
69  // Serial port for debugging purposes
70  Serial.begin(115200);
71  
72  // configure LED PWM functionalitites
73  ledcSetup(ledChannel, freq, resolution);
74  
75  // attach the channel to the GPIO to be controlled
76  ledcAttachPin(output, ledChannel);
77  
78  ledcWrite(ledChannel, sliderValue.toInt());
79
80  // Connect to Wi-Fi
81  WiFi.begin(ssid, password);
82  while (WiFi.status() != WL_CONNECTED) {
83    delay(1000);
84    Serial.println("Connecting to WiFi..");
85  }
86
87  // Print ESP Local IP Address
88  Serial.println(WiFi.localIP());
89
90  // Route for root / web page
91  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
92    request->send_P(200, "text/html", index_html, processor);
93  });
94
95  // Send a GET request to <ESP_IP>/slider?value=<inputMessage>
96  server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
97    String inputMessage;
98    // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
99    if (request->hasParam(PARAM_INPUT)) {
100      inputMessage = request->getParam(PARAM_INPUT)->value();
101      sliderValue = inputMessage;
102      ledcWrite(ledChannel, sliderValue.toInt());
103    }
104    else {
105      inputMessage = "No message sent";
106    }
107    Serial.println(inputMessage);
108    request->send(200, "text/plain", "OK");
109  });
110  
111  // Start server
112  server.begin();
113}
114  
115void loop() {
116  
117}

#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

// Replace with your network credentials
const char* ssid = "ELDRADO";
const char* password = "amazon123";

const int output = 2;

String sliderValue = "0";

// setting PWM properties
const int freq = 5000;
const int ledChannel = 0;
const int resolution = 8;

const char* PARAM_INPUT = "value";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ESP32 PWM Controller</title>

  <style>
    html {font-family: Arial; display: inline-block; text-align: center;}
    h2 {font-size: 2.3rem;}
    p {font-size: 1.9rem;}
    body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
    .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #2ad713;
      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
    .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
    .slider::-moz-range-thumb { width: 35px; height: 35px; background: #05abf8; cursor: pointer; } 
  </style>
  
</head>
<body>
  <h2>ESP32 PWM Controller</h2>
  <p><span id="textSliderValue">%SLIDERVALUE%</span></p>
  <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>
<script>
function updateSliderPWM(element) {
  var sliderValue = document.getElementById("pwmSlider").value;
  document.getElementById("textSliderValue").innerHTML = sliderValue;
  console.log(sliderValue);
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/slider?value="+sliderValue, true);
  xhr.send();
}
</script>
</body>
</html>
)rawliteral";

// Replaces placeholder with button section in your web page
String processor(const String& var){
  //Serial.println(var);
  if (var == "SLIDERVALUE"){
    return sliderValue;
  }
  return String();
}

void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  
  // configure LED PWM functionalitites
  ledcSetup(ledChannel, freq, resolution);
  
  // attach the channel to the GPIO to be controlled
  ledcAttachPin(output, ledChannel);
  
  ledcWrite(ledChannel, sliderValue.toInt());

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });

  // Send a GET request to <ESP_IP>/slider?value=<inputMessage>
  server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
    if (request->hasParam(PARAM_INPUT)) {
      inputMessage = request->getParam(PARAM_INPUT)->value();
      sliderValue = inputMessage;
      ledcWrite(ledChannel, sliderValue.toInt());
    }
    else {
      inputMessage = "No message sent";
    }
    Serial.println(inputMessage);
    request->send(200, "text/plain", "OK");
  });
  
  // Start server
  server.begin();
}
  
void loop() {
  
}

Comments

Only logged in users can leave comments

cetech11

0 Followers

•

0 Projects

Intro

Trademarks & CopyrightsWhistleblowingDigital Services ActTerms of ServicePrivacy PolicySecurityCookie Settings

Report content