added whole lots more photos to giessomat

input/projects/giessomat.md

 position: 6
 github: https://git.xythobuz.de/thomas/giess-o-mat
 date: 2021-03-29
-update: 2021-04-25
+update: 2021-04-27
 ---
 
 Since moving into my own flat in 2019 I started growing quite a bunch of plants.
 
 So it seemed natural to build a machine that can help me with watering the plants and mixing in some fertilizer solution into the water once in a while.
 
+<div class="lightgallery">
+    <a href="img/giessomat_1.jpg">
+        <img src="img/giessomat_1_small.jpg" alt="Front of the UI unit">
+    </a>
+    <a href="img/giessomat_3.jpg">
+        <img src="img/giessomat_3_small.jpg" alt="Side view of the machine">
+    </a>
+</div>
+
 ## Overview
 
 The machine consists of a 5l watertank.
 
 (I'm a software developer by trade, so I'm relatively confident the software works, but I don't trust my plumbing skills too much...) 😊
 
+<div class="lightgallery">
+    <a href="img/giessomat_web.png">
+        <img src="img/giessomat_web_small.png" alt="Screenshot of the web interface">
+    </a>
+</div>
+
 ## Implementation
 
 The machine is using two microcontrollers, an [Arduino Nano clone](https://amzn.to/3sQ4Otl) and an [ESP32](https://amzn.to/3xmDh6k).
 All this is mounted in a simple 3D-printed frontpanel.
 
 <div class="lightgallery">
-    <a href="img/giessomat_1.jpg">
-        <img src="img/giessomat_1_small.jpg" alt="Front of the UI unit">
-    </a>
     <a href="img/giessomat_2.jpg">
         <img src="img/giessomat_2_small.jpg" alt="Back of the UI unit">
     </a>
+    <a href="img/giessomat_6.jpg">
+        <img src="img/giessomat_6_small.jpg" alt="Front of UI PCB">
+    </a>
+    <a href="img/giessomat_7.jpg">
+        <img src="img/giessomat_7_small.jpg" alt="Back of UI PCB">
+    </a>
 </div>
 
 The actual control is done on an ESP32 which is connected to two [4-channel relais boards](https://amzn.to/2QW0Sty).
 Two float switches are used to tell the fill-height of the water tank.
 The ESP32 also provides a simple web interface to allow the same controls as from the user interface.
 
-<div class="lightgallery">
-    <a href="img/giessomat_web.png">
-        <img src="img/giessomat_web_small.png" alt="Screenshot of the web interface">
-    </a>
-</div>
-
 Both UI and controller are connected to each other using I2C.
 All relevant signals are transmitted with a simple DB-9 cable.
 
 The water tank is realized using a generic 5l liquid tank, with two holes drilled for the fill switches. The holders for the fertilizer bottles, as well as the bottlecaps, are specifically designed to fit my 1l fertilizer bottles.
 
 <div class="lightgallery">
-    <a href="img/giessomat_3.jpg">
-        <img src="img/giessomat_3_small.jpg" alt="Side view of the machine">
-    </a>
     <a href="img/giessomat_4.jpg">
         <img src="img/giessomat_4_small.jpg" alt="Top view of the machine">
     </a>
+    <a href="img/giessomat_14.jpg">
+        <img src="img/giessomat_14_small.jpg" alt="Front of controller PCB">
+    </a>
+    <a href="img/giessomat_15.jpg">
+        <img src="img/giessomat_15_small.jpg" alt="Back of controller PCB">
+    </a>
 </div>
 
 Most of the parts I had lying around in the workshop.
 Also the pumps, hoses and hose-adapters had to be bought.
 
 <div class="lightgallery">
+    <a href="img/giessomat_8.jpg">
+        <img src="img/giessomat_8_small.jpg" alt="Front of switch PCB">
+    </a>
+    <a href="img/giessomat_9.jpg">
+        <img src="img/giessomat_9_small.jpg" alt="Back of switch PCB">
+    </a>
+    <a href="img/giessomat_16.jpg">
+        <img src="img/giessomat_16_small.jpg" alt="Front of valve PCB">
+    </a>
+    <a href="img/giessomat_17.jpg">
+        <img src="img/giessomat_17_small.jpg" alt="Back of valve PCB">
+    </a>
     <a href="img/giessomat_5.jpg">
         <img src="img/giessomat_5_small.jpg" alt="Float switch and valve used">
     </a>
+    <a href="img/giessomat_12.jpg">
+        <img src="img/giessomat_12_small.jpg" alt="Front of pump">
+    </a>
+    <a href="img/giessomat_13.jpg">
+        <img src="img/giessomat_13_small.jpg" alt="Back of pump">
+    </a>
 </div>
 
 The software can easily be configured to run with more or less fertilizers and outlets, as much as the ESP32 GPIOs can provide.
 Doing some programming, it would also be possible to use some kind of port-extender or run also the UI on an ESP.
 And of course also the now-obsolete SerialLCD could be replaced with something different without too much work.
 
+<div class="lightgallery">
+    <a href="img/giessomat_10.jpg">
+        <img src="img/giessomat_10_small.jpg" alt="Interconnect PCB and debug power switch, front side">
+    </a>
+    <a href="img/giessomat_11.jpg">
+        <img src="img/giessomat_11_small.jpg" alt="Interconnect PCB and debug power switch, back side">
+    </a>
+</div>
+
 ## Future Extensions
 
 I have now been running capacitive ground moisture level sensors in a couple of my plants for around a year, logging the data using my [ESP-Env project](https://git.xythobuz.de/thomas/esp-env) to an [InfluxDB](https://www.influxdata.com/) instance running on my NAS, with a [Grafana](https://grafana.com/) UI running on there as well.
 Because of that, I have not yet added completely automated watering into the system.
 It still has to be started manually via the user interface.
 
+<div class="lightgallery">
+    <a href="img/giessomat_grafana_1.png">
+        <img src="img/giessomat_grafana_1_small.png" alt="Data of new sensors">
+    </a>
+    <a href="img/giessomat_grafana_2.png">
+        <img src="img/giessomat_grafana_2_small.png" alt="Data after about half a year">
+    </a>
+</div>
+
+If you look closely you can also see some glitches in the data where my ESP had problems and did not store new values.
+Also consider that in the timeframes seen in the graph above, I always watered the plants manually as soon as the soil felt dry about 3cm deep.
+
 But recently I got a different sensor from a colleague of mine, which is from another project called [Giesomat](https://www.ramser-elektro.at/shop/bausaetze-und-platinen/giesomat-kapazitiver-bodenfeuchtesensor-erdfeuchtesensor-mit-beschichtung/).
 The similar name was totally incidental, I only heard of it after naming my own project like this.
 I will test it and report the results here sometime in the future.

page.html

     <link type="text/css" rel="stylesheet" href="css/style.css" />
     <link type="text/css" rel="stylesheet" href="css/sh_bright.min.css" />
     <link type="text/css" rel="stylesheet" href="css/gh-fork-ribbon.css" />
-    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" />
     <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.18/css/lightgallery.min.css" />
     <script type="text/javascript" src="js/sh_main.js"></script>
     <!--%
             var initialFontSize = fontSize;
             $('.inc').on('click', function() {
                 fontSize += 1;
-                $('body').css('font-size', fontSize + 'px');
+                $('#content').css('font-size', fontSize + 'px');
             })
             $('.dec').on('click', function() {
                 if (fontSize > 1) {
                     fontSize -= 1;
-                    $('body').css('font-size', fontSize + 'px');
+                    $('#content').css('font-size', fontSize + 'px');
                 }
             })
             $('.reset').on('click', function() {
                 if (fontSize != initialFontSize) {
                     fontSize = initialFontSize;
-                    $('body').css('font-size', initialFontSize + 'px');
+                    $('#content').css('font-size', initialFontSize + 'px');
                 }
             })
         })