From 52e4e675b2f94a5f0207e9abe2893fde863de056 Mon Sep 17 00:00:00 2001 From: Vandy Liu <33995460+vandyliu@users.noreply.github.com> Date: Mon, 6 Apr 2020 12:21:53 -0700 Subject: [PATCH] Getting Started Update for CLUE! (#295) Co-authored-by: xnkevinnguyen Co-authored-by: Isadora Sophia --- .../gettingStarted.spec.tsx.snap | 211 +++++++++++++++--- src/view/pages/gettingStarted.tsx | 127 +++++++++-- 2 files changed, 289 insertions(+), 49 deletions(-) diff --git a/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap b/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap index 4bec5eeff..b1021ea93 100644 --- a/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap +++ b/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap @@ -17,22 +17,101 @@ exports[`GettingStartedPage component should render correctly 1`] = ` > Select a Device +

Copy these snippets of code to a .py file and run the simulator

+

+ Tutorial for Circuit Playground Express +

+

+ 1. Import the micro:bit library to use it (This is required) +

+ + 
+        from adafruit_circuitplayground import cp
+
+ +

+ 2. Turn on the little red LED +

+ + 
+        while True:
+
+ 
+            cp.red_led = True
+
+ +

+ 3. Turn up red LED when button A is clicked +

+ + 
+        while True:
+
+ 
+            if cp.button_a:
+
+ 
+                cp.red_led = True
+
+ +

+ 4. Light up the first neopixel blue +

+ + 
+        cp.pixels[0] = (0, 0, 255)
+
+ +

+ And much more! These links have more tutorials: +

+

+ + Getting started with CPX and CircuitPython + +

+

+ + More example code + +

+
+

@@ -68,20 +147,20 @@ exports[`GettingStartedPage component should render correctly 1`] = ` while True: 
-         if button_a.is_pressed():
+            if button_a.is_pressed():
       
-         display.show(Image.HAPPY)
+                display.show(Image.HAPPY)
       
-         if button_b.is_pressed():
+            if button_b.is_pressed():
       
-         display.show(Image.SAD)
+                display.show(Image.SAD)

- 4. Read then display the temperature. + 4. Read then display the temperature 

-         temp = temperature()
+            temp = temperature()
+
+ 
+            display.show(temp)
+
+ +

+ 5. Display your name with the scroll functionality +

+ + 
+        while True:
       
-         display.show(temp)
+            display.show("Your name")

@@ -116,58 +208,127 @@ exports[`GettingStartedPage component should render correctly 1`] = `

- Tutorial for CPX + Tutorial for CLUE

- 1. Import the micro:bit library to use it (This is required) + 1. Import the the main CLUE library (This is required) 

-        from adafruit_circuitplayground import cp
+        from adafruit_clue import clue

- 2. Turn on the little red LED + 2. Display text on the CLUE and change the text when a button is pressed

+ 
+        clue_data = clue.simple_text_display(title="CLUE!", text_scale=2)
+      
         while True:
       
-         cp.red_led = True
+            clue_data[1].text = "Hello World!"
+
+ 
+            clue_data[3].text = "Temperature: 
+        {}
+        ".format(clue.temperature)
+
+ 
+            if clue.button_a:
+
+ 
+                clue_data[5].text = "A is pressed!"
+
+ 
+            else:
+
+ 
+                clue_data[5].text = "A is not pressed!"
+
+ 
+            clue_data.show()

- 3. Turn up red LED when button A is clicked + 3. Create a slide show on the CLUE

+

+ Make sure there are bitmap (.bmp) pictures of your choice in the same directory as the code file. + 

-        while True:
+        import board
       
-         if cp.button_a:
+        from adafruit_slideshow import SlideShow
       
-         cp.red_led = True
+         
+
+ 
+        slideshow = SlideShow(board.DISPLAY, auto_advance=True, dwell=3, fade_effect=True)
+
+ 
+        while slideshow.update():
+
+ 
+            pass

- 4. Light up the first neopixel blue + 4. Light up the neopixel green 

-        cp.pixels[0] = (0, 0, 255)
+        clue.pixel.fill(clue.GREEN)
+
+ +

+ 5. Draw a blue rectangle on the screen +

+ + 
+        import board
+
+ 
+        import displayio
+
+ 
+        from adafruit_display_shapes.rect import Rect
+
+ 
+         
+
+ 
+        splash = displayio.Group(max_size=20)
+
+ 
+        board.DISPLAY.show(splash)
+
+ 
+         
+
+ 
+        rect = Rect(80, 20, 41, 41, fill=0x0000FF)
+
+ 
+        splash.append(rect)

@@ -175,14 +336,14 @@ exports[`GettingStartedPage component should render correctly 1`] = `

- Getting started with CPX and CircuitPython + Getting started with CLUE and CircuitPython

More example code diff --git a/src/view/pages/gettingStarted.tsx b/src/view/pages/gettingStarted.tsx index 693a6710c..358f9a6a6 100644 --- a/src/view/pages/gettingStarted.tsx +++ b/src/view/pages/gettingStarted.tsx @@ -35,14 +35,53 @@ export class GettingStartedPage extends React.Component { + - +

Copy these snippets of code to a .py file and run the simulator

-
+ {/* prettier-ignore */} +
+

Tutorial for Circuit Playground Express

+

+ 1. Import the micro:bit library to use it (This is + required) +

+ + 
from adafruit_circuitplayground import cp
+ +

2. Turn on the little red LED

+ + 
while True:
+ 
    cp.red_led = True
+ +

3. Turn up red LED when button A is clicked

+ + 
while True:
+ 
    if cp.button_a:
+ 
        cp.red_led = True
+ +

4. Light up the first neopixel blue

+ + 
cp.pixels[0] = (0, 0, 255)
+ +

And much more! These links have more tutorials:

+

+ + Getting started with CPX and CircuitPython + +

+

+ + More example code + +

+
+ {/* prettier-ignore */} +

Tutorial for micro:bit

1. Import the micro:bit library to use it (This is @@ -64,16 +103,23 @@ export class GettingStartedPage extends React.Component { 

while True:
- 
 if button_a.is_pressed():
- 
 display.show(Image.HAPPY)
- 
 if button_b.is_pressed():
- 
 display.show(Image.SAD)
+ 
    if button_a.is_pressed():
+ 
        display.show(Image.HAPPY)
+ 
    if button_b.is_pressed():
+ 
        display.show(Image.SAD)
 -

4. Read then display the temperature.

+

4. Read then display the temperature

while True:
- 
 temp = temperature()
- 
 display.show(temp)
+ 
    temp = temperature()
+ 
    display.show(temp)
+ +

+ 5. Display your name with the scroll functionality +

+ + 
while True:
+ 
    display.show("Your name")

And much more! These links have more tutorials:

@@ -87,38 +133,71 @@ export class GettingStartedPage extends React.Component {

-
-

Tutorial for CPX

+ {/* prettier-ignore */} +
+

Tutorial for CLUE

- 1. Import the micro:bit library to use it (This is + 1. Import the the main CLUE library (This is required)

- 
from adafruit_circuitplayground import cp
+ 
from adafruit_clue import clue
 -

2. Turn on the little red LED

+

+ 2. Display text on the CLUE and change the text when + a button is pressed +

+ 
+                                clue_data = clue.simple_text_display(title="CLUE!", text_scale=2)
+                            
while True:
- 
 cp.red_led = True
+ 
    clue_data[1].text = "Hello World!"
+ 
    clue_data[3].text = "Temperature: {"{}"}".format(clue.temperature)
+ 
    if clue.button_a:
+ 
        clue_data[5].text = "A is pressed!"
+ 
    else:
+ 
        clue_data[5].text = "A is not pressed!"
+ 
    clue_data.show()
 -

3. Turn up red LED when button A is clicked

+

3. Create a slide show on the CLUE

+

+ Make sure there are bitmap (.bmp) pictures of your choice in the same directory + as the code file. +

- 
while True:
- 
 if cp.button_a:
- 
 cp.red_led = True
+ 
import board
+ 
from adafruit_slideshow import SlideShow
+
+ 
slideshow = SlideShow(board.DISPLAY, auto_advance=True, dwell=3, fade_effect=True)
+
+ 
while slideshow.update():
+ 
    pass
 -

4. Light up the first neopixel blue

+

4. Light up the neopixel green

- 
cp.pixels[0] = (0, 0, 255)
+ 
clue.pixel.fill(clue.GREEN)
+ +

5. Draw a blue rectangle on the screen

+ + 
import board
+ 
import displayio
+ 
from adafruit_display_shapes.rect import Rect
+
+ 
splash = displayio.Group(max_size=20)
+ 
board.DISPLAY.show(splash)
+
+ 
rect = Rect(80, 20, 41, 41, fill=0x0000FF)
+ 
splash.append(rect)

And much more! These links have more tutorials:

- - Getting started with CPX and CircuitPython + + Getting started with CLUE and CircuitPython

- + More example code