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