Serial Plotter

README.md

@@ -53,6 +53,7 @@ This extension provides several commands in the Command Palette (<kbd>F1</kbd> o
 - **Arduino: Initialize**: Scaffold a VS Code project with an Arduino sketch.
 - **Arduino: Library Manager**: Explore and manage libraries.
 - **Arduino: Open Serial Monitor**: Open the serial monitor in the integrated output window.
+- **Arduino: Open Serial Plotter**: Open the serial plotter.
 - **Arduino: Select Serial Port**: Change the current serial port.
 - **Arduino: Send Text to Serial Port**: Send a line of text via the current serial port.
 - **Arduino: Upload**: Build sketch and upload to Arduino board.
@@ -97,7 +98,8 @@ The following Visual Studio Code settings are available for the Arduino extensio
         "https://raw.githubusercontent.com/VSChina/azureiotdevkit_tools/master/package_azureboard_index.json",
         "http://arduino.esp8266.com/stable/package_esp8266com_index.json"
     ],
-    "arduino.defaultBaudRate": 115200
+    "arduino.defaultBaudRate": 115200,
+    "arduino.plotterRegex": "^PLOT\\[(\\d+)\\]\\[(.+?)=(.+?)\\]$",
 }
 ```
 *Note:* You only need to set `arduino.path` in Visual Studio Code settings, other options are not required.
@@ -203,6 +205,45 @@ Steps to start debugging:
 
 > To learn more about how to debug Arduino code, visit our [team blog](https://blogs.msdn.microsoft.com/iotdev/2017/05/27/debug-your-arduino-code-with-visual-studio-code/).
 
+## Using Serial Plotter
+
+You can start Serial Plotter by calling `Arduino: Open Serial Plotter` from Command Pallete. 
+
+By default, it looks for lines of the following format in the serial input: `PLOT[time][variable=value]`
+
+For example, `PLOT[1234][cos=0.5]` means that we have variable named `cos` with it's value `0.5` at the time `1234`.
+
+You can use snippet below to print variables in such format.
+
+```c
+void plot(String name, float value)
+{
+  String time = String(millis());
+  Serial.println("PLOT[" + time + "][" + name + "=" + value + "]");
+}
+```
+
+### Throttling (refresh rate)
+
+This Plotter is not working in real time. It's built on top of web technologies
+with [dygraphs](http://dygraphs.com/) library to create interactive chart, so it's pretty fast but not instant.
+
+Plotter accumulates data and flushes it to the chart with some periodicity that we will call `throttling` or `refresh rate`. By default it's 100ms, but you can change it as you want. This value was chosen empirically, lower values ​​can lead to noticable lags.
+
+### Time window
+
+Data is recorded for a specified period of time called `Time window`. By default it's 20 seconds and you can also change it in the way you need. The greater the value, the more resources are required to render chart, and the more lags we have.
+
+### Override log format
+
+You can override default regex to specify your own format, but the order will be remain the same: time, variable name, variable value.
+
+```json
+{
+    "arduino.plotterRegex": "^(\\d+):(.+?)=(.+?)$"
+}
+```
+
 ## Change Log
 See the [Change log](https://github.com/Microsoft/vscode-arduino/blob/master/CHANGELOG.md) for details about the changes in each version.
 

package.json

@@ -53,6 +53,7 @@
     "onCommand:arduino.showLibraryManager",
     "onCommand:arduino.showExamples",
     "onCommand:arduino.initialize",
+    "onCommand:arduino.openSerialPlotter",
     "onDebug"
   ],
   "main": "./out/src/extension",
@@ -159,6 +160,10 @@
       {
         "command": "arduino.showExamples",
         "title": "Arduino: Examples"
+      },
+      {
+        "command": "arduino.openSerialPlotter",
+        "title": "Arduino: Open Serial Plotter"
       }
     ],
     "menus": {
@@ -527,6 +532,10 @@
           "type": "number",
           "default": 115200
         },
+        "arduino.plotterRegex": {
+          "type": "string",
+          "default": "^PLOT\\[(\\d+)\\]\\[(.+?)=(.+?)\\]$"
+        },
         "arduino.disableIntelliSenseAutoGen": {
           "type": "boolean",
           "default": false,
@@ -631,6 +640,7 @@
     "extract-zip": "^2.0.1",
     "glob": "^7.1.1",
     "iconv-lite": "^0.4.18",
+    "lodash.throttle": "^4.1.1",
     "impor": "^0.1.1",
     "node-usb-native": "^0.0.20",
     "properties": "^1.2.1",

src/arduino/arduinoContentProvider.ts

@@ -7,9 +7,11 @@ import * as vscode from "vscode";
 import ArduinoActivator from "../arduinoActivator";
 import ArduinoContext from "../arduinoContext";
 import * as Constants from "../common/constants";
+import { SERIAL_PLOTTER_URI } from "../common/constants";
 import * as JSONHelper from "../common/cycle";
 import { DeviceContext } from "../deviceContext";
 import * as Logger from "../logger/logger";
+import { SerialMonitor } from "../serialmonitor/serialMonitor";
 import LocalWebServer from "./localWebServer";
 
 export class ArduinoContentProvider implements vscode.TextDocumentContentProvider {
@@ -47,7 +49,12 @@ export class ArduinoContentProvider implements vscode.TextDocumentContentProvide
         this.addHandlerWithLogger("load-examples", "/api/examples", async (req, res) => await this.getExamples(req, res));
         this.addHandlerWithLogger("open-example", "/api/openexample", (req, res) => this.openExample(req, res), true);
 
+        // Arduino Serial Plotter
+        this.addHandlerWithLogger("show-serialplotter", "/serialplotter", (req, res) => this.getHtmlView(req, res));
+        this.addHandlerWithLogger("updateplotrate", "/api/updateplotrate", (req, res) => this.updatePlotRefreshRate(req, res), true);
+
         await this._webserver.start();
+
     }
 
     public async provideTextDocumentContent(uri: vscode.Uri): Promise<string> {
@@ -63,6 +70,8 @@ export class ArduinoContentProvider implements vscode.TextDocumentContentProvide
             type = "boardConfig";
         } else if (uri.toString() === Constants.EXAMPLES_URI.toString()) {
             type = "examples";
+        } else if (uri.toString() === Constants.SERIAL_PLOTTER_URI.toString()) {
+            type = "serialplotter";
         }
 
         const timeNow = new Date().getTime();
@@ -81,7 +90,17 @@ export class ArduinoContentProvider implements vscode.TextDocumentContentProvide
                             "theme=" + encodeURIComponent(theme.trim()) +
                             "&backgroundcolor=" + encodeURIComponent(backgroundcolor.trim()) +
                             "&color=" + encodeURIComponent(color.trim());
-                    document.getElementById('frame').src = url;
+
+                    var iframe = document.getElementById('frame');
+
+                    iframe.onload = function() {
+                        window.addEventListener('message', msg => {
+                            var data = msg.data;
+                            iframe.contentWindow.postMessage(data, url);
+                        })
+                    }
+
+                    iframe.src = url;
                 };
             </script>
         </head>
@@ -291,6 +310,24 @@ export class ArduinoContentProvider implements vscode.TextDocumentContentProvide
         }
     }
 
+    public updatePlotRefreshRate(req, res) {
+        if (!req.body.rate) {
+            return res.status(400).send("BAD Request! Missing parameters!");
+        } else {
+            try {
+                const serialMonitor = SerialMonitor.getInstance();
+
+                serialMonitor.serialPlotter.setThrottling(req.body.rate);
+
+                return res.json({
+                    status: "OK",
+                });
+            } catch (error) {
+                return res.status(500).send(`Update plot refresh rate failed with message "code:${error.code}, err:${error.stderr}"`);
+            }
+        }
+    }
+
     private addHandlerWithLogger(handlerName: string, url: string, handler: (req, res) => void, post: boolean = false): void {
         const wrappedHandler = async (req, res) => {
             const guid = Uuid().replace(/-/g, "");

src/arduino/vscodeSettings.ts

@@ -16,8 +16,10 @@ const configKeys = {
     IGNORE_BOARDS: "arduino.ignoreBoards",
     SKIP_HEADER_PROVIDER: "arduino.skipHeaderProvider",
     DEFAULT_BAUD_RATE: "arduino.defaultBaudRate",
+    PLOTTER_REGEX: "arduino.plotterRegex",
     USE_ARDUINO_CLI: "arduino.useArduinoCli",
     DISABLE_INTELLISENSE_AUTO_GEN: "arduino.disableIntelliSenseAutoGen",
+
 };
 
 export interface IVscodeSettings {
@@ -32,6 +34,7 @@ export interface IVscodeSettings {
     ignoreBoards: string[];
     skipHeaderProvider: boolean;
     defaultBaudRate: number;
+    plotterRegex: string;
     useArduinoCli: boolean;
     disableIntelliSenseAutoGen: boolean;
     updateAdditionalUrls(urls: string | string[]): void;
@@ -101,8 +104,13 @@ export class VscodeSettings implements IVscodeSettings {
         return this.getConfigValue<boolean>(configKeys.SKIP_HEADER_PROVIDER);
     }
 
+    public get plotterRegex(): string {
+        return this.getConfigValue<string>(configKeys.PLOTTER_REGEX);
+    }
+
     public get disableIntelliSenseAutoGen(): boolean {
         return this.getConfigValue<boolean>(configKeys.DISABLE_INTELLISENSE_AUTO_GEN);
+
     }
 
     public async updateAdditionalUrls(value) {

src/common/constants.ts

@@ -25,6 +25,7 @@ export const BOARD_MANAGER_URI = vscode.Uri.parse("arduino-manager://arduino/ard
 export const LIBRARY_MANAGER_URI = vscode.Uri.parse("arduino-manager://arduino/arduino-librariesmanager");
 export const BOARD_CONFIG_URI = vscode.Uri.parse("arduino-manager://arduino/arduino-config");
 export const EXAMPLES_URI = vscode.Uri.parse("arduino-manager://arduino/arduino-examples");
+export const SERIAL_PLOTTER_URI = vscode.Uri.parse("arduino-manager://arduino/arduino-serialplotter");
 
 export const messages = {
     ARDUINO_FILE_ERROR: "The arduino.json file format is not correct.",
@@ -43,6 +44,7 @@ export const statusBarPriority = {
     PORT: 20,
     OPEN_PORT: 30,
     BAUD_RATE: 40,
+    OPEN_SERIAL_PLOTTER: 50,
     BOARD: 60,
     ENDING: 70,
     SKETCH: 80,

src/extension.ts

@@ -16,7 +16,7 @@ const arduinoActivatorModule = impor("./arduinoActivator") as typeof import ("./
 const arduinoContextModule = impor("./arduinoContext") as typeof import ("./arduinoContext");
 import {
     ARDUINO_CONFIG_FILE, ARDUINO_MANAGER_PROTOCOL, ARDUINO_MODE, BOARD_CONFIG_URI, BOARD_MANAGER_URI, EXAMPLES_URI,
-    LIBRARY_MANAGER_URI,
+    LIBRARY_MANAGER_URI, SERIAL_PLOTTER_URI,
 } from "./common/constants";
 import { validateArduinoPath } from "./common/platform";
 import * as util from "./common/util";
@@ -29,8 +29,11 @@ const nsatModule =
     impor("./nsat") as typeof import ("./nsat");
 import { BuildMode } from "./arduino/arduino";
 import { SerialMonitor } from "./serialmonitor/serialMonitor";
+import { SerialPlotterPanel } from "./serialmonitor/serialPlotterPanel";
 const usbDetectorModule = impor("./serialmonitor/usbDetector") as typeof import ("./serialmonitor/usbDetector");
 
+const status: any = {};
+
 export async function activate(context: vscode.ExtensionContext) {
     Logger.configure(context);
     const activeGuid = uuidModule().replace(/-/g, "");
@@ -129,7 +132,6 @@ export async function activate(context: vscode.ExtensionContext) {
                 arduinoContextModule.default.boardManager.currentBoard.name,
         };
     });
-
     registerArduinoCommand("arduino.upload", async () => {
         if (!arduinoContextModule.default.arduinoApp.building) {
             await vscode.window.withProgress({
@@ -281,8 +283,10 @@ export async function activate(context: vscode.ExtensionContext) {
     // serial monitor commands
     const serialMonitor = SerialMonitor.getInstance();
     context.subscriptions.push(serialMonitor);
+
     registerNonArduinoCommand("arduino.selectSerialPort", () => serialMonitor.selectSerialPort(null, null));
     registerNonArduinoCommand("arduino.openSerialMonitor", () => serialMonitor.openSerialMonitor());
+    registerNonArduinoCommand("arduino.openSerialPlotter", () => serialMonitor.openSerialPlotter());
     registerNonArduinoCommand("arduino.changeBaudRate", () => serialMonitor.changeBaudRate());
     registerNonArduinoCommand("arduino.sendMessageToSerialPort", () => serialMonitor.sendMessageToSerialPort());
     registerNonArduinoCommand("arduino.closeSerialMonitor", (port, showWarning = true) => serialMonitor.closeSerialMonitor(port, showWarning));
@@ -406,6 +410,12 @@ export async function activate(context: vscode.ExtensionContext) {
                     arduinoContextModule.default.boardManager.currentBoard.name,
             };
         });
+        registerArduinoCommand("arduino.showSerialPlotter", async () => {
+            const html = await arduinoManagerProvider.provideTextDocumentContent(SERIAL_PLOTTER_URI);
+            const serialPlotter = SerialMonitor.getInstance().serialPlotter;
+
+            SerialPlotterPanel.createOrShow({serialPlotter, html});
+        });
     }, 100);
 
     setTimeout(() => {