Просмотр исходного кода

add lightgallery macro, use on giessomat page, link to youtube video with thumbnail.

Thomas Buck 3 лет назад
Родитель
Сommit
382db98c54
3 измененных файлов: 75 добавлений и 103 удалений
  1. 62
    103
      input/projects/giessomat.md
  2. 13
    0
      macros.py
  3. Двоичные данные
      static/img/giessomat_thumbnail_small.png

+ 62
- 103
input/projects/giessomat.md Просмотреть файл

@@ -14,14 +14,13 @@ And this year I also have quite a selection of different Paprika/Chili strains g
14 14
 
15 15
 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.
16 16
 
17
-<div class="lightgallery">
18
-    <a href="img/giessomat_1.jpg">
19
-        <img src="img/giessomat_1_small.jpg" alt="Front of the UI unit">
20
-    </a>
21
-    <a href="img/giessomat_3.jpg">
22
-        <img src="img/giessomat_3_small.jpg" alt="Side view of the machine">
23
-    </a>
24
-</div>
17
+<!--%
18
+lightgallery([
19
+    [ "img/giessomat_1.jpg", "Front of the UI unit" ],
20
+    [ "img/giessomat_3.jpg", "Side view of the machine" ],
21
+    [ "https://www.youtube.com/watch?v=q-sjvPYs-EQ", "img/giessomat_thumbnail_small.png", "Demo Video" ]
22
+])
23
+%-->
25 24
 
26 25
 ## Overview
27 26
 
@@ -37,11 +36,11 @@ Still, I always manually close the mains-water-inlet with a proper hand-controll
37 36
 
38 37
 (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...) 😊
39 38
 
40
-<div class="lightgallery">
41
-    <a href="img/giessomat_web.png">
42
-        <img src="img/giessomat_web_small.png" alt="Screenshot of the web interface">
43
-    </a>
44
-</div>
39
+<!--%
40
+lightgallery([
41
+    [ "img/giessomat_web.png", "Screenshot of the web interface" ]
42
+])
43
+%-->
45 44
 
46 45
 ## Implementation
47 46
 
@@ -53,17 +52,13 @@ Input is done using a cheap 3x4 Keymatrix directly conencted to the Arduino GPIO
53 52
 I also added a power switch and some voltmeters for the different voltage regulators and a main power switch.
54 53
 All this is mounted in a simple 3D-printed frontpanel.
55 54
 
56
-<div class="lightgallery">
57
-    <a href="img/giessomat_2.jpg">
58
-        <img src="img/giessomat_2_small.jpg" alt="Back of the UI unit">
59
-    </a>
60
-    <a href="img/giessomat_6.jpg">
61
-        <img src="img/giessomat_6_small.jpg" alt="Front of UI PCB">
62
-    </a>
63
-    <a href="img/giessomat_7.jpg">
64
-        <img src="img/giessomat_7_small.jpg" alt="Back of UI PCB">
65
-    </a>
66
-</div>
55
+<!--%
56
+lightgallery([
57
+    [ "img/giessomat_2.jpg", "Back of the UI unit" ],
58
+    [ "img/giessomat_6.jpg", "Front of UI PCB" ],
59
+    [ "img/giessomat_7.jpg", "Back of UI PCB" ]
60
+])
61
+%-->
67 62
 
68 63
 The actual control is done on an ESP32 which is connected to two [4-channel relais boards](https://amzn.to/2QW0Sty).
69 64
 Using these, it controls five valves (one inlet and four outlets) as well as three pumps for the fertilizers.
@@ -72,17 +67,13 @@ For the inlet, I'm using a more expensive metal solenoid valve from Germany that
72 67
 Two float switches are used to tell the fill-height of the water tank.
73 68
 The ESP32 also provides a simple web interface to allow the same controls as from the user interface.
74 69
 
75
-<div class="lightgallery">
76
-    <a href="img/giessomat_4.jpg">
77
-        <img src="img/giessomat_4_small.jpg" alt="Top view of the machine">
78
-    </a>
79
-    <a href="img/giessomat_14.jpg">
80
-        <img src="img/giessomat_14_small.jpg" alt="Front of controller PCB">
81
-    </a>
82
-    <a href="img/giessomat_15.jpg">
83
-        <img src="img/giessomat_15_small.jpg" alt="Back of controller PCB">
84
-    </a>
85
-</div>
70
+<!--%
71
+lightgallery([
72
+    [ "img/giessomat_4.jpg", "Top view of the machine" ],
73
+    [ "img/giessomat_14.jpg", "Front of controller PCB" ],
74
+    [ "img/giessomat_15.jpg", "Back of controller PCB" ]
75
+])
76
+%-->
86 77
 
87 78
 Both UI and controller are connected to each other using I2C.
88 79
 All relevant signals are transmitted with a simple DB-9 cable.
@@ -93,63 +84,35 @@ The water tank is realized using a generic 5l liquid tank, with two holes drille
93 84
 I designed all the 3D printed parts with OpenSCAD.
94 85
 You can find [the files](https://git.xythobuz.de/thomas/3d-print-designs/src/branch/master/giessomat) on my Gitea.
95 86
 
96
-<div class="lightgallery">
97
-    <a href="img/giessomat_3d_2.png">
98
-        <img src="img/giessomat_3d_2_small.png" alt="User Interface">
99
-    </a>
100
-    <a href="img/giessomat_3d_1.png">
101
-        <img src="img/giessomat_3d_1_small.png" alt="Bottlecap for Fertilizer">
102
-    </a>
103
-    <a href="img/giessomat_3d_3.png">
104
-        <img src="img/giessomat_3d_3_small.png" alt="Fertilizer bottle mount">
105
-    </a>
106
-    <a href="img/giessomat_3d_9.png">
107
-        <img src="img/giessomat_3d_9_small.png" alt="Watertank holder">
108
-    </a>
109
-    <a href="img/giessomat_3d_4.png">
110
-        <img src="img/giessomat_3d_4_small.png" alt="Hose sieve/filter">
111
-    </a>
112
-    <a href="img/giessomat_3d_5.png">
113
-        <img src="img/giessomat_3d_5_small.png" alt="Hose fix for pumps">
114
-    </a>
115
-    <a href="img/giessomat_3d_6.png">
116
-        <img src="img/giessomat_3d_6_small.png" alt="Light-proofing for hose hole">
117
-    </a>
118
-    <a href="img/giessomat_3d_7.png">
119
-        <img src="img/giessomat_3d_7_small.png" alt="Large valve mount">
120
-    </a>
121
-    <a href="img/giessomat_3d_8.png">
122
-        <img src="img/giessomat_3d_8_small.png" alt="Small valve mount">
123
-    </a>
124
-</div>
87
+<!--%
88
+lightgallery([
89
+    [ "img/giessomat_3d_2.png", "User Interface" ],
90
+    [ "img/giessomat_3d_1.png", "Bottlecap for Fertilizer" ],
91
+    [ "img/giessomat_3d_3.png", "Fertilizer bottle mount" ],
92
+    [ "img/giessomat_3d_9.png", "Watertank holder" ],
93
+    [ "img/giessomat_3d_4.png", "Hose sieve/filter" ],
94
+    [ "img/giessomat_3d_5.png", "Hose fix for pumps" ],
95
+    [ "img/giessomat_3d_6.png", "Light-proofing for hose hole" ],
96
+    [ "img/giessomat_3d_7.png", "Large valve mount" ],
97
+    [ "img/giessomat_3d_8.png", "Small valve mount" ]
98
+])
99
+%-->
125 100
 
126 101
 Most of the parts I had lying around in the workshop.
127 102
 I only had to buy the outlet valves after realizing one of the big valves I still had was no longer working.
128 103
 Also the pumps, hoses and hose-adapters had to be bought.
129 104
 
130
-<div class="lightgallery">
131
-    <a href="img/giessomat_8.jpg">
132
-        <img src="img/giessomat_8_small.jpg" alt="Front of switch PCB">
133
-    </a>
134
-    <a href="img/giessomat_9.jpg">
135
-        <img src="img/giessomat_9_small.jpg" alt="Back of switch PCB">
136
-    </a>
137
-    <a href="img/giessomat_16.jpg">
138
-        <img src="img/giessomat_16_small.jpg" alt="Front of valve PCB">
139
-    </a>
140
-    <a href="img/giessomat_17.jpg">
141
-        <img src="img/giessomat_17_small.jpg" alt="Back of valve PCB">
142
-    </a>
143
-    <a href="img/giessomat_5.jpg">
144
-        <img src="img/giessomat_5_small.jpg" alt="Float switch and valve used">
145
-    </a>
146
-    <a href="img/giessomat_12.jpg">
147
-        <img src="img/giessomat_12_small.jpg" alt="Front of pump">
148
-    </a>
149
-    <a href="img/giessomat_13.jpg">
150
-        <img src="img/giessomat_13_small.jpg" alt="Back of pump">
151
-    </a>
152
-</div>
105
+<!--%
106
+lightgallery([
107
+    [ "img/giessomat_8.jpg", "Front of switch PCB" ],
108
+    [ "img/giessomat_9.jpg", "Back of switch PCB" ],
109
+    [ "img/giessomat_16.jpg", "Front of valve PCB" ],
110
+    [ "img/giessomat_17.jpg", "Back of valve PCB" ],
111
+    [ "img/giessomat_5.jpg", "Float switch and valve used" ],
112
+    [ "img/giessomat_12.jpg", "Front of pump" ],
113
+    [ "img/giessomat_13.jpg", "Back of pump" ]
114
+])
115
+%-->
153 116
 
154 117
 The software can easily be configured to run with more or less fertilizers and outlets, as much as the ESP32 GPIOs can provide.
155 118
 Alternatively, you can also use an Arduino for the controller instead of the ESP, losing the web interface.
@@ -159,14 +122,12 @@ You can of course also just leave out the UI and use solely the web interface on
159 122
 Doing some programming, it would also be possible to use some kind of port-extender or run also the UI on an ESP.
160 123
 And of course also the now-obsolete SerialLCD could be replaced with something different without too much work.
161 124
 
162
-<div class="lightgallery">
163
-    <a href="img/giessomat_10.jpg">
164
-        <img src="img/giessomat_10_small.jpg" alt="Interconnect PCB and debug power switch, front side">
165
-    </a>
166
-    <a href="img/giessomat_11.jpg">
167
-        <img src="img/giessomat_11_small.jpg" alt="Interconnect PCB and debug power switch, back side">
168
-    </a>
169
-</div>
125
+<!--%
126
+lightgallery([
127
+    [ "img/giessomat_10.jpg", "Interconnect PCB and debug power switch, front side" ],
128
+    [ "img/giessomat_11.jpg", "Interconnect PCB and debug power switch, back side" ]
129
+])
130
+%-->
170 131
 
171 132
 ## Future Extensions
172 133
 
@@ -178,14 +139,12 @@ The data is good enough to see when I watered the plants, but it is difficult to
178 139
 Because of that, I have not yet added completely automated watering into the system.
179 140
 It still has to be started manually via the user interface.
180 141
 
181
-<div class="lightgallery">
182
-    <a href="img/giessomat_grafana_1.png">
183
-        <img src="img/giessomat_grafana_1_small.png" alt="Data of new sensors">
184
-    </a>
185
-    <a href="img/giessomat_grafana_2.png">
186
-        <img src="img/giessomat_grafana_2_small.png" alt="Data after about half a year">
187
-    </a>
188
-</div>
142
+<!--%
143
+lightgallery([
144
+    [ "img/giessomat_grafana_1.png", "Data of new sensors" ],
145
+    [ "img/giessomat_grafana_2.png", "Data after about half a year" ]
146
+])
147
+%-->
189 148
 
190 149
 If you look closely you can also see some glitches in the data where my ESP had problems and did not store new values.
191 150
 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.

+ 13
- 0
macros.py Просмотреть файл

@@ -9,6 +9,19 @@ from datetime import datetime
9 9
 DEFAULT_LANG = "en"
10 10
 BASE_URL = "https://www.xythobuz.de"
11 11
 
12
+def lightgallery(links):
13
+    print '<div class="lightgallery">'
14
+    for l in links:
15
+        link = img = alt = ""
16
+        if len(l) == 3:
17
+            link, img, alt = l
18
+        else:
19
+            link, alt = l
20
+            x = link.rfind('.')
21
+            img = link[:x] + '_small' + link[x:]
22
+        print '<a href="' + link + '"><img src="' + img + '" alt="' + alt + '"></a>'
23
+    print '</div>'
24
+
12 25
 # -----------------------------------------------------------------------------
13 26
 # preconvert hooks
14 27
 # -----------------------------------------------------------------------------

Двоичные данные
static/img/giessomat_thumbnail_small.png Просмотреть файл


Загрузка…
Отмена
Сохранить