Browse Source

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

Thomas Buck 3 years ago
parent
commit
382db98c54
3 changed files with 75 additions and 103 deletions
  1. 62
    103
      input/projects/giessomat.md
  2. 13
    0
      macros.py
  3. BIN
      static/img/giessomat_thumbnail_small.png

+ 62
- 103
input/projects/giessomat.md View File

14
 
14
 
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.
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
 ## Overview
25
 ## Overview
27
 
26
 
37
 
36
 
38
 (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...) 😊
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
 ## Implementation
45
 ## Implementation
47
 
46
 
53
 I also added a power switch and some voltmeters for the different voltage regulators and a main power switch.
52
 I also added a power switch and some voltmeters for the different voltage regulators and a main power switch.
54
 All this is mounted in a simple 3D-printed frontpanel.
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
 The actual control is done on an ESP32 which is connected to two [4-channel relais boards](https://amzn.to/2QW0Sty).
63
 The actual control is done on an ESP32 which is connected to two [4-channel relais boards](https://amzn.to/2QW0Sty).
69
 Using these, it controls five valves (one inlet and four outlets) as well as three pumps for the fertilizers.
64
 Using these, it controls five valves (one inlet and four outlets) as well as three pumps for the fertilizers.
72
 Two float switches are used to tell the fill-height of the water tank.
67
 Two float switches are used to tell the fill-height of the water tank.
73
 The ESP32 also provides a simple web interface to allow the same controls as from the user interface.
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
 Both UI and controller are connected to each other using I2C.
78
 Both UI and controller are connected to each other using I2C.
88
 All relevant signals are transmitted with a simple DB-9 cable.
79
 All relevant signals are transmitted with a simple DB-9 cable.
93
 I designed all the 3D printed parts with OpenSCAD.
84
 I designed all the 3D printed parts with OpenSCAD.
94
 You can find [the files](https://git.xythobuz.de/thomas/3d-print-designs/src/branch/master/giessomat) on my Gitea.
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
 Most of the parts I had lying around in the workshop.
101
 Most of the parts I had lying around in the workshop.
127
 I only had to buy the outlet valves after realizing one of the big valves I still had was no longer working.
102
 I only had to buy the outlet valves after realizing one of the big valves I still had was no longer working.
128
 Also the pumps, hoses and hose-adapters had to be bought.
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
 The software can easily be configured to run with more or less fertilizers and outlets, as much as the ESP32 GPIOs can provide.
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
 Alternatively, you can also use an Arduino for the controller instead of the ESP, losing the web interface.
118
 Alternatively, you can also use an Arduino for the controller instead of the ESP, losing the web interface.
159
 Doing some programming, it would also be possible to use some kind of port-extender or run also the UI on an ESP.
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
 And of course also the now-obsolete SerialLCD could be replaced with something different without too much work.
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
 ## Future Extensions
132
 ## Future Extensions
172
 
133
 
178
 Because of that, I have not yet added completely automated watering into the system.
139
 Because of that, I have not yet added completely automated watering into the system.
179
 It still has to be started manually via the user interface.
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
 If you look closely you can also see some glitches in the data where my ESP had problems and did not store new values.
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
 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.
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 View File

9
 DEFAULT_LANG = "en"
9
 DEFAULT_LANG = "en"
10
 BASE_URL = "https://www.xythobuz.de"
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
 # preconvert hooks
26
 # preconvert hooks
14
 # -----------------------------------------------------------------------------
27
 # -----------------------------------------------------------------------------

BIN
static/img/giessomat_thumbnail_small.png View File


Loading…
Cancel
Save