Skip to content

Commit 52e4e67

Browse files
vandyliuxnkevinnguyenisadorasophia
authored
Getting Started Update for CLUE! (microsoft#295)
Co-authored-by: xnkevinnguyen <xuannamkevin@gmail.com> Co-authored-by: Isadora Sophia <isaecia@gmail.com>
1 parent dc81ebb commit 52e4e67

2 files changed

Lines changed: 289 additions & 49 deletions

File tree

‎src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap‎

Lines changed: 186 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -17,22 +17,101 @@ exports[`GettingStartedPage component should render correctly 1`] = `
1717
>
1818
Select a Device
1919
</option>
20+
<option
21+
value="CPX"
22+
>
23+
Circuit Playground Express
24+
</option>
2025
<option
2126
value="micro:bit"
2227
>
2328
micro:bit
2429
</option>
2530
<option
26-
value="CPX"
31+
value="CLUE"
2732
>
28-
CPX
33+
CLUE
2934
</option>
3035
</select>
3136
<h3>
3237
Copy these snippets of code to a .py file and run the simulator
3338
</h3>
3439
<div
35-
className="visibleElement"
40+
className="inv"
41+
id="CPX"
42+
>
43+
<h2>
44+
Tutorial for Circuit Playground Express
45+
</h2>
46+
<h3>
47+
1. Import the micro:bit library to use it (This is required)
48+
</h3>
49+
<span
50+
className="codeBox"
51+
>
52+
<pre>
53+
from adafruit_circuitplayground import cp
54+
</pre>
55+
</span>
56+
<h3>
57+
2. Turn on the little red LED
58+
</h3>
59+
<span
60+
className="codeBox"
61+
>
62+
<pre>
63+
while True:
64+
</pre>
65+
<pre>
66+
cp.red_led = True
67+
</pre>
68+
</span>
69+
<h3>
70+
3. Turn up red LED when button A is clicked
71+
</h3>
72+
<span
73+
className="codeBox"
74+
>
75+
<pre>
76+
while True:
77+
</pre>
78+
<pre>
79+
if cp.button_a:
80+
</pre>
81+
<pre>
82+
cp.red_led = True
83+
</pre>
84+
</span>
85+
<h3>
86+
4. Light up the first neopixel blue
87+
</h3>
88+
<span
89+
className="codeBox"
90+
>
91+
<pre>
92+
cp.pixels[0] = (0, 0, 255)
93+
</pre>
94+
</span>
95+
<h3>
96+
And much more! These links have more tutorials:
97+
</h3>
98+
<h3>
99+
<a
100+
href="https://learn.adafruit.com/circuitpython-made-easy-on-circuit-playground-express/circuit-playground-express-library"
101+
>
102+
Getting started with CPX and CircuitPython
103+
</a>
104+
</h3>
105+
<h3>
106+
<a
107+
href="https://github.com/adafruit/Adafruit_CircuitPython_CircuitPlayground/tree/master/examples"
108+
>
109+
More example code
110+
</a>
111+
</h3>
112+
</div>
113+
<div
114+
className="inv"
36115
id="micro:bit"
37116
>
38117
<h2>
@@ -68,20 +147,20 @@ exports[`GettingStartedPage component should render correctly 1`] = `
68147
while True:
69148
</pre>
70149
<pre>
71-
if button_a.is_pressed():
150+
if button_a.is_pressed():
72151
</pre>
73152
<pre>
74-
display.show(Image.HAPPY)
153+
display.show(Image.HAPPY)
75154
</pre>
76155
<pre>
77-
if button_b.is_pressed():
156+
if button_b.is_pressed():
78157
</pre>
79158
<pre>
80-
display.show(Image.SAD)
159+
display.show(Image.SAD)
81160
</pre>
82161
</span>
83162
<h3>
84-
4. Read then display the temperature.
163+
4. Read then display the temperature
85164
</h3>
86165
<span
87166
className="codeBox"
@@ -90,10 +169,23 @@ exports[`GettingStartedPage component should render correctly 1`] = `
90169
while True:
91170
</pre>
92171
<pre>
93-
temp = temperature()
172+
temp = temperature()
173+
</pre>
174+
<pre>
175+
display.show(temp)
176+
</pre>
177+
</span>
178+
<h3>
179+
5. Display your name with the scroll functionality
180+
</h3>
181+
<span
182+
className="codeBox"
183+
>
184+
<pre>
185+
while True:
94186
</pre>
95187
<pre>
96-
display.show(temp)
188+
display.show("Your name")
97189
</pre>
98190
</span>
99191
<h3>
@@ -116,73 +208,142 @@ exports[`GettingStartedPage component should render correctly 1`] = `
116208
</div>
117209
<div
118210
className="inv"
119-
id="CPX"
211+
id="CLUE"
120212
>
121213
<h2>
122-
Tutorial for CPX
214+
Tutorial for CLUE
123215
</h2>
124216
<h3>
125-
1. Import the micro:bit library to use it (This is required)
217+
1. Import the the main CLUE library (This is required)
126218
</h3>
127219
<span
128220
className="codeBox"
129221
>
130222
<pre>
131-
from adafruit_circuitplayground import cp
223+
from adafruit_clue import clue
132224
</pre>
133225
</span>
134226
<h3>
135-
2. Turn on the little red LED
227+
2. Display text on the CLUE and change the text when a button is pressed
136228
</h3>
137229
<span
138230
className="codeBox"
139231
>
232+
<pre>
233+
clue_data = clue.simple_text_display(title="CLUE!", text_scale=2)
234+
</pre>
140235
<pre>
141236
while True:
142237
</pre>
143238
<pre>
144-
cp.red_led = True
239+
clue_data[1].text = "Hello World!"
240+
</pre>
241+
<pre>
242+
clue_data[3].text = "Temperature:
243+
{}
244+
".format(clue.temperature)
245+
</pre>
246+
<pre>
247+
if clue.button_a:
248+
</pre>
249+
<pre>
250+
clue_data[5].text = "A is pressed!"
251+
</pre>
252+
<pre>
253+
else:
254+
</pre>
255+
<pre>
256+
clue_data[5].text = "A is not pressed!"
257+
</pre>
258+
<pre>
259+
clue_data.show()
145260
</pre>
146261
</span>
147262
<h3>
148-
3. Turn up red LED when button A is clicked
263+
3. Create a slide show on the CLUE
149264
</h3>
265+
<p>
266+
Make sure there are bitmap (.bmp) pictures of your choice in the same directory as the code file.
267+
</p>
150268
<span
151269
className="codeBox"
152270
>
153271
<pre>
154-
while True:
272+
import board
155273
</pre>
156274
<pre>
157-
if cp.button_a:
275+
from adafruit_slideshow import SlideShow
158276
</pre>
159277
<pre>
160-
cp.red_led = True
278+
279+
</pre>
280+
<pre>
281+
slideshow = SlideShow(board.DISPLAY, auto_advance=True, dwell=3, fade_effect=True)
282+
</pre>
283+
<pre>
284+
while slideshow.update():
285+
</pre>
286+
<pre>
287+
pass
161288
</pre>
162289
</span>
163290
<h3>
164-
4. Light up the first neopixel blue
291+
4. Light up the neopixel green
165292
</h3>
166293
<span
167294
className="codeBox"
168295
>
169296
<pre>
170-
cp.pixels[0] = (0, 0, 255)
297+
clue.pixel.fill(clue.GREEN)
298+
</pre>
299+
</span>
300+
<h3>
301+
5. Draw a blue rectangle on the screen
302+
</h3>
303+
<span
304+
className="codeBox"
305+
>
306+
<pre>
307+
import board
308+
</pre>
309+
<pre>
310+
import displayio
311+
</pre>
312+
<pre>
313+
from adafruit_display_shapes.rect import Rect
314+
</pre>
315+
<pre>
316+
317+
</pre>
318+
<pre>
319+
splash = displayio.Group(max_size=20)
320+
</pre>
321+
<pre>
322+
board.DISPLAY.show(splash)
323+
</pre>
324+
<pre>
325+
326+
</pre>
327+
<pre>
328+
rect = Rect(80, 20, 41, 41, fill=0x0000FF)
329+
</pre>
330+
<pre>
331+
splash.append(rect)
171332
</pre>
172333
</span>
173334
<h3>
174335
And much more! These links have more tutorials:
175336
</h3>
176337
<h3>
177338
<a
178-
href="https://learn.adafruit.com/circuitpython-made-easy-on-circuit-playground-express/circuit-playground-express-library"
339+
href="https://learn.adafruit.com/adafruit-clue/circuitpython"
179340
>
180-
Getting started with CPX and CircuitPython
341+
Getting started with CLUE and CircuitPython
181342
</a>
182343
</h3>
183344
<h3>
184345
<a
185-
href="https://github.com/adafruit/Adafruit_CircuitPython_CircuitPlayground/tree/master/examples"
346+
href="https://blog.adafruit.com/2020/02/12/three-fun-sensor-packed-projects-to-try-on-your-clue-adafruitlearningsystem-adafruit-circuitpython-adafruit/"
186347
>
187348
More example code
188349
</a>

0 commit comments

Comments
 (0)