Greenhouse: door, windows, light

data/Greenhouse/http/favicon.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
+<?xml version="1.0" encoding="UTF-8"?>
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
   <polygon style="fill:#C8DB86;" points="503.83,172.381 435.647,172.381 283.648,59.589 351.831,59.589 "/>
   <polygon style="fill:#D4ED85;" points="305.435,59.589 457.434,172.381 312.178,172.381 160.169,59.589 "/>

data/Greenhouse/http/index.html

@@ -8,7 +8,7 @@
   <style>
     body {
       font-family: sans-serif;
-      font-size: 12vw;
+      font-size: 8vw;
       margin: 0;
       -webkit-user-select: none;
       -ms-user-select: none;
@@ -50,6 +50,11 @@
       float: left;
     }
 
+    img {
+      height: 1.5em;
+      vertical-align: middle;
+    }
+
     .unit {
       float: left;
       margin-left: 0.25em;
@@ -64,11 +69,11 @@
       color: blue;
     }
 
-    .inputGreen {
+    .inputGreen, #lightOn {
       color: #00ff00;
     }
 
-    .inputRed {
+    .inputRed, #lightOff {
       color: #ba0000;
     }
 
@@ -111,10 +116,39 @@
       </div>
     </div>
 
+    <div class="section">
+      <div class="title">Tür</div>
+      <div class="valueAndUnit">
+        <div class="value" id="door"></div>
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="title">Fenster</div>
+      <div class="valueAndUnit">
+        <div class="value" id="windows"></div>
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="title">Licht</div>
+      <div class="valueAndUnit">
+        <span id="lightUnknown">?</span>
+        <div id="lightOn">
+          Ein
+          <img alt="Ein" src="on.svg" onclick="get('/light/off')">
+        </div>
+        <div id="lightOff">
+          Aus
+          <img alt="Aus" src="off.svg" onclick="get('/light/on')">
+        </div>
+      </div>
+    </div>
+
   </div>
 
   <script>
-    const NO_VALUE = "- - -";
+    const NO_VALUE = "?";
     
     const TEMPERATURE_BLUE = 10;
     const TEMPERATURE_RED = 35;
@@ -126,6 +160,11 @@
     const htmlRelative = document.getElementById('relative');
     const htmlAbsolute = document.getElementById('absolute');
     const htmlIlluminance = document.getElementById('illuminance');
+    const htmlDoor = document.getElementById('door');
+    const htmlWindows = document.getElementById('windows');
+    const htmlLightOn = document.getElementById('lightOn');
+    const htmlLightOff = document.getElementById('lightOff');
+    const htmlLightUnknown = document.getElementById('lightUnknown');
     
     function status() {
       get("/status");
@@ -154,6 +193,22 @@
         htmlAbsolute.innerText = format(data?.absolute, 1) || NO_VALUE;
         htmlIlluminance.innerText = format(data?.illuminance, 0) || NO_VALUE;
         
+        const doorClosed = data?.door === true;
+        const doorOpened = data?.door === false;
+        htmlDoor.innerText = doorClosed ? 'Geschlosssen' : doorOpened ? 'Offen' : NO_VALUE;
+        setClass(htmlDoor.parentElement, "inputRed", doorOpened);
+        setClass(htmlDoor.parentElement, "inputGreen", doorClosed);
+        
+        const windowsClosed = data?.windows === true;
+        const windowsOpened = data?.windows === false;
+        htmlWindows.innerText = windowsClosed ? 'Geschlosssen' : windowsOpened ? 'Offen' : NO_VALUE;
+        setClass(htmlWindows.parentElement, "inputRed", windowsOpened);
+        setClass(htmlWindows.parentElement, "inputGreen", windowsClosed);
+        
+        htmlLightOn.style.display = data?.light === true ? 'block' : 'none';
+        htmlLightOff.style.display = data?.light === false ? 'block' : 'none';
+        htmlLightUnknown.style.display = data?.light !== false && data?.light !== true ? 'block' : 'none';
+        
         const relativeNull = !isSet(data?.relative);
         const relativeBlue = !relativeNull && data?.relative < RELATIVE_BLUE;
         const relativeRed = !relativeNull && data?.relative > RELATIVE_RED;
@@ -186,6 +241,11 @@
       htmlRelative.innerText = NO_VALUE;
       htmlAbsolute.innerText = NO_VALUE;
       htmlIlluminance.innerText = NO_VALUE;
+      htmlDoor.innerText = NO_VALUE;
+      htmlWindows.innerText = NO_VALUE;
+      htmlLightOn.style.display = 'none';
+      htmlLightOff.style.display = 'none';
+      htmlLightUnknown.style.display = 'block';
     }
     
     /**

data/Greenhouse/http/off.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(0 -1028.4)">
+    <path d="m7 1034.4c-3.3137 0-6 2.6-6 6 0 3.3 2.6863 6 6 6h5 5c3.314 0 6-2.7 6-6 0-3.4-2.686-6-6-6h-5-5z" fill="#95a5a6"/>
+    <path d="m7 1033.4c-3.3137 0-6 2.6-6 6 0 3.3 2.6863 6 6 6h5 5c3.314 0 6-2.7 6-6 0-3.4-2.686-6-6-6h-5-5z" fill="#bdc3c7"/>
+    <path d="m7 1035.4c-2.2091 0-4 1.8-4 4s1.7909 4 4 4h5 5c2.209 0 4-1.8 4-4s-1.791-4-4-4h-5-5z" fill="#e74c3c"/>
+    <path d="m7 1035.4c-2.2091 0-4 1.8-4 4 0 0.1 0.0419 0.3 0.0625 0.5 0.2471-2 1.8985-3.5 3.9375-3.5h5 5c2.039 0 3.69 1.5 3.938 3.5 0.02-0.2 0.062-0.4 0.062-0.5 0-2.2-1.791-4-4-4h-5-5z" fill="#c0392b"/>
+    <g transform="translate(-11.5,-11.4)">
+      <g transform="translate(10.5,10.4)">
+        <path d="m13.023 1039.7-0.023 1.2c-0.04 1.9 1.567 3.5 3.5 3.5h1.5c2.209 0 4-1.8 4-4 0-0.4-0.074-0.7-0.156-1z" fill="#7f8c8d"/>
+        <path d="m16.5 1036.4c-1.933 0-3.5 1.5-3.5 3.5 0 1.9 1.567 3.5 3.5 3.5h2c1.933 0 3.5-1.6 3.5-3.5 0-2-1.567-3.5-3.5-3.5h-2z" fill="#ecf0f1"/>
+        <g fill="#bdc3c7">
+          <path d="m15.5 1037.4c-0.276 0-0.5 0.1-0.5 0.4v3.2c0 0.2 0.224 0.4 0.5 0.4s0.5-0.2 0.5-0.4v-3.2c0-0.3-0.224-0.4-0.5-0.4z"/>
+          <path d="m17.5 1037.4c-0.276 0-0.5 0.1-0.5 0.4v3.2c0 0.2 0.224 0.4 0.5 0.4s0.5-0.2 0.5-0.4v-3.2c0-0.3-0.224-0.4-0.5-0.4z"/>
+          <path d="m19.5 1037.4c-0.276 0-0.5 0.1-0.5 0.4v3.2c0 0.2 0.224 0.4 0.5 0.4s0.5-0.2 0.5-0.4v-3.2c0-0.3-0.224-0.4-0.5-0.4z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

data/Greenhouse/http/on.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(0 -1028.4)">
+    <path d="m17 1034.4c3.314 0 6 2.6 6 6 0 3.3-2.686 6-6 6h-5-5c-3.3137 0-6-2.7-6-6 0-3.4 2.6863-6 6-6h5 5z" fill="#95a5a6"/>
+    <path d="m17 1033.4c3.314 0 6 2.6 6 6 0 3.3-2.686 6-6 6h-5-5c-3.3137 0-6-2.7-6-6 0-3.4 2.6863-6 6-6h5 5z" fill="#bdc3c7"/>
+    <path d="m17 1035.4c2.209 0 4 1.8 4 4s-1.791 4-4 4h-5-5c-2.2091 0-4-1.8-4-4s1.7909-4 4-4h5 5z" fill="#2ecc71"/>
+    <path d="m17 1035.4c2.209 0 4 1.8 4 4 0 0.1-0.042 0.3-0.062 0.5-0.248-2-1.899-3.5-3.938-3.5h-5-5c-2.039 0-3.6904 1.5-3.9375 3.5-0.0206-0.2-0.0625-0.4-0.0625-0.5 0-2.2 1.7909-4 4-4h5 5z" fill="#27ae60"/>
+    <g transform="matrix(-1,0,0,1,35.5,-11.4)">
+      <g transform="translate(10.5,10.4)">
+        <path d="m13.023 1039.7-0.023 1.2c-0.04 1.9 1.567 3.5 3.5 3.5h1.5c2.209 0 4-1.8 4-4 0-0.4-0.074-0.7-0.156-1z" fill="#7f8c8d"/>
+        <path d="m16.5 1036.4c-1.933 0-3.5 1.5-3.5 3.5 0 1.9 1.567 3.5 3.5 3.5h2c1.933 0 3.5-1.6 3.5-3.5 0-2-1.567-3.5-3.5-3.5h-2z" fill="#ecf0f1"/>
+        <g fill="#bdc3c7">
+          <path d="m15.5 1037.4c-0.276 0-0.5 0.1-0.5 0.4v3.2c0 0.2 0.224 0.4 0.5 0.4s0.5-0.2 0.5-0.4v-3.2c0-0.3-0.224-0.4-0.5-0.4z"/>
+          <path d="m17.5 1037.4c-0.276 0-0.5 0.1-0.5 0.4v3.2c0 0.2 0.224 0.4 0.5 0.4s0.5-0.2 0.5-0.4v-3.2c0-0.3-0.224-0.4-0.5-0.4z"/>
+          <path d="m19.5 1037.4c-0.276 0-0.5 0.1-0.5 0.4v3.2c0 0.2 0.224 0.4 0.5 0.4s0.5-0.2 0.5-0.4v-3.2c0-0.3-0.224-0.4-0.5-0.4z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

src/node/Greenhouse/http.cpp

@@ -6,20 +6,37 @@
 #include "sensors.h"
 #include "../../patrix/mqtt.h"
 
+bool light = false;
+
 void httpStatus(AsyncWebServerRequest* request) {
   JsonDocument json;
   json["illuminance"] = greenhouseTSL.getIlluminance();;
   json["temperature"] = greenhouseDHT22.getTemperature();
   json["relative"] = greenhouseDHT22.getRelative();
   json["absolute"] = greenhouseDHT22.getAbsolute();
+  json["door"] = false;
+  json["windows"] = false;
+  json["light"] = light;
 
   AsyncResponseStream* stream = request->beginResponseStream("application/json");
   serializeJson(json, *stream);
   request->send(stream);
 }
 
+void httpLightOn(AsyncWebServerRequest* request) {
+  light = true;
+  httpStatus(request);
+}
+
+void httpLightOff(AsyncWebServerRequest* request) {
+  light = false;
+  httpStatus(request);
+}
+
 void httpSetup2() {
   server.on("/status", httpStatus);
+  server.on("/light/on", httpLightOn);
+  server.on("/light/off", httpLightOff);
 }
 
 #endif