diff --git a/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap b/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap index f2def6158..74943b260 100644 --- a/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap +++ b/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap @@ -15,27 +15,40 @@ exports[`GettingStartedPage component should render correctly 1`] = ` disabled={true} selected={true} > - Select a Device + Learn more about: - - - + + + + - CLUE - + + -

+

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) +

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

-
+      
         from adafruit_circuitplayground import cp
       
-

- 2. Turn on the little red LED +

+ > Turn on the little red LED

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

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

+ > 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 +

+ > 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

+

+ Keyboard Shortcuts +

+
    +
  • + Push Button: + + A + + for Button A, + + B + + for Button B, + + C + + for Buttons A & B +
  • +
  • + Refresh the simulator: + + Shift + + + + + R + +
  • +
  • + Run the simulator: + + Shift + + + + + F + +
  • +
Tutorial for micro:bit -

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

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

-
+      
         from microbit import *
       
-

- 2. Light up your micro:bit with love by showing a heart +

+ > Light up your micro:bit with love by showing a heart

-
+      
         display.show(Image.HEART)
       
-

- 3. Use your micro:bit to tell the world how you’re feeling +

+ > Use your micro:bit to tell the world how you’re feeling

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

- 4. Read then display the temperature +

+ > Read then display the temperature

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

- 5. Display your name with the scroll functionality +

+ > Display your name with the scroll functionality

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

+

And much more! These links have more tutorials:

-

+

Microbit Tutorials

-

+

Microbit official documentation

-
-
-

- Tutorial for CLUE -

- 0. Enable Preview Mode to use the CLUE (This is required) + Keyboard Shortcuts

-

- a. Access your settings: -

- Open settings -

- b. Check the - - "Device Simulator Express: Preview Mode" - - setting. -

- Enable preview mode -

- 1. Import the the main CLUE library (This is required) +

+
+

+ Tutorial for CLUE +

+

+ > Import the the main CLUE library (This is required)

-
+      
         from adafruit_clue import clue
       
-

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

+ > 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)
+      
+        clue_data = clue.simple_text_display(title="CLUE!")
       
-
+      
         while 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. Create a slide show on the CLUE +

+ > 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. @@ -332,86 +448,454 @@ exports[`GettingStartedPage component should render correctly 1`] = ` -

+      
         import board
       
-
+      
         from adafruit_slideshow import SlideShow
       
-
+      
          
       
-
-        slideshow = SlideShow(board.DISPLAY, auto_advance=True, dwell=3, fade_effect=True)
+      
+        slideshow = SlideShow(clue.display, auto_advance=True, dwell=3, fade_effect=True)
       
-
+      
         while slideshow.update():
       
-
+      
             pass
       
-

- 4. Light up the neopixel green +

+ > Light up the neopixel green

-
+      
         clue.pixel.fill(clue.GREEN)
       
-

- 5. Draw a blue rectangle on the screen +

+ > Display sensor data on the CLUE +

+ +
+        clue_data = clue.simple_text_display(title="CLUE Sensor Data!", title_scale=2)
+      
+
+        while True:
+      
+
+            clue_data[0].text = "Acceleration: 
+        {}
+         
+        {}
+         
+        {}
+        ".format(*clue.acceleration)
+      
+
+            clue_data[1].text = "Gyro: 
+        {}
+         
+        {}
+         
+        {}
+        ".format(*clue.gyro)
+      
+
+            clue_data[2].text = "Magnetic: 
+        {}
+         
+        {}
+         
+        {}
+        ".format(*clue.magnetic)
+      
+
+            clue_data[3].text = "Pressure: 
+        {}
+        hPa".format(clue.pressure)
+      
+
+            clue_data[4].text = "Altitude: 
+        {}
+        m".format(clue.altitude)
+      
+
+            clue_data[5].text = "Temperature: 
+        {}
+        C".format(clue.temperature)
+      
+
+            clue_data[6].text = "Humidity: 
+        {}
+        %".format(clue.humidity)
+      
+
+            clue_data[7].text = "Proximity: 
+        {}
+        ".format(clue.proximity)
+      
+
+            clue_data[8].text = "Gesture: 
+        {}
+        ".format(clue.gesture)
+      
+
+            clue_data[9].text = "Color: R: 
+        {}
+         G: 
+        {}
+         B: 
+        {}
+         C: 
+        {}
+        ".format(*clue.color)
+      
+
+            clue_data[10].text = "Button A: 
+        {}
+        ".format(clue.button_a)
+      
+
+            clue_data[11].text = "Button B: 
+        {}
+        ".format(clue.button_b)
+      
+
+            clue_data.show()
+      
+
+

+ > 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 CLUE and CircuitPython

-

+

More example code

+

+ Keyboard Shortcuts +

+
    +
  • + Push Button: + + A + + for Button A, + + B + + for Button B, + + C + + for Buttons A & B +
  • +
  • + Refresh the simulator: + + Shift + + + + + R + +
  • +
  • + Run the simulator: + + Shift + + + + + F + +
  • +
  • + Capacitive Touch Sensor: + + Shift + + + + + 1 + + ~ + + 7 + + for GPIO pins A1 - A7 +
  • +
  • + Slider Switch: + + Shift + + + + + S + +
  • +
+
+
+

+ Tutorial for using the debugger +

+

+ > Enter debug mode +

+

+ Press + + F5 + + or go to + + Run -> Start Debugging + +

+ Start debugging +

+ > Set a breakpoint or multiple breakpoints +

+

+ Stopping at a breakpoint pauses the program at that particular place. +

+

+ Use the debug toolbar or the shortcuts below +

+ Debugger Toolbar + + debugging experience +

+ > Observe the device's state on the "Variables" tab on the left when stopped at a breakpoint +

+ Debugger Variables +

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

+

+ + Learn more about debugging in VS Code + +

`; diff --git a/src/view/pages/gettingStarted.css b/src/view/pages/gettingStarted.css index e85a91a11..d312598b1 100644 --- a/src/view/pages/gettingStarted.css +++ b/src/view/pages/gettingStarted.css @@ -2,9 +2,25 @@ display: none; } +.codeText { + overflow-x: auto; + white-space: pre-wrap; + word-wrap: break-word; +} + +li:not(:last-child) { + margin-bottom: 6px; +} + +.normalFontWeight { + font-weight: normal; +} + .deviceSelector { width: 250px; - border: 1px solid #3d484c; + border: 1px solid var(--vscode-dropdown-border); + background-color: var(--vscode-dropdown-background); + color: var(--vscode-dropdown-foreground); margin: 0 0 5px; padding: 8px; border-radius: 5px; @@ -12,6 +28,16 @@ padding-right: 30px; } +.deviceSelector optgroup { + background-color: var(--vscode-dropdown-listBackground); + color: var(--vscode-dropdown-foreground); +} + +.deviceSelector option { + background-color: var(--vscode-dropdown-listBackground); + color: var(--vscode-dropdown-foreground); +} + .codeBox { display: block; width: 90%; @@ -26,5 +52,5 @@ .container { text-align: left; - padding: 0 10px 0 10px; + padding: 0 10px 20px 10px; } diff --git a/src/view/pages/gettingStarted.tsx b/src/view/pages/gettingStarted.tsx index 04f3d2c8a..add49b661 100644 --- a/src/view/pages/gettingStarted.tsx +++ b/src/view/pages/gettingStarted.tsx @@ -22,190 +22,258 @@ export class GettingStartedPage extends React.Component {

Getting started

- -

+

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 +

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

-
from adafruit_circuitplayground import cp
+
from adafruit_circuitplayground import cp
-

2. Turn on the little red LED

+

> Turn on the little red LED

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

3. Turn up red LED when button A is clicked

+

> Turn up red LED when button A is clicked

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

4. Light up the first neopixel blue

+

> Light up the first neopixel blue

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

And much more! These links have more tutorials:

-

+

And much more! These links have more tutorials:

+

Getting started with CPX and CircuitPython

-

+

More example code

+

Keyboard Shortcuts

+
    +
  • Push Button: A for Button A, B for Button B, C for Buttons A & B
  • +
  • Refresh the simulator: Shift + R
  • +
  • Run the simulator: Shift + F
  • +
{/* prettier-ignore */}

Tutorial for micro:bit

-

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

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

-
from microbit import *
+
from microbit import *
-

- 2. Light up your micro:bit with love by showing a +

+ > Light up your micro:bit with love by showing a heart

-
display.show(Image.HEART)
+
display.show(Image.HEART)
-

- 3. Use your micro:bit to tell the world how you’re +

+ > Use your micro:bit to tell the world how you’re feeling

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

4. Read then display the temperature

+

> Read then display the temperature

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

- 5. Display your name with the scroll functionality +

+ > Display your name with the scroll functionality

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

And much more! These links have more tutorials:

-

+

And much more! These links have more tutorials:

+

Microbit Tutorials

-

+

Microbit official documentation

+

Keyboard Shortcuts

+
    +
  • Push Button: A for Button A, B for Button B, C for Buttons A & B
  • +
  • Refresh the simulator: Shift + R
  • +
  • Run the simulator: Shift + F
  • +
{/* prettier-ignore */}

Tutorial for CLUE

-

0. Enable Preview Mode to use the CLUE (This is required)

-

a. Access your settings:

- Open settings -
    -
  • Windows or Linux: press Ctrl + , or go to File -> Preferences -> Settings
  • -
  • Mac: press Cmd + , or go to Code -> Preferences -> Settings.
  • -
-

b. Check the "Device Simulator Express: Preview Mode" setting.

- Enable preview mode -

- 1. Import the the main CLUE library (This is +

+ > Import the the main CLUE library (This is required)

-
from adafruit_clue import clue
+
from adafruit_clue import clue
-

- 2. Display text on the CLUE and change the text when +

+ > 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)
+                            
+                                clue_data = clue.simple_text_display(title="CLUE!")
                             
-
while 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()
+
while True:
+
    clue_data[1].text = "Hello World!"
+
    if clue.button_a:
+
        clue_data[5].text = "A is pressed!"
+
    else:
+
        clue_data[5].text = "A is not pressed!"
+
    clue_data.show()
-

3. Create a slide show on the CLUE

+

> 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.

-
import board
-
from adafruit_slideshow import SlideShow
-
 
-
slideshow = SlideShow(board.DISPLAY, auto_advance=True, dwell=3, fade_effect=True)
+                            
import board
+
from adafruit_slideshow import SlideShow
+
 
+
slideshow = SlideShow(clue.display, auto_advance=True, dwell=3, fade_effect=True)
                             
-
while slideshow.update():
-
    pass
+
while slideshow.update():
+
    pass
-

4. Light up the neopixel green

+

> Light up the neopixel green

-
clue.pixel.fill(clue.GREEN)
+
clue.pixel.fill(clue.GREEN)
-

5. Draw a blue rectangle on the screen

+

> Display sensor data on the CLUE

-
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)
+
clue_data = clue.simple_text_display(title="CLUE Sensor Data!", title_scale=2)
+
while True:
+
    clue_data[0].text = "Acceleration: {"{}"} {"{}"} {"{}"}".format(*clue.acceleration)
+
    clue_data[1].text = "Gyro: {"{}"} {"{}"} {"{}"}".format(*clue.gyro)
+
    clue_data[2].text = "Magnetic: {"{}"} {"{}"} {"{}"}".format(*clue.magnetic)
+
    clue_data[3].text = "Pressure: {"{}"}hPa".format(clue.pressure)
+
    clue_data[4].text = "Altitude: {"{}"}m".format(clue.altitude)
+
    clue_data[5].text = "Temperature: {"{}"}C".format(clue.temperature)
+
    clue_data[6].text = "Humidity: {"{}"}%".format(clue.humidity)
+
    clue_data[7].text = "Proximity: {"{}"}".format(clue.proximity)
+
    clue_data[8].text = "Gesture: {"{}"}".format(clue.gesture)
+
    clue_data[9].text = "Color: R: {"{}"} G: {"{}"} B: {"{}"} C: {"{}"}".format(*clue.color)
+
    clue_data[10].text = "Button A: {"{}"}".format(clue.button_a)
+
    clue_data[11].text = "Button B: {"{}"}".format(clue.button_b)
+
    clue_data.show()
-

And much more! These links have more tutorials:

-

+

> 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 CLUE and CircuitPython

-

+

More example code

+

Keyboard Shortcuts

+
    +
  • Push Button: A for Button A, B for Button B, C for Buttons A & B
  • +
  • Refresh the simulator: Shift + R
  • +
  • Run the simulator: Shift + F
  • +
  • Capacitive Touch Sensor: Shift + 1 ~ 7 for GPIO pins A1 - A7
  • +
  • Slider Switch: Shift + S
  • +
+
+ {/* prettier-ignore */} +
+

Tutorial for using the debugger

+

+ > Enter debug mode +

+

Press F5 or go to Run -> Start Debugging

+ Start debugging +

+ > Set a breakpoint or multiple breakpoints +

+

Stopping at a breakpoint pauses the program at that particular place.

+

Use the debug toolbar or the shortcuts below

+ Debugger Toolbar +
    +
  • F5 to continue / pause
  • +
  • F10 to step over (execute current statement and all functions that it calls and stop before the next statement)
  • +
  • F11 to step into (stop at first statement of first function called from first line)
  • +
  • Shift + F11 to step out (run current function to end)
  • +
  • Ctrl + Shift + F11 to restart
  • +
  • Shift + F5 to stop
  • +
+ debugging experience +

+ > Observe the device's state on the "Variables" tab on the left when stopped at a breakpoint +

+ Debugger Variables +

And much more! These links have more tutorials:

+

+ + Learn more about debugging in VS Code + +

diff --git a/src/view/pages/gettingStartedPictures/debugger/debugger_vars.png b/src/view/pages/gettingStartedPictures/debugger/debugger_vars.png new file mode 100644 index 000000000..267f461ef Binary files /dev/null and b/src/view/pages/gettingStartedPictures/debugger/debugger_vars.png differ diff --git a/src/view/pages/gettingStartedPictures/debugger/debugging.gif b/src/view/pages/gettingStartedPictures/debugger/debugging.gif new file mode 100644 index 000000000..5d42a436a Binary files /dev/null and b/src/view/pages/gettingStartedPictures/debugger/debugging.gif differ diff --git a/src/view/pages/gettingStartedPictures/debugger/start_debugging.jpg b/src/view/pages/gettingStartedPictures/debugger/start_debugging.jpg new file mode 100644 index 000000000..3d39fbf66 Binary files /dev/null and b/src/view/pages/gettingStartedPictures/debugger/start_debugging.jpg differ diff --git a/src/view/pages/gettingStartedPictures/debugger/toolbar.png b/src/view/pages/gettingStartedPictures/debugger/toolbar.png new file mode 100644 index 000000000..754e68e03 Binary files /dev/null and b/src/view/pages/gettingStartedPictures/debugger/toolbar.png differ