{
);
}
}
+
+ private updateNeopixel() {
+ const { neopixel } = this.props;
+ const rgbColor = `rgb(${neopixel[0] +
+ (255 - neopixel[0]) * CONSTANTS.LED_TINT_FACTOR},
+ ${neopixel[1] +
+ (255 - neopixel[1]) * CONSTANTS.LED_TINT_FACTOR},${neopixel[2] +
+ (255 - neopixel[2]) * CONSTANTS.LED_TINT_FACTOR})`;
+
+ if (this.neopixel.current) {
+ this.neopixel.current.setAttribute("fill", rgbColor);
+ }
+ if (this.pixelStopGradient.current) {
+ if (neopixel === DEFAULT_CLUE_STATE.neopixel) {
+ this.pixelStopGradient.current.setAttribute(
+ "stop-opacity",
+ "0"
+ );
+ } else {
+ this.pixelStopGradient.current.setAttribute(
+ "stop-opacity",
+ "1"
+ );
+ }
+ this.pixelStopGradient.current.setAttribute("stop-color", rgbColor);
+ }
+ }
}
diff --git a/src/view/components/clue/__snapshots__/Clue.spec.tsx.snap b/src/view/components/clue/__snapshots__/Clue.spec.tsx.snap
new file mode 100644
index 000000000..099a3de7a
--- /dev/null
+++ b/src/view/components/clue/__snapshots__/Clue.spec.tsx.snap
@@ -0,0 +1,1160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Clue component should render correctly 1`] = `
+Array [
+
+
+ The simulator will run the .py file you have focused on.
+
+
+
+
+
+
+
+
;
}
diff --git a/src/view/constants.ts b/src/view/constants.ts
index 1a4351b43..9358452ee 100644
--- a/src/view/constants.ts
+++ b/src/view/constants.ts
@@ -46,6 +46,7 @@ export const CONSTANTS = {
"The simulator will run the .py file you have focused on.",
SIMULATOR_BUTTON_WIDTH: 60,
TOOLBAR_INFO: `Explore what's on the board:`,
+ LED_TINT_FACTOR: 0.5,
};
export const AB_BUTTONS_KEYS = {
BTN_A: "BTN_A",
diff --git a/src/view/styles/Clue.css b/src/view/styles/Clue.css
deleted file mode 100644
index 45a9e3d92..000000000
--- a/src/view/styles/Clue.css
+++ /dev/null
@@ -1,131 +0,0 @@
-.cls-1 {
- fill: #097054;
-}
-.cls-1,
-.cls-13,
-.cls-14,
-.cls-15,
-.cls-23,
-.cls-9 {
- stroke: #000;
-}
-.cls-1,
-.cls-11,
-.cls-12,
-.cls-13,
-.cls-14,
-.cls-15,
-.cls-17,
-.cls-22,
-.cls-23,
-.cls-3,
-.cls-4,
-.cls-5,
-.cls-6,
-.cls-9 {
- stroke-miterlimit: 10;
-}
-.cls-1,
-.cls-23 {
- stroke-width: 1.99px;
-}
-.cls-18,
-.cls-2 {
- fill: #fff;
-}
-.cls-11,
-.cls-12,
-.cls-17,
-.cls-23,
-.cls-3,
-.cls-4,
-.cls-5,
-.cls-6,
-.cls-7,
-.cls-8 {
- fill: none;
-}
-.cls-11,
-.cls-12,
-.cls-17,
-.cls-3,
-.cls-4,
-.cls-5,
-.cls-6,
-.cls-7,
-.cls-8 {
- stroke: #fff;
-}
-.cls-3 {
- stroke-width: 2px;
-}
-.cls-12,
-.cls-17,
-.cls-4,
-.cls-5,
-.cls-6,
-.cls-7,
-.cls-8 {
- stroke-linecap: round;
-}
-.cls-4,
-.cls-7 {
- stroke-width: 1.63px;
-}
-.cls-5 {
- stroke-width: 1.41px;
-}
-.cls-6 {
- stroke-width: 1.6px;
-}
-.cls-7,
-.cls-8 {
- stroke-linejoin: round;
-}
-.cls-8 {
- stroke-width: 1.63px;
-}
-.cls-10,
-.cls-15,
-.cls-9 {
- fill: #7e7272;
-}
-.cls-22,
-.cls-9 {
- stroke-width: 1.5px;
-}
-.cls-12 {
- stroke-width: 1.71px;
-}
-.cls-13 {
- fill: #6599ff;
-}
-.cls-13,
-.cls-14,
-.cls-15 {
- stroke-width: 0.25px;
-}
-.cls-16 {
- fill: #ffde00;
-}
-.cls-17 {
- stroke-width: 2.02px;
-}
-.cls-18 {
- font-size: 7px;
- font-family: SegoeUI-Bold, Segoe UI;
- font-weight: 700;
- letter-spacing: -0.02em;
-}
-.cls-19 {
- letter-spacing: -0.03em;
-}
-.cls-20 {
- letter-spacing: -0.05em;
-}
-.cls-21 {
- letter-spacing: 0em;
-}
-.cls-22 {
- stroke: #7e7272;
-}
diff --git a/src/view/styles/Microbit.css b/src/view/styles/SimulatorSvg.css
similarity index 61%
rename from src/view/styles/Microbit.css
rename to src/view/styles/SimulatorSvg.css
index f96655fa0..9e9deb4fb 100644
--- a/src/view/styles/Microbit.css
+++ b/src/view/styles/SimulatorSvg.css
@@ -24,7 +24,7 @@ svg.sim.grayscale {
}
.sim-text-outside {
font-size: 25px;
- fill: var(--vscode-descriptionForeground);
+ fill: var(--vscode-foreground);
}
.sim-board,
.sim-display,
@@ -38,6 +38,9 @@ sim-button {
.sim-button-outer:active {
fill: orange;
}
+.sim-button-outer {
+ fill: #7e7272;
+}
.sim-button-key-press {
fill: orange;
@@ -174,3 +177,135 @@ sim-button {
-webkit-user-select: none;
-ms-user-select: none;
}
+.sim-button {
+ stroke: none;
+}
+.sim-button:active {
+ stroke: none;
+}
+.cls-1 {
+ fill: #097054;
+}
+.cls-1,
+.cls-14,
+.cls-23,
+.cls-9 {
+ stroke: #000;
+}
+.cls-1,
+.cls-11,
+.cls-12,
+.cls-14,
+.cls-17,
+.cls-22,
+.cls-23,
+.cls-3,
+.cls-4,
+.cls-5,
+.cls-6,
+.cls-9 {
+ stroke-miterlimit: 10;
+}
+.cls-1,
+.cls-23 {
+ stroke-width: 1.99px;
+}
+.cls-18,
+.cls-2 {
+ fill: #fff;
+}
+.cls-11,
+.cls-12,
+.cls-17,
+.cls-23,
+.cls-3,
+.cls-4,
+.cls-5,
+.cls-6,
+.cls-7,
+.cls-8 {
+ fill: none;
+}
+.cls-11,
+.cls-12,
+.cls-17,
+.cls-3,
+.cls-4,
+.cls-5,
+.cls-6,
+.cls-7,
+.cls-8 {
+ stroke: #fff;
+}
+.cls-3 {
+ stroke-width: 2px;
+}
+.cls-12,
+.cls-17,
+.cls-4,
+.cls-5,
+.cls-6,
+.cls-7,
+.cls-8 {
+ stroke-linecap: round;
+}
+.cls-4,
+.cls-7 {
+ stroke-width: 1.63px;
+}
+.cls-5 {
+ stroke-width: 1.41px;
+}
+.cls-6 {
+ stroke-width: 1.6px;
+}
+.cls-7,
+.cls-8 {
+ stroke-linejoin: round;
+}
+.cls-8 {
+ stroke-width: 1.63px;
+}
+.cls-10,
+.cls-9 {
+ fill: #7e7272;
+}
+.cls-22,
+.cls-9 {
+ stroke-width: 1.5px;
+}
+.cls-12 {
+ stroke-width: 1.71px;
+}
+
+.cls-14 {
+ stroke-width: 0.25px;
+}
+.cls-16 {
+ fill: #ffde00;
+}
+.cls-17 {
+ stroke-width: 2.02px;
+}
+.cls-18 {
+ font-size: 7px;
+ font-family: SegoeUI-Bold, Segoe UI;
+ font-weight: 700;
+ letter-spacing: -0.02em;
+}
+.cls-19 {
+ letter-spacing: -0.03em;
+}
+.cls-20 {
+ letter-spacing: -0.05em;
+}
+.cls-21 {
+ letter-spacing: 0em;
+}
+.cls-22 {
+ stroke: #7e7272;
+}
+.sim-text-outside-clue {
+ font-size: 14px;
+ fill: var(--vscode-foreground);
+}
-2. Choose the `CPX` option from the dropdown.
-3. Read, copy and learn some of the things you can do with the simulator!
-
-#### II. Start with the "Device Simulator Express [Circuit Playground Express]: New File" Command.
-
-1. Type in `"Device Simulator Express: [Circuit Playground Express] New File"` in the command palette (`CTRL + SHIFT + P` / `CMD + SHIFT + P` to open the command palette).
- 
-2. Name and save your file somewhere, and we’re good to go!
-3. Start with some examples: you can find examples files and tutorials inside the comments, as well as in the notification pop up when you run the `"Device Simulator Express: [Circuit Playground Express] New File"` Command.
-
-#### III. Start from an existing Python file.
-
-1. Open the folder or your .py file in Visual Studio Code.
-2. Run `Device Simulator Express: [Circuit Playground Express] Open Simulator` from the command palette or icon in the editor toolbar.
-
-#### IV. Run your code on the simulator.
-
-
-
-1. Run `Run Simulator` from the command palette or use the `Play` button on the simulator webview.
-
-#### V. Deploy your code to the physical device
-
-Before deploying the Python code to your CPX device, you need to format your device by following these tutorials:
-
-1. Download the firmware with the .uf2 file (link: https://learn.adafruit.com/adafruit-circuit-playground-express/circuitpython-quickstart).
-2. Download the lastest version of the cpx library (link: https://learn.adafruit.com/welcome-to-circuitpython/circuitpython-libraries).
-
-
-
-#### VI. Use the Serial Monitor for your Adafruit CPX device (available on Windows and Mac only)
-
-1. Plug in your CPX device (make sure it’s formatted properly already).
-2. Run the command `"Device Simulator Express: Open Serial Monitor"`.
-3. Select your baud rate for the serial port.
-4. The `print()` statements in your code will show in the output console.
-
-#### VII. Use the sensors in the Device Simulator Express
-
-Generating input for the sensors can be done by interacting directly with device on the webview
-or by using the toolbar.
-
-- **Switch, push buttons and capacitive touch:** click directly on the corresponding element on the device or use the keybindings.
-- **Temperature sensor, Light sensor, Acceleration sensor:** click on the corresponding button in the toolbar and change the value using the slider or the input box attached to it.
-- **Shake detection:** go to the motion sensor section in the toolbar and click on the shake button.
-
-#### VIII. Debug your project on the simulator
-
-1. Add breakpoints in your code
-2. Press F5 to enter the debugging mode, and you can start debugging line by line!
-
-### Commands
-
-Device Simulator Express provides several commands in the Command Palette (`F1` or `CTRL + SHIFT + P` / `CMD + SHIFT + P` for Mac OS) for working with \*.py files:
-
-- `Device Simulator Express: Getting Started`: Opens a page in VS Code that helps users get started with the extension. Here, users can browse through code that they can use to play with the simulators.
-- `Device Simulator Express: Run Simulator`: Runs Python code on the simulator.
-- `Device Simulator Express: [Circuit Playground Express] New File`: Opens an unsaved .py file with template code, also opens the simulator.
-- `Device Simulator Express: [Circuit Playground Express] Open Simulator`: Opens the simulator in the webView
-- `Device Simulator Express: [Circuit Playground Express] Deploy to Device`: Copies the current file to CIRCUITPY drive if detected a CPX is plugged in.
-- `Device Simulator Express: Open Serial Monitor`: Opens the serial monitor in the integrated output window.
-- `Device Simulator Express: Close Serial Monitor`: Stops the serial monitor and releases the serial port.
-- `Device Simulator Express: Change Baud Rate`: Changes the baud rate of the selected serial port. For Adafruit CPX, the default baud rate is 115200.
-- `Device Simulator Express: Select Serial Port`: Changes the current serial port.
-
### Keybindings
In Device Simulator Express, you can use keyboard to interact with the device:
@@ -172,7 +100,7 @@ In Device Simulator Express, you can use keyboard to interact with the device:
- 25 LEDs
- Light sensor
- Motion sensors
- - Acceleration detection
+ - Acceleration detection including gesture detection
- Temperature sensor
### Useful Links
@@ -180,74 +108,84 @@ In Device Simulator Express, you can use keyboard to interact with the device:
- [MicroPython documentation](https://microbit-micropython.readthedocs.io/en/latest/)
- [BBC micro:bit examples on the official micro:bit website](https://microbit.org/projects/make-it-code-it/?filters=python)
-### How to use
+### Keybindings
+- Push Button `A for A, B for B, C for A & B`
+- Refresh the simulator: `SHIFT + R`
+- Run the simulator: `SHIFT + F`
+
+## How to use
-#### I. Take a look at the "Device Simulator Express: Getting Started" Command.
-1. Type in `"Device Simulator Express: [Circuit Playground Express] New File"` in the command palette (`CTRL + SHIFT + P` / `CMD + SHIFT + P` to open the command palette).
-
-2. Name and save your file somewhere, and we’re good to go!
+
-1. Open the folder or your .py file in Visual Studio Code.
-2. Run `Device Simulator Express: [micro:bit] Open Simulator` from the command palette or icon in the editor toolbar.
+### III. Start from an existing Python file.
-#### IV. Run your code on the simulator.
+1. Open the folder or your .py file in Visual Studio Code.
+2. Run `Device Simulator Express: Open Simulator` from the command palette or icon in the editor toolbar.
+3. Select the device you want to use.
-
+### IV. Run your code on the simulator.
1. Run `Run Simulator` from the command palette or use the `Play` button on the simulator webview.
-#### V. Deploy your code to the physical device
+
-1. Run `[micro:bit] Deploy to Device` from the command palette
+### V. Deploy your code to the physical device
-
+Before deploying the Python code to your CPX device, you need to format your device by following these tutorials:
-#### VI. Use the Serial Monitor for your BBC micro:bit device (available on Windows and Mac only)
+- *For the CPX*:
+ - Download the firmware with the .uf2 file (link: https://learn.adafruit.com/adafruit-circuit-playground-express/circuitpython-quickstart).
+ - Download the lastest versions of the cpx libraries (link: https://learn.adafruit.com/welcome-to-circuitpython/circuitpython-libraries).
-1. Plug in your BBC micro:bit.
-2. Run the command `"Device Simulator Express: Open Serial Monitor"`.
-3. Select your baud rate for the serial port.
-4. The `print()` statements in your code will show in the output console.
+- *For the micro:bit*:
+ - Download the firmware with the .hex file (link: https://microbit.org/get-started/user-guide/firmware/).
-#### VII. Use the sensors in the Device Simulator Express
+1. Plug in your device (make sure it’s formatted properly already).
+2. Run the command `"Device Simulator Express: Deploy to Device"`.
-Generating input for the sensors can be done by interacting directly with device on the webview
-or by using the toolbar.
+
-- **Push buttons:** click directly on the buttons on the device or use the keybindings.
-- **Temperature sensor, Light sensor, Acceleration sensor:** click on the corresponding button in the toolbar and change the value using the slider or the input box attached to it.
+### VI. Use the Serial Monitor for your device (available on Windows and Mac only)
+
+1. Plug in your device (make sure it’s formatted properly already).
+2. Run the command `"Device Simulator Express: Open Serial Monitor"`.
+3. Select your baud rate for the serial port.
+4. The `print()` statements in your code will show in the output console.
-#### VIII. Debug your project on the simulator
+### VII. Debug your project on the simulator
1. Add breakpoints in your code
2. Press F5 to enter the debugging mode, and you can start debugging line by line!
### Commands
-Using the simulator for the micro:bit is similar to using the one for the CPX. The only difference is that the commands in the command palette display `Device Simulator Express: [micro:bit]