added js code

2021-04-26 12:28:04 +02:00
parent 7167ea1ae0
commit fb8bc31204
4 changed files with 175 additions and 25 deletions
--- a/ESPtermostat.ino
+++ b/ESPtermostat.ino
@@ -83,31 +83,39 @@ void setup() {
  }
  server.on("/set", HTTP_GET, [](AsyncWebServerRequest *request){
    //nutno nastavit maxima a minima
+
+    String repply;
+    
    if(THERMOSTAT){
      if (request->hasParam("increasereqtemp")) {
        reqTemp += request->getParam("increasereqtemp")->value().toFloat();
-        request->send(200, "text/plain; charset=utf-8", String(reqTemp));
+        repply = String(reqTemp);
      }else if (request->hasParam("decreasereqtemp")) {
        reqTemp -= request->getParam("decreasereqtemp")->value().toFloat();
-        request->send(200, "text/plain; charset=utf-8", String(reqTemp));
+        repply = String(reqTemp);
      }else if (request->hasParam("increaseoffset")) {
        offset += request->getParam("increaseoffset")->value().toFloat();
-        request->send(200, "text/plain; charset=utf-8", String(offset));
+        repply = String(offset);
      }else if (request->hasParam("decreaseoffset")) {
        offset -= request->getParam("decreaseoffset")->value().toFloat();
-        request->send(200, "text/plain; charset=utf-8", String(offset));
+        repply = String(offset);
      }else{
-        request->send(200, "text/plain; charset=utf-8", "no known parameter");
+        repply = "no known parameter";
      }
    }else{
      if (request->hasParam("relay")) {
        boolean state = request->getParam("relay")->value() == "1";
        digitalWrite(RELAY_PIN, state);
-        request->send(200, "text/plain; charset=utf-8", "success");
+        repply = "success";
      }else{
-        request->send(200, "text/plain; charset=utf-8", "no known parameter");
+        repply = "no known parameter";
      }
    }
+
+    AsyncWebServerResponse *response = request->beginResponse(200, "text/plain; charset=utf-8", repply);
+    response->addHeader("Access-Control-Allow-Origin", "*");
+    request->send(response);
+    //request->send(200, "text/plain; charset=utf-8", repply);
  });
  server.on("/get", HTTP_GET, [](AsyncWebServerRequest *request){
    //nutno vyřešit dotazy na více parametrů najednou
@@ -124,8 +132,11 @@ void setup() {
    }else{
      repply = "no known parameter";
    }
-    
-    request->send(200, "text/plain; charset=utf-8", repply);
+
+    AsyncWebServerResponse *response = request->beginResponse(200, "text/plain; charset=utf-8", repply);
+    response->addHeader("Access-Control-Allow-Origin", "*");
+    request->send(response);
+    //request->send(200, "text/plain; charset=utf-8", repply);
  });
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain; charset=utf-8", "ESP termostat, tady se bude posílat aplikace z flash paměti");
--- a/jsapp/img/topi.svg
+++ b/jsapp/img/topi.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="24px"
+   viewBox="0 0 24 24"
+   width="24px"
+   fill="#000000"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="topi.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1280"
+     inkscape:window-height="1007"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="7.618202"
+     inkscape:cy="12"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+     id="path4"
+     style="fill:#31b907;fill-opacity:1" />
+</svg>
--- a/jsapp/index.html
+++ b/jsapp/index.html
@@ -19,30 +19,105 @@
            </div>
            <div class="state">
                <span>Aktuální stav</span>
-                <div id="actual-state">
-                    Netopí
-                    <img src="img/netopi.svg" alt="Stav - netopí">
+                <div>
+                    <span id="actual-state">Netopí</span>
+                    <img id="actual-state-img" src="img/netopi.svg" alt="Stav - netopí">
                </div>
            </div>
        </header>
        <section>
            <h2>Požadovaná teplota</h2>
            <div class="inputs">
-                <img class="tempUp" src="img/arrow_up.svg" alt="Zvýšit požadovanou teplotu">
-                <div id="reqTemp">27.1</div>
-                <img class="tempDown" src="img/arrow_down.svg" alt="Snížit požadovanou teplotu">
+                <img id="tempUp" src="img/arrow_up.svg" alt="Zvýšit požadovanou teplotu">
+                <div id="reqTemp">0</div>
+                <img id="tempDown" src="img/arrow_down.svg" alt="Snížit požadovanou teplotu">
                <span>Offset</span>
-                <img class="offsetUp" src="img/arrow_up_offset.svg" alt="Zvýšit offset">
-                <div id="offset">0.3</div>
-                <img class="offsetDown" src="img/arrow_down_offset.svg" alt="Snížit offset">
+                <img id="offsetUp" src="img/arrow_up_offset.svg" alt="Zvýšit offset">
+                <div id="offset">0</div>
+                <img id="offsetDown" src="img/arrow_down_offset.svg" alt="Snížit offset">
            </div>
        </section>
        <footer>
            <h2>Aktuální teplota</h2>
-            <div id="temp">23,5</div>
+            <div id="temp">0</div>
            <div class="git"><a href="https://git.microlab.space/pixx/ESP8266-termostat">Git</a></div>
        </footer>
    </main>
+    <script>
+        var reqTempUp = document.getElementById("tempUp")
+        var reqTempDown = document.getElementById("tempDown")
+        var offsetUp = document.getElementById("offsetUp")
+        var offsetDown = document.getElementById("offsetDown")
+
+        reqTempUp.addEventListener("click", function () {
+            set("increasereqtemp", 0.1)
+        })
+        reqTempDown.addEventListener("click", function () {
+            set("increasereqtemp", -0.1)
+        })
+        offsetUp.addEventListener("click", function () {
+            set("increaseoffset", 0.05)
+        })
+        offsetDown.addEventListener("click", function () {
+            set("increaseoffset", -0.05)
+        })
+
+        function set(co, jak) {
+            var xhttp = new XMLHttpRequest();
+            xhttp.onreadystatechange = function () {
+                if (this.readyState == 4 && this.status == 200) {
+                    if (co == "increasereqtemp") {
+                        document.getElementById("reqTemp").innerHTML =
+                            this.responseText;
+                    } else if (co == "increaseoffset") {
+                        document.getElementById("offset").innerHTML =
+                            this.responseText;
+                    }
+                }
+            };
+            xhttp.open("GET", "http://10.22.128.209/set?" + co + "=" + jak, true);
+            xhttp.send();
+        }
+
+        function get(x, y) {
+            var xhttp = new XMLHttpRequest();
+            xhttp.onreadystatechange = function () {
+                if (this.readyState == 4 && this.status == 200) {
+                    if (x == "relay" && this.responseText == "1") {
+                        document.getElementById("actual-state").innerHTML =
+                            "Topí";
+                        document.getElementById("actual-state").classList.add("topi");
+                        document.getElementById("actual-state-img").src =
+                            "img/topi.svg"
+                    } else if (x == "relay" && this.responseText == "0") {
+                        document.getElementById("actual-state").innerHTML =
+                            "Netopí";
+                        document.getElementById("actual-state").classList.remove("topi");
+                        document.getElementById("actual-state-img").src =
+                            "img/netopi.svg"
+                    } else {
+                        document.getElementById(y).innerHTML =
+                            this.responseText;
+                    }
+
+                }
+            };
+            xhttp.open("GET", "http://10.22.128.209/get?" + x, true);
+            xhttp.send();
+        }
+        get("temp", "temp");
+        get("reqtemp", "reqTemp");
+        get("offset", "offset");
+        get("relay", "relay");
+
+        const interval = setInterval(function () {
+            get("temp", "temp");
+            get("reqtemp", "reqTemp");
+            get("offset", "offset");
+            get("relay", "relay");
+        }, 5000);
+
+    </script>
 </body>

 </html>
--- a/jsapp/style.css
+++ b/jsapp/style.css
@@ -1,6 +1,6 @@
@font-face {
  font-family: bebas;
-  src: url(BebasNeue-Regular.ttf);
+  src: url(font/BebasNeue-Regular.ttf);
 }

 body,
@@ -56,6 +56,9 @@ header {
  text-align: right;
  align-self: center;
 }
+#actual-state.topi {
+  color: #31B907;
+}
 #actual-state {
  color: #e10000;
 }
@@ -85,12 +88,12 @@ section h2 {
    ". tempDown offsetDown .";
 }

-.inputs .tempUp {
+.inputs #tempUp {
  grid-area: tempUp;
  height: 3.2rem;
 }

-.inputs .tempDown {
+.inputs #tempDown {
  grid-area: tempDown;
  height: 3.2rem;
 }
@@ -108,7 +111,7 @@ section h2 {
  margin-bottom: -2.5rem;
 }

-.inputs .offsetUp {
+.inputs #offsetUp {
  grid-area: offsetUp;
  height: 2.5rem;
  margin-bottom: -1.5rem;
@@ -120,7 +123,7 @@ section h2 {
  color: #9a9a9a;
 }

-.inputs .offsetDown {
+.inputs #offsetDown {
  grid-area: offsetDown;
  height: 2.5rem;
  margin-top: -1.5rem;
@@ -154,8 +157,9 @@ a {
  right: 0.3rem;
  text-decoration: none;
  font-size: 0.8rem;
+  color: #c1c1c1;
 }

 a:visited {
-  color: white;
+  color: #c1c1c1;
 }