-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs.html
More file actions
800 lines (710 loc) · 32.5 KB
/
docs.html
File metadata and controls
800 lines (710 loc) · 32.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
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
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RSC Assembly Guide</title>
<link rel="stylesheet" href="styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
<link rel="manifest" href="favicon_io/site.webmanifest">
<style>
.assembly-section {
padding: 2rem;
max-width: 800px;
margin: 0 auto;
}
.version-toggle {
text-align: center;
margin-bottom: 1.5rem;
}
.version-toggle button {
margin: 0 0.5rem;
padding: 0.5rem 1.2rem;
font-size: 1rem;
background-color: #0156a7;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.version-toggle button:hover {
background-color: #ff9E4A;
}
.assembly-step {
margin-bottom: 2.5rem;
}
.assembly-step h4 {
font-size: 1.2rem;
color: #0156a7;
margin-bottom: 0.5rem;
}
.portrait-gif {
width: 100%;
max-width: 400px;
display: block;
margin: 1rem auto;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.assembly-slideshow {
position: relative;
text-align: center;
}
.assembly-step {
display: none;
margin-bottom: 2rem;
}
.assembly-step.active {
display: block;
}
/* Number text styling */
.step-number {
font-size: 1.2rem;
color: #0156a7;
/*margin-bottom: 1rem;*/
margin: 0;
line-height: 40px;
}
.step-number span {
font-weight: bold;
}
/* Circular buttons for previous and next */
.circle-button {
display: inline-block;
width: 40px;
height: 40px;
background-color: #0156a7;
color: white;
border: none;
border-radius: 50%;
font-size: 1.5rem;
text-align: center;
line-height: 40px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.circle-button:hover {
background-color: #ff9E4A;
}
/* Updated slideshow-controls styling */
.slideshow-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 1rem;
}
</style>
</head>
<body>
<header>
<img src="rsc-logo.png" alt="RSC Logo">
<!-- Desktop nav (unchanged) -->
<nav class="nav-desktop">
<a href="index.html">Home</a>
<a href="research.html">Research</a>
<a href="thesis-topics.html">Thesis Topics</a>
<a href="map.html">Map</a>
<a href="docs.html">Docs</a>
<a href="contact.html">Team</a>
</nav>
<!-- Mobile burger -->
<button class="burger" id="burgerBtn" aria-label="Menu">
☰
</button>
</header>
<!-- Mobile overlay menu -->
<div class="mobile-menu" id="mobileMenu">
<button class="close-menu" id="closeMenu">✕</button>
<a href="index.html">Home</a>
<a href="research.html">Research</a>
<a href="thesis-topics.html">Thesis Topics</a>
<a href="map.html">Map</a>
<a href="docs.html">Docs</a>
<a href="contact.html">Team</a>
</div>
<section class="assembly-section">
<h2>🛠️ RSC Assembly Guide</h2>
<div class="version-toggle">
<button onclick="showVersion('v4')">RSC v4</button>
<button onclick="showVersion('v4_1')">RSC v4.1</button>
</div>
<div id="v4" class="version-guide">
<h3>Version: RSC v4</h3>
<div class="assembly-slideshow">
<div class="assembly-step active">
<h4>Step 01: Welcome to the RSC v4 Assembly Guide!</h4>
<p>Please familiarise yourself with the components in the overview below:</p>
<img class="portrait-gif" src="media/guide/rsc_v4.png" alt="RSC v4 Parts Overview">
<p>This guide will walk you through each step of assembling the RSC v4.</p>
<p>Use the navigation buttons below to move through each of the assembly steps.</p>
</div>
<div class="assembly-step active">
<h4>Step 02: Assembling the Base</h4>
<ol>
<li>Carefully place the loudspeaker in the base and rotate it to align with the mounting holes.</li>
<li>Make sure to route the speaker wire through the round top slot.</li>
<li>Position the base trim cover over the loudspeaker.</li>
<li>Align the parts then secure the subassembly with four M3x8mm fasteners.</li>
</ol>
<p>See video below for more details:</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 1.mp4" type="video/mp4">
</video>
<p>By the end of this step, you will have assembled the base of the RSC v4.</p>
</div>
<div class="assembly-step">
<h4>Step 03: Connect the Pi Bracket to the Speaker Base</h4>
<ol>
<li>Position the main chassis (Pi bracket) on the speaker base.</li>
<li>Align the bracket and base with the mounting holes.</li>
<li>Secure the bracket to the base with four M3x8mm fasteners.</li>
</ol>
<p>Make sure to carefully route the speaker wires through the round slot.</p>
<p>See video below for more details:</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 2.mp4" type="video/mp4">
</video>
<p>By the end of this step, you will have attached the Pi bracket to the base.</p>
</div>
<div class="assembly-step">
<h4>Step 04: Attach the Raspberry Pi to the Bracket</h4>
<p>Prepare and insert your AIY flashed SD card to its slot on the Raspberry Pi</p>
<p>We recommend Raspberry Pi Imager (v1.7 or later) and enabling SSH and VNC for remote access.</p>
<ol>
<li>Align your Raspberry Pi with the mounting holes in the Pi bracket.</li>
<li>Route the speaker wires through the gap between the Pi bracket and the Raspberry Pi.</li>
<li>Use four M2.5x6mm fasteners to secure the Raspberry Pi to the Pi bracket.</li>
</ol>
<p>See video below for more details:</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 3.mp4" type="video/mp4">
</video>
<p>By the end of this step, you have installed the Raspberry Pi in the RSC v4.</p>
</div>
<div class="assembly-step">
<h4>Step 05: Connect the Expansion Board to the AIY Voice Bonnet (v2) HAT</h4>
<p>Align the Voice Bonnet HAT with your Expansion Board by matching connector orientation.</p>
<p>Gently press both together until fully seated.</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 4.mp4" type="video/mp4">
</video>
<p>By the end of this step, you have installed the Expansion Board to the Voice Bonnet HAT.</p>
</div>
<div class="assembly-step">
<h4>Step 06: Install the Voice Bonnet HAT on the Raspberry Pi</h4>
<ol>
<li>Carefully align your Voice Bonnet HAT over the Raspberry Pi GPIO headers.</li>
<li>Press gently to install the HAT on the header pins.</li>
</ol>
<p>See video below for more details:</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 5.mp4" type="video/mp4">
</video>
<p>By the end of this step, the Voice Bonnet HAT is on the Raspberry Pi.</p>
</div>
<div class="assembly-step">
<h4>Step 07: Connecting the Speaker Wires</h4>
<p>You will need a precision screwdriver for this step.</p>
<ol>
<li>Carefully plug your speaker wires into the screw terminal connector on the Voice Bonnet HAT.</li>
<li>Tighten the embedded fasteners to secure both speaker wires.</li>
</ol>
<p>Make sure to keep the speaker wires from connecting to each other.</p>
<p>See video below for more details:</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 6.mp4" type="video/mp4">
</video>
<p>By the end of this step, you have connected your speaker to the Voice Bonnet HAT.</p>
</div>
<div class="assembly-step">
<h4>Step 08: Wiring the Expansion Board</h4>
<p>Use jumper wires to connect Expansion Board's Level Shifter for peripheral communication.</p>
<ol>
<li>Connect Raspberry Pi 3.3V GPIO to Expansion Board 3.3V connector.</li>
<li>Connect Raspberry Pi PWM GPIO to Expansion Board PWM connector.</li>
<li>Connect Voice Bonnet HAT TX and RX to Expansion Board TX and RX connectors.</li>
</ol>
<p>See video below for more details:</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 7.mp4" type="video/mp4">
</video>
<p>By the end of this step, you wired up your Expansion Board Level Shifter.</p>
</div>
<div class="assembly-step">
<h4>Step 09: Inserting the Servo Motors</h4>
<ol>
<li>Insert the servo horn to the flipper horn socket.</li>
<li>Push the flipper with the servo horn onto the servo motor shaft.</li>
<li>Secure the flipper and horn to the motor shaft with the provided shaft fastener screw</li>
<li>Repeat for second flipper then gently push each motor to their slot in the Pi bracket.</li>
</ol>
<p>The motors should slide in the slot with some resistance, depending on the printed part tolerance.</p>
<p>See video below for more details:</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 8.mp4" type="video/mp4">
</video>
<p>By the end of this step, you installed both flippers.</p>
</div>
<div class="assembly-step">
<h4>Step 10: Plugging the Motors in the Expansion Board</h4>
<p>Connect the motors to the three pin PWM header pins on the Expansion Board.</p>
<p>Make sure the ground (GND; black/brown wire) aligns with the GND pin on the header.</p>
<p>See video below for more details:</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 9.mp4" type="video/mp4">
</video>
<p>By the end of this step, you have installed both flippers of your RSC v4.</p>
</div>
<div class="assembly-step">
<h4>Step 11: Connecting the Display to the Expansion Board</h4>
<ol>
<li>Plug the Display UART connector wires to their header on the Touch Display.</li>
<li>Plug the Display UART to the UART 5V header pins of the Level Shifter on the Expansion Board.</li>
<li>Make sure the connecter is firmly seated and the orientation matches the pin labels: 5V, TX, RX, GND.</li>
</ol>
<p>See video below for more details:</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 10.mp4" type="video/mp4">
</video>
<p>By the end of this step, you connected the display.</p>
</div>
<div class="assembly-step">
<h4>Step 12: Fasten the Display to the Front Panel</h4>
<ol>
<li>Insert the Touch Display into the Front Panel frame, facing the opening slot.</li>
<li>Carefully fasten the Display to the frame using four M3x4mm screws, one for each corner.</li>
</ol>
<p>Ensure the connector cable remains accessible at the back for routing into the chassis.</p>
<p>Make sure the Display is flush with the frame opening.</p>
<p>See video below for more details:</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 11.mp4" type="video/mp4">
</video>
<p>By the end of this step, you fastened your display to the front panel.</p>
</div>
<div class="assembly-step">
<h4>Step 13: Fit the Front Panel</h4>
<ol>
<li>Hold your Front Panel by the Raspberry Pi GPIO header and align it with the channel grooves in the Pi bracket.</li>
<li>Gently push your Front Panel down the channel grooves.</li>
</ol>
<p>Make sure the Front Panel is flush with the Pi bracket with no pinched wires.</p>
<p>See video below for more details:</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 12.mp4" type="video/mp4">
</video>
<p>By the end of this step, you installed the face of your RSC v4.</p>
</div>
<div class="assembly-step">
<h4>Step 14: Assemble the Lid with Button and NeoPixel Ring</h4>
<!-- insert AIY image for button wiring -->
<ol>
<li>Push the Arcade button in the Lid opening.</li>
<li>Route the NeoPixel connector wires through the Button Nut.</li>
<li>Sit the NeoPixel LED ring around the Arcade Button shaft, on the shelf under the Lid, facing down.</li>
<li>Fasten the button and NeoPixel ring in place gently using the Button Nut.</li>
<li>Route the button wires and NeoPixel wires neatly so they remain accessible for connection to the Expansion Board.</li>
</ol>
<p>See video below for more details:</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 13.mp4" type="video/mp4">
</video>
<p>By the end of this step, you assembled the lid.</p>
</div>
<div class="assembly-step">
<h4>Step 15: Connect the NeoPixels and Button</h4>
<!-- insert AIY image for button header install orientation -->
<ol>
<li>Connect the NeoPixel LED Ring wires (5V, GND, PWM signal) to its header pins on the Expansion Board.</li>
<li>Connect the Arcade Button wires to the AIY Voice Bonnet button header.</li>
</ol>
<p>Note: Make sure to secure all connections and route wires carefully inside the chassis to help reduce interference when closing the lid.</p>
<p>See video below for more details:</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 14.mp4" type="video/mp4">
</video>
<p>By the end of this step, you connected the lid.</p>
</div>
<div class="assembly-step">
<h4>Step 16: Install the Rear panel and Lid</h4>
<ol>
<li>Align the Rear panel with the channel grooves at the back of the Pi bracket.</li>
<li>Gently push your Rear panel down the channel grooves until flush with the Pi bracket.</li>
<li>Carefully tidy all wires in the chassis to prevent pinching or interference when closing the Lid.</li>
<li>Align the Lid on the Pi bracket and gently press down until flush with the Pi bracket.</li>
</ol>
<p>See video below for more details:</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4/Step 15.mp4" type="video/mp4">
</video>
<p>By the end of this step, you have fully assembled your RSC v4 😊🎉</p>
</div>
</div>
<!-- Number text and circular buttons for v4 -->
<div class="slideshow-controls">
<button class="circle-button" id="prevBtn"> < </button>
<div id="stepNumberV4" class="step-number">
Step <span id="currentStepV4">1</span> / <span id="totalStepsV4">15</span>
</div>
<button class="circle-button" id="nextBtn"> > </button>
</div>
</div>
</div>
<!-- <div id="v4_1" class="version-guide" style="display: none;">
<h3>Version: RSC v4.1</h3>
<p>🚧 Coming soon: RSC v4.1 assembly steps are under construction. Check back shortly for updates.</p>
</div> -->
<div id="v4_1" class="version-guide" style="display:none;">
<h3>Version: RSC v4.1</h3>
<div class="assembly-step active">
<h4>Step 01: Assemble the Speaker Unit</h4>
<p>
Insert the Speaker into the Speaker Case, aligning it with the inner support ring. Then, place the Speaker Lid on top and press gently until it snaps into place.
The lid is designed with a precision friction-fit grip, eliminating the need for screws while ensuring a secure hold.
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 1.mp4" type="video/mp4">
</video>
</div>
<div class="assembly-step">
<h4>Step 02: Mount the Pi Bracket onto the Speaker Unit</h4>
<p>
Align the Pi Bracket with the upper section of the Speaker Unit, ensuring the speaker wires pass cleanly through the central opening.
Gently rotate the Pi Bracket into position until it locks into the designed grooves.
<!-- The Updated v4.1 design includes snap-fit joints, which remove the need for screws while providing a firm and vibration-resistant connection between the speaker base and the Pi Bracket. -->
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 2.mp4" type="video/mp4">
</video>
</div>
<div class="assembly-step">
<h4>Step 03: Mount the Raspberry Pi into the Pi Bracket</h4>
<p>
Place the Raspberry Pi 4 onto the Pi Bracket, aligning the mounting holes with the standoffs. Secure it using 4 × M2×6 screws.
<!-- Ensure that the GPIO header is positioned upward for later connection with the Expansion Board and AIY Voice Bonnet, and route the speaker wires neatly below the Pi to prevent obstruction. -->
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 3.mp4" type="video/mp4">
</video>
</div>
<div class="assembly-step">
<h4>Step 3.1: Check Pi Bracket</h4>
<p>
Ensure that the board is oriented so that the USB ports and microSD card slot align with their dedicated openings in the chassis.
<!-- This allows quick access for updates, maintenance, and storage expansion without reopening the assembly, a key improvement introduced in RSC v4.1. -->
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 3_1.mp4" type="video/mp4">
</video>
</div>
<div class="assembly-step">
<h4>Step 04: Mount the AIY Voice Bonnet onto the Raspberry Pi</h4>
<p>
Align the AIY Voice Bonnet with the GPIO header of the Raspberry Pi 4 and gently press it down until it is fully seated.
Make sure all the pins are correctly aligned and inserted straight into the header to prevent bending or loose contact.
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 4.mp4" type="video/mp4">
</video>
</div>
<div class="assembly-step">
<h4>Step 05: Mount the RSC Expansion Board onto the AIY Voice Bonnet</h4>
<p>
Align the RSC Expansion Board with the pin headers on the AIY Voice Bonnet, ensuring all pins match their respective sockets. Gently press the board down until it sits evenly on top of the bonnet.
If the board doesn’t hold firmly in place, secure it with 1 × M2×6 screw at the mounting hole provided on the edge of the board. This will keep it stable and prevent loose contact during operation.
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 5.mp4" type="video/mp4">
</video>
</div>
<div class="assembly-step">
<h4>Step 06: Connect the Speaker Wires to the Voice Bonnet</h4>
<p>
Insert the Speaker wires (red and black) into the terminal block on the AIY Voice Bonnet. Ensure the red wire goes into the positive (+) terminal and the black wire into the negative (–) terminal.
Use a small screwdriver to gently tighten both screws, securing the wires firmly in place. Make sure there is no loose connection before continuing.
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 6.mp4" type="video/mp4">
</video>
</div>
<div class="assembly-step">
<h4>Step 07: Connect the Expansion Board to the AIY Voice Bonnet</h4>
<p>
Use jumper wires to connect the RSC Expansion Board with the AIY Voice Bonnet as shown below. Ensure that each pin is connected correctly and the wire connections are firm.
Match the pins carefully as follows: <br>
3.3V to 3.3V <br>
TX to TXD <br>
RX to TXD <br>
PWM to PWM <br>
Double-check that the orientation and wire colors match on both ends to prevent reversed connections.
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 7.mp4" type="video/mp4">
</video>
</div>
<div class="assembly-step">
<h4>Step 08: Mount the Servo Motors and Connect Them to the Expansion Board</h4>
<p>
Insert both Servo motors into their designated slots on the Main Chassis. Make sure the servo shafts face outward for proper flipper movement.
Once positioned, connect each servo cable to the PWM header on the Expansion Board, following the correct pin orientation: <br>
Left Servo to PWM1 to Brown = GND, Red = 5V, Orange = Signal <br>
Right Servo to PWM2 to Brown = GND, Red = 5V, Orange = Signal <br>
P.S. Don't FORGET to attach (with screws) the printed flippers to the servos before moving on
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 8.mp4" type="video/mp4">
</video>
</div>
<div class="assembly-step">
<h4>Step 09: Connect and Mount the ESP32-2432S028 Display</h4>
<p>
<ol>
<li>Connect Display Wires:
<ol type="a">
<li>Attach one end of the 1x4P connector cable to the VIN, TX, RX, and GND pins of the ESP32-2432S028 Display.</li>
<li>Ensure firm connections to avoid loose contact during operation.</li>
</ol>
</li>
<li>Mount the Display into Its Case:
<ol type="a">
<li>Place the ESP32 Display module into the Front Panel Display Case, aligning the screen with the front opening.</li>
<li>Press gently until the board sits flush within the case.</li>
</ol>
</li>
<li>Fit the case gently into the chassis.</li>
</ol>
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 9.mp4" type="video/mp4">
</video>
</div>
<div class="assembly-step">
<h4>Step 10: Connect to Expansion Board</h4>
<p>
Connect the other ends of the wires from the ESP32-2432S028 Display Pin to the RSC Expansion Board as follows:<br>
<ul>
<li>VIN to 5V</li>
<li>TX to TX</li>
<li>RX to RX</li>
<li>GND to GND</li>
</ul>
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 10.mp4" type="video/mp4">
</video>
</div>
<div class="assembly-step">
<h4>Step 11: Assemble the Head Unit (Button + NeoPixel Ring + Lid)</h4>
<p>
<ol>
<li>Prepare Components:
<ol type="a">
<li>Gather the Lid (top cover), Arcade Button (with LED wires), Button Holder Ring, and NeoPixel Ring.</li>
</ol>
</li>
<li>Insert the Button:
<ol type="a">
<li>Pass the Arcade Button wires through the central hole of the Lid from the top side.</li>
<li>Insert the button firmly into the hole until the threaded section is fully visible underneath.</li>
</ol>
</li>
<li>Mount the NeoPixel Ring:
<ol type="a">
<li>Pass the button wires through the center of the NeoPixel Ring and position the ring around the base of the button on the inner side of the Lid.</li>
<li>Align the ring with the small square supports inside the Lid; these ensure proper centering and stability.</li>
</ol>
</li>
<li>Secure the Assembly:
<ol type="a">
<li>Screw the white Button Holder Ring onto the base of the Arcade Button to lock the entire head unit (button + NeoPixel Ring) securely in place.</li>
</ol>
</li>
</ol>
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 11.mp4" type="video/mp4">
</video>
</div>
<div class="assembly-step">
<h4>Step 12: Connect the NeoPixel Ring and Arcade Button</h4>
<p>
<ol>
<li>Connect the NeoPixel Ring:
<ol type="a">
<li>Attach the NeoPixel Ring wires to the RSC Expansion Board.</li>
<li>Ensure the Signal (DIN) wire connects to the NeoPixel header pin on the Expansion Board.</li>
<li>The 5V and GND wires should connect to their respective power pins.</li>
</ol>
</li>
<li>Connect the Arcade Button:
<ol type="a">
<li>Plug the Arcade Button connector into the Button header on the AIY Voice Bonnet.</li>
</ol>
</li>
</ol>
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 12.mp4" type="video/mp4">
</video>
</div>
<div class="assembly-step">
<h4>Step 13: Install the Power Switch and Rear Panel</h4>
<p>
<ol>
<li>Mount the Switch:
<ol type="a">
<li>Insert the Power Switch into the rectangular slot on the Rear Panel from the back side. Push it in until it clicks into place; the fit is snug by design.</li>
</ol>
</li>
<li>Attach the Rear Panel:
<ol type="a">
<li>Carefully slide the Rear Panel into the Chassis, ensuring the switch wires pass neatly inside without being pinched.</li>
</ol>
</li>
<li>Connect the Power Wires:
<ol type="a">
<li>Plug the Power Switch wires into the Switch header on the RSC Expansion Board.</li>
</ol>
</li>
</ol>
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 13.mp4" type="video/mp4">
</video>
</div>
<div class="assembly-step">
<h4>Step 14: Attach the Lid and Complete the Assembly</h4>
<p>
<ol>
<li>Position the Lid:
<ol type="a">
<li>Carefully lower the Lid assembly (with the Arcade Button and NeoPixel Ring already installed) onto the top of the Chassis.</li>
<li>Ensure all internal wires are neatly tucked in to avoid being pinched.</li>
</ol>
</li>
<li>Secure the Fit:
<ol type="a">
<li>Gently press the Lid down until it snaps into place. The v4.1 design uses a precision friction-fit connection that holds the Lid securely without screws.</li>
</ol>
</li>
<li>Final Check:
<ol type="a">
<li>Confirm that:
<ol type="i">
<li>The Arcade Button moves freely when pressed.</li>
<li>The Power Switch on the back panel toggles easily.</li>
<li>All seams are properly aligned for a clean finish.</li>
</ol>
</li>
</ol>
</li>
</ol>
</p>
<video class="portrait-gif" autoplay muted controls playsinline>
<source src="media/guide/v4.1/Step 14.mp4" type="video/mp4">
</video>
</div>
<!-- Number text and circular buttons for v4.1 -->
<div class="slideshow-controls">
<button class="circle-button" id="prevBtn_v41"> < </button>
<div id="stepNumberV41" class="step-number">
Step <span id="currentStepV41">1</span> / <span id="totalStepsV41">15</span>
</div>
<button class="circle-button" id="nextBtn_v41"> > </button>
</div>
</div>
</section>
<footer>
<div class="footer-text" style="color: white !important;">
<p style="color:white !important;">Contributors: <b>Ali</b> (videos), <b> Matevž</b> (text), <b>Feiazie</b> (updates), <b>Farnaz</b> & <b>Marie</b> (review)</p>
</div>
</footer>
<script>
function showVersion(id) {
document.querySelectorAll('.version-guide').forEach(div => div.style.display = 'none');
document.getElementById(id).style.display = 'block';
if (id === 'v4') {
currentStep = 0;
showStep(currentStep);
} else if (id === 'v4_1') {
currentStepV41 = 0;
showStepV41(currentStepV41);
}
}
/* ------------------
V4 SLIDESHOW
------------------ */
const steps = document.querySelectorAll('#v4 .assembly-step');
let currentStep = 0;
function showStep(index) {
steps.forEach((step, i) => step.classList.toggle('active', i === index));
// Update number text
document.getElementById('currentStepV4').textContent = index + 1;
document.getElementById('totalStepsV4').textContent = steps.length;
// Enable/disable arrows
document.getElementById('prevBtn').style.visibility = index === 0 ? 'hidden' : 'visible';
document.getElementById('nextBtn').style.visibility = index === steps.length - 1 ? 'hidden' : 'visible';
}
document.getElementById('prevBtn').addEventListener('click', () => {
if (currentStep > 0) {
currentStep--;
showStep(currentStep);
}
});
document.getElementById('nextBtn').addEventListener('click', () => {
if (currentStep < steps.length - 1) {
currentStep++;
showStep(currentStep);
}
});
showStep(currentStep);
/* ------------------
V4.1 SLIDESHOW
------------------ */
const stepsV41 = document.querySelectorAll('#v4_1 .assembly-step');
let currentStepV41 = 0;
function showStepV41(index) {
stepsV41.forEach((step, i) => step.classList.toggle('active', i === index));
// Update number text
document.getElementById('currentStepV41').textContent = index + 1;
document.getElementById('totalStepsV41').textContent = stepsV41.length;
// Enable/disable arrows
document.getElementById('prevBtn_v41').style.visibility = index === 0 ? 'hidden' : 'visible';
document.getElementById('nextBtn_v41').style.visibility = index === stepsV41.length - 1 ? 'hidden' : 'visible';
}
document.getElementById('prevBtn_v41').addEventListener('click', () => {
if (currentStepV41 > 0) {
currentStepV41--;
showStepV41(currentStepV41);
}
});
document.getElementById('nextBtn_v41').addEventListener('click', () => {
if (currentStepV41 < stepsV41.length - 1) {
currentStepV41++;
showStepV41(currentStepV41);
}
});
showStepV41(currentStepV41);
</script>
<script>
const burgerBtn = document.getElementById('burgerBtn');
const mobileMenu = document.getElementById('mobileMenu');
const closeMenu = document.getElementById('closeMenu');
burgerBtn.addEventListener('click', () => {
mobileMenu.classList.add('open');
});
closeMenu.addEventListener('click', () => {
mobileMenu.classList.remove('open');
});
// Close menu when clicking a link
mobileMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.remove('open');
});
});
</script>
</body>
</html>