-
Notifications
You must be signed in to change notification settings - Fork 6
/
microbit.html
239 lines (236 loc) · 15.6 KB
/
microbit.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<html lang="en">
<head>
<title>Here's a BBC micro:bit-o-matic!</title>
<link rel="stylesheet" href="microbit.css"/>
<link rel="stylesheet" href="introjs.min.css"/>
<script src="jquery-3.6.4.min.js"></script>
<script src="qs-tools.js"></script>
<script src="images.js"></script>
<script src="font.js"></script>
<script src="microbit.js"></script>
</head>
<body>
<div class="controls" data-step="1" data-intro="Use the controls in this form to create sample output from the micro:bit simulator.">
<form id="control-form">
<label for="flavour">Flavour</label>
<select id="flavour" name="flavour" data-step="2"
data-intro="Select the colour scheme for your micro:bit.">
<option value="banana">Banana</option>
<option value="strawberry">Strawberry</option>
<option value="orange">Orange</option>
<option value="lime">Lime</option>
<option value="mint">Mint</option>
<option value="peppermint">Peppermint</option>
<option value="ice">Ice</option>
<option value="stilton">Stilton</option>
<option value="blueberry">Blueberry</option>
<option value="woad">Woad</option>
<option value="lychee">Lychee</option>
<option value="milk">Milk</option>
<option value="truffle">Truffle</option>
<option value="chocolate">Chocolate</option>
</select>
<span data-step="3" data-intro="Toggle crocodile clips on the five main I/O pins.">
<label for="pin-0">Crocodile Clips</label>
<input type="checkbox" name="pin-0" id='p0-state'>0</input>
<input type="checkbox" name="pin-1" id='p1-state'>1</input>
<input type="checkbox" name="pin-2" id='p2-state'>2</input>
<input type="checkbox" name="pin-3v" id='3v-state'>3V</input>
<input type="checkbox" name="pin-gnd" id='gnd-state'>GND</input>
</span>
<label for="images">Images</label>
<select id="images" name="images" data-step="4"
data-intro="Show a built-in image on the LED display."></select>
<span data-step="5"
data-intro="Write text to scroll across the display, toggle if it should keep repeating and click scroll for it to take effect.">
<label for="scroll">Scroll Message</label>
<input type="text" id="scroll" name="scroll"/>
<label for="repeat">Repeat</label>
<input type="checkbox" id="repeat" name="repeat"/>
<button id="start_scroll">Scroll</button></span><br/>
<button onclick="javascript:introJs().start();">Help</button>
<button type="reset" id="reset" data-step="6"
data-intro="Reset the form and the state of the micro:bit simulator.">Reset</button>
</form>
<span id="editor-help" data-step="7"
data-intro="Click here to generate a URL to embed inside your PyComic strip or share with others on the internet."><button id="direct-button">Get Direct Link</button> <a href="#" id="direct-link"></a></span>
</div>
<div class="microbit-embed" id="microbit-svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1298 1055" version="1.1">
<title>microbit</title>
<defs>
<path d="M0 64C0 28.7 28.7 0 64 0L1234 0C1269.3 0 1298 28.7 1298 64L1298 991C1298 1026.3 1269.3 1055 1234 1055L64 1055C28.7 1055 0 1026.3 0 991L0 64ZM1263 540C1269.6 540 1275 534.6 1275 528 1275 521.4 1269.6 516 1263 516 1256.4 516 1251 521.4 1251 528 1251 534.6 1256.4 540 1263 540ZM39 540C45.6 540 51 534.6 51 528 51 521.4 45.6 516 39 516 32.4 516 27 521.4 27 528 27 534.6 32.4 540 39 540ZM110 929C138.7 929 162 905.7 162 877 162 848.3 138.7 825 110 825 81.3 825 58 848.3 58 877 58 905.7 81.3 929 110 929ZM364 929C392.7 929 416 905.7 416 877 416 848.3 392.7 825 364 825 335.3 825 312 848.3 312 877 312 905.7 335.3 929 364 929ZM649 929C677.7 929 701 905.7 701 877 701 848.3 677.7 825 649 825 620.3 825 597 848.3 597 877 597 905.7 620.3 929 649 929ZM934 929C962.7 929 986 905.7 986 877 986 848.3 962.7 825 934 825 905.3 825 882 848.3 882 877 882 905.7 905.3 929 934 929ZM1187 929C1215.7 929 1239 905.7 1239 877 1239 848.3 1215.7 825 1187 825 1158.3 825 1135 848.3 1135 877 1135 905.7 1158.3 929 1187 929Z"
id="path-1" />
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="microbit">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1" />
</mask>
<use id="Mask" fill="#000000" xlink:href="#path-1" />
<g id="contacts" mask="url(#mask-2)" fill="#999999">
<g transform="translate(17.000000, 816.000000)">
<rect id="pin-19" x="1240" y="102" width="24" height="150" />
<path d="M1109.1 65L1109 65 1109 247 1232 247 1232 65 1231.9 65C1232 63.8 1232 62.7 1232 61.5 1232 27.5 1204.5 0 1170.5 0 1136.5 0 1109 27.5 1109 61.5 1109 62.7 1109 63.8 1109.1 65ZM1170.5 111C1198.4 111 1221 88.4 1221 60.5 1221 32.6 1198.4 10 1170.5 10 1142.6 10 1120 32.6 1120 60.5 1120 88.4 1142.6 111 1170.5 111Z"
id="big-pin-gnd" />
<rect id="pin-18" x="1078" y="102" width="24" height="150" />
<rect id="pin-17" x="1047" y="102" width="24" height="150" />
<rect id="pin-16" x="1016" y="102" width="24" height="150" />
<rect id="pin-15" x="985" y="102" width="24" height="150" />
<path d="M855.1 65L855 65 855 247 978 247 978 65 977.9 65C978 63.8 978 62.7 978 61.5 978 27.5 950.5 0 916.5 0 882.5 0 855 27.5 855 61.5 855 62.7 855 63.8 855.1 65ZM916.5 111C944.4 111 967 88.4 967 60.5 967 32.6 944.4 10 916.5 10 888.6 10 866 32.6 866 60.5 866 88.4 888.6 111 916.5 111Z"
id="big-pin-3v" />
<rect id="pin-14" x="824" y="102" width="24" height="150" />
<rect id="pin-13" x="793" y="102" width="24" height="150" />
<rect id="pin-12" x="762" y="102" width="24" height="150" />
<rect id="pin-11" x="731" y="102" width="24" height="150" />
<rect id="pin-10" x="700" y="102" width="24" height="150" />
<path d="M570.1 65L570 65 570 247 693 247 693 65 692.9 65C693 63.8 693 62.7 693 61.5 693 27.5 665.5 0 631.5 0 597.5 0 570 27.5 570 61.5 570 62.7 570 63.8 570.1 65ZM631.5 111C659.4 111 682 88.4 682 60.5 682 32.6 659.4 10 631.5 10 603.6 10 581 32.6 581 60.5 581 88.4 603.6 111 631.5 111Z"
id="big-pin-2" />
<rect id="pin-9" x="539" y="102" width="24" height="150" />
<rect id="pin-8" x="508" y="102" width="24" height="150" />
<rect id="pin-7" x="477" y="102" width="24" height="150" />
<rect id="pin-6" x="446" y="102" width="24" height="150" />
<rect id="pin-5" x="415" y="102" width="24" height="150" />
<path d="M285.1 65L285 65 285 247 408 247 408 65 407.9 65C408 63.8 408 62.7 408 61.5 408 27.5 380.5 0 346.5 0 312.5 0 285 27.5 285 61.5 285 62.7 285 63.8 285.1 65ZM346.5 111C374.4 111 397 88.4 397 60.5 397 32.6 374.4 10 346.5 10 318.6 10 296 32.6 296 60.5 296 88.4 318.6 111 346.5 111Z"
id="big-pin-1" />
<path d="M254 220L254 102 278 102 278 252 254 252 254 220Z" id="pin-4" />
<rect id="pin-3" x="223" y="102" width="24" height="150" />
<rect id="pin-2" x="192" y="102" width="24" height="150" />
<rect id="pin-1" x="161" y="102" width="24" height="150" />
<path d="M31.1 65L31 65 31 247 154 247 154 65 153.9 65C154 63.8 154 62.7 154 61.5 154 27.5 126.5 0 92.5 0 58.5 0 31 27.5 31 61.5 31 62.7 31 63.8 31.1 65ZM92.5 111C120.4 111 143 88.4 143 60.5 143 32.6 120.4 10 92.5 10 64.6 10 42 32.6 42 60.5 42 88.4 64.6 111 92.5 111Z"
id="big-pin-0" />
<rect id="pin-0" x="0" y="102" width="24" height="150" />
</g>
</g>
<g id="leds" mask="url(#mask-2)" fill="#333333">
<g transform="translate(436.000000, 330.000000)">
<rect id="led-0-0" x="0" y="0" width="20" height="42" />
<rect id="led-1-0" x="102" y="0" width="20" height="42" />
<rect id="led-2-0" x="203" y="0" width="20" height="42" />
<rect id="led-3-0" x="305" y="0" width="20" height="42" />
<rect id="led-4-0" x="406" y="0" width="20" height="42" />
<rect id="led-0-1" x="0" y="101" width="20" height="42" />
<rect id="led-1-1" x="102" y="101" width="20" height="42" />
<rect id="led-2-1" x="203" y="101" width="20" height="42" />
<rect id="led-3-1" x="305" y="101" width="20" height="42" />
<rect id="led-4-1" x="406" y="101" width="20" height="42" />
<rect id="led-0-2" x="0" y="203" width="20" height="42" />
<rect id="led-1-2" x="102" y="203" width="20" height="42" />
<rect id="led-2-2" x="203" y="203" width="20" height="42" />
<rect id="led-3-2" x="305" y="203" width="20" height="42" />
<rect id="led-4-2" x="406" y="203" width="20" height="42" />
<rect id="led-0-3" x="0" y="304" width="20" height="42" />
<rect id="led-1-3" x="102" y="304" width="20" height="42" />
<rect id="led-2-3" x="203" y="304" width="20" height="42" />
<rect id="led-3-3" x="305" y="304" width="20" height="42" />
<rect id="led-4-3" x="406" y="304" width="20" height="42" />
<rect id="led-0-4" x="0" y="405" width="20" height="42" />
<rect id="led-1-4" x="102" y="405" width="20" height="42" />
<rect id="led-2-4" x="203" y="405" width="20" height="42" />
<rect id="led-3-4" x="305" y="405" width="20" height="42" />
<rect id="led-4-4" x="406" y="405" width="20" height="42" />
</g>
</g>
<g id="labels" mask="url(#mask-2)" line-spacing="48" font-family="Helvetica">
<g transform="translate(89.000000, 249.000000)">
<text id="0" font-size="48" font-weight="normal">
<tspan x="277" y="122" fill="#FFFFFF">0</tspan>
</text>
<text id="0" font-size="64" font-weight="bold">
<tspan x="0" y="766" fill="#000000">0</tspan>
</text>
<text id="1" font-size="64" font-weight="bold">
<tspan x="255" y="766" fill="#000000">1</tspan>
</text>
<text id="2" font-size="64" font-weight="bold">
<tspan x="538" y="766" fill="#000000">2</tspan>
</text>
<text id="3" font-size="64" font-weight="bold" letter-spacing="-1.2">
<tspan x="803" y="766" fill="#000000">3</tspan>
<tspan x="837.4" y="766" fill="#000000">V</tspan>
</text>
<text id="GND" font-size="56" font-weight="bold" letter-spacing="-1.1">
<tspan x="1037" y="759" fill="#000000">GND</tspan>
</text>
<text id="0" font-size="48" font-weight="normal">
<tspan x="342" y="47" fill="#FFFFFF">0</tspan>
</text>
<text id="1" font-size="48" font-weight="normal">
<tspan x="444" y="47" fill="#FFFFFF">1</tspan>
</text>
<text id="2" font-size="48" font-weight="normal">
<tspan x="547" y="47" fill="#FFFFFF">2</tspan>
</text>
<text id="3" font-size="48" font-weight="normal">
<tspan x="649" y="47" fill="#FFFFFF">3</tspan>
</text>
<text id="4" font-size="48" font-weight="normal">
<tspan x="750" y="47" fill="#FFFFFF">4</tspan>
</text>
<text id="X" font-size="48" font-weight="normal">
<tspan x="750" y="-10" fill="#FFFFFF">X</tspan>
</text>
<text id="1" font-size="48" font-weight="normal">
<tspan x="277" y="219" fill="#FFFFFF">1</tspan>
</text>
<text id="2" font-size="48" font-weight="normal">
<tspan x="277" y="321" fill="#FFFFFF">2</tspan>
</text>
<text id="3" font-size="48" font-weight="normal">
<tspan x="277" y="422" fill="#FFFFFF">3</tspan>
</text>
<text id="4" font-size="48" font-weight="normal">
<tspan x="277" y="523" fill="#FFFFFF">4</tspan>
</text>
<text id="Y" font-size="48" font-weight="normal">
<tspan x="237" y="523" fill="#FFFFFF">Y</tspan>
</text>
</g>
</g>
<g id="buttons" mask="url(#mask-2)">
<g transform="translate(68.000000, 303.000000)">
<g id="b-triangle" transform="translate(1063.000000, 0.000000)">
<polygon class="flavour" id="b-back" fill="#FFFF00" points="0 0 95.5 0 0 95.7 " />
<path d="M21.6 22.1C23.6 22.1 25.1 21.9 26.2 21.3 27.9 20.4 28.8 18.9 28.8 16.7 28.8 14.4 27.9 12.9 26 12.1 25 11.7 23.5 11.5 21.4 11.5L13.1 11.5 13.1 22.1 21.6 22.1ZM23.2 38C26 38 28.1 37.2 29.3 35.5 30 34.5 30.4 33.2 30.4 31.7 30.4 29.2 29.3 27.5 27.1 26.6 25.9 26.1 24.3 25.9 22.4 25.9L13.1 25.9 13.1 38 23.2 38ZM8.5 7.6L23.3 7.6C27.4 7.6 30.2 8.8 31.9 11.2 32.9 12.6 33.4 14.2 33.4 16.1 33.4 18.3 32.8 20.1 31.6 21.4 30.9 22.2 30 22.9 28.8 23.5 30.6 24.1 31.9 24.9 32.8 25.7 34.3 27.2 35.1 29.3 35.1 31.9 35.1 34.2 34.4 36.2 33 38 30.9 40.7 27.6 42 23.1 42L8.5 42 8.5 7.6Z"
id="B" fill="#000000" transform="translate(22.777344, 24.785156) translate(-22.777344, -24.785156) " />
</g>
<g id="a-triangle" transform="translate(2.000000, 321.000000)">
<path d="M0 95.7L95.5 0 95.5 95.7 0 95.7Z" id="a-back" class="flavour" fill="#FFFF00" />
<path d="M73.7 68.2L68.5 53 62.9 68.2 73.7 68.2ZM66 47.9L71.3 47.9 83.8 82.3 78.7 82.3 75.2 72 61.6 72 57.8 82.3 53.1 82.3 66 47.9Z" id="A" fill="#000000" />
</g>
<g id="ButtonA" transform="translate(0.000000, 151.000000)">
<rect id="button-chip-a" fill="#999999" x="0" y="0" width="145" height="145" />
<circle id="button-a" fill="#000000" cx="71.5" cy="73.5" r="44.5" />
</g>
<g id="ButtonB" transform="translate(1016.000000, 151.000000)">
<rect id="button-chip-b" fill="#999999" x="0" y="0" width="145" height="145" />
<circle id="button-b" fill="#000000" cx="72.5" cy="73.5" r="44.5" />
</g>
</g>
</g>
<g id="Pattern" mask="url(#mask-2)" fill="#FFFF00">
<polygon class="flavour" id="triangle-3" points="597 0 488.4 0 488.4 108.3 " />
<polygon class="flavour" id="triangle-2" points="484.4 0 324 0 324 160 " />
<polygon class="flavour" id="triangle-1" points="323.7 0 0 0 0 322.9 " />
</g>
<g mask="url(#mask-2)">
<g transform="translate(533.000000, 108.000000)">
<rect class="flavour" id="Face" fill="#FFFF00" x="0" y="0" width="232" height="129" rx="64" />
<path d="M116.5 27L167.5 27C188.2 27 205 43.8 205 64.5 205 85.2 188.2 102 167.5 102L116.5 102 65.5 102C44.8 102 28 85.2 28 64.5 28 43.8 44.8 27 65.5 27L116.5 27Z" id="mask" fill="#000000" />
<path d="M65 77C72.7 77 79 71.7 79 64 79 56.3 72.7 50 65 50 57.3 50 51 56.3 51 64 51 71.7 57.3 77 65 77Z" class="flavour" id="Eye1" fill="#FFFF00" />
<path d="M167 77C174.7 77 181 71.7 181 64 181 56.3 174.7 50 167 50 159.3 50 153 56.3 153 64 153 71.7 159.3 77 167 77Z" id="Eye2" class="flavour" fill="#FFFF00" />
</g>
</g>
</g>
</g>
</svg>
<div class="crocodile pin-0"></div>
<div class="crocodile pin-1"></div>
<div class="crocodile pin-2"></div>
<div class="crocodile pin-3v"></div>
<div class="crocodile pin-gnd"></div>
</div>
<script src="intro.min.js"></script>
</body>
</html>