Advertisement
siosin

Untitled

Jun 16th, 2022 (edited)
32
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.65 KB | None | 0 0
  1. //https://randomnerdtutorials.com
  2. #ifdef ESP32
  3. #include <WiFi.h>
  4. #include <AsyncTCP.h>
  5. #else
  6. #include <ESP8266WiFi.h>
  7. #include <ESPAsyncTCP.h>
  8. #endif
  9. #include <ESPAsyncWebServer.h>
  10. #include <EEPROM.h>
  11.  
  12. // Replace with your network credentials
  13. const char* ssid = "MadLabNet-G-UII";
  14. const char* password = "";
  15.  
  16. const char* input_parameter1 = "state";
  17. const char* input_parameter2 = "value";
  18.  
  19. const int output = 2;
  20.  
  21. String Timer_Value = "15";
  22.  
  23. // Create AsyncWebServer object on port 80
  24. AsyncWebServer server(80);
  25.  
  26. const char index_html[] PROGMEM = R"rawliteral(
  27. <!DOCTYPE HTML><html>
  28. <head>
  29. <meta name="viewport" content="width=device-width, initial-scale=1">
  30. <title>ESP Web Server</title>
  31. <style>
  32. html {font-family: Times New Roman; display: inline-block; text-align: center;}
  33. h2 {font-size: 2.4rem;}
  34. p {font-size: 2.2rem;}
  35. body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
  36. .switch {position: relative; display: inline-block; width: 120px; height: 68px}
  37. .switch input {display: none}
  38. .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #FF0000; border-radius: 34px}
  39. .slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #212420; -webkit-transition: .4s; transition: .4s; border-radius: 68px}
  40. input:checked+.slider {background-color: #44f321}
  41. input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
  42. .slider2 { -webkit-appearance: none; margin: 14px; width: 300px; height: 20px; background: #000000;
  43. outline: none; -webkit-transition: .2s; transition: opacity .2s;}
  44. .slider2::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 30px; height: 30px; background: #ff0825; cursor: pointer;}
  45. .slider2::-moz-range-thumb { width: 30px; height: 30px; background: #2f4468; cursor: pointer; }
  46. </style>
  47. </head>
  48. <body>
  49. <h2>ESP Timer Controlled Web Server</h2>
  50. <p><span id="timer">%timer%</span> s</p>
  51. <p><input type="range" onchange="updateSliderTimer(this)" id="Timer_slider" min="1" max="30" value="%timer%" step="1" class="slider2"></p>
  52. %BUTTONPLACEHOLDER%
  53. <script>
  54. function toggleCheckbox(element) {
  55. var sliderValue = document.getElementById("Timer_slider").value;
  56. var xhr = new XMLHttpRequest();
  57. if(element.checked){ xhr.open("GET", "/update?state=1", true); xhr.send();
  58. var count = sliderValue, timer = setInterval(function() {
  59. count--; document.getElementById("timer").innerHTML = count;
  60. if(count == 0){ clearInterval(timer); document.getElementById("timer").innerHTML = document.getElementById("Timer_slider").value; }
  61. }, 1000);
  62. sliderValue = sliderValue*1000;
  63. setTimeout(function(){ xhr.open("GET", "/update?state=0", true);
  64. document.getElementById(element.id).checked = false; xhr.send(); }, sliderValue);
  65. }
  66. }
  67. function updateSliderTimer(element) {
  68. var sliderValue = document.getElementById("Timer_slider").value;
  69. document.getElementById("timer").innerHTML = sliderValue;
  70. var xhr = new XMLHttpRequest();
  71. xhr.open("GET", "/slider?value="+sliderValue, true);
  72. xhr.send();
  73. }
  74. </script>
  75. </body>
  76. </html>
  77. )rawliteral";
  78.  
  79. // Replaces placeholder with button section in your web page
  80. String processor(const String& var){
  81. //Serial.println(var);
  82. if(var == "BUTTONPLACEHOLDER"){
  83. String buttons = "";
  84. String outputStateValue = outputState();
  85. buttons+= "<p><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"output\" " + outputStateValue + "><span class=\"slider\"></span></label></p>";
  86. return buttons;
  87. }
  88. else if(var == "timer"){
  89. return Timer_Value;
  90. }
  91. return String();
  92. }
  93.  
  94. String outputState(){
  95. if(digitalRead(output)){
  96. return "checked";
  97. }
  98. else {
  99. return "";
  100. }
  101. return "";
  102. }
  103.  
  104. #define EEPROM_SIZE 12
  105.  
  106.  
  107. void setup(){
  108. // Serial port for debugging purposes
  109. Serial.begin(115200);
  110. int address = 0;
  111. EEPROM.begin(EEPROM_SIZE);
  112. EEPROM.get(address, Timer_Value);
  113. EEPROM.get(address, outputState);
  114.  
  115. pinMode(output, OUTPUT);
  116. digitalWrite(output, LOW);
  117.  
  118.  
  119. // Connect to Wi-Fi
  120. WiFi.begin(ssid, password);
  121. while (WiFi.status() != WL_CONNECTED) {
  122. delay(1000);
  123. Serial.println("Connecting to WiFi..");
  124. }
  125.  
  126. // Print ESP Local IP Address
  127. Serial.println(WiFi.localIP());
  128.  
  129. // Route for root / web page
  130. server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  131. request->send_P(200, "text/html", index_html, processor);
  132. });
  133.  
  134.  
  135. server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
  136. String message;
  137. // GET input1 value on <ESP_IP>/update?state=<message>
  138. if (request->hasParam(input_parameter1)) {
  139. message = request->getParam(input_parameter1)->value();
  140. digitalWrite(output, message.toInt());
  141. }
  142. else {
  143. message = "There is no message!";
  144. }
  145. Serial.println(message);
  146. request->send(200, "text/plain", "OK");
  147. });
  148.  
  149. server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  150. String message;
  151. // GET input1 value on <ESP_IP>/slider?value=<message>
  152. if (request->hasParam(input_parameter2)) {
  153. message = request->getParam(input_parameter2)->value();
  154. Timer_Value = message;
  155. }
  156. else {
  157. message = "No message sent";
  158. }
  159. Serial.println(message);
  160. request->send(200, "text/plain", "OK");
  161. });
  162.  
  163. // Start server
  164. server.begin();
  165.  
  166.  
  167. EEPROM.put(address, Timer_Value);
  168. EEPROM.put(address, outputState);
  169. EEPROM.commit();
  170.  
  171. EEPROM.end();
  172. }
  173.  
  174.  
  175. void loop() {
  176.  
  177. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement