metalx1000

ESP Relay Server using WifiManager

Apr 6th, 2021 (edited)
228
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. #include <WiFiManager.h> // https://github.com/tzapu/WiFiManager
  2. #include <ESP8266WebServer.h>
  3. ESP8266WebServer server(80);
  4.  
  5.  
  6. const int led = 13;
  7. const int strobe_pin = 2;
  8.  
  9. void handleRoot();
  10. void strobe_on();
  11.  
  12. void setup() {
  13.  
  14.   pinMode(led, OUTPUT);
  15.   pinMode(strobe_pin, OUTPUT);
  16.   digitalWrite(led, 0);
  17.   WiFi.mode(WIFI_STA); // explicitly set mode, esp defaults to STA+AP
  18.  
  19.   // put your setup code here, to run once:
  20.   Serial.begin(115200);
  21.  
  22.   // WiFi.mode(WiFi_STA); // it is a good practice to make sure your code sets wifi mode how you want it.
  23.  
  24.   //WiFiManager, Local intialization. Once its business is done, there is no need to keep it around
  25.   WiFiManager wm;
  26.  
  27.   //reset settings - wipe credentials for testing
  28.   //wm.resetSettings();
  29.  
  30.   // Automatically connect using saved credentials,
  31.   // if connection fails, it starts an access point with the specified name ( "AutoConnectAP"),
  32.   // if empty will auto generate SSID, if password is blank it will be anonymous AP (wm.autoConnect())
  33.   // then goes into a blocking loop awaiting configuration and will return success result
  34.  
  35.   bool res;
  36.   // res = wm.autoConnect(); // auto generated AP name from chipid
  37.   // res = wm.autoConnect("AutoConnectAP"); // anonymous ap
  38.   res = wm.autoConnect("AutoConnectAP", "password"); // password protected ap
  39.  
  40.   if (!res) {
  41.     Serial.println("Failed to connect");
  42.     // ESP.restart();
  43.   }
  44.   else {
  45.     //if you get here you have connected to the WiFi
  46.     Serial.println("connected...yeey :)");
  47.   }
  48.  
  49.   server.on("/", handleRoot);
  50.   server.on("/on", strobe_on);
  51.   server.on("/off", strobe_off);
  52.  
  53.   server.begin();
  54.   Serial.println("HTTP server started");
  55. }
  56.  
  57. void loop() {
  58.   // put your main code here, to run repeatedly:
  59.   server.handleClient();
  60. }
  61.  
  62. void handleRoot() {
  63.   digitalWrite(led, 1);
  64.  
  65.   const char MYHTML[]         PROGMEM = "<!DOCTYPE html>"
  66.                                         "<html lang='en'> \n"
  67.                                         "<head> \n"
  68.                                         "<title></title> \n"
  69.                                         "<meta charset='utf-8'> \n"
  70.                                         "<meta name='viewport' content='width=device-width, initial-scale=1'> \n"
  71.                                         "<style> \n"
  72.                                         "html *{ \n"
  73.                                         "font-size: 35px !important; \n"
  74.                                         "margin: 2px; \n"
  75.                                         "} \n"
  76.                                         "@media only screen and (min-width: 600px) { \n"
  77.                                         "body { \n"
  78.                                         "margin-right:200px; \n"
  79.                                         "margin-left:200px; \n"
  80.                                         "margin-top: 0; \n"
  81.                                         "} \n"
  82.                                         "} \n"
  83.                                         ".flex{ \n"
  84.                                         "display: grid; \n"
  85.                                         "grid-row-gap: 1rem; \n"
  86.                                         "grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); \n"
  87.                                         "} \n"
  88.                                         ".button-red { \n"
  89.                                         "box-shadow:inset 0px 1px 0px 0px #cf866c; \n"
  90.                                         "background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%); \n"
  91.                                         "background-color:#d0451b; \n"
  92.                                         "border-radius:3px; \n"
  93.                                         "border:1px solid #942911; \n"
  94.                                         "display:inline-block; \n"
  95.                                         "cursor:pointer; \n"
  96.                                         "color:#ffffff; \n"
  97.                                         "font-family:Arial; \n"
  98.                                         "font-size:13px; \n"
  99.                                         "padding:6px 24px; \n"
  100.                                         "text-decoration:none; \n"
  101.                                         "text-shadow:0px 1px 0px #854629; \n"
  102.                                         "text-align:center; \n"
  103.                                         "} \n"
  104.                                         ".button-red:hover { \n"
  105.                                         "background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%); \n"
  106.                                         "background-color:#bc3315; \n"
  107.                                         "} \n"
  108.                                         ".button-red:active { \n"
  109.                                         "position:relative; \n"
  110.                                         "top:1px; \n"
  111.                                         "} \n"
  112.                                         ".button { \n"
  113.                                         "box-shadow:inset 0px 1px 0px 0px #54a3f7; \n"
  114.                                         "background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%); \n"
  115.                                         "background-color:#007dc1; \n"
  116.                                         "border-radius:3px; \n"
  117.                                         "border:1px solid #124d77; \n"
  118.                                         "display:inline-block; \n"
  119.                                         "cursor:pointer; \n"
  120.                                         "color:#ffffff; \n"
  121.                                         "font-family:Arial; \n"
  122.                                         "font-size:13px; \n"
  123.                                         "padding:6px 24px; \n"
  124.                                         "text-decoration:none; \n"
  125.                                         "text-shadow:0px 1px 0px #154682; \n"
  126.                                         "} \n"
  127.                                         ".button:hover { \n"
  128.                                         "background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%); \n"
  129.                                         "background-color:#0061a7; \n"
  130.                                         "} \n"
  131.                                         ".button:active { \n"
  132.                                         "position:relative; \n"
  133.                                         "top:1px; \n"
  134.                                         "} \n"
  135.                                         "</style> \n"
  136.                                         "<script> \n"
  137.                                         "document.addEventListener('DOMContentLoaded', function(){ \n"
  138.                                         "}); \n"
  139.                                         "function get(url, success) { \n"
  140.                                         "var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); \n"
  141.                                         "xhr.open('GET', url); \n"
  142.                                         "xhr.onreadystatechange = function() { \n"
  143.                                         "if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText); \n"
  144.                                         "}; \n"
  145.                                         "xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); \n"
  146.                                         "xhr.send(); \n"
  147.                                         "return xhr; \n"
  148.                                         "} \n"
  149.                                         "function strobe_off(){ \n"
  150.                                         "// example request \n"
  151.                                         "get('off', function(data){ \n"
  152.                                         "console.log(data); \n"
  153.                                         "}); \n"
  154.                                         "} \n"
  155.                                         "function strobe_on(){ \n"
  156.                                         "// example request \n"
  157.                                         "get('on', function(data){ \n"
  158.                                         "console.log(data); \n"
  159.                                         "}); \n"
  160.                                         "} \n"
  161.                                         "</script> \n"
  162.                                         "</head> \n"
  163.                                         "<body> \n"
  164.                                         "<div class='flex'> \n"
  165.                                         "<button onclick='strobe_on()' class='button'>On</button> \n"
  166.                                         "<button onclick='strobe_off()' class='button-red'>Off</button> \n"
  167.                                         "</div> \n"
  168.                                         "</body> \n"
  169.                                         "</html> \n";
  170.  
  171.   server.send(200, "text/html", MYHTML);
  172.   digitalWrite(led, 0);
  173. }
  174.  
  175. void strobe_on() {
  176.   digitalWrite(strobe_pin, 1);
  177.   server.send(200, "text/plain", "stobe on");
  178. }
  179.  
  180. void strobe_off() {
  181.   digitalWrite(strobe_pin, 0);
  182.   server.send(200, "text/plain", "stobe off");
  183. }
RAW Paste Data