Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
152 lines (147 loc) · 57.7 KB
/
Copy pathindex.html
File metadata and controls
152 lines (147 loc) · 57.7 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
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Build Lab Skill Bricks</title>
<style>
:root {
color-scheme: light;
font-family: Arial, Helvetica, sans-serif;
color: #1f2937;
background: #f3f4f6;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
main { width: min(70rem, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0 4rem; }
header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; }
p { margin: 0; color: #4b5563; font-size: 1.1rem; }
.logo { width: min(12rem, 30vw); height: auto; }
.toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin: 0 0 2rem; }
.controls { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; }
.sort-control, .platform-control { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.sort-label { margin-right: .35rem; color: #4b5563; font-weight: 700; }
.sort-control button, .platform-control button { padding: .6rem .9rem; border: .12rem solid #b7c2ca; border-radius: 2rem; color: #34404b; background: white; font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }
.sort-control button[aria-pressed="true"], .platform-control button[aria-pressed="true"] { border-color: #0089b2; color: white; background: #0089b2; }
.sort-control button:focus-visible, .platform-control button:focus-visible { outline: .2rem solid #0089b2; outline-offset: .15rem; }
.download-all { display: inline-flex; grid-template-rows: none; align-items: center; padding: .68rem 1rem; border: 0; border-radius: 2rem; color: white; background: #c51a4a; box-shadow: 0 .15rem .55rem rgb(0 0 0 / 14%); font-weight: 700; }
.download-all:hover, .download-all:focus-visible { transform: translateY(-2px); background: #a4133d; box-shadow: 0 .3rem .8rem rgb(0 0 0 / 18%); outline: .2rem solid #c51a4a; outline-offset: .15rem; }
.group + .group { margin-top: 2.5rem; }
h2 { margin: 0 0 1rem; padding-bottom: .55rem; border-bottom: .25rem solid #0089b2; color: #007394; font-size: 1.6rem; }
.group.do h2 { border-color: #c51a4a; color: #a4133d; }
.brick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
a { --accent: #0089b2; display: grid; grid-template-rows: 11rem auto; overflow: hidden; border-bottom: .55rem solid var(--accent); border-radius: .65rem; color: inherit; background: white; box-shadow: 0 .2rem .75rem rgb(0 0 0 / 9%); text-decoration: none; }
a.do { --accent: #c51a4a; }
a:hover, a:focus-visible { transform: translateY(-2px); box-shadow: 0 .4rem 1.1rem rgb(0 0 0 / 14%); outline: .2rem solid #0089b2; outline-offset: .15rem; }
a.do:hover, a.do:focus-visible { outline-color: #c51a4a; }
.thumbnail { width: 100%; height: 100%; padding: 1rem; object-fit: contain; background: linear-gradient(145deg, #fff, #eef4f6); }
.card-copy { padding: 1rem 1.15rem 1.1rem; }
.name { display: block; font-size: 1.35rem; font-weight: 700; }
.meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .45rem; }
.strand { display: block; color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.platform { padding: .2rem .55rem; border: .1rem solid #34404b; border-radius: 2rem; color: #34404b; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.empty { padding: 2rem 0; }
@media (max-width: 36rem) { header { align-items: flex-start; flex-direction: column; } .logo { width: 10rem; } }
</style>
</head>
<body>
<main>
<header>
<div>
<h1>Build Lab Skill Bricks</h1>
<p>Component guides for Raspberry Pi and Raspberry Pi Pico.</p>
</div>
<img class="logo" src="button/assets/rpf-logo-lockup.png" alt="Raspberry Pi Foundation">
</header>
<div class="toolbar">
<div class="controls">
<div class="platform-control" role="group" aria-label="Show cards for" hidden>
<span class="sort-label">Show</span> <button type="button" data-platform="blocks" aria-pressed="false">Pico blocks</button> <button type="button" data-platform="pico" aria-pressed="false">Pico</button> <button type="button" data-platform="pi" aria-pressed="false">Raspberry Pi</button> </div>
<div class="sort-control" role="group" aria-label="Sort Skill Bricks" hidden>
<span class="sort-label">Sort by</span>
<button type="button" data-sort="strand" aria-pressed="true">Detect / Do</button>
<button type="button" data-sort="alpha" aria-pressed="false">A–Z</button>
</div>
</div>
<a class="download-all" href="skill-bricks-complete.pdf" download>Download all as PDF</a>
</div>
<div id="strand-view"> <section class="group detect" aria-labelledby="detect-heading">
<h2 id="detect-heading">Detect</h2>
<ul class="brick-grid"> <li data-platform="blocks"><a href="button/button-blocks.html"><img class="thumbnail" src="button/images/component-button.png" alt="A 6 mm tactile push button with a round cap and four legs"><span class="card-copy"><span class="name">Button</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="button/button-pico.html"><img class="thumbnail" src="button/images/component-button.png" alt="A 6 mm tactile push button with a round cap and four legs"><span class="card-copy"><span class="name">Button</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="button/button-pi.html"><img class="thumbnail" src="button/images/component-button.png" alt="A 6 mm tactile push button with a round cap and four legs"><span class="card-copy"><span class="name">Button</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="capacitive-touch/capacitive-touch-blocks.html"><img class="thumbnail" src="capacitive-touch/images/component-capacitive-touch.png" alt="A blue TTP223 capacitive touch sensor module with three header pins"><span class="card-copy"><span class="name">Capacitive touch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="capacitive-touch/capacitive-touch-pico.html"><img class="thumbnail" src="capacitive-touch/images/component-capacitive-touch.png" alt="A blue TTP223 capacitive touch sensor module with three header pins"><span class="card-copy"><span class="name">Capacitive touch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="capacitive-touch/capacitive-touch-pi.html"><img class="thumbnail" src="capacitive-touch/images/component-capacitive-touch.png" alt="A blue TTP223 capacitive touch sensor module with three header pins"><span class="card-copy"><span class="name">Capacitive touch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="ldr/ldr-blocks.html"><img class="thumbnail" src="ldr/images/component-ldr.png" alt="A round light-dependent resistor with a zigzag track on its face and two legs"><span class="card-copy"><span class="name">LDR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="ldr/ldr-pico.html"><img class="thumbnail" src="ldr/images/component-ldr.png" alt="A round light-dependent resistor with a zigzag track on its face and two legs"><span class="card-copy"><span class="name">LDR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="ldr/ldr-pi.html"><img class="thumbnail" src="ldr/images/component-ldr.png" alt="A round light-dependent resistor with a zigzag track on its face and two legs"><span class="card-copy"><span class="name">LDR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="line-sensor/line-sensor-blocks.html"><img class="thumbnail" src="line-sensor/images/component-line-sensor.png" alt="A KY-033 infrared line tracking sensor module with a blue adjustment potentiometer"><span class="card-copy"><span class="name">Line sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="line-sensor/line-sensor-pico.html"><img class="thumbnail" src="line-sensor/images/component-line-sensor.png" alt="A KY-033 infrared line tracking sensor module with a blue adjustment potentiometer"><span class="card-copy"><span class="name">Line sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="line-sensor/line-sensor-pi.html"><img class="thumbnail" src="line-sensor/images/component-line-sensor.png" alt="A KY-033 infrared line tracking sensor module with a blue adjustment potentiometer"><span class="card-copy"><span class="name">Line sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="distance/distance-blocks.html"><img class="thumbnail" src="distance/images/component-distance.png" alt="An HC-SR04P ultrasonic distance sensor module with two round transducers and four pins"><span class="card-copy"><span class="name">Distance sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="distance/distance-pico.html"><img class="thumbnail" src="distance/images/component-distance.png" alt="An HC-SR04P ultrasonic distance sensor module with two round transducers and four pins"><span class="card-copy"><span class="name">Distance sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="distance/distance-pi.html"><img class="thumbnail" src="distance/images/component-distance.png" alt="An HC-SR04P ultrasonic distance sensor module with two round transducers and four pins"><span class="card-copy"><span class="name">Distance sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="pir/pir-blocks.html"><img class="thumbnail" src="pir/images/component-pir.png" alt="A PIR motion sensor with a white domed lens on a small circuit board"><span class="card-copy"><span class="name">PIR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="pir/pir-pico.html"><img class="thumbnail" src="pir/images/component-pir.png" alt="A PIR motion sensor with a white domed lens on a small circuit board"><span class="card-copy"><span class="name">PIR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="pir/pir-pi.html"><img class="thumbnail" src="pir/images/component-pir.png" alt="A PIR motion sensor with a white domed lens on a small circuit board"><span class="card-copy"><span class="name">PIR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="am312-pir/am312-pir-blocks.html"><img class="thumbnail" src="am312-pir/images/component-am312-pir.png" alt="A tiny AM312 PIR motion sensor module with a white domed lens, green circuit board and three pins"><span class="card-copy"><span class="name">AM312 PIR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="am312-pir/am312-pir-pico.html"><img class="thumbnail" src="am312-pir/images/component-am312-pir.png" alt="A tiny AM312 PIR motion sensor module with a white domed lens, green circuit board and three pins"><span class="card-copy"><span class="name">AM312 PIR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="am312-pir/am312-pir-pi.html"><img class="thumbnail" src="am312-pir/images/component-am312-pir.png" alt="A tiny AM312 PIR motion sensor module with a white domed lens, green circuit board and three pins"><span class="card-copy"><span class="name">AM312 PIR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="potentiometer/potentiometer-blocks.html"><img class="thumbnail" src="potentiometer/images/component-potentiometer.png" alt="A blue square 10 kilohm 3386P trimpot with a ribbed blue knob and three pins"><span class="card-copy"><span class="name">Potentiometer</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="potentiometer/potentiometer-pico.html"><img class="thumbnail" src="potentiometer/images/component-potentiometer.png" alt="A blue square 10 kilohm 3386P trimpot with a ribbed blue knob and three pins"><span class="card-copy"><span class="name">Potentiometer</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="potentiometer/potentiometer-pi.html"><img class="thumbnail" src="potentiometer/images/component-potentiometer.png" alt="A blue square 10 kilohm 3386P trimpot with a ribbed blue knob and three pins"><span class="card-copy"><span class="name">Potentiometer</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="temperature-sensor/temperature-sensor-blocks.html"><img class="thumbnail" src="temperature-sensor/images/component-temperature-sensor.png" alt="A TMP36 temperature sensor in a three-legged TO-92 package"><span class="card-copy"><span class="name">Temperature sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="temperature-sensor/temperature-sensor-pico.html"><img class="thumbnail" src="temperature-sensor/images/component-temperature-sensor.png" alt="A TMP36 temperature sensor in a three-legged TO-92 package"><span class="card-copy"><span class="name">Temperature sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="temperature-sensor/temperature-sensor-pi.html"><img class="thumbnail" src="temperature-sensor/images/component-temperature-sensor.png" alt="A TMP36 temperature sensor in a three-legged TO-92 package"><span class="card-copy"><span class="name">Temperature sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="pico"><a href="temperature-probe/temperature-probe-pico.html"><img class="thumbnail" src="temperature-probe/images/component-temperature-probe.png" alt="A DS18B20 probe with a sealed metal tip, black cable and three wire tails"><span class="card-copy"><span class="name">Temperature probe</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="temperature-probe/temperature-probe-pi.html"><img class="thumbnail" src="temperature-probe/images/component-temperature-probe.png" alt="A DS18B20 probe with a sealed metal tip, black cable and three wire tails"><span class="card-copy"><span class="name">Temperature probe</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="tilt-switch/tilt-switch-blocks.html"><img class="thumbnail" src="tilt-switch/images/component-tilt-switch.png" alt="A small two-legged metal ball tilt switch"><span class="card-copy"><span class="name">Tilt switch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="tilt-switch/tilt-switch-pico.html"><img class="thumbnail" src="tilt-switch/images/component-tilt-switch.png" alt="A small two-legged metal ball tilt switch"><span class="card-copy"><span class="name">Tilt switch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="tilt-switch/tilt-switch-pi.html"><img class="thumbnail" src="tilt-switch/images/component-tilt-switch.png" alt="A small two-legged metal ball tilt switch"><span class="card-copy"><span class="name">Tilt switch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="toggle-switch/toggle-switch-blocks.html"><img class="thumbnail" src="toggle-switch/images/component-toggle-switch.png" alt="A miniature SPDT toggle switch with a metal lever and three pins"><span class="card-copy"><span class="name">Toggle switch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="toggle-switch/toggle-switch-pico.html"><img class="thumbnail" src="toggle-switch/images/component-toggle-switch.png" alt="A miniature SPDT toggle switch with a metal lever and three pins"><span class="card-copy"><span class="name">Toggle switch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="toggle-switch/toggle-switch-pi.html"><img class="thumbnail" src="toggle-switch/images/component-toggle-switch.png" alt="A miniature SPDT toggle switch with a metal lever and three pins"><span class="card-copy"><span class="name">Toggle switch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="pi"><a href="picamera/picamera-pi.html"><img class="thumbnail" src="picamera/images/component-picamera.png" alt="Raspberry Pi Camera Module 3 with its lens and flat ribbon cable"><span class="card-copy"><span class="name">Pi Camera</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> </ul>
</section> <section class="group do" aria-labelledby="do-heading">
<h2 id="do-heading">Do</h2>
<ul class="brick-grid"> <li data-platform="blocks"><a class="do" href="led/led-blocks.html"><img class="thumbnail" src="led/images/component-led.png" alt="A 5 mm red LED with a long anode leg and a short cathode leg"><span class="card-copy"><span class="name">LED</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="led/led-pico.html"><img class="thumbnail" src="led/images/component-led.png" alt="A 5 mm red LED with a long anode leg and a short cathode leg"><span class="card-copy"><span class="name">LED</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="led/led-pi.html"><img class="thumbnail" src="led/images/component-led.png" alt="A 5 mm red LED with a long anode leg and a short cathode leg"><span class="card-copy"><span class="name">LED</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a class="do" href="rgb-led/rgb-led-blocks.html"><img class="thumbnail" src="rgb-led/images/component-rgb-led.png" alt="A clear common-cathode RGB LED with four legs"><span class="card-copy"><span class="name">RGB LED</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="rgb-led/rgb-led-pico.html"><img class="thumbnail" src="rgb-led/images/component-rgb-led.png" alt="A clear common-cathode RGB LED with four legs"><span class="card-copy"><span class="name">RGB LED</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="rgb-led/rgb-led-pi.html"><img class="thumbnail" src="rgb-led/images/component-rgb-led.png" alt="A clear common-cathode RGB LED with four legs"><span class="card-copy"><span class="name">RGB LED</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a class="do" href="neopixels/neopixels-blocks.html"><img class="thumbnail" src="neopixels/images/component-neopixels.png" alt="A small Adafruit NeoPixel JST SH breakout with one square RGB pixel"><span class="card-copy"><span class="name">NeoPixels</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="neopixels/neopixels-pico.html"><img class="thumbnail" src="neopixels/images/component-neopixels.png" alt="A small Adafruit NeoPixel JST SH breakout with one square RGB pixel"><span class="card-copy"><span class="name">NeoPixels</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="neopixels/neopixels-pi.html"><img class="thumbnail" src="neopixels/images/component-neopixels.png" alt="A small Adafruit NeoPixel JST SH breakout with one square RGB pixel"><span class="card-copy"><span class="name">NeoPixels</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a class="do" href="buzzer/buzzer-blocks.html"><img class="thumbnail" src="buzzer/images/component-buzzer.png" alt="A 12 mm black active buzzer with a vent hole on top and two pins"><span class="card-copy"><span class="name">Active buzzer</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="buzzer/buzzer-pico.html"><img class="thumbnail" src="buzzer/images/component-buzzer.png" alt="A 12 mm black active buzzer with a vent hole on top and two pins"><span class="card-copy"><span class="name">Active buzzer</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="buzzer/buzzer-pi.html"><img class="thumbnail" src="buzzer/images/component-buzzer.png" alt="A 12 mm black active buzzer with a vent hole on top and two pins"><span class="card-copy"><span class="name">Active buzzer</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a class="do" href="passive-buzzer/passive-buzzer-blocks.html"><img class="thumbnail" src="passive-buzzer/images/component-passive-buzzer.png" alt="An illustrative two-pin black passive piezo buzzer; its type cannot be identified by appearance alone"><span class="card-copy"><span class="name">Passive buzzer</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="passive-buzzer/passive-buzzer-pico.html"><img class="thumbnail" src="passive-buzzer/images/component-passive-buzzer.png" alt="An illustrative two-pin black passive piezo buzzer; its type cannot be identified by appearance alone"><span class="card-copy"><span class="name">Passive buzzer</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="passive-buzzer/passive-buzzer-pi.html"><img class="thumbnail" src="passive-buzzer/images/component-passive-buzzer.png" alt="An illustrative two-pin black passive piezo buzzer; its type cannot be identified by appearance alone"><span class="card-copy"><span class="name">Passive buzzer</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a class="do" href="speaker/speaker-blocks.html"><img class="thumbnail" src="speaker/images/component-speaker.png" alt="A small passive eight-ohm loudspeaker with two solder terminals"><span class="card-copy"><span class="name">Speaker</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="speaker/speaker-pico.html"><img class="thumbnail" src="speaker/images/component-speaker.png" alt="A small passive eight-ohm loudspeaker with two solder terminals"><span class="card-copy"><span class="name">Speaker</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="speaker/speaker-pi.html"><img class="thumbnail" src="speaker/images/component-speaker.png" alt="A small passive eight-ohm loudspeaker with two solder terminals"><span class="card-copy"><span class="name">Speaker</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a class="do" href="motor-driver/motor-driver-blocks.html"><img class="thumbnail" src="motor-driver/images/component-motor-driver.png" alt="An L293D sixteen-pin motor driver integrated circuit"><span class="card-copy"><span class="name">Motor driver</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="motor-driver/motor-driver-pico.html"><img class="thumbnail" src="motor-driver/images/component-motor-driver.png" alt="An L293D sixteen-pin motor driver integrated circuit"><span class="card-copy"><span class="name">Motor driver</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="motor-driver/motor-driver-pi.html"><img class="thumbnail" src="motor-driver/images/component-motor-driver.png" alt="An L293D sixteen-pin motor driver integrated circuit"><span class="card-copy"><span class="name">Motor driver</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a class="do" href="servo/servo-blocks.html"><img class="thumbnail" src="servo/images/component-servo.png" alt="A blue positional microservo with a white horn and a three-wire plug"><span class="card-copy"><span class="name">Servo motor</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="servo/servo-pico.html"><img class="thumbnail" src="servo/images/component-servo.png" alt="A blue positional microservo with a white horn and a three-wire plug"><span class="card-copy"><span class="name">Servo motor</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="servo/servo-pi.html"><img class="thumbnail" src="servo/images/component-servo.png" alt="A blue positional microservo with a white horn and a three-wire plug"><span class="card-copy"><span class="name">Servo motor</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="pico"><a class="do" href="stepper/stepper-pico.html"><img class="thumbnail" src="stepper/images/component-stepper.png" alt="A 28BYJ-48 stepper motor beside its ULN2003 driver board"><span class="card-copy"><span class="name">Stepper motor</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="stepper/stepper-pi.html"><img class="thumbnail" src="stepper/images/component-stepper.png" alt="A 28BYJ-48 stepper motor beside its ULN2003 driver board"><span class="card-copy"><span class="name">Stepper motor</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="pi"><a class="do" href="robot/robot-pi.html"><img class="thumbnail" src="robot/images/component-robot.png" alt="A small two-wheel rover with geared motors, a caster, Pico, motor driver and separate batteries"><span class="card-copy"><span class="name">Robot / rover</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> </ul>
</section> </div>
<div id="alpha-view" hidden>
<section class="group" aria-labelledby="alpha-heading">
<h2 id="alpha-heading">A–Z</h2>
<ul class="brick-grid"> <li data-platform="blocks"><a class="do" href="buzzer/buzzer-blocks.html"><img class="thumbnail" src="buzzer/images/component-buzzer.png" alt="A 12 mm black active buzzer with a vent hole on top and two pins"><span class="card-copy"><span class="name">Active buzzer</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="buzzer/buzzer-pico.html"><img class="thumbnail" src="buzzer/images/component-buzzer.png" alt="A 12 mm black active buzzer with a vent hole on top and two pins"><span class="card-copy"><span class="name">Active buzzer</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="buzzer/buzzer-pi.html"><img class="thumbnail" src="buzzer/images/component-buzzer.png" alt="A 12 mm black active buzzer with a vent hole on top and two pins"><span class="card-copy"><span class="name">Active buzzer</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="am312-pir/am312-pir-blocks.html"><img class="thumbnail" src="am312-pir/images/component-am312-pir.png" alt="A tiny AM312 PIR motion sensor module with a white domed lens, green circuit board and three pins"><span class="card-copy"><span class="name">AM312 PIR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="am312-pir/am312-pir-pico.html"><img class="thumbnail" src="am312-pir/images/component-am312-pir.png" alt="A tiny AM312 PIR motion sensor module with a white domed lens, green circuit board and three pins"><span class="card-copy"><span class="name">AM312 PIR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="am312-pir/am312-pir-pi.html"><img class="thumbnail" src="am312-pir/images/component-am312-pir.png" alt="A tiny AM312 PIR motion sensor module with a white domed lens, green circuit board and three pins"><span class="card-copy"><span class="name">AM312 PIR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="button/button-blocks.html"><img class="thumbnail" src="button/images/component-button.png" alt="A 6 mm tactile push button with a round cap and four legs"><span class="card-copy"><span class="name">Button</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="button/button-pico.html"><img class="thumbnail" src="button/images/component-button.png" alt="A 6 mm tactile push button with a round cap and four legs"><span class="card-copy"><span class="name">Button</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="button/button-pi.html"><img class="thumbnail" src="button/images/component-button.png" alt="A 6 mm tactile push button with a round cap and four legs"><span class="card-copy"><span class="name">Button</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="capacitive-touch/capacitive-touch-blocks.html"><img class="thumbnail" src="capacitive-touch/images/component-capacitive-touch.png" alt="A blue TTP223 capacitive touch sensor module with three header pins"><span class="card-copy"><span class="name">Capacitive touch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="capacitive-touch/capacitive-touch-pico.html"><img class="thumbnail" src="capacitive-touch/images/component-capacitive-touch.png" alt="A blue TTP223 capacitive touch sensor module with three header pins"><span class="card-copy"><span class="name">Capacitive touch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="capacitive-touch/capacitive-touch-pi.html"><img class="thumbnail" src="capacitive-touch/images/component-capacitive-touch.png" alt="A blue TTP223 capacitive touch sensor module with three header pins"><span class="card-copy"><span class="name">Capacitive touch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="distance/distance-blocks.html"><img class="thumbnail" src="distance/images/component-distance.png" alt="An HC-SR04P ultrasonic distance sensor module with two round transducers and four pins"><span class="card-copy"><span class="name">Distance sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="distance/distance-pico.html"><img class="thumbnail" src="distance/images/component-distance.png" alt="An HC-SR04P ultrasonic distance sensor module with two round transducers and four pins"><span class="card-copy"><span class="name">Distance sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="distance/distance-pi.html"><img class="thumbnail" src="distance/images/component-distance.png" alt="An HC-SR04P ultrasonic distance sensor module with two round transducers and four pins"><span class="card-copy"><span class="name">Distance sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="ldr/ldr-blocks.html"><img class="thumbnail" src="ldr/images/component-ldr.png" alt="A round light-dependent resistor with a zigzag track on its face and two legs"><span class="card-copy"><span class="name">LDR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="ldr/ldr-pico.html"><img class="thumbnail" src="ldr/images/component-ldr.png" alt="A round light-dependent resistor with a zigzag track on its face and two legs"><span class="card-copy"><span class="name">LDR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="ldr/ldr-pi.html"><img class="thumbnail" src="ldr/images/component-ldr.png" alt="A round light-dependent resistor with a zigzag track on its face and two legs"><span class="card-copy"><span class="name">LDR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a class="do" href="led/led-blocks.html"><img class="thumbnail" src="led/images/component-led.png" alt="A 5 mm red LED with a long anode leg and a short cathode leg"><span class="card-copy"><span class="name">LED</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="led/led-pico.html"><img class="thumbnail" src="led/images/component-led.png" alt="A 5 mm red LED with a long anode leg and a short cathode leg"><span class="card-copy"><span class="name">LED</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="led/led-pi.html"><img class="thumbnail" src="led/images/component-led.png" alt="A 5 mm red LED with a long anode leg and a short cathode leg"><span class="card-copy"><span class="name">LED</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="line-sensor/line-sensor-blocks.html"><img class="thumbnail" src="line-sensor/images/component-line-sensor.png" alt="A KY-033 infrared line tracking sensor module with a blue adjustment potentiometer"><span class="card-copy"><span class="name">Line sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="line-sensor/line-sensor-pico.html"><img class="thumbnail" src="line-sensor/images/component-line-sensor.png" alt="A KY-033 infrared line tracking sensor module with a blue adjustment potentiometer"><span class="card-copy"><span class="name">Line sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="line-sensor/line-sensor-pi.html"><img class="thumbnail" src="line-sensor/images/component-line-sensor.png" alt="A KY-033 infrared line tracking sensor module with a blue adjustment potentiometer"><span class="card-copy"><span class="name">Line sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a class="do" href="motor-driver/motor-driver-blocks.html"><img class="thumbnail" src="motor-driver/images/component-motor-driver.png" alt="An L293D sixteen-pin motor driver integrated circuit"><span class="card-copy"><span class="name">Motor driver</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="motor-driver/motor-driver-pico.html"><img class="thumbnail" src="motor-driver/images/component-motor-driver.png" alt="An L293D sixteen-pin motor driver integrated circuit"><span class="card-copy"><span class="name">Motor driver</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="motor-driver/motor-driver-pi.html"><img class="thumbnail" src="motor-driver/images/component-motor-driver.png" alt="An L293D sixteen-pin motor driver integrated circuit"><span class="card-copy"><span class="name">Motor driver</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a class="do" href="neopixels/neopixels-blocks.html"><img class="thumbnail" src="neopixels/images/component-neopixels.png" alt="A small Adafruit NeoPixel JST SH breakout with one square RGB pixel"><span class="card-copy"><span class="name">NeoPixels</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="neopixels/neopixels-pico.html"><img class="thumbnail" src="neopixels/images/component-neopixels.png" alt="A small Adafruit NeoPixel JST SH breakout with one square RGB pixel"><span class="card-copy"><span class="name">NeoPixels</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="neopixels/neopixels-pi.html"><img class="thumbnail" src="neopixels/images/component-neopixels.png" alt="A small Adafruit NeoPixel JST SH breakout with one square RGB pixel"><span class="card-copy"><span class="name">NeoPixels</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a class="do" href="passive-buzzer/passive-buzzer-blocks.html"><img class="thumbnail" src="passive-buzzer/images/component-passive-buzzer.png" alt="An illustrative two-pin black passive piezo buzzer; its type cannot be identified by appearance alone"><span class="card-copy"><span class="name">Passive buzzer</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="passive-buzzer/passive-buzzer-pico.html"><img class="thumbnail" src="passive-buzzer/images/component-passive-buzzer.png" alt="An illustrative two-pin black passive piezo buzzer; its type cannot be identified by appearance alone"><span class="card-copy"><span class="name">Passive buzzer</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="passive-buzzer/passive-buzzer-pi.html"><img class="thumbnail" src="passive-buzzer/images/component-passive-buzzer.png" alt="An illustrative two-pin black passive piezo buzzer; its type cannot be identified by appearance alone"><span class="card-copy"><span class="name">Passive buzzer</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="pi"><a href="picamera/picamera-pi.html"><img class="thumbnail" src="picamera/images/component-picamera.png" alt="Raspberry Pi Camera Module 3 with its lens and flat ribbon cable"><span class="card-copy"><span class="name">Pi Camera</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="pir/pir-blocks.html"><img class="thumbnail" src="pir/images/component-pir.png" alt="A PIR motion sensor with a white domed lens on a small circuit board"><span class="card-copy"><span class="name">PIR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="pir/pir-pico.html"><img class="thumbnail" src="pir/images/component-pir.png" alt="A PIR motion sensor with a white domed lens on a small circuit board"><span class="card-copy"><span class="name">PIR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="pir/pir-pi.html"><img class="thumbnail" src="pir/images/component-pir.png" alt="A PIR motion sensor with a white domed lens on a small circuit board"><span class="card-copy"><span class="name">PIR</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="potentiometer/potentiometer-blocks.html"><img class="thumbnail" src="potentiometer/images/component-potentiometer.png" alt="A blue square 10 kilohm 3386P trimpot with a ribbed blue knob and three pins"><span class="card-copy"><span class="name">Potentiometer</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="potentiometer/potentiometer-pico.html"><img class="thumbnail" src="potentiometer/images/component-potentiometer.png" alt="A blue square 10 kilohm 3386P trimpot with a ribbed blue knob and three pins"><span class="card-copy"><span class="name">Potentiometer</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="potentiometer/potentiometer-pi.html"><img class="thumbnail" src="potentiometer/images/component-potentiometer.png" alt="A blue square 10 kilohm 3386P trimpot with a ribbed blue knob and three pins"><span class="card-copy"><span class="name">Potentiometer</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a class="do" href="rgb-led/rgb-led-blocks.html"><img class="thumbnail" src="rgb-led/images/component-rgb-led.png" alt="A clear common-cathode RGB LED with four legs"><span class="card-copy"><span class="name">RGB LED</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="rgb-led/rgb-led-pico.html"><img class="thumbnail" src="rgb-led/images/component-rgb-led.png" alt="A clear common-cathode RGB LED with four legs"><span class="card-copy"><span class="name">RGB LED</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="rgb-led/rgb-led-pi.html"><img class="thumbnail" src="rgb-led/images/component-rgb-led.png" alt="A clear common-cathode RGB LED with four legs"><span class="card-copy"><span class="name">RGB LED</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="pi"><a class="do" href="robot/robot-pi.html"><img class="thumbnail" src="robot/images/component-robot.png" alt="A small two-wheel rover with geared motors, a caster, Pico, motor driver and separate batteries"><span class="card-copy"><span class="name">Robot / rover</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a class="do" href="servo/servo-blocks.html"><img class="thumbnail" src="servo/images/component-servo.png" alt="A blue positional microservo with a white horn and a three-wire plug"><span class="card-copy"><span class="name">Servo motor</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="servo/servo-pico.html"><img class="thumbnail" src="servo/images/component-servo.png" alt="A blue positional microservo with a white horn and a three-wire plug"><span class="card-copy"><span class="name">Servo motor</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="servo/servo-pi.html"><img class="thumbnail" src="servo/images/component-servo.png" alt="A blue positional microservo with a white horn and a three-wire plug"><span class="card-copy"><span class="name">Servo motor</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a class="do" href="speaker/speaker-blocks.html"><img class="thumbnail" src="speaker/images/component-speaker.png" alt="A small passive eight-ohm loudspeaker with two solder terminals"><span class="card-copy"><span class="name">Speaker</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a class="do" href="speaker/speaker-pico.html"><img class="thumbnail" src="speaker/images/component-speaker.png" alt="A small passive eight-ohm loudspeaker with two solder terminals"><span class="card-copy"><span class="name">Speaker</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="speaker/speaker-pi.html"><img class="thumbnail" src="speaker/images/component-speaker.png" alt="A small passive eight-ohm loudspeaker with two solder terminals"><span class="card-copy"><span class="name">Speaker</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="pico"><a class="do" href="stepper/stepper-pico.html"><img class="thumbnail" src="stepper/images/component-stepper.png" alt="A 28BYJ-48 stepper motor beside its ULN2003 driver board"><span class="card-copy"><span class="name">Stepper motor</span><span class="meta"><span class="strand">Do</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a class="do" href="stepper/stepper-pi.html"><img class="thumbnail" src="stepper/images/component-stepper.png" alt="A 28BYJ-48 stepper motor beside its ULN2003 driver board"><span class="card-copy"><span class="name">Stepper motor</span><span class="meta"><span class="strand">Do</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="pico"><a href="temperature-probe/temperature-probe-pico.html"><img class="thumbnail" src="temperature-probe/images/component-temperature-probe.png" alt="A DS18B20 probe with a sealed metal tip, black cable and three wire tails"><span class="card-copy"><span class="name">Temperature probe</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="temperature-probe/temperature-probe-pi.html"><img class="thumbnail" src="temperature-probe/images/component-temperature-probe.png" alt="A DS18B20 probe with a sealed metal tip, black cable and three wire tails"><span class="card-copy"><span class="name">Temperature probe</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="temperature-sensor/temperature-sensor-blocks.html"><img class="thumbnail" src="temperature-sensor/images/component-temperature-sensor.png" alt="A TMP36 temperature sensor in a three-legged TO-92 package"><span class="card-copy"><span class="name">Temperature sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="temperature-sensor/temperature-sensor-pico.html"><img class="thumbnail" src="temperature-sensor/images/component-temperature-sensor.png" alt="A TMP36 temperature sensor in a three-legged TO-92 package"><span class="card-copy"><span class="name">Temperature sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="temperature-sensor/temperature-sensor-pi.html"><img class="thumbnail" src="temperature-sensor/images/component-temperature-sensor.png" alt="A TMP36 temperature sensor in a three-legged TO-92 package"><span class="card-copy"><span class="name">Temperature sensor</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="tilt-switch/tilt-switch-blocks.html"><img class="thumbnail" src="tilt-switch/images/component-tilt-switch.png" alt="A small two-legged metal ball tilt switch"><span class="card-copy"><span class="name">Tilt switch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="tilt-switch/tilt-switch-pico.html"><img class="thumbnail" src="tilt-switch/images/component-tilt-switch.png" alt="A small two-legged metal ball tilt switch"><span class="card-copy"><span class="name">Tilt switch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="tilt-switch/tilt-switch-pi.html"><img class="thumbnail" src="tilt-switch/images/component-tilt-switch.png" alt="A small two-legged metal ball tilt switch"><span class="card-copy"><span class="name">Tilt switch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> <li data-platform="blocks"><a href="toggle-switch/toggle-switch-blocks.html"><img class="thumbnail" src="toggle-switch/images/component-toggle-switch.png" alt="A miniature SPDT toggle switch with a metal lever and three pins"><span class="card-copy"><span class="name">Toggle switch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico blocks</span></span></span></a></li> <li data-platform="pico"><a href="toggle-switch/toggle-switch-pico.html"><img class="thumbnail" src="toggle-switch/images/component-toggle-switch.png" alt="A miniature SPDT toggle switch with a metal lever and three pins"><span class="card-copy"><span class="name">Toggle switch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Pico</span></span></span></a></li> <li data-platform="pi"><a href="toggle-switch/toggle-switch-pi.html"><img class="thumbnail" src="toggle-switch/images/component-toggle-switch.png" alt="A miniature SPDT toggle switch with a metal lever and three pins"><span class="card-copy"><span class="name">Toggle switch</span><span class="meta"><span class="strand">Detect</span><span class="platform">Raspberry Pi</span></span></span></a></li> </ul>
</section>
</div>
<p class="empty" hidden>No cards for this board yet.</p>
</main>
<script>
(() => {
const KEY = 'skillBricks.platform';
const DEFAULT = 'pico';
const LABELS = {"blocks": "Pico blocks", "pi": "Raspberry Pi", "pico": "Pico"};
const PDFS = {"blocks": "skill-bricks-blocks.pdf", "pi": "skill-bricks-pi.pdf", "pico": "skill-bricks-pico.pdf"};
const strandView = document.querySelector('#strand-view');
const alphaView = document.querySelector('#alpha-view');
const empty = document.querySelector('.empty');
const download = document.querySelector('.download-all');
const sortButtons = document.querySelectorAll('[data-sort]');
const platformButtons = document.querySelectorAll('button[data-platform]');
// Only show the cards and groups for one platform, and offer that
// platform's collection PDF.
const show = (platform) => {
document.querySelectorAll('li[data-platform]').forEach((item) => {
item.hidden = item.dataset.platform !== platform;
});
document.querySelectorAll('.group').forEach((group) => {
group.hidden = !group.querySelector('li:not([hidden])');
});
const view = strandView.hidden ? alphaView : strandView;
empty.hidden = Boolean(view.querySelector('li:not([hidden])'));
platformButtons.forEach((button) => {
button.setAttribute('aria-pressed', String(button.dataset.platform === platform));
});
if (PDFS[platform]) {
download.href = PDFS[platform];
download.textContent = `Download all ${LABELS[platform]} cards`;
}
};
const valid = (value) => Object.prototype.hasOwnProperty.call(LABELS, value);
let stored = null;
try { stored = localStorage.getItem(KEY); } catch (error) { /* storage blocked */ }
const asked = new URLSearchParams(location.search).get('platform');
let platform = valid(asked) ? asked : valid(stored) ? stored : DEFAULT;
platformButtons.forEach((button) => {
button.addEventListener('click', () => {
platform = button.dataset.platform;
show(platform);
try { localStorage.setItem(KEY, platform); } catch (error) { /* storage blocked */ }
const url = new URL(location.href);
url.searchParams.set('platform', platform);
history.replaceState(null, '', url);
});
});
sortButtons.forEach((button) => {
button.addEventListener('click', () => {
const byStrand = button.dataset.sort === 'strand';
strandView.hidden = !byStrand;
alphaView.hidden = byStrand;
sortButtons.forEach((item) => item.setAttribute('aria-pressed', String(item === button)));
show(platform);
});
});
document.querySelectorAll('.platform-control, .sort-control').forEach((control) => {
control.hidden = false;
});
show(platform);
})();
</script>
</body>
</html>