From 3d5229908d0bef2900a2e0f4b8fb2cb11daa746e Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Sun, 8 Mar 2020 22:17:30 -0700 Subject: [PATCH 01/17] Initialize a webview service --- src/constants.ts | 4 ++ src/extension.ts | 6 ++- src/service/webviewService.ts | 70 +++++++++++++++++++++++++++++++++++ 3 files changed, 78 insertions(+), 2 deletions(-) create mode 100644 src/service/webviewService.ts diff --git a/src/constants.ts b/src/constants.ts index a906ecfb7..9e179af2a 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -26,6 +26,10 @@ export const CONFIG = { }; export const CONSTANTS = { + WEBVIEW_TYPE:{ + SIMULATOR:"simulator", + TUTORIAL:"tutorial" + }, DEBUG_CONFIGURATION_TYPE: "deviceSimulatorExpress", DEVICE_NAME: { CPX: "CPX", diff --git a/src/extension.ts b/src/extension.ts index 4fa015247..704b4d62a 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -36,6 +36,7 @@ import getPackageInfo from "./telemetry/getPackageInfo"; import TelemetryAI from "./telemetry/telemetryAI"; import { UsbDetector } from "./usbDetector"; import { VSCODE_MESSAGES_TO_WEBVIEW, WEBVIEW_MESSAGES } from "./view/constants"; +import { WebviewService } from "./service/webviewService"; let telemetryAI: TelemetryAI; let pythonExecutablePath: string = GLOBAL_ENV_VARS.PYTHON; @@ -71,7 +72,6 @@ const sendCurrentDeviceMessage = (currentPanel: vscode.WebviewPanel) => { }; // Extension activation export async function activate(context: vscode.ExtensionContext) { - console.info(CONSTANTS.INFO.EXTENSION_ACTIVATED); telemetryAI = new TelemetryAI(context); setupService = new SetupService(telemetryAI); @@ -79,6 +79,7 @@ export async function activate(context: vscode.ExtensionContext) { let childProcess: cp.ChildProcess | undefined; let messageListener: vscode.Disposable; let activeEditorListener: vscode.Disposable; + const webviewService = new WebviewService(context) // Add our library path to settings.json for autocomplete functionality updatePythonExtraPaths(); @@ -130,7 +131,7 @@ export async function activate(context: vscode.ExtensionContext) { currentPanel.reveal(vscode.ViewColumn.Beside); } else { currentPanel = vscode.window.createWebviewPanel( - "adafruitSimulator", + CONSTANTS.WEBVIEW_TYPE.SIMULATOR, CONSTANTS.LABEL.WEBVIEW_PANEL, { preserveFocus: true, viewColumn: vscode.ViewColumn.Beside }, { @@ -146,6 +147,7 @@ export async function activate(context: vscode.ExtensionContext) { enableScripts: true, } ); + webviewService.openTutorialPanel() currentPanel.webview.html = getWebviewContent(context); messagingService.setWebview(currentPanel.webview); diff --git a/src/service/webviewService.ts b/src/service/webviewService.ts new file mode 100644 index 000000000..144fbf7b9 --- /dev/null +++ b/src/service/webviewService.ts @@ -0,0 +1,70 @@ +import * as vscode from "vscode"; +import CONSTANTS from "../constants"; +import * as path from "path"; + + + +// Manages different type of webview +export class WebviewService{ + private tutorialPanel: vscode.WebviewPanel|undefined + private context:vscode.ExtensionContext + + constructor(context:vscode.ExtensionContext){ + this.context = context + } + + openTutorialPanel(){ + if(this.tutorialPanel){ + this.tutorialPanel.reveal(vscode.ViewColumn.Beside) + + }else{ + this.createTutorialPanel() + } + + } + private createTutorialPanel(){ + this.tutorialPanel = vscode.window.createWebviewPanel( + CONSTANTS.WEBVIEW_TYPE.TUTORIAL, + CONSTANTS.LABEL.WEBVIEW_PANEL, + { preserveFocus: true, viewColumn: vscode.ViewColumn.Beside }, + { + // Only allow the webview to access resources in our extension's media directory + localResourceRoots: [ + vscode.Uri.file( + path.join( + this.context.extensionPath, + CONSTANTS.FILESYSTEM.OUTPUT_DIRECTORY + ) + ), + ], + enableScripts: true, + } + ); + this.tutorialPanel.webview.html= + this.tutorialPanel.onDidDispose(()=>{ + this.disposeTutorialPanel() + }) + + } + private disposeTutorialPanel(){ + this.tutorialPanel=undefined + } + private getHTMLContent(){ + return ` + + + + + + ${CONSTANTS.NAME} + + +
+ + + ${loadScript(context, "out/vendor.js")} + ${loadScript(context, "out/simulator.js")} + + `; + } +} \ No newline at end of file From f49c8e94c814d5e53bd711e1231412a7508a6971 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Mon, 9 Mar 2020 12:09:43 -0700 Subject: [PATCH 02/17] Add command for getting started --- locales/en/package.i18n.json | 37 +++++++++--------- package-lock.json | 16 ++++++-- package.json | 7 +++- package.nls.json | 37 +++++++++--------- src/constants.ts | 7 ++-- src/extension.ts | 15 ++++++-- src/pages/gettingStarted.ts | 1 + src/service/webviewService.ts | 71 ++++++++++------------------------- 8 files changed, 93 insertions(+), 98 deletions(-) create mode 100644 src/pages/gettingStarted.ts diff --git a/locales/en/package.i18n.json b/locales/en/package.i18n.json index 6681f33da..5213e93a3 100644 --- a/locales/en/package.i18n.json +++ b/locales/en/package.i18n.json @@ -1,20 +1,21 @@ { - "deviceSimulatorExpressExtension.commands.common.installDependencies": "Install Extension Dependencies", - "deviceSimulatorExpressExtension.commands.common.label": "Device Simulator Express", - "deviceSimulatorExpressExtension.commands.common.runSimulator": "Run Simulator", - "deviceSimulatorExpressExtension.commands.common.changeBaudRate": "Change Baud Rate", - "deviceSimulatorExpressExtension.commands.common.closeSerialMonitor": "Close Serial Monitor", - "deviceSimulatorExpressExtension.commands.common.openSerialMonitor": "Open Serial Monitor", - "deviceSimulatorExpressExtension.commands.common.selectSerialPort": "Select Serial Port", - "deviceSimulatorExpressExtension.commands.cpx.openSimulator": "[Circuit Playground Express] Open Simulator", - "deviceSimulatorExpressExtension.commands.cpx.newFile": "[Circuit Playground Express] New File", - "deviceSimulatorExpressExtension.commands.cpx.deployToDevice": "[Circuit Playground Express] Deploy to Device", - "deviceSimulatorExpressExtension.commands.microbit.deployToDevice": "[micro:bit] Deploy to Device", - "deviceSimulatorExpressExtension.commands.microbit.openSimulator": "[micro:bit] Open Simulator", - "deviceSimulatorExpressExtension.commands.microbit.newFile": "[micro:bit] New File", - "deviceSimulatorExpressExtension.configuration.title": "Device Simulator Express configuration", - "deviceSimulatorExpressExtension.configuration.properties.configEnvOnChange": "When you change the Python interpreter, the Device Simulator Express will automatically configure itself for the required dependencies.", - "deviceSimulatorExpressExtension.configuration.properties.debuggerPort": "The port the Server will listen on for communication with the debugger.", - "deviceSimulatorExpressExtension.configuration.properties.dependencyChecker": "Whether or not to ask if we can download dependencies. If unchecked, the extension will default to never download dependencies, except when automatically creating a virtual environment in the extension files.", - "deviceSimulatorExpressExtension.configuration.properties.previewMode": "Enable this to test out and play with the new micro:bit simulator!" + "deviceSimulatorExpressExtension.commands.common.installDependencies": "Install Extension Dependencies", + "deviceSimulatorExpressExtension.commands.common.label": "Device Simulator Express", + "deviceSimulatorExpressExtension.commands.common.gettingStarted": "Getting Started", + "deviceSimulatorExpressExtension.commands.common.runSimulator": "Run Simulator", + "deviceSimulatorExpressExtension.commands.common.changeBaudRate": "Change Baud Rate", + "deviceSimulatorExpressExtension.commands.common.closeSerialMonitor": "Close Serial Monitor", + "deviceSimulatorExpressExtension.commands.common.openSerialMonitor": "Open Serial Monitor", + "deviceSimulatorExpressExtension.commands.common.selPectSerialPort": "Select Serial Port", + "deviceSimulatorExpressExtension.commands.cpx.openSimulator": "[Circuit Playground Express] Open Simulator", + "deviceSimulatorExpressExtension.commands.cpx.newFile": "[Circuit Playground Express] New File", + "deviceSimulatorExpressExtension.commands.cpx.deployToDevice": "[Circuit Playground Express] Deploy to Device", + "deviceSimulatorExpressExtension.commands.microbit.deployToDevice": "[micro:bit] Deploy to Device", + "deviceSimulatorExpressExtension.commands.microbit.openSimulator": "[micro:bit] Open Simulator", + "deviceSimulatorExpressExtension.commands.microbit.newFile": "[micro:bit] New File", + "deviceSimulatorExpressExtension.configuration.title": "Device Simulator Express configuration", + "deviceSimulatorExpressExtension.configuration.properties.configEnvOnChange": "When you change the Python interpreter, the Device Simulator Express will automatically configure itself for the required dependencies.", + "deviceSimulatorExpressExtension.configuration.properties.debuggerPort": "The port the Server will listen on for communication with the debugger.", + "deviceSimulatorExpressExtension.configuration.properties.dependencyChecker": "Whether or not to ask if we can download dependencies. If unchecked, the extension will default to never download dependencies, except when automatically creating a virtual environment in the extension files.", + "deviceSimulatorExpressExtension.configuration.properties.previewMode": "Enable this to test out and play with the new micro:bit simulator!" } diff --git a/package-lock.json b/package-lock.json index b0702e597..7b8613ef0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26317,7 +26317,8 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -26477,6 +26478,7 @@ "version": "2.9.0", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -26495,6 +26497,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -26597,6 +26600,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -26682,7 +26686,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -26718,6 +26723,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -26781,12 +26787,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true } } } diff --git a/package.json b/package.json index 59e9b4417..531d2b871 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "onCommand:deviceSimulatorExpress.common.openSerialMonitor", "onCommand:deviceSimulatorExpress.common.runSimulator", "onCommand:deviceSimulatorExpress.common.selectSerialPort", + "onCommand:deviceSimulatorExpress.common.gettingStarted", "onCommand:deviceSimulatorExpress.cpx.deployToDevice", "onCommand:deviceSimulatorExpress.cpx.newFile", "onCommand:deviceSimulatorExpress.cpx.openSimulator", @@ -61,7 +62,6 @@ "category": "%deviceSimulatorExpressExtension.commands.common.label%" }, { - "command": "deviceSimulatorExpress.common.openSerialMonitor", "title": "%deviceSimulatorExpressExtension.commands.common.openSerialMonitor%", "category": "%deviceSimulatorExpressExtension.commands.common.label%" @@ -76,6 +76,11 @@ "title": "%deviceSimulatorExpressExtension.commands.common.runSimulator%", "category": "%deviceSimulatorExpressExtension.commands.common.label%" }, + { + "command": "deviceSimulatorExpress.common.gettingStarted", + "title": "%deviceSimulatorExpressExtension.commands.common.gettingStarted%", + "category": "%deviceSimulatorExpressExtension.commands.common.label%" + }, { "command": "deviceSimulatorExpress.cpx.deployToDevice", "title": "%deviceSimulatorExpressExtension.commands.cpx.deployToDevice%", diff --git a/package.nls.json b/package.nls.json index 2f574c7eb..fd50c4a0c 100644 --- a/package.nls.json +++ b/package.nls.json @@ -1,20 +1,21 @@ { - "deviceSimulatorExpressExtension.commands.common.installDependencies": "Install Extension Dependencies", - "deviceSimulatorExpressExtension.commands.common.label": "Device Simulator Express", - "deviceSimulatorExpressExtension.commands.common.runSimulator": "Run Simulator", - "deviceSimulatorExpressExtension.commands.common.changeBaudRate": "Change Baud Rate", - "deviceSimulatorExpressExtension.commands.common.closeSerialMonitor": "Close Serial Monitor", - "deviceSimulatorExpressExtension.commands.common.openSerialMonitor": "Open Serial Monitor", - "deviceSimulatorExpressExtension.commands.common.selectSerialPort": "Select Serial Port", - "deviceSimulatorExpressExtension.commands.cpx.openSimulator": "[Circuit Playground Express] Open Simulator", - "deviceSimulatorExpressExtension.commands.cpx.newFile": "[Circuit Playground Express] New File", - "deviceSimulatorExpressExtension.commands.cpx.deployToDevice": "[Circuit Playground Express] Deploy to Device", - "deviceSimulatorExpressExtension.commands.microbit.deployToDevice": "[micro:bit] Deploy to Device", - "deviceSimulatorExpressExtension.commands.microbit.openSimulator": "[micro:bit] Open Simulator", - "deviceSimulatorExpressExtension.commands.microbit.newFile": "[micro:bit] New File", - "deviceSimulatorExpressExtension.configuration.title": "Device Simulator Express configuration", - "deviceSimulatorExpressExtension.configuration.properties.configEnvOnChange": "When you change the Python interpreter, the Device Simulator Express will automatically configure itself for the required dependencies.", - "deviceSimulatorExpressExtension.configuration.properties.debuggerPort": "The port the Server will listen on for communication with the debugger.", - "deviceSimulatorExpressExtension.configuration.properties.dependencyChecker": "Whether or not to ask for dependency downloads. If unchecked, the extension will default to never download dependencies, except when automatically creating a virtual environment in the extension files.", - "deviceSimulatorExpressExtension.configuration.properties.previewMode": "Enable this to test out and play with the new micro:bit simulator!" + "deviceSimulatorExpressExtension.commands.common.installDependencies": "Install Extension Dependencies", + "deviceSimulatorExpressExtension.commands.common.label": "Device Simulator Express", + "deviceSimulatorExpressExtension.commands.common.gettingStarted": "Getting Started", + "deviceSimulatorExpressExtension.commands.common.runSimulator": "Run Simulator", + "deviceSimulatorExpressExtension.commands.common.changeBaudRate": "Change Baud Rate", + "deviceSimulatorExpressExtension.commands.common.closeSerialMonitor": "Close Serial Monitor", + "deviceSimulatorExpressExtension.commands.common.openSerialMonitor": "Open Serial Monitor", + "deviceSimulatorExpressExtension.commands.common.selectSerialPort": "Select Serial Port", + "deviceSimulatorExpressExtension.commands.cpx.openSimulator": "[Circuit Playground Express] Open Simulator", + "deviceSimulatorExpressExtension.commands.cpx.newFile": "[Circuit Playground Express] New File", + "deviceSimulatorExpressExtension.commands.cpx.deployToDevice": "[Circuit Playground Express] Deploy to Device", + "deviceSimulatorExpressExtension.commands.microbit.deployToDevice": "[micro:bit] Deploy to Device", + "deviceSimulatorExpressExtension.commands.microbit.openSimulator": "[micro:bit] Open Simulator", + "deviceSimulatorExpressExtension.commands.microbit.newFile": "[micro:bit] New File", + "deviceSimulatorExpressExtension.configuration.title": "Device Simulator Express configuration", + "deviceSimulatorExpressExtension.configuration.properties.configEnvOnChange": "When you change the Python interpreter, the Device Simulator Express will automatically configure itself for the required dependencies.", + "deviceSimulatorExpressExtension.configuration.properties.debuggerPort": "The port the Server will listen on for communication with the debugger.", + "deviceSimulatorExpressExtension.configuration.properties.dependencyChecker": "Whether or not to ask for dependency downloads. If unchecked, the extension will default to never download dependencies, except when automatically creating a virtual environment in the extension files.", + "deviceSimulatorExpressExtension.configuration.properties.previewMode": "Enable this to test out and play with the new micro:bit simulator!" } diff --git a/src/constants.ts b/src/constants.ts index 9e179af2a..d1dafc7af 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -26,9 +26,9 @@ export const CONFIG = { }; export const CONSTANTS = { - WEBVIEW_TYPE:{ - SIMULATOR:"simulator", - TUTORIAL:"tutorial" + WEBVIEW_TYPE: { + SIMULATOR: "simulator", + TUTORIAL: "tutorial", }, DEBUG_CONFIGURATION_TYPE: "deviceSimulatorExpress", DEVICE_NAME: { @@ -323,6 +323,7 @@ export enum TelemetryEventName { COMMAND_SERIAL_MONITOR_OPEN = "COMMAND.SERIAL_MONITOR.OPEN", COMMAND_SERIAL_MONITOR_BAUD_RATE = "COMMAND.SERIAL_MONITOR.BAUD_RATE", COMMAND_SERIAL_MONITOR_CLOSE = "COMMAND.SERIAL_MONITOR.CLOSE", + COMMAND_GETTING_STARTED = "COMMAND.GETTING_STARTED", CPX_COMMAND_DEPLOY_DEVICE = "CPX.COMMAND.DEPLOY.DEVICE", CPX_COMMAND_NEW_FILE = "CPX.COMMAND.NEW.FILE.CPX", diff --git a/src/extension.ts b/src/extension.ts index 704b4d62a..b77fe01b2 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -72,14 +72,13 @@ const sendCurrentDeviceMessage = (currentPanel: vscode.WebviewPanel) => { }; // Extension activation export async function activate(context: vscode.ExtensionContext) { - telemetryAI = new TelemetryAI(context); setupService = new SetupService(telemetryAI); let currentPanel: vscode.WebviewPanel | undefined; let childProcess: cp.ChildProcess | undefined; let messageListener: vscode.Disposable; let activeEditorListener: vscode.Disposable; - const webviewService = new WebviewService(context) + const webviewService = new WebviewService(context); // Add our library path to settings.json for autocomplete functionality updatePythonExtraPaths(); @@ -147,7 +146,6 @@ export async function activate(context: vscode.ExtensionContext) { enableScripts: true, } ); - webviewService.openTutorialPanel() currentPanel.webview.html = getWebviewContent(context); messagingService.setWebview(currentPanel.webview); @@ -305,6 +303,16 @@ export async function activate(context: vscode.ExtensionContext) { openWebview(); }; + const gettingStartedOpen: vscode.Disposable = vscode.commands.registerCommand( + "deviceSimulatorExpress.common.gettingStarted", + () => { + telemetryAI.trackFeatureUsage( + TelemetryEventName.COMMAND_GETTING_STARTED + ); + webviewService.openTutorialPanel(); + } + ); + // Open Simulator on the webview const cpxOpenSimulator: vscode.Disposable = vscode.commands.registerCommand( "deviceSimulatorExpress.cpx.openSimulator", @@ -1043,6 +1051,7 @@ export async function activate(context: vscode.ExtensionContext) { microbitOpenSimulator, microbitNewFile, microbitDeployToDevice, + gettingStartedOpen, vscode.debug.registerDebugConfigurationProvider( CONSTANTS.DEBUG_CONFIGURATION_TYPE, simulatorDebugConfiguration diff --git a/src/pages/gettingStarted.ts b/src/pages/gettingStarted.ts new file mode 100644 index 000000000..44073fafe --- /dev/null +++ b/src/pages/gettingStarted.ts @@ -0,0 +1 @@ +export const GETTING_STARTED_HTML = ""; diff --git a/src/service/webviewService.ts b/src/service/webviewService.ts index 144fbf7b9..acda19c01 100644 --- a/src/service/webviewService.ts +++ b/src/service/webviewService.ts @@ -1,70 +1,39 @@ import * as vscode from "vscode"; import CONSTANTS from "../constants"; import * as path from "path"; - - +import { GETTING_STARTED_HTML } from "../pages/gettingStarted"; // Manages different type of webview -export class WebviewService{ - private tutorialPanel: vscode.WebviewPanel|undefined - private context:vscode.ExtensionContext +export class WebviewService { + private tutorialPanel: vscode.WebviewPanel | undefined; + private context: vscode.ExtensionContext; - constructor(context:vscode.ExtensionContext){ - this.context = context + constructor(context: vscode.ExtensionContext) { + this.context = context; } - openTutorialPanel(){ - if(this.tutorialPanel){ - this.tutorialPanel.reveal(vscode.ViewColumn.Beside) - - }else{ - this.createTutorialPanel() + openTutorialPanel() { + if (this.tutorialPanel) { + this.tutorialPanel.reveal(vscode.ViewColumn.Beside); + } else { + this.createTutorialPanel(); } - } - private createTutorialPanel(){ + private createTutorialPanel() { this.tutorialPanel = vscode.window.createWebviewPanel( CONSTANTS.WEBVIEW_TYPE.TUTORIAL, CONSTANTS.LABEL.WEBVIEW_PANEL, - { preserveFocus: true, viewColumn: vscode.ViewColumn.Beside }, + { preserveFocus: true, viewColumn: vscode.ViewColumn.One }, { - // Only allow the webview to access resources in our extension's media directory - localResourceRoots: [ - vscode.Uri.file( - path.join( - this.context.extensionPath, - CONSTANTS.FILESYSTEM.OUTPUT_DIRECTORY - ) - ), - ], enableScripts: true, } ); - this.tutorialPanel.webview.html= - this.tutorialPanel.onDidDispose(()=>{ - this.disposeTutorialPanel() - }) - - } - private disposeTutorialPanel(){ - this.tutorialPanel=undefined + this.tutorialPanel.webview.html = GETTING_STARTED_HTML; + this.tutorialPanel.onDidDispose(() => { + this.disposeTutorialPanel(); + }); } - private getHTMLContent(){ - return ` - - - - - - ${CONSTANTS.NAME} - - -
- - - ${loadScript(context, "out/vendor.js")} - ${loadScript(context, "out/simulator.js")} - - `; + private disposeTutorialPanel() { + this.tutorialPanel = undefined; } -} \ No newline at end of file +} From c9bf221d591f98ea9d14501165045a4934cb48d1 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Fri, 13 Mar 2020 09:46:40 -0700 Subject: [PATCH 03/17] Initialize html page for getting started --- src/pages/gettingStarted.ts | 64 ++++++++++++++++++++++++++++++++++++- 1 file changed, 63 insertions(+), 1 deletion(-) diff --git a/src/pages/gettingStarted.ts b/src/pages/gettingStarted.ts index 44073fafe..4e21b1f28 100644 --- a/src/pages/gettingStarted.ts +++ b/src/pages/gettingStarted.ts @@ -1 +1,63 @@ -export const GETTING_STARTED_HTML = ""; +export const GETTING_STARTED_HTML = ` + + + + + + +

Getting started

+ + + +
+

Tutorial for micro:bit

+

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +
+
Content 2
+ + + + `; From e4cfd3cc54b248298b0c8d658ba4eadb9dff21c9 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Fri, 13 Mar 2020 10:15:52 -0700 Subject: [PATCH 04/17] Add placeholder content --- src/pages/gettingStarted.ts | 46 ++++++++++++++++++++++++++++++++++--- 1 file changed, 43 insertions(+), 3 deletions(-) diff --git a/src/pages/gettingStarted.ts b/src/pages/gettingStarted.ts index 4e21b1f28..f7513ec3d 100644 --- a/src/pages/gettingStarted.ts +++ b/src/pages/gettingStarted.ts @@ -18,9 +18,9 @@ export const GETTING_STARTED_HTML = ` } .codeBox { display: block; - width: 90%; height: 50px; + width: 90%; margin: 10px; - padding: 10px; + padding: 15px; text-align: left; background: none; border: 1px solid grey; @@ -39,10 +39,50 @@ export const GETTING_STARTED_HTML = `

Tutorial for micro:bit

+

1. Import the micro:bit library to use it!

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

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

Tutorial for CPX

+

1. Import the micro:bit library to use it!

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART) +

1. Light up your micro:bit with love by showing a heart.

+ display.show(Image.HEART)

1. Light up your micro:bit with love by showing a heart.

display.show(Image.HEART)
-
Content 2
`; + } private tutorialPanel: vscode.WebviewPanel | undefined; private context: vscode.ExtensionContext; @@ -12,7 +25,7 @@ export class WebviewService { this.context = context; } - openTutorialPanel() { + public openTutorialPanel() { if (this.tutorialPanel) { this.tutorialPanel.reveal(vscode.ViewColumn.Beside); } else { @@ -28,7 +41,10 @@ export class WebviewService { enableScripts: true, } ); - this.tutorialPanel.webview.html = GETTING_STARTED_HTML; + this.tutorialPanel.webview.html = this.getWebviewContent( + WEBVIEW_ATTRIBUTES_KEY.TYPE, + WEBVIEW_TYPES.GETTING_STARTED + ); this.tutorialPanel.onDidDispose(() => { this.disposeTutorialPanel(); }); @@ -36,4 +52,37 @@ export class WebviewService { private disposeTutorialPanel() { this.tutorialPanel = undefined; } + private getWebviewContent( + attributeKey: WEBVIEW_ATTRIBUTES_KEY, + attributeValue: string + ) { + return ` + + + + + + ${CONSTANTS.NAME} + + +
+ + + ${WebviewService.loadScript( + this.context, + attributeKey, + attributeValue, + "out/vendor.js" + )} + ${WebviewService.loadScript( + this.context, + attributeKey, + attributeValue, + "out/simulator.js" + )} + + `; + } } diff --git a/src/view/App.tsx b/src/view/App.tsx index eb9da7b02..79692ec44 100644 --- a/src/view/App.tsx +++ b/src/view/App.tsx @@ -7,18 +7,23 @@ import { DEVICE_LIST_KEY, VIEW_STATE, VSCODE_MESSAGES_TO_WEBVIEW, + WEBVIEW_ATTRIBUTES_KEY, + WEBVIEW_TYPES, } from "./constants"; import { Device } from "./container/device/Device"; import { ViewStateContext } from "./context"; +import { GettingStartedPage } from "./pages/gettingStarted"; interface IState { currentDevice: string; viewState: VIEW_STATE; + type?:WEBVIEW_TYPES; } const defaultState = { currentDevice: DEVICE_LIST_KEY.CPX, viewState: VIEW_STATE.RUNNING, + type:undefined }; class App extends React.Component<{}, IState> { @@ -28,15 +33,24 @@ class App extends React.Component<{}, IState> { } componentDidMount() { if (document.currentScript) { - const initialDevice = document.currentScript.getAttribute( - "initialDevice" - ); + const webviewTypeAttribute = document.currentScript.getAttribute( + WEBVIEW_ATTRIBUTES_KEY.TYPE + ) as WEBVIEW_TYPES; + if (webviewTypeAttribute) { + this.setState({type:webviewTypeAttribute}) - if (initialDevice) { - this.setState({ currentDevice: initialDevice }); + } else { + const initialDevice = document.currentScript.getAttribute( + "initialDevice" + ); + + if (initialDevice) { + // Attach message listeners only for devices + this.setState({ currentDevice: initialDevice }); + window.addEventListener("message", this.handleMessage); + } } } - window.addEventListener("message", this.handleMessage); } componentWillUnmount() { window.removeEventListener("message", this.handleMessage); @@ -47,14 +61,19 @@ class App extends React.Component<{}, IState> {
+ + {this.loadContent}
); } + loadConten()=>{ + switch() + } handleMessage = (event: any): void => { const message = event.data; diff --git a/src/view/constants.ts b/src/view/constants.ts index 55ba35bf5..1e4e53deb 100644 --- a/src/view/constants.ts +++ b/src/view/constants.ts @@ -96,5 +96,12 @@ export enum SENSOR_LIST { MOTION_Y = "motion_y", MOTION_Z = "motion_z", } - +export enum WEBVIEW_ATTRIBUTES_KEY { + INITIAL_DEVICE = "initial_device", + TYPE = "webview_type", +} +export enum WEBVIEW_TYPES { + SIMULATOR = "simulator", + GETTING_STARTED = "getting_started", +} export default CONSTANTS; diff --git a/src/view/pages/gettingStarted.css b/src/view/pages/gettingStarted.css new file mode 100644 index 000000000..84680d5d9 --- /dev/null +++ b/src/view/pages/gettingStarted.css @@ -0,0 +1,22 @@ +.inv { + display: none; +} +.deviceSelector { + width: 250px; + border: 1px solid #3d484c; + margin: 0 0 5px; + padding: 8px; + border-radius: 5px; + font-size: 12px; + padding-right: 30px; +} +.codeBox { + display: block; + width: 90%; + margin: 10px; + padding: 15px; + text-align: left; + background: none; + border: 1px solid grey; + border-radius: 4px; +} diff --git a/src/view/pages/gettingStarted.tsx b/src/view/pages/gettingStarted.tsx new file mode 100644 index 000000000..d8322c481 --- /dev/null +++ b/src/view/pages/gettingStarted.tsx @@ -0,0 +1,109 @@ +import * as React from "react"; +import "./gettingStarted.css"; + +export const GettingStartedPage: React.FC<{}> = () => { + document + .getElementById("target")! + .addEventListener("change", (event: any) => { + const visibleElement = document.querySelector(".visibleElement"); + const target = document.getElementById(event!.target!.value); + if (visibleElement !== null) { + visibleElement.className = "inv"; + } + if (target !== null) { + target.className = "visibleElement"; + } + }); + return ( + +

Getting started

+ + + +
+

Tutorial for micro:bit

+

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

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

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

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

And much more! These links have more tutorials:

+

+ + Microbit Tutorials + +

+

+ + Microbit official documentation + +

+
+
+

Tutorial for CPX

+

+ {" "} + 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 + +

+
+ + ); +}; From 688d69870f5c6e9a4ea5854d4df88d4a3578cb37 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Wed, 18 Mar 2020 18:22:26 -0700 Subject: [PATCH 08/17] Working webview service for getting started type --- src/view/App.tsx | 30 +++-- src/view/pages/gettingStarted.tsx | 201 ++++++++++++++++-------------- 2 files changed, 124 insertions(+), 107 deletions(-) diff --git a/src/view/App.tsx b/src/view/App.tsx index 79692ec44..22ff379e3 100644 --- a/src/view/App.tsx +++ b/src/view/App.tsx @@ -17,13 +17,13 @@ import { GettingStartedPage } from "./pages/gettingStarted"; interface IState { currentDevice: string; viewState: VIEW_STATE; - type?:WEBVIEW_TYPES; + type?: WEBVIEW_TYPES; } const defaultState = { currentDevice: DEVICE_LIST_KEY.CPX, viewState: VIEW_STATE.RUNNING, - type:undefined + type: undefined, }; class App extends React.Component<{}, IState> { @@ -33,12 +33,13 @@ class App extends React.Component<{}, IState> { } componentDidMount() { if (document.currentScript) { + console.log("componentdidmount"); const webviewTypeAttribute = document.currentScript.getAttribute( WEBVIEW_ATTRIBUTES_KEY.TYPE ) as WEBVIEW_TYPES; if (webviewTypeAttribute) { - this.setState({type:webviewTypeAttribute}) - + this.setState({ type: webviewTypeAttribute }); + console.dir(webviewTypeAttribute); } else { const initialDevice = document.currentScript.getAttribute( "initialDevice" @@ -61,19 +62,24 @@ class App extends React.Component<{}, IState> {
- - - {this.loadContent} + {this.loadContent()}
); } - loadConten()=>{ - switch() - } + loadContent = () => { + console.log(this.state.type); + switch (this.state.type) { + case WEBVIEW_TYPES.GETTING_STARTED: + return ; + case WEBVIEW_TYPES.SIMULATOR: + return ( + + ); + } + return; + }; handleMessage = (event: any): void => { const message = event.data; diff --git a/src/view/pages/gettingStarted.tsx b/src/view/pages/gettingStarted.tsx index d8322c481..2b9f90707 100644 --- a/src/view/pages/gettingStarted.tsx +++ b/src/view/pages/gettingStarted.tsx @@ -1,10 +1,11 @@ import * as React from "react"; import "./gettingStarted.css"; -export const GettingStartedPage: React.FC<{}> = () => { - document - .getElementById("target")! - .addEventListener("change", (event: any) => { +export class GettingStartedPage extends React.Component { + private selectRef: React.RefObject = React.createRef(); + + componentDidMount() { + this.selectRef!.current!.addEventListener("change", (event: any) => { const visibleElement = document.querySelector(".visibleElement"); const target = document.getElementById(event!.target!.value); if (visibleElement !== null) { @@ -14,96 +15,106 @@ export const GettingStartedPage: React.FC<{}> = () => { target.className = "visibleElement"; } }); - return ( - -

Getting started

+ } + + render() { + return ( + +

Getting started

- + -
-

Tutorial for micro:bit

-

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

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

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

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

And much more! These links have more tutorials:

-

- - Microbit Tutorials - -

-

- - Microbit official documentation - -

-
-
-

Tutorial for CPX

-

- {" "} - 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 - -

-
- - ); -}; +
+

Tutorial for micro:bit

+

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

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

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

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

And much more! These links have more tutorials:

+

+ + Microbit Tutorials + +

+

+ + Microbit official documentation + +

+
+
+

Tutorial for CPX

+

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

+
+ + ); + } +} From 11d811994a340190322925bb69c8a8dcb362791d Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Thu, 19 Mar 2020 09:09:18 -0700 Subject: [PATCH 09/17] Load entire getting started from react --- src/extension.ts | 42 ++++---------- src/service/webviewService.ts | 103 +++++++++++++++++++--------------- src/view/App.tsx | 8 +-- 3 files changed, 71 insertions(+), 82 deletions(-) diff --git a/src/extension.ts b/src/extension.ts index ad135b0f0..d555a0826 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -35,7 +35,11 @@ import { SimulatorDebugConfigurationProvider } from "./simulatorDebugConfigurati import getPackageInfo from "./telemetry/getPackageInfo"; import TelemetryAI from "./telemetry/telemetryAI"; import { UsbDetector } from "./usbDetector"; -import { VSCODE_MESSAGES_TO_WEBVIEW, WEBVIEW_MESSAGES } from "./view/constants"; +import { + VSCODE_MESSAGES_TO_WEBVIEW, + WEBVIEW_MESSAGES, + WEBVIEW_TYPES, +} from "./view/constants"; import { WebviewService } from "./service/webviewService"; let telemetryAI: TelemetryAI; @@ -54,14 +58,6 @@ const fileSelectionService = new FileSelectionService(messagingService); export let outChannel: vscode.OutputChannel | undefined; -function loadScript(context: vscode.ExtensionContext, scriptPath: string) { - return ``; -} - const sendCurrentDeviceMessage = (currentPanel: vscode.WebviewPanel) => { if (currentPanel) { currentPanel.webview.postMessage({ @@ -78,7 +74,7 @@ export async function activate(context: vscode.ExtensionContext) { let childProcess: cp.ChildProcess | undefined; let messageListener: vscode.Disposable; let activeEditorListener: vscode.Disposable; - const webviewService = new WebviewService(context); + const webviewService = new WebviewService(context, deviceSelectionService); // Add our library path to settings.json for autocomplete functionality updatePythonExtraPaths(); @@ -147,7 +143,10 @@ export async function activate(context: vscode.ExtensionContext) { } ); - currentPanel.webview.html = getWebviewContent(context); + currentPanel.webview.html = webviewService.getWebviewContent( + WEBVIEW_TYPES.SIMULATOR, + true + ); messagingService.setWebview(currentPanel.webview); if (messageListener !== undefined) { @@ -1332,27 +1331,6 @@ const updateConfigLists = ( .update(section, Array.from(extraItemsSet), scope); }; -function getWebviewContent(context: vscode.ExtensionContext) { - return ` - - - - - - ${CONSTANTS.NAME} - - -
- - - ${loadScript(context, "out/vendor.js")} - ${loadScript(context, "out/simulator.js")} - - `; -} - // this method is called when your extension is deactivated export async function deactivate() { const monitor: SerialMonitor = SerialMonitor.getInstance(); diff --git a/src/service/webviewService.ts b/src/service/webviewService.ts index 5ee461a92..66e8e1bda 100644 --- a/src/service/webviewService.ts +++ b/src/service/webviewService.ts @@ -3,26 +3,20 @@ import * as vscode from "vscode"; import CONSTANTS from "../constants"; import { GETTING_STARTED_HTML } from "../pages/gettingStarted"; import { WEBVIEW_ATTRIBUTES_KEY, WEBVIEW_TYPES } from "../view/constants"; +import { DeviceSelectionService } from "./deviceSelectionService"; // Manages different type of webview export class WebviewService { - static loadScript( - context: vscode.ExtensionContext, - attributeKey: WEBVIEW_ATTRIBUTES_KEY, - attributeValue: string, - scriptPath: string - ) { - return ``; - } private tutorialPanel: vscode.WebviewPanel | undefined; private context: vscode.ExtensionContext; + private deviceSelectionService: DeviceSelectionService; - constructor(context: vscode.ExtensionContext) { + constructor( + context: vscode.ExtensionContext, + deviceSelectionService: DeviceSelectionService + ) { this.context = context; + this.deviceSelectionService = deviceSelectionService; } public openTutorialPanel() { @@ -32,30 +26,7 @@ export class WebviewService { this.createTutorialPanel(); } } - private createTutorialPanel() { - this.tutorialPanel = vscode.window.createWebviewPanel( - CONSTANTS.WEBVIEW_TYPE.TUTORIAL, - CONSTANTS.LABEL.WEBVIEW_PANEL, - { preserveFocus: true, viewColumn: vscode.ViewColumn.One }, - { - enableScripts: true, - } - ); - this.tutorialPanel.webview.html = this.getWebviewContent( - WEBVIEW_ATTRIBUTES_KEY.TYPE, - WEBVIEW_TYPES.GETTING_STARTED - ); - this.tutorialPanel.onDidDispose(() => { - this.disposeTutorialPanel(); - }); - } - private disposeTutorialPanel() { - this.tutorialPanel = undefined; - } - private getWebviewContent( - attributeKey: WEBVIEW_ATTRIBUTES_KEY, - attributeValue: string - ) { + public getWebviewContent(webviewType: string, hasDevice: boolean) { return ` @@ -70,19 +41,61 @@ export class WebviewService { const vscode = acquireVsCodeApi(); - ${WebviewService.loadScript( + ${this.loadScript( this.context, - attributeKey, - attributeValue, - "out/vendor.js" + webviewType, + "out/vendor.js", + hasDevice )} - ${WebviewService.loadScript( + ${this.loadScript( this.context, - attributeKey, - attributeValue, - "out/simulator.js" + webviewType, + "out/simulator.js", + hasDevice )} `; } + private createTutorialPanel() { + this.tutorialPanel = vscode.window.createWebviewPanel( + CONSTANTS.WEBVIEW_TYPE.TUTORIAL, + CONSTANTS.LABEL.WEBVIEW_PANEL, + { preserveFocus: true, viewColumn: vscode.ViewColumn.One }, + { + enableScripts: true, + } + ); + this.tutorialPanel.webview.html = this.getWebviewContent( + WEBVIEW_TYPES.GETTING_STARTED, + false + ); + this.tutorialPanel.onDidDispose(() => { + this.disposeTutorialPanel(); + }); + } + private disposeTutorialPanel() { + this.tutorialPanel = undefined; + } + private loadScript( + context: vscode.ExtensionContext, + attributeValue: string, + scriptPath: string, + hasDevice: boolean + ) { + let attributeString: string; + if (hasDevice) { + attributeString = `${ + WEBVIEW_ATTRIBUTES_KEY.TYPE + }=${attributeValue} ${ + WEBVIEW_ATTRIBUTES_KEY.INITIAL_DEVICE + }=${this.deviceSelectionService.getCurrentActiveDevice()}`; + } else { + attributeString = `${WEBVIEW_ATTRIBUTES_KEY.TYPE}=${attributeValue} `; + } + return ``; + } } diff --git a/src/view/App.tsx b/src/view/App.tsx index 22ff379e3..3e540c8d9 100644 --- a/src/view/App.tsx +++ b/src/view/App.tsx @@ -33,20 +33,18 @@ class App extends React.Component<{}, IState> { } componentDidMount() { if (document.currentScript) { - console.log("componentdidmount"); const webviewTypeAttribute = document.currentScript.getAttribute( WEBVIEW_ATTRIBUTES_KEY.TYPE ) as WEBVIEW_TYPES; if (webviewTypeAttribute) { this.setState({ type: webviewTypeAttribute }); - console.dir(webviewTypeAttribute); - } else { + } + if (webviewTypeAttribute === WEBVIEW_TYPES.SIMULATOR) { const initialDevice = document.currentScript.getAttribute( - "initialDevice" + WEBVIEW_ATTRIBUTES_KEY.INITIAL_DEVICE ); if (initialDevice) { - // Attach message listeners only for devices this.setState({ currentDevice: initialDevice }); window.addEventListener("message", this.handleMessage); } From 2d9459fccee9f0fa3168b303f3dba240ea6e3ada Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Thu, 19 Mar 2020 09:11:09 -0700 Subject: [PATCH 10/17] Remove inconsistency cpx microbit getting started --- src/view/pages/gettingStarted.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/view/pages/gettingStarted.tsx b/src/view/pages/gettingStarted.tsx index 2b9f90707..e11e75d66 100644 --- a/src/view/pages/gettingStarted.tsx +++ b/src/view/pages/gettingStarted.tsx @@ -44,14 +44,14 @@ export class GettingStartedPage extends React.Component { 
from microbit import *

- 2. Light up your micro:bit with love by showing a heart. + 2. 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. + feeling 

while True:
From 74f0d543a06bb70644709733942a91282b9d183f Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Thu, 19 Mar 2020 09:25:17 -0700 Subject: [PATCH 11/17] Add tests for getting started --- src/view/__snapshots__/App.spec.tsx.snap | 4711 +---------------- .../components/microbit/Microbit.spec.tsx | 29 + .../__snapshots__/Microbit.spec.tsx.snap | 2989 +++++++++++ .../gettingStarted.spec.tsx.snap | 187 + src/view/pages/gettingStarted.spec.tsx | 29 + src/view/pages/gettingStarted.tsx | 24 +- 6 files changed, 3249 insertions(+), 4720 deletions(-) create mode 100644 src/view/components/microbit/Microbit.spec.tsx create mode 100644 src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap create mode 100644 src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap create mode 100644 src/view/pages/gettingStarted.spec.tsx diff --git a/src/view/__snapshots__/App.spec.tsx.snap b/src/view/__snapshots__/App.spec.tsx.snap index ac3521338..6343459f1 100644 --- a/src/view/__snapshots__/App.spec.tsx.snap +++ b/src/view/__snapshots__/App.spec.tsx.snap @@ -6,4715 +6,6 @@ exports[`App component should render correctly 1`] = ` >
-
-
-
-
- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - -
-
-
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
-
-
+ /> `; diff --git a/src/view/components/microbit/Microbit.spec.tsx b/src/view/components/microbit/Microbit.spec.tsx new file mode 100644 index 000000000..e948a1988 --- /dev/null +++ b/src/view/components/microbit/Microbit.spec.tsx @@ -0,0 +1,29 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { IntlProvider } from "react-intl"; +import * as testRenderer from "react-test-renderer"; +import { Microbit } from "./Microbit"; + +describe("Microbit component ", () => { + it("should render correctly", () => { + const component = testRenderer + .create( + + + + ) + .toJSON(); + expect(component).toMatchSnapshot(); + }); + + it("should render without crashing", () => { + const div = document.createElement("div"); + ReactDOM.render( + + + , + div + ); + ReactDOM.unmountComponentAtNode(div); + }); +}); diff --git a/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap b/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap new file mode 100644 index 000000000..c9eeddfea --- /dev/null +++ b/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap @@ -0,0 +1,2989 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Microbit component should render correctly 1`] = ` +Array [ +
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + (0,0) + + + + + + (1,0) + + + + + + (2,0) + + + + + + (3,0) + + + + + + (4,0) + + + + + + (0,1) + + + + + + (1,1) + + + + + + (2,1) + + + + + + (3,1) + + + + + + (4,1) + + + + + + (0,2) + + + + + + (1,2) + + + + + + (2,2) + + + + + + (3,2) + + + + + + (4,2) + + + + + + (0,3) + + + + + + (1,3) + + + + + + (2,3) + + + + + + (3,3) + + + + + + (4,3) + + + + + + (0,4) + + + + + + (1,4) + + + + + + (2,4) + + + + + + (3,4) + + + + + + (4,4) + + + + + + + + + + + + P0, ANALOG IN + + + + + P1, ANALOG IN + + + + + P2, ANALOG IN + + + + + P3, ANALOG IN, LED Col 1 + + + + + P4, ANALOG IN, LED Col 2 + + + + + P5, BUTTON A + + + + + P6, LED Col 9 + + + + + P7, LED Col 8 + + + + + P8 + + + + + P9, LED Col 7 + + + + + P10, ANALOG IN, LED Col 3 + + + + + P11, BUTTON B + + + + + P12, RESERVED ACCESSIBILITY + + + + + P13, SPI - SCK + + + + + P14, SPI - MISO + + + + + P15, SPI - MOSI + + + + + P16, SPI - Chip Select + + + + + P17, +3v3 + + + + + P18, +3v3 + + + + + P19, I2C - SCL + + + + + P20, I2C - SDA + + + + + GND + + + + + GND + + + + + +3v3 + + + + + GND + + + + + + + + + + + + + + + + + + + + + + + A+B + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + +
+
, +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
, +] +`; diff --git a/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap b/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap new file mode 100644 index 000000000..e42bae7fa --- /dev/null +++ b/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap @@ -0,0 +1,187 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`GettingStartedPage component should render correctly 1`] = ` +Array [ +

+ Getting started +

, + , +
+

+ Tutorial for micro:bit +

+

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

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

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

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

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

+

+ + Microbit Tutorials + +

+

+ + Microbit official documentation + +

+
, +
+

+ Tutorial for CPX +

+

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

+
, +] +`; diff --git a/src/view/pages/gettingStarted.spec.tsx b/src/view/pages/gettingStarted.spec.tsx new file mode 100644 index 000000000..278d5ed4b --- /dev/null +++ b/src/view/pages/gettingStarted.spec.tsx @@ -0,0 +1,29 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { IntlProvider } from "react-intl"; +import * as testRenderer from "react-test-renderer"; +import { GettingStartedPage } from "./gettingStarted"; + +describe("GettingStartedPage component ", () => { + it("should render correctly", () => { + const component = testRenderer + .create( + + + + ) + .toJSON(); + expect(component).toMatchSnapshot(); + }); + + it("should render without crashing", () => { + const div = document.createElement("div"); + ReactDOM.render( + + + , + div + ); + ReactDOM.unmountComponentAtNode(div); + }); +}); diff --git a/src/view/pages/gettingStarted.tsx b/src/view/pages/gettingStarted.tsx index e11e75d66..b1561de0f 100644 --- a/src/view/pages/gettingStarted.tsx +++ b/src/view/pages/gettingStarted.tsx @@ -5,16 +5,20 @@ export class GettingStartedPage extends React.Component { private selectRef: React.RefObject = React.createRef(); componentDidMount() { - this.selectRef!.current!.addEventListener("change", (event: any) => { - const visibleElement = document.querySelector(".visibleElement"); - const target = document.getElementById(event!.target!.value); - if (visibleElement !== null) { - visibleElement.className = "inv"; - } - if (target !== null) { - target.className = "visibleElement"; - } - }); + if (this.selectRef.current) { + this.selectRef.current.addEventListener("change", (event: any) => { + const visibleElement = document.querySelector( + ".visibleElement" + ); + const target = document.getElementById(event!.target!.value); + if (visibleElement !== null) { + visibleElement.className = "inv"; + } + if (target !== null) { + target.className = "visibleElement"; + } + }); + } } render() { From 56c4afd1aef4ea36963f80e4fae7e88c1a0dc0ed Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Thu, 19 Mar 2020 11:55:03 -0700 Subject: [PATCH 12/17] Align left the getting started --- src/constants.ts | 1 - src/pages/gettingStarted.ts | 121 ------------------- src/view/pages/gettingStarted.css | 7 ++ src/view/pages/gettingStarted.tsx | 191 ++++++++++++++++-------------- 4 files changed, 107 insertions(+), 213 deletions(-) delete mode 100644 src/pages/gettingStarted.ts diff --git a/src/constants.ts b/src/constants.ts index be867c1ca..9f8b4afcb 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -20,7 +20,6 @@ export const CONFIG = { CONFIG_ENV_ON_SWITCH: "deviceSimulatorExpress.configNewEnvironmentUponSwitch", PYTHON_PATH: "python.pythonPath", - ENABLE_PREVIEW_MODE: "deviceSimulatorExpress.previewMode", SHOW_DEPENDENCY_INSTALL: "deviceSimulatorExpress.showDependencyInstall", SHOW_NEW_FILE_POPUP: "deviceSimulatorExpress.showNewFilePopup", }; diff --git a/src/pages/gettingStarted.ts b/src/pages/gettingStarted.ts deleted file mode 100644 index 199b691d1..000000000 --- a/src/pages/gettingStarted.ts +++ /dev/null @@ -1,121 +0,0 @@ -export const GETTING_STARTED_HTML = ` - - - - - - -

Getting started

- - - -
-

Tutorial for micro:bit

-

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

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

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

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

And much more! These links have more tutorials:

-

- Microbit Tutorials -

-

- Microbit official documentation -

-
-
-

Tutorial for CPX

-

1. Import the micro:bit library to use it! (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 -

-
- - - - `; diff --git a/src/view/pages/gettingStarted.css b/src/view/pages/gettingStarted.css index 84680d5d9..2482d6451 100644 --- a/src/view/pages/gettingStarted.css +++ b/src/view/pages/gettingStarted.css @@ -1,6 +1,7 @@ .inv { display: none; } + .deviceSelector { width: 250px; border: 1px solid #3d484c; @@ -10,6 +11,7 @@ font-size: 12px; padding-right: 30px; } + .codeBox { display: block; width: 90%; @@ -20,3 +22,8 @@ border: 1px solid grey; border-radius: 4px; } + +.container { + text-align: left; + padding: 0 10px 0 10px; +} diff --git a/src/view/pages/gettingStarted.tsx b/src/view/pages/gettingStarted.tsx index b1561de0f..deba3512a 100644 --- a/src/view/pages/gettingStarted.tsx +++ b/src/view/pages/gettingStarted.tsx @@ -24,99 +24,108 @@ export class GettingStartedPage extends React.Component { render() { return ( -

Getting started

+
+

Getting started

- + -
-

Tutorial for micro:bit

-

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

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

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

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

And much more! These links have more tutorials:

-

- - Microbit Tutorials - -

-

- - Microbit official documentation - -

-
-
-

Tutorial for CPX

-

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

+
+

Tutorial for micro:bit

+

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

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

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

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

+ {" "} + And much more! These links have more tutorials: +

+

+ + Microbit Tutorials + +

+

+ + Microbit official documentation + +

+
+
+

Tutorial for CPX

+

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

+
); From 3d9f2b242960d6fa7fd712d794494a5a045be5c3 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Thu, 19 Mar 2020 11:57:18 -0700 Subject: [PATCH 13/17] Format files --- src/service/webviewService.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/service/webviewService.ts b/src/service/webviewService.ts index 66e8e1bda..196803979 100644 --- a/src/service/webviewService.ts +++ b/src/service/webviewService.ts @@ -26,6 +26,7 @@ export class WebviewService { this.createTutorialPanel(); } } + public getWebviewContent(webviewType: string, hasDevice: boolean) { return ` @@ -56,6 +57,7 @@ export class WebviewService { `; } + private createTutorialPanel() { this.tutorialPanel = vscode.window.createWebviewPanel( CONSTANTS.WEBVIEW_TYPE.TUTORIAL, @@ -73,9 +75,11 @@ export class WebviewService { this.disposeTutorialPanel(); }); } + private disposeTutorialPanel() { this.tutorialPanel = undefined; } + private loadScript( context: vscode.ExtensionContext, attributeValue: string, From f028216c4f7989258d3e8f8f89b21b936cdb1c10 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Thu, 19 Mar 2020 12:00:27 -0700 Subject: [PATCH 14/17] Update ui tests --- .../gettingStarted.spec.tsx.snap | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap b/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap index e42bae7fa..57656112d 100644 --- a/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap +++ b/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap @@ -1,10 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`GettingStartedPage component should render correctly 1`] = ` -Array [ +

Getting started -

, + , +

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

-
, +
, -] +
+ `; From ac940ff46b3fcbefa94bcb302757262a15577dd0 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Thu, 19 Mar 2020 12:04:18 -0700 Subject: [PATCH 15/17] Remove deleted ressources import --- src/service/webviewService.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/service/webviewService.ts b/src/service/webviewService.ts index 196803979..a47a4c62a 100644 --- a/src/service/webviewService.ts +++ b/src/service/webviewService.ts @@ -1,7 +1,6 @@ import * as path from "path"; import * as vscode from "vscode"; import CONSTANTS from "../constants"; -import { GETTING_STARTED_HTML } from "../pages/gettingStarted"; import { WEBVIEW_ATTRIBUTES_KEY, WEBVIEW_TYPES } from "../view/constants"; import { DeviceSelectionService } from "./deviceSelectionService"; From 602ec9bdbe1b3ce123ff872f1febdc6233c62b2d Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Thu, 19 Mar 2020 13:11:22 -0700 Subject: [PATCH 16/17] update tests --- .../__snapshots__/Microbit.spec.tsx.snap | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap b/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap index c9eeddfea..7efb97e8e 100644 --- a/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap +++ b/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap @@ -8,21 +8,7 @@ Array [
-
- -
+ The simulator will run the .py file you have focused on.
Date: Thu, 19 Mar 2020 15:59:50 -0700 Subject: [PATCH 17/17] Feedback for additional copy instruction --- .../__snapshots__/gettingStarted.spec.tsx.snap | 5 +++-- src/view/pages/gettingStarted.css | 1 + src/view/pages/gettingStarted.tsx | 15 ++++++--------- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap b/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap index 57656112d..4bec5eeff 100644 --- a/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap +++ b/src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap @@ -28,6 +28,9 @@ exports[`GettingStartedPage component should render correctly 1`] = ` CPX +

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