API tools faq
paste
metalx1000

ESP Relay Server using WifiManager

metalx1000
Apr 6th, 2021 (edited)
935
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Arduino 9.01 KB | None | 0 0
raw download clone embed print report
  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. }
Add Comment
Please, Sign In to add comment
Public Pastes
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!