-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
329 lines (173 loc) · 11.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html lang="en"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>SpokeSpice - spoke lights for bicycles</title>
<link rel="shortcut icon" href="https://spokespice.github.io/images/favicon.png" type="image/png"
/>
<meta name="description" content="Spoke lights for bicycles"
/>
<meta name="keywords" content="esp32, bicycle, light, animated"
/>
<meta name="referrer" content="no-referrer-when-downgrade" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://spokespice.github.io/css/style.min.4814d2c1857f40274b8aad1d14182dfcc587123b16d6939aa11b4569d05d83f7.css" type="text/css" integrity="sha256-SBTSwYV/QCdLiq0dFBgt/MWHEjsW1pOaoRtFadBdg/c=" />
<meta property="og:title" content="" />
<meta property="og:description" content="Spoke lights for bicycles" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://spokespice.github.io/" /><meta property="og:image" content="https://spokespice.github.io/images/cover-image.jpg"/><meta property="og:site_name" content="SpokeSpice" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://spokespice.github.io/images/cover-image.jpg"/>
<meta name="twitter:title" content=""/>
<meta name="twitter:description" content="Spoke lights for bicycles"/>
<meta itemprop="name" content="">
<meta itemprop="description" content="Spoke lights for bicycles">
<style>
#blog-logo {
width: 350px;
height: 207px;
max-height: none;
margin-bottom: 1.5rem;
}
</style><body>
<header id="site-head" class="withCenteredImage" style="background-image: url(images/x)">
<div class="vertical">
<div id="site-head-content" class="inner">
<img id="blog-logo" alt="Logo" src="images/logo-text.png" />
<h2 class="blog-description">Spoke Lights for you and your bicycle</h2>
<a class='btn site-menu' data-title-anchor='about' href='#about'>About</a>
<a class='btn site-menu' data-title-anchor='hardware' href='#hardware'>Hardware</a>
<a class='btn site-menu' data-title-anchor='software' href='#software'>Software</a>
<a class='btn site-menu' data-title-anchor='artworks' href='#artworks'>Artworks</a>
<a class='btn site-menu' href='https://github.com/SpokeSpice'>GitHub <icon class="fa fa-external-link"></icon></a>
<a id='header-arrow' href="#about" aria-label="Go to first section"><i class="fa fa-angle-down"></i></a>
</div>
</div>
</header>
<main class="content" role="main">
<div class='fixed-nav'>
<a class='fn-item' item_index='1' href='#about'>About</a>
<a class='fn-item' item_index='2' href='#hardware'>Hardware</a>
<a class='fn-item' item_index='3' href='#software'>Software</a>
<a class='fn-item' item_index='4' href='#artworks'>Artworks</a>
<a class='fn-item' item_index='5' href='#contribute'>Contribute</a>
<a class='fn-item' item_index='6' href='/#site-head'>Return To Top</a>
</div>
<div class='post-holder'>
<article id='about' class='post first '>
<header class="post-header">
<h2 class="post-title">About</h2>
</header>
<section class="post-content">
<p>SpokeSpice is an open hardware project that is comprised of a controller board and a number of arms.
It can display patterns and animations on the spokes of a bicycle wheel.</p>
<p>A magnet that is attached to the fork of the wheels is detected by the arms that swipe underneath it.
This allows the system to synchronize the display with the rotation of the wheel.</p>
</section>
</article>
<div class='post-after light'></div>
</div>
<div class='post-holder dark'>
<article id='hardware' class='post '>
<header class="post-header">
<h2 class="post-title">Hardware</h2>
</header>
<section class="post-content">
<p>All <a href="https://kicad-pcb.org/">KiCad</a> design files are available in the <a href="https://github.com/SpokeSpice/Hardware">GitHub repository</a>.</p>
<h5 id="controller-board">Controller board</h5>
<p><img src="images/controller-a-perspective.png" alt="Controller"></p>
<p>The controller board is based on the ESP32 microcontroller and features a USB-C connector for programming and debugging.
It features a battery holder for an 18650 Li-Ion cell, a 3.3V LDO regulator, an SD card slot and 4 connectors for the arms.</p>
<p>Several mounting holes in the PCB allow it to be mounted in a variety of different spoke configurations.</p>
<p>For the sake of simplicity, the controller board does not feature a battery charging circuit. The battery must be charged externally.</p>
<p>There is also no voltage regulation for the LEDs. The LEDs are powered directly from the battery, which is a 3.7V cell.
Consquently, there is also no reverse polarity protection to avoid the voltage drop and hence the energy loss.
The battery must hence be inserted with the correct polarity.</p>
<h5 id="arms">Arms</h5>
<p><img src="images/arm-a-perspective.png" alt="Arm"></p>
<p>Arms are made to be attached to the spokes of a 28-inch bicycle wheel.</p>
<p>Several mounting holes in the PCB allow them to be mounted in a variety of different spoke configurations.</p>
<p>Each arm PCB features 32 WS2812B RGB LEDs and is connected to the controller board via a 4-pin cable.
A second 4-pin cable can be used to daisy-chain a second arm on the other side of the wheel, which
will then display the same content.</p>
<p>A hall effect sensor is used to detect the speed of the wheel and to synchronize the display with the rotation.</p>
<p>Please have a look at the <a href="https://github.com/SpokeSpice/Hardware">GitHub repository</a> for more information.</p>
<h5 id="interested-in-building-your-own">Interested in building your own?</h5>
<p>To build your own SpokeSpice, you will need to order the PCBs and the components from a PCB manufacturer and an electronics distributor, respectively.</p>
<p>There is currently no kit available for purchase, but we are thinking about setting up a link to a service that will allow you to order the assembled PCBs.
If you are interested in this, please let us know by opening an issue in the <a href="https://github.com/SpokeSpice/Hardware">GitHub repository</a>.</p>
</section>
</article>
<div class='post-after'></div>
</div>
<div class='post-holder'>
<article id='software' class='post '>
<header class="post-header">
<h2 class="post-title">Software</h2>
</header>
<section class="post-content">
<p>The software is divided into two parts: the firmware running on the ESP32 microcontroller and
an image processing script running on a computer.</p>
<p>All the software is open-source and available on the <a href="https://github.com/SpokeSpice/Software">GitHub repository</a>.</p>
<h5 id="image-pre-processing">Image pre-processing</h5>
<p>To front-load the real-time processing on the ESP32, the images are pre-processed on a computer
so that all the necessary data is available in a format that can be quickly read by the ESP32.</p>
<p>For that matter, all images are converted to a radial format, where each column of the pixels
prepresents an angle and each row represents the value of each LED pixel in that angle.</p>
<p>For instance, the following image:</p>
<p><img src="images/smiley.gif" alt="Original image"></p>
<p>Is converted to the following radial image, which is then processed by the ESP32:</p>
<p><img src="images/smiley.rgif" alt="Radial image"></p>
<p>A python script is used to convert the images to this format. The script is available in the
GitHub repository of the project.</p>
<h5 id="firmware">Firmware</h5>
<p>The firmware is written in C and is based on the <a href="https://idf.espressif.com/">ESP-IDF</a> framework.</p>
<p>It has the following tasks:</p>
<ul>
<li>Receives interrupts from the hall effect sensors on the arms and calculates the speed of the wheel</li>
<li>Based on the estimated speed, it calculates the position of the wheel</li>
<li>Read pre-processed radial gifs from the SD card or SPIFFS and displays them on the arms when the wheel is spinning with at least a certain speed</li>
<li>Diplays patterns on the arms, also when the wheel is not spinning</li>
</ul>
</section>
</article>
<div class='post-after light'></div>
</div>
<div class='post-holder dark'>
<article id='artworks' class='post '>
<header class="post-header">
<h2 class="post-title">Artworks</h2>
</header>
<section class="post-content">
<p>There is a collection of artworks in the <a href="https://github.com/SpokeSpice/Artworks">artworks repository</a>.</p>
<p>Contributions are very welcome, please submit a PR to add your own artwork to the collection.</p>
</section>
</article>
<div class='post-after'></div>
</div>
<div class='post-holder'>
<article id='contribute' class='post last'>
<header class="post-header">
<h2 class="post-title">Contribute</h2>
</header>
<section class="post-content">
<p>SpokeSpice is an open-source project and contributions are welcome.
There are several ideas on how to extend the software, please refer to the <a href="https://github.com/SpokeSpice/Software">GitHub repository</a> for more information.</p>
</section>
</article>
<div class='post-after light'></div>
</div>
</main>
<footer class="site-footer">
<div class="inner">
<section class="copyright">© Daniel Mack</section>
<section>
<a href="https://themes.gohugo.io/hugo-scroll/" target="_blank" rel="noopener">Hugo Scroll</a> template
</section>
</div>
</footer>
<script src="https://spokespice.github.io/js/script.min.5e6c5e01e85fe2790c20d8151c482cec0c2b90a367f884ebd45ec7ff8b5b0f82.js" integrity="sha256-XmxeAehf4nkMINgVHEgs7AwrkKNn+ITr1F7H/4tbD4I=" ></script>
<script>cssVars();</script>
</body>
</html>