added whole lots more photos to giessomat

input/projects/giessomat.md

@@ -4,7 +4,7 @@ parent: projects
 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.
@@ -14,6 +14,15 @@ And this year I also have quite a selection of different Paprika/Chili strains g
 
 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.
@@ -28,6 +37,12 @@ Still, I always manually close the mains-water-inlet with a proper hand-controll
 
 (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).
@@ -39,12 +54,15 @@ I also added a power switch and some voltmeters for the different voltage regula
 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).
@@ -54,12 +72,6 @@ For the inlet, I'm using a more expensive metal solenoid valve from Germany that
 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.
 
@@ -67,12 +79,15 @@ All this is mounted on an old piece of shelf-board, using some custom designed 3
 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.
@@ -80,9 +95,27 @@ I only had to buy the outlet valves after realizing one of the big valves I stil
 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.
@@ -93,6 +126,15 @@ You can of course also just leave out the UI and use solely the web interface on
 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.
@@ -103,6 +145,18 @@ The data is good enough to see when I watered the plants, but it is difficult to
 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

@@ -12,7 +12,6 @@
     <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>
     <!--%
@@ -177,18 +176,18 @@
             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');
                 }
             })
         })