added js code

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
@@ -125,7 +133,10 @@ void setup() {
       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");

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>

jsapp/index.html

@@ -19,30 +19,105 @@
             </div>
             <div class="state">
                 <span>Aktuální stav</span>
-                <div id="actual-state">
+                <div>
-                    Netopí
+                    <span id="actual-state">Netopí</span>
-                    <img src="img/netopi.svg" alt="Stav - netopí">
+                    <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">
+                <img id="tempUp" src="img/arrow_up.svg" alt="Zvýšit požadovanou teplotu">
-                <div id="reqTemp">27.1</div>
+                <div id="reqTemp">0</div>
-                <img class="tempDown" src="img/arrow_down.svg" alt="Snížit požadovanou teplotu">
+                <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">
+                <img id="offsetUp" src="img/arrow_up_offset.svg" alt="Zvýšit offset">
-                <div id="offset">0.3</div>
+                <div id="offset">0</div>
-                <img class="offsetDown" src="img/arrow_down_offset.svg" alt="Snížit offset">
+                <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>

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;
 }