Merge branch 'users/t-xunguy/debugger-webview' into users/t-anmah/deb…

…ugger
microsoft · Feb 13, 2020 · cb0db0c · cb0db0c
2 parents 8eae513 + f657255
commit cb0db0c
Show file tree

Hide file tree

Showing 13 changed files with 173 additions and 63 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -40,6 +40,7 @@ const pythonToMove = [
   "./src/*.py",
   "./src/common/*.py",
   "./src/requirements.txt",
+  "./src/templates/*.*"
 ];
 
 gulp.task("python-compile", () => {

diff --git a/package.json b/package.json
@@ -32,7 +32,8 @@
         "onCommand:deviceSimulatorExpress.openSerialMonitor",
         "onCommand:deviceSimulatorExpress.openSimulator",
         "onCommand:deviceSimulatorExpress.runSimulator",
-        "onCommand:deviceSimulatorExpress.newFile",
+        "onCommand:deviceSimulatorExpress.newFileCPX",
+        "onCommand:deviceSimulatorExpress.newFileMicrobit",
         "onCommand:deviceSimulatorExpress.runDevice",
         "onCommand:deviceSimulatorExpress.runSimulatorEditorButton",
         "onCommand:deviceSimulatorExpress.selectSerialPort",
@@ -85,8 +86,13 @@
                 }
             },
             {
-                "command": "deviceSimulatorExpress.newFile",
-                "title": "%deviceSimulatorExpressExtension.commands.newFile%",
+                "command": "deviceSimulatorExpress.newFileCPX",
+                "title": "%deviceSimulatorExpressExtension.commands.newFileCPX%",
+                "category": "%deviceSimulatorExpressExtension.commands.label%"
+            },
+            {
+                "command": "deviceSimulatorExpress.newFileMicrobit",
+                "title": "%deviceSimulatorExpressExtension.commands.newFileMicrobit%",
                 "category": "%deviceSimulatorExpressExtension.commands.label%"
             },
             {

diff --git a/package.nls.json b/package.nls.json
@@ -6,6 +6,8 @@
   "deviceSimulatorExpressExtension.commands.openSerialMonitor": "Open Serial Monitor",
   "deviceSimulatorExpressExtension.commands.openSimulator": "Open Simulator",
   "deviceSimulatorExpressExtension.commands.runSimulator": "Run Simulator",
+  "deviceSimulatorExpressExtension.commands.newFileCPX": "New Circuit Playground Express File",
+  "deviceSimulatorExpressExtension.commands.newFileMicrobit": "New micro:bit File",
   "deviceSimulatorExpressExtension.commands.newFile": "New File",
   "deviceSimulatorExpressExtension.commands.runDevice": "Deploy to Device",
   "deviceSimulatorExpressExtension.commands.selectSerialPort": "Select Serial Port",
@@ -14,4 +16,4 @@
   "deviceSimulatorExpressExtension.configuration.properties.device": "Whether to show 'Run Device' icon in editor title menu.",
   "deviceSimulatorExpressExtension.configuration.properties.simulator": "Whether to show 'Run Simulator' icon in editor title menu.",
   "deviceSimulatorExpressExtension.configuration.properties.debuggerPort": "The port the Server will listen on for communication with the debugger."
-}
+}
diff --git a/src/constants.ts b/src/constants.ts
@@ -22,16 +22,16 @@ export const CONFIG = {
 };
 
 export const CONSTANTS = {
-    DEVICE_NAME: {
-        CPX: "CPX",
-        MICROBIT: "micro:bit",
-    },
     DEBUG_CONFIGURATION_TYPE: "deviceSimulatorExpress",
     DEPENDENCY_CHECKER: {
         PIP3: "pip3",
         PYTHON: "python",
         PYTHON3: "python3.7",
     },
+    DEVICE_NAME: {
+        CPX: "CPX",
+        MICROBIT: "micro:bit",
+    },
     ERROR: {
         COMPORT_UNKNOWN_ERROR:
             "Writing to COM port (GetOverlappedResult): Unknown error code 121",
@@ -237,6 +237,10 @@ export const CONSTANTS = {
         ),
     },
     NAME: localize("name", "Device Simulator Express"),
+    TEMPLATE: {
+        CPX: "cpx_template.py",
+        MICROBIT: "microbit_template.py",
+    },
     WARNING: {
         ACCEPT_AND_RUN: localize(
             "warning.agreeAndRun",
@@ -280,7 +284,8 @@ export enum TelemetryEventName {
 
     // Extension commands
     COMMAND_DEPLOY_DEVICE = "COMMAND.DEPLOY.DEVICE",
-    COMMAND_NEW_FILE = "COMMAND.NEW.FILE",
+    COMMAND_NEW_FILE_CPX = "COMMAND.NEW.FILE.CPX",
+    COMMAND_NEW_FILE_MICROBIT = "COMMAND.NEW.FILE.MICROBIT",
     COMMAND_OPEN_SIMULATOR = "COMMAND.OPEN.SIMULATOR",
     COMMAND_RUN_SIMULATOR_BUTTON = "COMMAND.RUN.SIMULATOR_BUTTON",
     COMMAND_RUN_PALETTE = "COMMAND.RUN.PALETTE",

diff --git a/src/debuggerCommunicationServer.ts b/src/debuggerCommunicationServer.ts
@@ -11,10 +11,12 @@ export class DebuggerCommunicationServer {
     private serverHttp: http.Server;
     private serverIo: socketio.Server;
     private simulatorWebview: WebviewPanel | undefined;
+    private currentActiveDevice;
 
     constructor(
         webviewPanel: WebviewPanel | undefined,
-        port = SERVER_INFO.DEFAULT_SERVER_PORT
+        port = SERVER_INFO.DEFAULT_SERVER_PORT,
+        currentActiveDevice:string
     ) {
         this.port = port;
         this.serverHttp = new http.Server();
@@ -24,6 +26,8 @@ export class DebuggerCommunicationServer {
         this.simulatorWebview = webviewPanel;
         this.initEventsHandlers();
         console.info(`Server running on port ${this.port}`);
+
+        this.currentActiveDevice=currentActiveDevice
     }
 
     public closeConnection(): void {
@@ -36,16 +40,9 @@ export class DebuggerCommunicationServer {
         this.simulatorWebview = webviewPanel;
     }
 
-    // Emit Buttons Inputs Events
-    public emitButtonPress(newState: string): void {
-        console.log(`Emit Button Press: ${newState} \n`);
-        this.serverIo.emit("button_press", newState);
-    }
 
-    // Emit Sensors Inputs Events
-    public emitSensorChanged(newState: string): void {
-        console.log(`Emit Sensor Changed: ${newState} \n`);
-        this.serverIo.emit("sensor_changed", newState);
+    public emitInputChanged(newState:string):void{
+        this.serverIo.emit("input_changed",newState)
     }
 
     private initHttpServer(): void {
@@ -76,11 +73,14 @@ export class DebuggerCommunicationServer {
 
     private handleState(data: any): void {
         try {
+            console.log("handleState")
             const messageToWebview = JSON.parse(data);
+            console.log(messageToWebview)
             if (messageToWebview.type === "state") {
                 console.log(`State recieved: ${messageToWebview.data}`);
                 if (this.simulatorWebview) {
                     this.simulatorWebview.webview.postMessage({
+                        active_device:this.currentActiveDevice,
                         command: "set-state",
                         state: JSON.parse(messageToWebview.data),
                     });

diff --git a/src/extension.ts b/src/extension.ts
@@ -22,7 +22,7 @@ import { SerialMonitor } from "./serialMonitor";
 import { SimulatorDebugConfigurationProvider } from "./simulatorDebugConfigurationProvider";
 import TelemetryAI from "./telemetry/telemetryAI";
 import { UsbDetector } from "./usbDetector";
-import { WEBVIEW_MESSAGES } from "./view/constants";
+import { VSCODE_MESSAGES_TO_WEBVIEW, WEBVIEW_MESSAGES } from "./view/constants";
 
 let currentFileAbsPath: string = "";
 let currentTextDocument: vscode.TextDocument;
@@ -41,7 +41,7 @@ let currentActiveDevice: string = DEFAULT_DEVICE;
 export let outChannel: vscode.OutputChannel | undefined;
 
 function loadScript(context: vscode.ExtensionContext, scriptPath: string) {
-    return `<script src="${vscode.Uri.file(context.asAbsolutePath(scriptPath))
+    return `<script initialDevice=${currentActiveDevice} src="${vscode.Uri.file(context.asAbsolutePath(scriptPath))
         .with({ scheme: "vscode-resource" })
         .toString()}"></script>`;
 }
@@ -63,6 +63,15 @@ const setPathAndSendMessage = (
     }
 };
 
+const sendCurrentDeviceMessage = (currentPanel: vscode.WebviewPanel) => {
+    if (currentPanel) {
+        currentPanel.webview.postMessage({
+            command: VSCODE_MESSAGES_TO_WEBVIEW.SET_DEVICE,
+            active_device: currentActiveDevice,
+        });
+    }
+};
+
 // Extension activation
 export async function activate(context: vscode.ExtensionContext) {
     console.info(CONSTANTS.INFO.EXTENSION_ACTIVATED);
@@ -129,6 +138,7 @@ export async function activate(context: vscode.ExtensionContext) {
                     enableScripts: true,
                 }
             );
+
 
             currentPanel.webview.html = getWebviewContent(context);
 
@@ -167,7 +177,7 @@ export async function activate(context: vscode.ExtensionContext) {
                                     inDebugMode &&
                                     debuggerCommunicationHandler
                                 ) {
-                                    debuggerCommunicationHandler.emitButtonPress(
+                                    debuggerCommunicationHandler.emitInputChanged(
                                         messageJson
                                     );
                                 } else if (childProcess) {
@@ -214,7 +224,7 @@ export async function activate(context: vscode.ExtensionContext) {
                                     inDebugMode &&
                                     debuggerCommunicationHandler
                                 ) {
-                                    debuggerCommunicationHandler.emitSensorChanged(
+                                    debuggerCommunicationHandler.emitInputChanged(
                                         messageJson
                                     );
                                 } else if (childProcess) {
@@ -270,6 +280,7 @@ export async function activate(context: vscode.ExtensionContext) {
                 context.subscriptions
             );
         }
+        sendCurrentDeviceMessage(currentPanel);
     };
 
     // Open Simulator on the webview
@@ -286,15 +297,26 @@ export async function activate(context: vscode.ExtensionContext) {
         }
     );
 
-    const openTemplateFile = () => {
-        const fileName = "template.py";
-        const filePath = __dirname + path.sep + fileName;
+    const openCPXTemplateFile = () => {
+        switchDevice(CONSTANTS.DEVICE_NAME.CPX);
+        openTemplateFile(CONSTANTS.TEMPLATE.CPX);
+    };
+
+    const openMicrobitTemplateFile = () => {
+        switchDevice(CONSTANTS.DEVICE_NAME.MICROBIT);
+        openTemplateFile(CONSTANTS.TEMPLATE.MICROBIT);
+    };
+
+    const openTemplateFile = (template: string) => {
+        const fileName = template;
+        const filePath =
+            __dirname + path.sep + "templates" + path.sep + fileName;
         const file = fs.readFileSync(filePath, "utf8");
         const showNewFilePopup: boolean = vscode.workspace
             .getConfiguration()
             .get(CONFIG.SHOW_NEW_FILE_POPUP);
 
-        if (showNewFilePopup) {
+        if (showNewFilePopup && template === CONSTANTS.TEMPLATE.CPX) {
             vscode.window
                 .showInformationMessage(
                     CONSTANTS.INFO.NEW_FILE,
@@ -344,12 +366,27 @@ export async function activate(context: vscode.ExtensionContext) {
             };
     };
 
-    const newFile: vscode.Disposable = vscode.commands.registerCommand(
-        "deviceSimulatorExpress.newFile",
+    const newFileCPX: vscode.Disposable = vscode.commands.registerCommand(
+        "deviceSimulatorExpress.newFileCPX",
         () => {
-            telemetryAI.trackFeatureUsage(TelemetryEventName.COMMAND_NEW_FILE);
+            telemetryAI.trackFeatureUsage(
+                TelemetryEventName.COMMAND_NEW_FILE_CPX
+            );
+            telemetryAI.runWithLatencyMeasure(
+                openCPXTemplateFile,
+                TelemetryEventName.PERFORMANCE_NEW_FILE
+            );
+        }
+    );
+
+    const newFileMicrobit: vscode.Disposable = vscode.commands.registerCommand(
+        "deviceSimulatorExpress.newFileMicrobit",
+        () => {
+            telemetryAI.trackFeatureUsage(
+                TelemetryEventName.COMMAND_NEW_FILE_MICROBIT
+            );
             telemetryAI.runWithLatencyMeasure(
-                openTemplateFile,
+                openMicrobitTemplateFile,
                 TelemetryEventName.PERFORMANCE_NEW_FILE
             );
         }
@@ -389,6 +426,7 @@ export async function activate(context: vscode.ExtensionContext) {
     const runSimulatorCommand = async () => {
         // Prevent running new code if a debug session is active
         if (inDebugMode) {
+            console.log("debug mode not running simulator command")
             vscode.window.showErrorMessage(
                 CONSTANTS.ERROR.DEBUGGING_SESSION_IN_PROGESS
             );
@@ -507,6 +545,7 @@ export async function activate(context: vscode.ExtensionContext) {
             childProcess.stdout.on("data", data => {
                 dataFromTheProcess = data.toString();
                 if (currentPanel) {
+                    console.log("receiving message")
                     // Process the data from the process and send one state at a time
                     dataFromTheProcess.split("\0").forEach(message => {
                         if (
@@ -879,7 +918,8 @@ export async function activate(context: vscode.ExtensionContext) {
 
                 debuggerCommunicationHandler = new DebuggerCommunicationServer(
                     currentPanel,
-                    utils.getServerPortConfig()
+                    utils.getServerPortConfig(),
+                    currentActiveDevice
                 );
                 openWebview();
                 if (currentPanel) {
@@ -929,7 +969,8 @@ export async function activate(context: vscode.ExtensionContext) {
         installDependencies,
         openSerialMonitor,
         openSimulator,
-        newFile,
+        newFileCPX,
+        newFileMicrobit,
         runSimulator,
         runSimulatorEditorButton,
         runDevice,
@@ -1100,9 +1141,10 @@ function getWebviewContent(context: vscode.ExtensionContext) {
             </head>
           <body>
             <div id="root"></div>
-            <script>
+            <script >
               const vscode = acquireVsCodeApi();
             </script>
+            <script ></script>
             ${loadScript(context, "out/vendor.js")}
             ${loadScript(context, "out/simulator.js")}
           </body>

diff --git a/src/template.py → src/templates/cpx_template.py b/src/template.py → src/templates/cpx_template.py
@@ -1,15 +1,16 @@
-"""Save your file as "code.py" or "main.py" to run on the actual device.
-
-Getting started with CPX and CircuitPython intro on:
-https://learn.adafruit.com/circuitpython-made-easy-on-circuit-playground-express/circuit-playground-express-library
-
-Find example code for CPX on:
-https://github.com/adafruit/Adafruit_CircuitPython_CircuitPlayground/tree/master/examples
-"""
-
-# import CPX library
-from adafruit_circuitplayground import cp
-
-while True:
-    # start your code here
-    pass
+"""
+Save your file as "code.py" or "main.py" to run on the actual device.
+
+Getting started with CPX and CircuitPython intro on:
+https://learn.adafruit.com/circuitpython-made-easy-on-circuit-playground-express/circuit-playground-express-library
+
+Find example code for CPX on:
+https://github.com/adafruit/Adafruit_CircuitPython_CircuitPlayground/tree/master/examples
+"""
+
+# import CPX library
+from adafruit_circuitplayground import cp
+
+while True:
+    # start your code here
+    pass
diff --git a/src/templates/microbit_template.py b/src/templates/microbit_template.py
@@ -0,0 +1,9 @@
+"""
+Get started with micro:bit and MicroPython on:
+https://microbit-micropython.readthedocs.io/en/latest/.
+"""
+
+from microbit import *
+
+while True:
+    display.scroll("Hello World!")