瀏覽代碼

lightgallery html5 video support. drinkrobotics page now using lightgallery macro.

Thomas Buck 3 年之前
父節點
當前提交
35ecdfdfe9
共有 6 個文件被更改,包括 93 次插入103 次删除
  1. 54
    96
      input/projects/drinkrobotics.md
  2. 39
    7
      macros.py
  3. 二進制
      static/img/camp_hackaday_small.jpg
  4. 二進制
      static/img/camp_machine_small.jpg
  5. 二進制
      static/img/ulm_machine.jpg
  6. 二進制
      static/img/ulm_machine_small.jpg

+ 54
- 96
input/projects/drinkrobotics.md 查看文件

@@ -17,17 +17,17 @@ Here are some photos and videos of our tent at the CCCamp2019 summer hacker camp
17 17
 
18 18
 [Project page on camp wiki](https://web.archive.org/web/20201025144323/https://events.ccc.de/camp/2019/wiki/Projects:UbaBot). [Hackaday feature](https://web.archive.org/web/20201108013437/https://hackaday.com/2019/08/22/ubabot-mixes-up-50-cocktails-to-quench-cccamp-thirst/).
19 19
 
20
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/rzQB0l1Imt4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
21
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/CsiNMK3guS0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
22
-
23
-<div class="lightgallery">
24
-    <a href="img/ubabot_camp19_1.jpg">
25
-        <img src="img/ubabot_camp19_1_small.jpg" alt="Steffen demonstrating the machine for Hackaday">
26
-    </a>
27
-    <a href="img/ubabot_camp19_2.jpg">
28
-        <img src="img/ubabot_camp19_2_small.jpg" alt="Side view of the pumps, from Hackaday">
29
-    </a>
30
-</div>
20
+<!--%
21
+lightgallery([
22
+    [ "https://www.youtube.com/watch?v=rzQB0l1Imt4", "img/camp_hackaday_small.jpg", "Steffen demonstrating the machine for Hackaday" ],
23
+
24
+    [ "https://www.youtube.com/watch?v=CsiNMK3guS0", "img/camp_machine_small.jpg", "One run of the machine at CCCamp2019" ],
25
+
26
+    [ "img/ubabot_camp19_1.jpg", "Steffen demonstrating the machine for Hackaday" ],
27
+
28
+    [ "img/ubabot_camp19_2.jpg", "Side view of the pumps, from Hackaday" ]
29
+])
30
+%-->
31 31
 
32 32
 [Source](https://hackaday.com/2019/08/22/ubabot-mixes-up-50-cocktails-to-quench-cccamp-thirst/), by Mike Szczys.
33 33
 
@@ -35,31 +35,19 @@ Here are some photos and videos of our tent at the CCCamp2019 summer hacker camp
35 35
 
36 36
 Here are some photos and a video from when we were invited to Verschwörläum 2018 in Ulm.
37 37
 
38
-<iframe src="https://commons.wikimedia.org/wiki/File:Ubabot,_Vslaeum_2018,_Ulm.webm?embedplayer=yes" width="560" height="315" frameborder="0" ></iframe>
39
-
40
-<div class="lightgallery">
41
-    <a href="img/ubabot_ulm_7.jpg">
42
-        <img src="img/ubabot_ulm_7_small.jpg" alt="Front view of the machine">
43
-    </a>
44
-    <a href="img/ubabot_ulm_2.jpg">
45
-        <img src="img/ubabot_ulm_2_small.jpg" alt="Side Front view of the machine">
46
-    </a>
47
-    <a href="img/ubabot_ulm_1.jpg">
48
-        <img src="img/ubabot_ulm_1_small.jpg" alt="Back view of the machine. The green PCB is the motor driver with my firmware.">
49
-    </a>
50
-    <a href="img/ubabot_ulm_3.jpg">
51
-        <img src="img/ubabot_ulm_3_small.jpg" alt="A drink is poured">
52
-    </a>
53
-    <a href="img/ubabot_ulm_4.jpg">
54
-        <img src="img/ubabot_ulm_4_small.jpg" alt="A drink is poured">
55
-    </a>
56
-    <a href="img/ubabot_ulm_5.jpg">
57
-        <img src="img/ubabot_ulm_5_small.jpg" alt="A drink is poured">
58
-    </a>
59
-    <a href="img/ubabot_ulm_6.jpg">
60
-        <img src="img/ubabot_ulm_6_small.jpg" alt="A drink is poured">
61
-    </a>
62
-</div>
38
+<!--%
39
+lightgallery([
40
+    [ "https://upload.wikimedia.org/wikipedia/commons/c/c3/Ubabot%2C_Vslaeum_2018%2C_Ulm.webm", "video/webm", "img/ulm_machine_small.jpg", "img/ulm_machine.jpg", "The machine in operation" ],
41
+
42
+    [ "img/ubabot_ulm_7.jpg", "Front view of the machine" ],
43
+    [ "img/ubabot_ulm_2.jpg", "Side Front view of the machine" ],
44
+    [ "img/ubabot_ulm_1.jpg", "Back view of the machine. The green PCB is the motor driver with my firmware." ],
45
+    [ "img/ubabot_ulm_3.jpg", "A drink is poured" ],
46
+    [ "img/ubabot_ulm_4.jpg", "A drink is poured" ],
47
+    [ "img/ubabot_ulm_5.jpg", "A drink is poured" ],
48
+    [ "img/ubabot_ulm_6.jpg", "A drink is poured" ]
49
+])
50
+%-->
63 51
 
64 52
 [Source](https://commons.wikimedia.org/wiki/Category:Ubabot), by [Matti Blume](https://commons.wikimedia.org/wiki/User:MB-one), [CC-BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/deed.en)
65 53
 
@@ -67,14 +55,12 @@ Here are some photos and a video from when we were invited to Verschwörläum 20
67 55
 
68 56
 In 2017, we rebuilt Ubabot as part of the Maker Challenge of the Makerfaire Friedrichshafen.
69 57
 
70
-<div class="lightgallery">
71
-    <a href="img/ubabot_makerfaire_1.jpg">
72
-        <img src="img/ubabot_makerfaire_1_small.jpg" alt="The winning teams with their cocktail machines">
73
-    </a>
74
-    <a href="img/ubabot_makerfaire_2.jpg">
75
-        <img src="img/ubabot_makerfaire_2_small.jpg" alt="Closer shot of this early Ubabot prototype">
76
-    </a>
77
-</div>
58
+<!--%
59
+lightgallery([
60
+    [ "img/ubabot_makerfaire_1.jpg", "The winning teams with their cocktail machines" ],
61
+    [ "img/ubabot_makerfaire_2.jpg", "Closer shot of this early Ubabot prototype" ]
62
+])
63
+%-->
78 64
 
79 65
 [A video of our machine in action can be found on heise online](https://www.heise.de/make/meldung/Maker-Faire-Bodensee-2017-Cocktails-Cosplay-und-Casemodding-3772515.html#nav_im_wettbewerb_0) (scroll down).
80 66
 
@@ -82,11 +68,11 @@ In 2017, we rebuilt Ubabot as part of the Maker Challenge of the Makerfaire Frie
82 68
 
83 69
 I designed a 3D model for a cap enclosing the large open glass bottles we have for some ingredients. It is a 2-color model that can be printed with a dual-nozzle printer, or you can just leave out the "filling" and print it with a single-nozzle printer. The design [can be found in my Git Repo](https://git.xythobuz.de/thomas/3d-print-designs/src/branch/master/cocktail-maschine).
84 70
 
85
-<div class="lightgallery">
86
-    <a href="img/drinkrobotics_deckel.png">
87
-        <img src="img/drinkrobotics_deckel_small.png" alt="The 3D design of the bottle cap.">
88
-    </a>
89
-</div>
71
+<!--%
72
+lightgallery([
73
+    [ "img/drinkrobotics_deckel.png", "The 3D design of the bottle cap." ]
74
+])
75
+%-->
90 76
 
91 77
 ## Arduino-Cocktail
92 78
 
@@ -98,53 +84,25 @@ The dispension is controlled by four solenoid valves, operated using relais.
98 84
 Custom built 3D printed [bottle cap adapters](https://www.thingiverse.com/thing:2445858) are used to pressurize coke bottles and take out the liquid.
99 85
 Everything is controlled by an Arduino, with a small OLED display and three buttons as the user interface.
100 86
 
101
-<div class="lightgallery">
102
-    <a href="img/arduino_cocktail_12.jpg">
103
-        <img src="img/arduino_cocktail_12_small.jpg" alt="Front Top view of the machine">
104
-    </a>
105
-    <a href="img/arduino_cocktail_11.jpg">
106
-        <img src="img/arduino_cocktail_11_small.jpg" alt="Top view of the machine">
107
-    </a>
108
-    <a href="img/arduino_cocktail_8.jpg">
109
-        <img src="img/arduino_cocktail_8_small.jpg" alt="Electronics">
110
-    </a>
111
-    <a href="img/arduino_cocktail_7.jpg">
112
-        <img src="img/arduino_cocktail_7_small.jpg" alt="Electronics">
113
-    </a>
114
-    <a href="img/arduino_cocktail_5.jpg">
115
-        <img src="img/arduino_cocktail_5_small.jpg" alt="Solenoid valves">
116
-    </a>
117
-    <a href="img/arduino_cocktail_6.jpg">
118
-        <img src="img/arduino_cocktail_6_small.jpg" alt="Solenoid valves">
119
-    </a>
120
-    <a href="img/arduino_cocktail_9.jpg">
121
-        <img src="img/arduino_cocktail_9_small.jpg" alt="The two boards fit the box neatly.">
122
-    </a>
123
-    <a href="img/arduino_cocktail_10.jpg">
124
-        <img src="img/arduino_cocktail_10_small.jpg" alt="There is still enough room for a battery and the pipework.">
125
-    </a>
126
-    <a href="img/arduino_cocktail_13.jpg">
127
-        <img src="img/arduino_cocktail_13_small.jpg" alt="Back view of the UI">
128
-    </a>
129
-    <a href="img/arduino_cocktail_14.jpg">
130
-        <img src="img/arduino_cocktail_14_small.jpg" alt="My very professional Co2 distribution">
131
-    </a>
132
-    <a href="img/arduino_cocktail_1.jpg">
133
-        <img src="img/arduino_cocktail_1_small.jpg" alt="Some old notes for the project">
134
-    </a>
135
-    <a href="img/arduino_cocktail_2.jpg">
136
-        <img src="img/arduino_cocktail_2_small.jpg" alt="Some old notes for the project">
137
-    </a>
138
-    <a href="img/arduino_cocktail_3.jpg">
139
-        <img src="img/arduino_cocktail_3_small.jpg" alt="Some old notes for the project">
140
-    </a>
141
-    <a href="img/arduino_cocktail_4.jpg">
142
-        <img src="img/arduino_cocktail_4_small.jpg" alt="Some old notes for the project">
143
-    </a>
144
-    <a href="img/co2_pressure_reducer.jpg">
145
-        <img src="img/co2_pressure_reducer_small.jpg" alt="Example of a sodastream compatible Co2 pressure reducer">
146
-    </a>
147
-</div>
87
+<!--%
88
+lightgallery([
89
+    [ "img/arduino_cocktail_12.jpg", "Front Top view of the machine" ],
90
+    [ "img/arduino_cocktail_11.jpg", "Top view of the machine" ],
91
+    [ "img/arduino_cocktail_8.jpg", "Electronics" ],
92
+    [ "img/arduino_cocktail_7.jpg", "Electronics" ],
93
+    [ "img/arduino_cocktail_5.jpg", "Solenoid valves" ],
94
+    [ "img/arduino_cocktail_6.jpg", "Solenoid valves" ],
95
+    [ "img/arduino_cocktail_9.jpg", "The two boards fit the box neatly." ],
96
+    [ "img/arduino_cocktail_10.jpg", "There is still enough room for a battery and the pipework." ],
97
+    [ "img/arduino_cocktail_13.jpg", "Back view of the UI" ],
98
+    [ "img/arduino_cocktail_14.jpg", "My very professional Co2 distribution" ],
99
+    [ "img/arduino_cocktail_1.jpg", "Some old notes for the project" ],
100
+    [ "img/arduino_cocktail_2.jpg", "Some old notes for the project" ],
101
+    [ "img/arduino_cocktail_3.jpg", "Some old notes for the project" ],
102
+    [ "img/arduino_cocktail_4.jpg", "Some old notes for the project" ],
103
+    [ "img/co2_pressure_reducer.jpg", "Example of a sodastream compatible Co2 pressure reducer" ]
104
+])
105
+%-->
148 106
 
149 107
 The Arduino firmware can be found on [Github](https://github.com/drinkrobotics/Arduino-Cocktail).
150 108
 

+ 39
- 7
macros.py 查看文件

@@ -9,17 +9,49 @@ from datetime import datetime
9 9
 DEFAULT_LANG = "en"
10 10
 BASE_URL = "https://www.xythobuz.de"
11 11
 
12
+# -----------------------------------------------------------------------------
13
+# lightgallery helper macro
14
+# -----------------------------------------------------------------------------
15
+
16
+# call this macro like this
17
+# lightgallery([
18
+#     [ "image-link", "description" ],
19
+#     [ "image-link", "thumbnail-link", "description" ],
20
+#     [ "youtube-link", "thumbnail-link", "description" ],
21
+#     [ "video-link", "mime", "thumbnail-link", "image-link", "description" ]
22
+# ])
23
+
12 24
 def lightgallery(links):
25
+    videos = [l for l in links if len(l) == 5]
26
+    v_i = 0
27
+    for v in videos:
28
+        link, mime, thumb, poster, alt = v
29
+        v_i += 1
30
+        print '<div style="display:none;" id="video' + str(v_i) + '">'
31
+        print '<video class="lg-video-object lg-html5" controls preload="none">'
32
+        print '<source src="' + link + '" type="' + mime + '">'
33
+        print 'Your browser does not support HTML5 video.'
34
+        print '</video>'
35
+        print '</div>'
36
+        
13 37
     print '<div class="lightgallery">'
38
+    v_i = 0
14 39
     for l in links:
15
-        link = img = alt = ""
16
-        if len(l) == 3:
17
-            link, img, alt = l
40
+        if (len(l) == 3) or (len(l) == 2):
41
+            link = img = alt = ""
42
+            if len(l) == 3:
43
+                link, img, alt = l
44
+            else:
45
+                link, alt = l
46
+                x = link.rfind('.')
47
+                img = link[:x] + '_small' + link[x:]
48
+            print '<div class="border" data-src="' + link + '"><a href="' + link + '"><img class="pic" src="' + img + '" alt="' + alt + '"></a></div>'
49
+        elif len(l) == 5:
50
+            v_i += 1
51
+            link, mime, thumb, poster, alt = v
52
+            print '<div class="border" data-poster="' + poster + '" data-sub-html="' + alt + '" data-html="#video' + str(v_i) + '"><a href="' + link + '"><img class="pic" src="' + thumb + '"></a></div>'
18 53
         else:
19
-            link, alt = l
20
-            x = link.rfind('.')
21
-            img = link[:x] + '_small' + link[x:]
22
-        print '<div class="border" data-src="' + link + '"><a href="' + link + '"><img class="pic" src="' + img + '" alt="' + alt + '"></a></div>'
54
+            raise NameError('Invalid number of arguments for lightgallery')
23 55
     print '</div>'
24 56
 
25 57
 # -----------------------------------------------------------------------------

二進制
static/img/camp_hackaday_small.jpg 查看文件


二進制
static/img/camp_machine_small.jpg 查看文件


二進制
static/img/ulm_machine.jpg 查看文件


二進制
static/img/ulm_machine_small.jpg 查看文件


Loading…
取消
儲存