Merge pull request #3 from microsoft/users/t-chcido/ext_communication

Communication from the extension to the Webview

package.json

@@ -10,14 +10,14 @@
     "Other"
   ],
   "activationEvents": [
-    "onCommand:adafruit.helloSimulator",
-    "onCommand:adafruit.runEmulator"
+    "onCommand:adafruit.openSimulator",
+    "onCommand:adafruit.runSimulator"
   ],
   "main": "./out/extension.js",
   "contributes": {
     "commands": [
       {
-        "command": "adafruit.helloSimulator",
+        "command": "adafruit.openSimulator",
         "title": "Open Simulator",
         "category": "Adafruit"
       },

src/extension.ts

@@ -1,5 +1,4 @@
-// The module 'vscode' contains the VS Code extensibility API
-// Import the module and reference it with the alias vscode in your code below
+
 import * as vscode from "vscode";
 import * as path from "path";
 import * as cp from "child_process";
@@ -10,38 +9,29 @@ function loadScript(context: vscode.ExtensionContext, path: string) {
     .toString()}"></script>`;
 }
 
-// this method is called when your extension is activated
-// your extension is activated the very first time the command is executed
+// Extension activation
 export function activate(context: vscode.ExtensionContext) {
-  // Use the console to output diagnostic information (console.log) and errors (console.error)
-  // This line of code will only be executed once when your extension is activated
-  console.log(
-    'Congratulations, your extension "embedded-python" is now active!'
-  );
 
-  // Only allow a webview
+  console.log('Congratulations, your extension Adafruit_Simulator is now active!');
+
   let currentPanel: vscode.WebviewPanel | undefined = undefined;
 
-  // The command has been defined in the package.json file
-  // Now provide the implementation of the command with registerCommand
-  // The commandId parameter must match the command field in package.json
-  let openSimulator = vscode.commands.registerCommand(
-    "adafruit.helloSimulator",
-    () => {
+  // Open Simulator on the webview
+  let openSimulator = vscode.commands.registerCommand("adafruit.openSimulator", () => {
       if (currentPanel) {
         currentPanel.reveal(vscode.ViewColumn.One);
       } else {
         currentPanel = vscode.window.createWebviewPanel(
-          "adafruitSimulator", // Identifies the type of the webview. Used internally
-          "Adafruit CPX", // Title of the panel displayed to the user
-          vscode.ViewColumn.Two, // Editor column to show the new webview panel in.
+          "adafruitSimulator",
+          "Adafruit CPX",
+          vscode.ViewColumn.Two,
           {
             // Only allow the webview to access resources in our extension's media directory
             localResourceRoots: [
               vscode.Uri.file(path.join(context.extensionPath, "out"))
             ],
             enableScripts: true
-          } // Webview options. More on these later.
+          }
         );
 
         currentPanel.webview.html = getWebviewContent(context);
@@ -58,17 +48,14 @@ export function activate(context: vscode.ExtensionContext) {
   );
 
   // Send message to the webview
-  let runEmulator = vscode.commands.registerCommand(
-    "adafruit.runSimulator",
-    () => {
+  let runSimulator = vscode.commands.registerCommand("adafruit.runSimulator", () => {
       if (!currentPanel) {
         return;
       }
-      /************************ */
 
       // Get the Python script path (And the special URI to use with the webview)
       const onDiskPath = vscode.Uri.file(
-        path.join(context.extensionPath, "src/scripts", "control.py")
+        path.join(context.extensionPath, "src/scripts", "code.py")
       );
       const scriptPath = onDiskPath.with({ scheme: "vscode-resource" });
 
@@ -102,7 +89,6 @@ export function activate(context: vscode.ExtensionContext) {
       childProcess.stdin.write(JSON.stringify(dataForTheProcess));
       childProcess.stdin.end();
 
-      ///////
       // Handle messages from webview
       currentPanel.webview.onDidReceiveMessage(
         message => {
@@ -118,11 +104,10 @@ export function activate(context: vscode.ExtensionContext) {
         undefined,
         context.subscriptions
       );
-      /************************ */
     }
   );
 
-  context.subscriptions.push(openSimulator, runEmulator);
+  context.subscriptions.push(openSimulator, runSimulator);
 }
 
 function getWebviewContent(context: vscode.ExtensionContext) {

src/scripts/code.py

@@ -0,0 +1,4 @@
+from express import cpx
+
+cpx.pixels[0] = (255, 0, 0)
+cpx.pixels.show()

src/scripts/control.py

@@ -15,7 +15,6 @@ def main():
     # lines = read_in()
 
     openCmd = {
-        "cpx": {
             'pixels': [
                 (0, 0, 255),
                 (0, 0, 0),
@@ -30,7 +29,6 @@ def main():
             ],
             'button_a': False,
             'button_b': False,
-        }
     }
     print(json.dumps(openCmd))
 

src/scripts/pixel.py

@@ -1,10 +1,12 @@
+import json
+
 class Pixel:
     def __init__(self, state):
         self._state = state
 
     def show(self):
         # Send the state to the extension so that React re-renders the Webview
-        print(self._state)
+        print(json.dumps(self._state))
     
     def __setitem__(self, index, val):
         self._state['pixels'][index] = val

src/view/components/Simulator.tsx

@@ -46,7 +46,7 @@ class Simulator extends React.Component<any, IState> {
   handleMessage = (event: any): void => {
     const message = event.data; // The JSON data our extension sent
     console.log("change state");
-    this.setState(message.cpx);
+    this.setState(message);
   };
 
   componentDidMount() {