API tools faq
paste
Advertisement
LeventeDaradici

ESP8266 webserver controlled relays

LeventeDaradici
Jan 21st, 2022
1,414
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
C++ 5.39 KB | None | 0 0
raw download clone embed print report
  1. /*********
  2.   Rui Santos
  3.   Complete project details at https://RandomNerdTutorials.com/esp8266-relay-module-ac-web-server/
  4.  
  5.   The above copyright notice and this permission notice shall be included in all
  6.   copies or substantial portions of the Software.
  7. *********/
  8.  
  9. // Import required libraries
  10. #include "ESP8266WiFi.h"
  11. #include "ESPAsyncWebServer.h"
  12.  
  13. // Set to true to define Relay as Normally Open (NO)
  14. #define RELAY_NO    true
  15.  
  16. // Set number of relays
  17. #define NUM_RELAYS  4
  18.  
  19. // Assign each GPIO to a relay
  20. int relayGPIOs[NUM_RELAYS] = {5, 4, 0, 2};
  21.  
  22. // Replace with your network credentials
  23. const char* ssid = "YOUR WIFI SSID";
  24. const char* password = "*YOUR WIFI PASSWORD";
  25.  
  26. const char* PARAM_INPUT_1 = "relay";  
  27. const char* PARAM_INPUT_2 = "state";
  28.  
  29. // Create AsyncWebServer object on port 80
  30. AsyncWebServer server(80);
  31.  
  32. const char index_html[] PROGMEM = R"rawliteral(
  33. <!DOCTYPE HTML><html>
  34. <head>
  35.  <meta name="viewport" content="width=device-width, initial-scale=1">
  36.  <style>
  37.    html {font-family: Arial; display: inline-block; text-align: center;}
  38.    h2 {font-size: 3.0rem;}
  39.    p {font-size: 3.0rem;}
  40.    body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
  41.    .switch {position: relative; display: inline-block; width: 120px; height: 68px}
  42.    .switch input {display: none}
  43.    .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px}
  44.    .slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px}
  45.    input:checked+.slider {background-color: #2196F3}
  46.    input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
  47.  </style>
  48. </head>
  49. <body>
  50.  <h2>Web controlled relays</h2>
  51.  %BUTTONPLACEHOLDER%
  52. <script>function toggleCheckbox(element) {
  53.  var xhr = new XMLHttpRequest();
  54.  if(element.checked){ xhr.open("GET", "/update?relay="+element.id+"&state=1", true); }
  55.  else { xhr.open("GET", "/update?relay="+element.id+"&state=0", true); }
  56.  xhr.send();
  57. }</script>
  58. </body>
  59. </html>
  60. )rawliteral";
  61.  
  62. // Replaces placeholder with button section in your web page
  63. String processor(const String& var){
  64.   //Serial.println(var);
  65.   if(var == "BUTTONPLACEHOLDER"){
  66.     String buttons ="";
  67.     for(int i=1; i<=NUM_RELAYS; i++){
  68.       String relayStateValue = relayState(i);
  69.       buttons+= "<h4>Relay #" + String(i) + " - GPIO " + relayGPIOs[i-1] + "</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"" + String(i) + "\" "+ relayStateValue +"><span class=\"slider\"></span></label>";
  70.     }
  71.     return buttons;
  72.   }
  73.   return String();
  74. }
  75.  
  76. String relayState(int numRelay){
  77.   if(RELAY_NO){
  78.     if(digitalRead(relayGPIOs[numRelay-1])){
  79.       return "";
  80.     }
  81.     else {
  82.       return "checked";
  83.     }
  84.   }
  85.   else {
  86.     if(digitalRead(relayGPIOs[numRelay-1])){
  87.       return "checked";
  88.     }
  89.     else {
  90.       return "";
  91.     }
  92.   }
  93.   return "";
  94. }
  95.  
  96. IPAddress local_IP(192, 168, 0, 202);    // here set the fixed IP on which the web server will run!
  97. IPAddress gateway(192, 168, 0, 1);
  98. IPAddress subnet(255, 255, 255, 0);
  99. IPAddress primaryDNS(193, 231, 236, 25);  
  100. IPAddress secondaryDNS(193, 231, 236, 30);
  101.  
  102.  
  103. void setup(){
  104.   // Serial port for debugging purposes
  105.   Serial.begin(115200);
  106.  
  107.   // Set all relays to off when the program starts - if set to Normally Open (NO), the relay is off when you set the relay to HIGH
  108.  
  109.   for(int i=1; i<=NUM_RELAYS; i++){
  110.     pinMode(relayGPIOs[i-1], OUTPUT);
  111.     if(RELAY_NO){
  112.       digitalWrite(relayGPIOs[i-1], HIGH);
  113.     }
  114.     else{
  115.       digitalWrite(relayGPIOs[i-1], LOW);
  116.     }
  117.   }
  118.  
  119.   // Connect to Wi-Fi
  120. if (!WiFi.config(local_IP, gateway, subnet, primaryDNS, secondaryDNS)) {
  121.     Serial.println("STA Failed to configure");
  122.   }
  123.   Serial.print("Connecting to ");
  124.   Serial.println(ssid);
  125.   WiFi.begin(ssid, password);
  126.   while (WiFi.status() != WL_CONNECTED) {
  127.     Serial.print(".");
  128.     delay(500);
  129.   }
  130.  
  131.   Serial.println(WiFi.localIP());
  132.  
  133.   // Route for root / web page
  134.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  135.     request->send_P(200, "text/html", index_html, processor);
  136.   });
  137.  
  138.   // Send a GET request to <ESP_IP>/update?relay=<inputMessage>&state=<inputMessage2>
  139.   server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
  140.     String inputMessage;
  141.     String inputParam;
  142.     String inputMessage2;
  143.     String inputParam2;
  144.     // GET input1 value on <ESP_IP>/update?relay=<inputMessage>
  145.     if (request->hasParam(PARAM_INPUT_1) & request->hasParam(PARAM_INPUT_2)) {
  146.       inputMessage = request->getParam(PARAM_INPUT_1)->value();
  147.       inputParam = PARAM_INPUT_1;
  148.       inputMessage2 = request->getParam(PARAM_INPUT_2)->value();
  149.       inputParam2 = PARAM_INPUT_2;
  150.       if(RELAY_NO){
  151.         Serial.print("NO ");
  152.         digitalWrite(relayGPIOs[inputMessage.toInt()-1], !inputMessage2.toInt());
  153.       }
  154.       else{
  155.         Serial.print("NC ");
  156.         digitalWrite(relayGPIOs[inputMessage.toInt()-1], inputMessage2.toInt());
  157.       }
  158.     }
  159.     else {
  160.       inputMessage = "No message sent";
  161.       inputParam = "none";
  162.     }
  163.     Serial.println(inputMessage + inputMessage2);
  164.     request->send(200, "text/plain", "OK");
  165.   });
  166.   // Start server
  167.   server.begin();
  168. }
  169.  
  170. void loop() {
  171.  
  172. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!