-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathactivities.html
More file actions
236 lines (212 loc) · 15.5 KB
/
activities.html
File metadata and controls
236 lines (212 loc) · 15.5 KB
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
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>off grid | kernelcon 2026</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/cover/">
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
</style>
<link href="css/cover.css" rel="stylesheet">
</head>
<body class="d-flex h-100 text-center text-bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">off grid badge</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link fw-bold py-1 px-0" aria-current="page" href="index.html">Home</a>
<a class="nav-link fw-bold py-1 px-0" href="about.html">About</a>
<a class="nav-link fw-bold py-1 px-0" href="ibom.html">Interactive BOM</a>
<a class="nav-link fw-bold py-1 px-0 active" href="activities.html">Activity</a>
<a class="nav-link fw-bold py-1 px-0" href="quest_results.html">Quest Results</a>
<a class="nav-link fw-bold py-1 px-0" href="past_badges.html">Past Badges</a>
</nav>
</div>
</header>
<main class="px-3 mt-4">
<p>Choose an activity below:</p>
<p>
<a href="#motor-crank" class="btn btn-outline-light">Initial Assembly</a>
<a href="#quest" class="btn btn-outline-light">Quest</a>
<a href="#weather-training" class="btn btn-outline-light">Weather Training</a>
<a href="#usb-charge" class="btn btn-outline-light">USB Charge Module</a>
</p>
<hr class="my-4">
<section id="motor-crank">
<h3>Initial Assembly</h3>
<p>First, gather your parts from your badge bag:</p>
<div class="d-inline-block text-start">
<ul>
<li>3x - #6 x 3/8" screws <em>(larger, pointed tip, coarse threads)</em></li>
<li>1x - M2.5 x 8mm bolt <em>(smaller, flat tip, fine threads)</em></li>
<li>1x - thumb screw</li>
<li>1x - crank knob</li>
<li>1x - crank arm</li>
<li>1x - motor assembly</li>
<li>3x - weather reading dials (1 of each color)</li>
</ul>
</div>
<p>The only tool needed is a screwdriver, which are available at assembly tables near registartion and in the Badge Village.</p>
<p><a href="images/i1.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i1.jpg" /></a></p>
<h4>Motor to PCB Assembly</h4>
<p>Bend the connection tabs of the motor from their flat position to approximately a 45-degree angle upward—this helps them make good contact when assembled.</p>
<p><a href="images/i2.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i2.jpg" /></a></p>
<p>Next, position the motor on the back of the PCB. The motor connection tabs should be facing the large contact pads on the PCB.</p>
<p><a href="images/i3.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i3.jpg" /></a></p>
<p>While holding the motor in place, flip the board over so you can install the screws. Insert 2x of the #6 screws <em>(larger, pointed tip, coarse threads)</em> from the front of the PCB into the motor, ensuring the connection tabs and pads make contact. Tighten them securely.</p>
<p><a href="images/i4.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i4.jpg" /></a></p>
<p><a href="images/i5.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i5.jpg" /></a></p>
<p>After tightening the screws, verify that the motor connection tabs are making good contact with the pads on the PCB.</p>
<p><a href="images/i6.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i6.jpg" /></a></p>
<p><em>Optional:</em> If desired, a zip tie can be used to further secure the motor's electrical connectors to the PCB pads.</p>
<p>
<a href="images/zip1.jpg"><img class="img-fluid my-2 mx-1" style="max-width: 195px;" src="images/zip1.jpg" /></a>
<a href="images/zip2.jpg"><img class="img-fluid my-2 mx-1" style="max-width: 195px;" src="images/zip2.jpg" /></a>
</p>
<h4>Crank Assembly</h4>
<p>First, attach the crank knob to the crank arm using a #6 screw <em>(larger, pointed tip, coarse threads)</em>—the same type used to mount the motor. The M2.5 bolt <em>(smaller, flat tip, fine threads)</em> will be used later. Note the recess in the part designed for the screw head—this confirms correct orientation. Tighten the screw fully; the hole depth is designed to leave the proper gap for free rotation.</p>
<p><a href="images/i7.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i7.jpg" /></a></p>
<p>The 3D print uses a <a href="https://blog.tommy.sh/posts/quick-tip-avoid-3d-printed-supports-with-sacrificial-bridge/" target="_blank">"sacrificial bridge"</a> that needs to be punched open. Use the tip of the screwdriver to open it. Push and twist.</p>
<p><a href="images/i8.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i8.jpg" /></a></p>
<p><a href="images/i9.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i9.jpg" /></a></p>
<p><a href="images/i10.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i10.jpg" /></a></p>
<p>Next, note the shape of the motor shaft and the complementary hole on the crank arm. Push the crank into position, ensuring the shapes are aligned.</p>
<p><a href="images/i11.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i11.jpg" /></a></p>
<p>Finally, secure the crank to the motor shaft using the M2.5 bolt <em>(smaller, flat tip, fine threads)</em>.</p>
<p><a href="images/i12.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i12.jpg" /></a></p>
<h4>Weather Reading Dial Assembly</h4>
<p>First, place all 3 colored dials onto the thumb screw in any order.</p>
<p><a href="images/i13.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i13.jpg" /></a></p>
<p>Then, screw the thumb screw into the threaded hole at the center of the circle (technically a dodecagon-ish shape). The thumb screw only needs to be snug—just enough that the dials can hold their readings.</p>
<p><a href="images/i14.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i14.jpg" /></a></p>
<p>Your initial assembly is complete!</p>
<p><a href="images/i15.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/i15.jpg" /></a></p>
</section>
<hr class="my-4">
<section id="quest">
<h3>Quest</h3>
<p>Ready to embark on an interactive, narrative-driven adventure? The badge is your gateway to a quest that will take you all over the conference space, complete with challenges and tasks to be solved!</p>
<p><b>How It Works</b></p>
<p>There are kiosks scattered throughout the venue that will guide you on your journey—however, you must find the correct one for your current level. That's where <b>SCAN</b> mode comes in. It's a proximity scanner to help you locate your next kiosk. But be warned: it uses a lot of battery power, so use it sparingly!</p>
<p>Once you find the right kiosk, you'll need to build up a charge using <b>CHRG</b> mode. These are off-grid devices after all... they need to be powered! Simply enter the mode and crank until your meter is full, then insert the badge into the kiosk to proceed.</p>
<p>Each kiosk has a printer that will share more of the story, present you with clues, and give you tasks to complete next.</p>
<p><b>Rewards</b></p>
<p>As you complete quest levels, you'll unlock additional LED animation patterns for your badge! Use <b>LED</b> mode and rotate the crank to cycle through them.</p>
<p><b>Getting Started</b></p>
<p>Head to the Badge Village area and look for the sign that identifies the first kiosk.</p>
</section>
<hr class="my-4">
<section id="weather-training">
<h3>Weather Training</h3>
<p>Visit the Weather Training area to learn how to become an off-grid meteorologist! Touch screen kiosks will walk you through all of the sensor readings—temperature, humidity, and barometric pressure—and teach you how to use them to predict the weather.</p>
<p>Once you've completed your training, a series of simulations will test what you've learned. Can you predict what's coming based on the readings?</p>
<p>This area also features physical devices to demonstrate how the sensors work in real life: a heater, a pressure chamber, and a humidifier. Watch your badge react in real time!</p>
</section>
<hr class="my-4">
<section id="usb-charge">
<h3>USB Charge Module Kit</h3>
<p>In this activity, you'll solder and assemble a small PCB that lets you harness the crank power of your badge to charge devices via a USB-A port. Follow the instructions below to build your own!</p>
<p>First, gather your parts from a volunteer at the badge village table:</p>
<div class="d-inline-block text-start">
<ul>
<li>1x blank PCB</li>
<li>1x capacitor</li>
<li>1x female header</li>
<li>1x male header</li>
<li>1x USB-A port</li>
</ul>
</div>
<p><em>Click any image to enlarge.</em></p>
<p><a href="images/1.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/1.jpg" /></a></p>
<p>Next, insert the female header onto the back side of your badge as shown.</p>
<p><a href="images/2.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/2.jpg" /></a></p>
<p>New to soldering? Here's a quick reference guide:</p>
<p><a href="images/howto.png"><img class="img-fluid my-2" style="max-width: 400px;" src="images/howto.png" /></a></p>
<p>Now flip it over and, while pinching with your finger, solder one pin. Before soldering any more, make sure the header is aligned and flat on the PCB. With only one pin soldered, this is the easiest time to make adjustments.</p>
<p><a href="images/3.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/3.jpg" /></a></p>
<p>Once aligned and flat, solder the rest of the pins.</p>
<p><a href="images/4.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/4.jpg" /></a></p>
<p>Now insert the male header into the female header as shown.</p>
<p><a href="images/5.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/5.jpg" /></a></p>
<p>Next, insert the blank PCB. Note the pin alignment—make sure GND goes to GND and 5V goes to 5V.</p>
<p><a href="images/6.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/6.jpg" /></a></p>
<p>Again, start by soldering one pin and ensuring it's aligned and flat before proceeding to solder the rest of the pins.</p>
<p><a href="images/7.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/7.jpg" /></a></p>
<p><a href="images/8.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/8.jpg" /></a></p>
<p>Nice job! Now remove the PCB with the header attached. We'll populate the rest of the components on it.</p>
<p><a href="images/9.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/9.jpg" /></a></p>
<p>First, we're going to add the USB-A port. Insert the port onto the PCB, being careful to align all the pins before pressing too firmly—it may take a little finesse.</p>
<p><a href="images/10.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/10.jpg" /></a></p>
<p>Now solder one pin. Like before, this is the easiest time to make sure the port is aligned and flat. Check it from the side to ensure it's exactly where you want it.</p>
<p><a href="images/11.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/11.jpg" /></a></p>
<p><a href="images/12.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/12.jpg" /></a></p>
<p>Now solder the rest of the pins.</p>
<p><a href="images/13.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/13.jpg" /></a></p>
<p>Next, we're going to place the capacitor. This capacitor helps keep the voltage stable and smooth. Note the polarity markings—the capacitor has a white line to indicate its negative side, and the PCB has a plus sign to mark the positive side.</p>
<p><a href="images/14.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/14.jpg" /></a></p>
<p>Insert the capacitor, ensuring the polarity is correct.</p>
<p><a href="images/15.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/15.jpg" /></a></p>
<p>Now flip the board over and solder the legs of the capacitor.</p>
<p><a href="images/16.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/16.jpg" /></a></p>
<p>Now use some clippers to clip the excess length off. Note: clip just above the solder.</p>
<p><a href="images/17.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/17.jpg" /></a></p>
<p><a href="images/18.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/18.jpg" /></a></p>
<p>You did it! The board is now complete.</p>
<p><a href="images/19.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/19.jpg" /></a></p>
<p><a href="images/20.jpg"><img class="img-fluid my-2" style="max-width: 400px;" src="images/20.jpg" /></a></p>
<p>Nothing left to do but give it a test!</p>
<p><video class="img-fluid my-2" style="max-width: 400px;" controls><source src="images/vid.mp4" type="video/mp4">Your browser does not support the video tag.</video></p>
</section>
</main>
<footer class="mt-auto text-white-50">
<p>kernelcon 2026 | built by zonksec</p>
</footer>
</div>
</body>
</html>