Merge branch 'webinterface2.0' into 'main'

Webinterface2.0

See merge request !13

static/index.js

@@ -114,10 +114,31 @@ setInterval(() => {
 
 
 // // PopUp-Fenster
+// PAR-PopUp
 function showPopUp() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
 }
+// EC-Wert PopUp
+function showPopUp2() {
+  var popup = document.getElementById("myPopup2");
+  popup.classList.toggle("show");
+}
+// pH-Wert PopUp
+function showPopUp3() {
+  var popup = document.getElementById("myPopup3");
+  popup.classList.toggle("show");
+}
+// Luftfeuchtigkeit PopUp
+function showPopUp4() {
+  var popup = document.getElementById("myPopup4");
+  popup.classList.toggle("show");
+}
+// Temperatur PopUp
+function showPopUp5() {
+  var popup = document.getElementById("myPopup5");
+  popup.classList.toggle("show");
+}
 
 // //Pop-up Zeitschaltung
 // /*

static/style.css

@@ -130,13 +130,15 @@ table {
     border-radius: 10px;
 }
 .left { 
+    margin-left: 10%;
     float: left; 
-    width: 400px; 
+    width: 20%; 
     height: 100%; 
 }
-.right {
-    float: right;
-    width: 400px;
+.left2 {
+    margin-left: 10%;
+    float: left;
+    width: 20%;
     height: 100%;
 }
 

templates/index.html

@@ -25,10 +25,12 @@
       <h1 style="margin-left: 200px; margin-right: 200px"><font size="5">Viel Freude beim Wachsen!</font></h1>
 
       </br></br></br></br></br></br>
+     
       <!--MESSWERTE-->
       <h2 style="margin-left: 200px;"><font size="6">aktuelle Werte:</font></h2>
+      <div class="left2">
       <!--PAR-Wert-->
-      <table style="float: right; margin-right: 200px; width: 20%; background-color: white; color: black">
+      <table style=" background-color: white; color: black">
          <tr>
              <td>
                  <img src="../static/par_wert.png" style="width:90px; height: auto">
@@ -36,12 +38,37 @@
              <td><font size="6">
                  <b>PAR-Wert </b>
                  <br />
-                 <div id="par-val"> 600nm</div>
+                 <div id="par-val"> -1nm</div>
              </font></td>
          </tr>
+         <tr style="color: lightgray">
+            <!--Empfehlung-->
+            <td colspan="2"; style="text-align: center"><font size="4">
+                &nbsp;optimaler Wert liegt zwischen 400-700µmol/m²/s.
+            </font></td>
+            <!--Question mark button-->
+            <td>
+                 <div><button class="in-circle popup" onclick="showPopUp()" style="margin-right: 10px">
+                     <b>
+                         ?
+                         <span class="popuptext" id="myPopup" style="width: 500px; text-align: justify; padding: 25px; margin-left: -250px;">
+                             <font size="2">
+                                 Der PAR-Wert gibt an, wie viel lichtenergetisch aktive Strahlung vorhanden ist.
+                                 Ein ausgewogener PAR-Wert gewährleistet eine geeignete Lichtmenge für bestimmte Prozesse.
+                                 </br></br>
+                                 Der PAR-Wert beeinflusst das Wachstum und die Fruchtbildung der Pflanze, da sie ausreichend
+                                 lichtenergetische Strahlung für die Photosynthese und die Energiegewinnung benötigt.
+                             </font>
+                         </span>
+                     </b>
+                 </button></div>
+            </td>
+        </tr>
       </table>
+    </div> 
       <!--EC-Wert-->
-      <table style="float: right; margin-right: 100px; margin-left: 100px; width: 20%; background-color: white; color: black">
+    <div class="left2">
+      <table style="background-color: white; color: black">
          <tr>
              <td>
                  <img src="../static/ec_wert.png" style="width:90px; height: auto">
@@ -49,12 +76,37 @@
              <td><font size="6">
                  <b>EC-Wert </b>
                  <br />
-                 <div id="ec-val"> 1.4 </div>
+                 <div id="ec-val"> -1 </div>
              </font></td>
          </tr>
+         <tr style="color: lightgray">
+            <!--Empfehlung-->
+            <td colspan="2"; style="text-align: center"><font size="4">
+                optimaler Wert liegt zwischen 1.5-2.2mS/cm
+            </font></td>
+            <!--Question mark button-->
+            <td>
+                 <div><button class="in-circle popup" onclick="showPopUp2()" style="margin-right: 10px">
+                     <b>
+                         ?
+                         <span class="popuptext" id="myPopup2" style="width: 500px; text-align: justify; padding: 25px; margin-left: -250px;">
+                             <font size="2">
+                                 Der EC-Wert misst die elektrische Leitfähigkeit einer Lösung und gibt Auskunft über
+                                 den Gehalt an gelösten Mineralstoffen.
+                                 </br></br>
+                                 Ein angepasster EC-Wert im Substrat gewährleistet eine optimale Nährstoffaufnahme und
+                                 verhindert mögliche Über- oder Unterdüngung, was das gesunde Wachstum der Pflanze fördert.
+                             </font>
+                         </span>
+                     </b>
+                 </button></div>
+            </td>
+        </tr>
       </table>
+    </div>
       <!--pH-Wert-->
-      <table style="margin-left: 200px; width: 20%; background-color: white; color: black">
+    <div class="left">
+      <table style="background-color: white; color: black">
          <tr>
              <td>
                  <img src="../static/ph_wert.png" style="width:90px; height: auto">
@@ -62,20 +114,20 @@
              <td><font size="6">
                  <b>pH-Wert </b>
                  <br/>
-                 <div id="ph-val"> 6.0 </div>
+                 <div id="ph-val"> -1 </div>
              </font></td>
          </tr>
           <tr style="color: lightgray">
               <!--Empfehlung-->
               <td colspan="2"; style="text-align: center"><font size="4">
-                  &nbsp;optimaler Wert ist zwischen 5.5 und 6.5
+                  &nbsp;optimaler Wert liegt zwischen 5.5-7.0
               </font></td>
               <!--Question mark button-->
               <td>
-                   <div><button class="in-circle popup" onclick="showPopUp()" style="margin-right: 10px">
+                   <div><button class="in-circle popup" onclick="showPopUp3()" style="margin-right: 10px">
                        <b>
                            ?
-                           <span class="popuptext" id="myPopup" style="width: 500px; text-align: justify; padding: 25px; margin-left: -250px;">
+                           <span class="popuptext" id="myPopup3" style="width: 500px; text-align: justify; padding: 25px; margin-left: -250px;">
                                <font size="2">
                                    Der pH-Wert misst auf einer Skala von 0 bis 14, wie sauer (0) oder basisch (14) eine wässrige Lösung ist.
                                    Dabei gilt Wasser mit einem pH-Wert von 7 als neutral.
@@ -90,10 +142,10 @@
               </td>
           </tr>
       </table>
-
-      </br></br>
+    </div>  
       <!--Luftfeuchtigkeit-->
-      <table style="float: right; margin-right: 400px; margin-left: 100px; width: 24%; background-color: white; color: black">
+      <div class="left">
+          <table style=" background-color: white; color: black">
          <tr>
              <td>
                  <img src="../static/luftfeuchtigkeit.png" style="width:90px; height: auto">
@@ -101,12 +153,36 @@
              <td><font size="6">
                  <b>Luftfeuchtigkeit </b>
                  <br />
-                 <div id="hum-val"> 50%</div>
+                 <div id="hum-val"> -1%</div>
              </font></td>
          </tr>
+         <tr style="color: lightgray">
+            <!--Empfehlung-->
+            <td colspan="2"; style="text-align: center"><font size="4">
+                optimaler Wert liegt zwischen 60%-85%
+            </font></td>
+            <!--Question mark button-->
+            <td>
+                 <div><button class="in-circle popup" onclick="showPopUp4()" style="margin-right: 10px">
+                     <b>
+                         ?
+                         <span class="popuptext" id="myPopup4" style="width: 500px; text-align: justify; padding: 25px; margin-left: -250px;">
+                             <font size="2">
+                                 Die Luftfeuchtigkeit misst den Feuchtigkeitsgehalt in der Luft. Ein optimaler
+                                 Feuchtigkeitsbereich schafft ein ausgewogenes Raumklima.
+                                 </br></br>
+                                 Eine angemessene Luftfeuchtigkeit fördert das Wachstum und die Gesundheit der Pflanze,
+                                 indem sie Pilzkrankheiten vorbeugt und das Austrocknen der Blätter verhindert.
+                             </font>
+                         </span>
+                     </b>
+                 </button></div>
+            </td>
+        </tr>
       </table>
+    </div>
       <!--Temperatur-Wert-->
-      <table style="margin-left: 200px; width: 20%; background-color: white; color: black">
+      <div class="left"><table style="  background-color: white; color: black">
          <tr>
              <td>
                  <img src="../static/temperatur.png" style="width:90px; height: auto; margin-right: 15px">
@@ -114,10 +190,33 @@
              <td><font size="6">
                  <b>Temperatur </b>
                  <br />
-                 <div id = "temp-val"> 21&deg;C </div> 
+                 <div id = "temp-val"> E&deg;C </div> 
              </font></td>
          </tr>
-      </table>
+         <tr style="color: lightgray">
+            <!--Empfehlung-->
+            <td colspan="2"; style="text-align: center"><font size="4">
+                &nbsp;optimaler Wert liegt zwischen 18-26°C
+            </font></td>
+            <!--Question mark button-->
+            <td>
+                 <div><button class="in-circle popup" onclick="showPopUp5()" style="margin-right: 10px">
+                     <b>
+                         ?
+                         <span class="popuptext" id="myPopup5" style="width: 500px; text-align: justify; padding: 25px; margin-left: -250px;">
+                             <font size="2">
+                                 Die Temperatur bezieht sich auf die Wärme in der Umgebung. Ein optimaler Temperaturbereich
+                                 sorgt für ein angenehmes Klima.
+                                 </br></br>
+                                 Eine geeignete Temperatur ermöglicht ein gesundes Wachstum und verhindert sowohl
+                                 Hitzestress als auch Verlangsamung des Wachstums.
+                             </font>
+                         </span>
+                     </b>
+                 </button></div>
+            </td>
+        </tr>
+      </table></div>
 
       <!--<h3 style="margin-left: 200px"><font size="6">Steuerung:</font></h3>