Frontend with some changes

2024-03-25 03:29:53 +01:00
parent a9ed2ae8c8
commit 2edc0c6189
3 changed files with 161 additions and 29 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1 @@
+#ESP8266 ArduinoIDE  
--- a/webserver/index.html
+++ b/webserver/index.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <script>
+
+        const action = (url) => {
+            fetch("http://192.168.0.31/" + url, { method: "post" })
+                .then((response) => console.log(response))
+                .catch((err) => console.error(err));
+        }
+
+        window.onload = (event) => {
+            document.querySelector("input.switch1").onclick = (e) => action(e.currentTarget.checked ? "switch1on" : "switch1off");
+            document.querySelector("input.switch2").onclick = (e) => action(e.currentTarget.checked ? "switch2on" : "switch2off");
+        }
+
+    </script>
+    <style>
+        * {
+            margin: 0;
+        }
+
+        body {
+            background-color: #f1f1f1;
+        }
+
+        .container {
+            width: calc(100% - 20px);
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 30px 25px;
+            box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
+            min-height: 100vh;
+            background-color: #f5f5f5;
+        }
+
+        h1 {
+            margin-bottom: 30px;
+        }
+
+        .switch-wrap {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 30px;
+        }
+
+        .switch {
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 34px;
+        }
+
+        /* Hide default HTML checkbox */
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        /* The slider */
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            -webkit-transition: .4s;
+            transition: .4s;
+        }
+
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 26px;
+            width: 26px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            -webkit-transition: .4s;
+            transition: .4s;
+        }
+
+        input:checked+.slider {
+            background-color: #2196F3;
+        }
+
+        input:focus+.slider {
+            box-shadow: 0 0 1px #2196F3;
+        }
+
+        input:checked+.slider:before {
+            -webkit-transform: translateX(26px);
+            -ms-transform: translateX(26px);
+            transform: translateX(26px);
+        }
+
+        /* Rounded sliders */
+        .slider.round {
+            border-radius: 34px;
+        }
+
+        .slider.round:before {
+            border-radius: 50%;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <section>
+            <h1>Switches</h1>
+            <div class="switch-wrap">
+                <label>Switch1</label>
+                <label class="switch">
+                    <input type="checkbox" class="switch1" />
+                    <span class="slider round"></span>
+                </label>
+            </div>
+            <div class="switch-wrap">
+                <label>Switch2</label>
+                <label class="switch">
+                    <input type="checkbox" class="switch2" />
+                    <span class="slider round"></span>
+                </label>
+        </section>
+    </div>
+    </div>
+</body>
+
+</html>
--- a/webserver/webserver.ino
+++ b/webserver/webserver.ino
@@ -1,70 +1,66 @@
-#include <ESP8266WiFi.h>
 #include <ESP8266WebServer.h>
+#include <ESP8266WiFi.h>

 #ifdef ESP32
-#pragma message(THIS EXAMPLE IS FOR ESP8266 ONLY!)
+#pragma message(THIS EXAMPLE IS FOR ESP8266 ONLY !)
 #error Select ESP8266 board.
 #endif

 ESP8266WebServer server(80); // 80 is the port number

-const char* ssid = "Decentrala";
-const char* password = "";
+const char *ssid = "Decentrala";
+const char *password = "";

+String resSwitch1On = "Switch1 is On", resSwitch1Off = "Switch1 is Off",
+       resSwitch2On = "Switch2 is On", resSwitch2Off = "Switch2 is Off";

-String ledon,ledoff,led1on,led1off;
-
-void Redon()
-{
+void switch1On() {
  digitalWrite(4, HIGH);
-  server.send(200, "text/html", ledon);
+  server.send(200, "text/html", resSwitch1On);
 }

-void Redoff()
-{
+void switch1Off() {
  digitalWrite(4, LOW);
-  server.send(200, "text/html", ledoff);
+  server.send(200, "text/html", resSwitch1Off);
 }

-void violeton()
-{
+void switch2On() {
  digitalWrite(14, HIGH);
-  server.send(200, "text/html", led1on);
+  server.send(200, "text/html", resSwitch2On);
 }

-void violetoff()
-{
+void switch2Off() {
  digitalWrite(14, LOW);
-  server.send(200, "text/html", led1off);
+  server.send(200, "text/html", resSwitch2Off);
 }

 void setup() {

-  Serial.begin(115200);
+  Serial.begin(74880);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);

-  while (WiFi.status() != WL_CONNECTED)delay(500);
+  while (WiFi.status() != WL_CONNECTED)
+    delay(500);

  Serial.print(WiFi.localIP());

-  server.on("/led1on", Redon);
-  server.on("/led1off", Redoff);
-  server.on("/led2on", violeton);
-  server.on("/led2off", violetoff);
+  server.on("/switch1on", switch1On);
+  server.on("/switch1off", switch1Off);
+  server.on("/switch2on", switch2On);
+  server.on("/switch2off", switch2Off);

+  server.enableCORS(true);
  server.begin();

-  pinMode(14, OUTPUT);//D5
-  pinMode(4, OUTPUT);//D2
+  pinMode(14, OUTPUT); // D5
+  pinMode(4, OUTPUT);  // D2

  digitalWrite(14, LOW);
  digitalWrite(4, LOW);
-
 }

-void loop()
-{
+void loop() {
  server.handleClient();
  delay(1);
 }