Add terminal logging tool

Author: gfwilliams

css/icons.css

@@ -288,3 +288,8 @@ a .icon__more:hover {
 .icon-storage.lrg:before { background-position: 0 -2640px }
 .compact .icon-storage.lrg:before,
 .icon-storage.sml:before { background-position: -60px -2640px }
+
+.icon-log.lrg:before { background-position: 0 -2700px }
+.compact .icon-log.lrg:before,
+.icon-log.sml:before { background-position: -60px -2700px }
+

extras/make_icons.sh

@@ -95,6 +95,7 @@ i svg/appbar.connection.bluetooth bluetooth
 i svg/appbar.hardware.headphones headphone
 i svg/appbar.network network
 i svg/appbar.database storage
+i svg/appbar.paper log
 
 # Now put them all together into one file
 convert icons/oldicons.png $IMAGES -append $ICONFILE

img/icons.png

@@ -188,7 +188,7 @@ <h5 class="title-bar__title">Espruino Web IDE</h5>
     <script src="EspruinoTools/core/modules.js"></script>
     <script src="EspruinoTools/core/env.js"></script>
     <script src="EspruinoTools/core/flasher.js"></script>
-    <script src="EspruinoTools/core/flasherESP8266.js"></script>    
+    <script src="EspruinoTools/core/flasherESP8266.js"></script>
     <script src="js/libs/secure-dfu.js"></script>
 
     <script src="js/core/editorBlockly.js"></script>
@@ -242,6 +242,7 @@ <h5 class="title-bar__title">Espruino Web IDE</h5>
     <script src="js/libs/imageconverter.js"></script> <!-- for storage.js -->
     <script src="js/plugins/emulator_banglejs.js"></script> <!-- for storage.js -->
     <script src="js/plugins/keyShortcuts.js"></script>
+    <script src="js/plugins/terminalLogger.js"></script>
     <!-- js/plugins/_examplePlugin.js -->
 
 <script>

index.html

@@ -406,6 +406,7 @@
         element.classList.add(elementClass);
       },
       setInfo : function(text) {
+        options.info = text;
         if (info) info.innerHTML = text;
       },
       remove : function() {

js/core/app.js

@@ -0,0 +1,109 @@
+/**
+ Copyright 2014 Gordon Williams ([email protected])
+
+ This Source Code is subject to the terms of the Mozilla Public
+ License, v2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+ ------------------------------------------------------------------
+  An Example Plugin
+ ------------------------------------------------------------------
+**/
+"use strict";
+(function(){
+
+  var icon;
+  var log = [];
+  var logStarted = false;
+
+  function init() {
+    Espruino.Core.Config.add("SHOW_TERMINAL_LOGGER_ICON", {
+      section : "General",
+      name : "Terminal Log Icon",
+      description : "Show an icon in the terminal window that allows you to record the contents of the terminal to a file",
+      type : "boolean",
+      defaultValue : false,
+      onChange : function(newValue) { showIcon(newValue); }
+    });
+    showIcon(Espruino.Config.SHOW_TERMINAL_LOGGER_ICON);
+    Espruino.addProcessor("terminalNewLine", function(line, callback) {
+      if (logStarted) {
+        log.push(line);
+        icon.setInfo(getLogStateMessage());
+      }
+      callback(line);
+    });
+  }
+
+  function getLogStateMessage() {
+    if (logStarted) {
+      return "🔴 "+log.length;
+    } else {
+      if (log.length) return "⭕ "+log.length;
+      else return "⭕ IDLE";
+    }
+  }
+
+  function showIcon(show) {
+    if (icon!==undefined) {
+      icon.remove();
+      icon = undefined;
+    }
+    if (show) {
+      icon = Espruino.Core.App.addIcon({
+        id: "termLog",
+        icon: "log",
+        title : "Terminal Logging",
+        //order: -90,
+        area: {
+          name: "terminal",
+          position: "top"
+        },
+        click: showMenu,
+        info : getLogStateMessage()
+      });
+    }
+  }
+
+  function showMenu() {
+    var buttons = [];
+    if (logStarted) {
+      buttons.push({ name:"Stop", callback : function() {
+        logStarted = false;
+        icon.setInfo(getLogStateMessage());
+        popup.close();
+      }});
+    } else {
+      buttons.push({ name:"Start", callback : function() {
+        logStarted = true;
+        icon.setInfo(getLogStateMessage());
+        popup.close();
+      }});
+    }
+    if (log.length) {
+      buttons.push({ name:"Save", callback : function() {
+        Espruino.Core.Utils.fileSaveDialog(log.join("\r\n"), "log.txt", function() {
+          icon.setInfo(getLogStateMessage());
+          popup.close();
+        });
+      }});
+      buttons.push({ name:"Clear", callback : function() {
+        log = [];
+        icon.setInfo(getLogStateMessage());
+        popup.close();
+      }});
+    }
+    var popup = Espruino.Core.App.openPopup({
+      title: "Terminal Logging",
+      padding: true,
+      contents: `<p>Logging allows you to store the data from the terminal into a file.</p>
+<p>You currently have ${log.length} lines recorded</p>`,
+      position: "center",
+      buttons : buttons
+    });
+  }
+
+  Espruino.Plugins.TerminalLogger = {
+    init : init,
+  };
+}());

js/plugins/terminalLogger.js

@@ -83,7 +83,10 @@
       $('<video autoplay id="videotag" style="'+filters+'"></video>').prependTo(".editor--terminal .editor__canvas");
     } else {
       hadWebCam = false;
-      if (icon!==undefined) icon.remove();
+      if (icon!==undefined) {
+        icon.remove();
+        icon = undefined;
+      }
     }
     if (hadWebCam) toggleWebCam();
   }

js/plugins/webcam.js

@@ -223,6 +223,7 @@ <h5 class="title-bar__title">Espruino Web IDE</h5>
     <script src="js/plugins/storage.js"></script>
     <script src="js/libs/imageconverter.js"></script> <!-- for storage.js -->
     <script src="js/plugins/keyShortcuts.js"></script>
+    <script src="js/plugins/terminalLogger.js"></script>
     <!-- js/plugins/_examplePlugin.js -->
 
 </body>