@gregoriusrippenstein/node-red-contrib-introspection 0.0.4 → 0.0.6

package/README.md

@@ -46,13 +46,16 @@ Improvements over [svgexport.io](https://svgexport.io) browser plugin:
 Disappointments:
 
 - Font-awesome icons, because they use the font-awesome font, aren't inlined and therefore aren't available in external tools. If the font-awesome fonts are installed on the system icons do work in Inkscape and browser.
-- Because a double click is required, any highlights in the workflow are lost (i.e. link-in/out highlights showing the other tab names disappears)
 - Limited testing: Firefox & Opera (on mac), your mileage might vary
 - No error checking - network requests are assumed to work
 
+Since version 0.0.5 the Screenshot node takes one input. That input will trigger the node to take a screenshot *without double clicking to open the tray*. The intention is to have an inject trigger regularly so that screenshots are made automagically and flows can have highlights. Screenshots are then posted to the endpoint `/screenshot` (this can be captured with a http-in node) and data is post as a json object `{ d: <svgdata> }`.
+
+There is an example [flow](/examples/trigger-and-save-screenshot.json) that demonstrates this feature. The author is aware that this is dangerously close to enabling spyware for flow modification, please see the [LICENSE](/LICENSE) and behaviour. 
+
 ## Examples
 
-There is a single example flow contained in the package. There are also examples to be found online: 
+There are some example flow contained in the package. There are also examples to be found online: 
 
 - [Orphans](https://demo.openmindmap.org/omm/#flow/3ebb65fdbecb182e) - node is top left of flow or search for `type:Orphans`
 - [Seeker](https://demo.openmindmap.org/omm/#flow/40ea5f2aea6592ae) - top left and the [Sink](https://demo.openmindmap.org/omm/#flow/459c271a96458c7c) - top right

package/examples/trigger-and-save-screenshot.json

@@ -0,0 +1,155 @@
+[
+    {
+        "id": "e815c52d1e6a0d25",
+        "type": "tab",
+        "label": "Flow 3",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "03f322255fd8cad1",
+        "type": "http in",
+        "z": "e815c52d1e6a0d25",
+        "name": "[POST] screenshot",
+        "url": "/screenshot",
+        "method": "post",
+        "upload": false,
+        "swaggerDoc": "",
+        "x": 388,
+        "y": 305,
+        "wires": [
+            [
+                "ddabce426445e225",
+                "a9f9ce494ec4edc1",
+                "c81d27b03cf13c69"
+            ]
+        ]
+    },
+    {
+        "id": "ddabce426445e225",
+        "type": "debug",
+        "z": "e815c52d1e6a0d25",
+        "name": "debug 1",
+        "active": false,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 1175,
+        "y": 307,
+        "wires": []
+    },
+    {
+        "id": "e62ae897ba4c777f",
+        "type": "http response",
+        "z": "e815c52d1e6a0d25",
+        "name": "",
+        "statusCode": "",
+        "headers": {
+            "content-type": "application/json"
+        },
+        "x": 817,
+        "y": 624,
+        "wires": []
+    },
+    {
+        "id": "a9f9ce494ec4edc1",
+        "type": "function",
+        "z": "e815c52d1e6a0d25",
+        "name": "respond with ok",
+        "func": "msg.payload = {\n    status: \"ok\",\n    data: {\n    }\n};\nmsg.statusCode = 200;\nreturn msg;\n",
+        "outputs": 1,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 622,
+        "y": 517,
+        "wires": [
+            [
+                "e62ae897ba4c777f"
+            ]
+        ]
+    },
+    {
+        "id": "c81d27b03cf13c69",
+        "type": "function",
+        "z": "e815c52d1e6a0d25",
+        "name": "set filename & payload",
+        "func": "msg.filename = \"/data/content/screenshot-\" + Date.now() + \".svg\";\n\nmsg.payload = msg.payload[\"d\"];\n\nreturn msg;",
+        "outputs": 1,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 744,
+        "y": 410,
+        "wires": [
+            [
+                "00c967aaf678c503"
+            ]
+        ]
+    },
+    {
+        "id": "00c967aaf678c503",
+        "type": "file",
+        "z": "e815c52d1e6a0d25",
+        "name": "",
+        "filename": "filename",
+        "filenameType": "msg",
+        "appendNewline": false,
+        "createDir": true,
+        "overwriteFile": "true",
+        "encoding": "none",
+        "x": 1012,
+        "y": 505,
+        "wires": [
+            [
+                "ddabce426445e225"
+            ]
+        ]
+    },
+    {
+        "id": "32cde1648d31e9b4",
+        "type": "Screenshot",
+        "z": "e815c52d1e6a0d25",
+        "name": "",
+        "screenshot": "",
+        "x": 461,
+        "y": 108,
+        "wires": []
+    },
+    {
+        "id": "3957fb7da9d89393",
+        "type": "inject",
+        "z": "e815c52d1e6a0d25",
+        "name": "",
+        "props": [
+            {
+                "p": "payload"
+            },
+            {
+                "p": "topic",
+                "vt": "str"
+            }
+        ],
+        "repeat": "600",
+        "crontab": "",
+        "once": true,
+        "onceDelay": "2",
+        "topic": "",
+        "payload": "",
+        "payloadType": "date",
+        "x": 213,
+        "y": 108,
+        "wires": [
+            [
+                "32cde1648d31e9b4"
+            ]
+        ]
+    }
+]

package/nodes/15-screenshot.html

@@ -1,4 +1,196 @@
 <script type="text/javascript">
+  function nr_intro_generate_svg( callbackWithSvgCode ) {
+    //
+    // begin the SVG conversion code.
+    //
+    var origSvg = $($('svg')[0]);
+
+    var hwAttrs = (
+      'width="' + origSvg.attr('width') + '" height="' +
+        origSvg.attr('height') + '"'
+    );
+
+    var svgHeader = (
+      '<?xml version="1.0" standalone="no"?>\r\n' +
+        '<svg ' + hwAttrs + ' pointer-events="all" style="cursor: crosshair; '+
+        'touch-action: none;" xmlns="http://www.w3.org/2000/svg" '+
+        'xmlns:xlink="http://www.w3.org/1999/xlink">\r\n'
+    );
+
+    var svgBody = origSvg.html();
+
+    var parser = new DOMParser();
+    var doc = parser.parseFromString(svgHeader + svgBody + '\r\n</svg>',
+                                     "image/svg+xml");
+
+    // SVG has very specific requirements for colour specification, baseline
+    // all colors to #rrggbb. This converts: 'rgb(rrr, ggg, bbb)' and '#rgb'.
+    var rgb2hex = (rgb) => {
+      if ( !rgb ) { return "none" }
+      if ( rgb === null ) { return "none" }
+
+      rgb3 = rgb.match(/^#(.)(.)(.)$/);
+      if ( rgb3 ) {
+        return ("#" +rgb3[1]+rgb3[1]+rgb3[2]+rgb3[2]+rgb3[3]+rgb3[3]);
+      }
+
+      rgb3 = rgb.match(/^#......$/);
+      if ( rgb3 ) { return rgb; }
+
+      rgb3 = rgb.match(/^rgb\(([0-9]+),\s+([0-9]+),\s+([0-9]+)/);
+      if ( rgb3 === null ) { return rgb; }
+
+      return "#" +
+        ("0" + parseInt(rgb3[1],10).toString(16)).slice(-2) +
+        ("0" + parseInt(rgb3[2],10).toString(16)).slice(-2) +
+        ("0" + parseInt(rgb3[3],10).toString(16)).slice(-2);
+    }
+
+    // Set everything that might have been set via CSS directly on the
+    // element. All styling values must be defined as attributes on the
+    // SVG element.
+    var convertCssToAttr = function( collection, origElems ) {
+      for ( var idx = 0; idx < collection.length; idx++ ) {
+        var elem = collection.item(idx);
+        var origElem = origElems[idx];
+
+        [
+          "fill", "stroke"
+        ].forEach( function(attrname) {
+          elem.setAttribute(attrname,
+                            rgb2hex($(origElem).attr(attrname) ||
+                                    $(origElem).css(attrname) ));
+        });
+
+        [
+          "stroke-width","fill-opacity","stroke-opacity","opacity"
+        ].forEach(function(attrname) {
+          elem.setAttribute(attrname,
+                            $(origElem).attr(attrname) ||
+                            $(origElem).css(attrname));
+        });
+
+        if ( $(origElem).hasClass('hide') ) {
+          if ( elem.tagName == "g" ) {
+            // according to the SVG standard, visibility cannot be applied
+            // (or better said: has no effect) on 'g' (group) elements.
+            // Inkscape is rather pedantic about this and will show the
+            // group, so hack-it by using opacity. Browsers (firefox) doesn't
+            // seem to care and will apply visibility to 'g' elements.
+            elem.setAttribute("opacity", "0");
+          }
+          elem.setAttribute("visibility", "hidden");
+        }
+      }
+    }
+
+    // include font details on the text elements.
+    var convertFontsToAttr = function( collection, origElems ) {
+      for ( var idx = 0; idx < collection.length; idx++ ) {
+        var elem = collection.item(idx);
+        var origElem = origElems[idx];
+
+        ["font-family", "font-size", "font-size-adjust", "font-stretch",
+         "font-style", "font-variant", "font-weight"
+        ].forEach( function(attrname) {
+          elem.setAttribute(attrname,
+                            $(origElem).attr(attrname) ||
+                            $(origElem).css(attrname) );
+        })
+      }
+    }
+
+    // probably missed some elements ...
+    var tagnames = [ "g", "rect", "line", "path", "circle", "image" ];
+    tagnames.forEach( function(tagname) {
+      convertCssToAttr(doc.getElementsByTagName(tagname),
+                       origSvg.find(tagname));
+    });
+
+    [ "text" ].forEach( function(tagname) {
+      convertCssToAttr(doc.getElementsByTagName(tagname),
+                       origSvg.find(tagname));
+
+      convertFontsToAttr(doc.getElementsByTagName(tagname),
+                         origSvg.find(tagname));
+    });
+
+    // inline image data. Image types supported: Jpeg, Png and Svg.
+    var imageColl = doc.getElementsByTagName("image");
+
+    var getDataAndCallbackWhenDone = (elem, cntr, cb) => {
+      var postfix = elem.getAttribute("xlink:href").substr(-4,4).toLowerCase();
+
+      switch(postfix){
+      case ".jpg":
+      case "jpeg":
+      case ".png":
+        var fileType = {
+          ".jpg": "jpeg",
+          "jpeg": "jpeg",
+          ".png": "png"
+        };
+
+        var oReq = new XMLHttpRequest();
+        oReq.open("GET", elem.getAttribute( "xlink:href" ), true);
+        oReq.responseType = "arraybuffer";
+
+        var arrayBufferToBase64 = ( buffer ) => {
+          var binary = '';
+          var bytes = new Uint8Array( buffer );
+          var len = bytes.byteLength;
+          for (var i = 0; i < len; i++) {
+            binary += String.fromCharCode( bytes[ i ] );
+          }
+          return window.btoa( binary );
+        };
+
+        oReq.onload = function (oEvent) {
+          var arrayBuffer = oReq.response; // Note: not oReq.responseText
+          if (arrayBuffer) {
+            elem.setAttribute("xlink:href",
+                              "data:image/"+fileType[postfix]+";base64," +
+                              arrayBufferToBase64(arrayBuffer));
+            cb(cntr-1)
+          } else {
+            cb(cntr-1)
+          }
+        };
+
+        oReq.send(null);
+        break;
+
+      case ".svg":
+        $.get( elem.getAttribute( "xlink:href" ), function(data) {
+          const serializer = new XMLSerializer();
+          elem.setAttribute( "xlink:href",
+                             "data:image/svg+xml;base64," +
+                             btoa(serializer.serializeToString(data)));
+          cb(cntr-1)
+        });
+        break;
+      }
+    };
+
+    var cb = (cntr) => {
+      if ( cntr < 0 ) {
+        const serializer = new XMLSerializer();
+        callbackWithSvgCode( serializer.serializeToString(doc) );
+      } else {
+        getDataAndCallbackWhenDone( imageColl.item(cntr), cntr, cb );
+      }
+    };
+
+    if ( imageColl.length > 0 ) {
+      getDataAndCallbackWhenDone( imageColl.item(imageColl.length-1),
+                                  imageColl.length-1,
+                                  cb );
+    } else {
+      const serializer = new XMLSerializer();
+      callbackWithSvgCode( serializer.serializeToString(doc) );
+    }
+  };
+
   RED.nodes.registerType('Screenshot',{
     color: '#e5e4ef',
     icon: "font-awesome/fa-camera",
@@ -12,7 +204,7 @@
         value:""
       },
     },
-    inputs:0,
+    inputs:1,
     outputs:0,
 
     label: function() {
@@ -20,6 +212,34 @@
     },
 
     labelStyle: function() {
+      /*
+        because there is not a better hook to connect up the event
+        listener, misuse the label styling for this. Also don't register a
+        new listener each time, maintain only one listener by removing and
+        readding.
+      */
+      var that = this;
+      var functName = "introspect:" + that.id;
+
+      if ( !window[functName] ) {
+        window[functName] = (e,m) => {
+          if ( m.msg == "timer-tripped" ) {
+            nr_intro_generate_svg( (svgdata) => {
+              $.ajax({
+                type: "POST",
+                url: "/screenshot",
+                data: { d: svgdata },
+                success: (data) => {},
+                dataType: "image/svg+xml;charset=utf-8"
+              });
+            });
+          }
+        }
+      }
+
+      RED.comms.unsubscribe(functName, window[functName]);
+      RED.comms.subscribe(functName, window[functName] );
+
       return this.name?"node_label_italic":"";
     },
 
@@ -54,196 +274,10 @@
 
       this.editor.setValue( "Please wait, screenshot being prepared ..." );
 
-      //
-      // begin the SVG conversion code.
-      //
-      var origSvg = $($('svg')[0]);
-
-      var hwAttrs = (
-        'width="' + origSvg.attr('width') + '" height="' +
-          origSvg.attr('height') + '"'
-      );
-
-      var svgHeader = (
-        '<?xml version="1.0" standalone="no"?>\r\n' +
-          '<svg ' + hwAttrs + ' pointer-events="all" style="cursor: crosshair; '+
-          'touch-action: none;" xmlns="http://www.w3.org/2000/svg" '+
-          'xmlns:xlink="http://www.w3.org/1999/xlink">\r\n'
-      );
-
-      var svgBody = origSvg.html();
-
-      var parser = new DOMParser();
-      var doc = parser.parseFromString(svgHeader + svgBody + '\r\n</svg>',
-                                       "image/svg+xml");
-
-      // SVG has very specific requirements for colour specification, baseline
-      // all colors to #rrggbb. This converts: 'rgb(rrr, ggg, bbb)' and '#rgb'.
-      var rgb2hex = (rgb) => {
-        if ( !rgb ) { return "none" }
-        if ( rgb === null ) { return "none" }
-
-        rgb3 = rgb.match(/^#(.)(.)(.)$/);
-        if ( rgb3 ) {
-          return ("#" +rgb3[1]+rgb3[1]+rgb3[2]+rgb3[2]+rgb3[3]+rgb3[3]);
-        }
-
-        rgb3 = rgb.match(/^#......$/);
-        if ( rgb3 ) { return rgb; }
-
-        rgb3 = rgb.match(/^rgb\(([0-9]+),\s+([0-9]+),\s+([0-9]+)/);
-        if ( rgb3 === null ) { return rgb; }
-
-        return "#" +
-          ("0" + parseInt(rgb3[1],10).toString(16)).slice(-2) +
-          ("0" + parseInt(rgb3[2],10).toString(16)).slice(-2) +
-          ("0" + parseInt(rgb3[3],10).toString(16)).slice(-2);
-      }
-
-      // Set everything that might have been set via CSS directly on the
-      // element. All styling values must be defined as attributes on the
-      // SVG element.
-      var convertCssToAttr = function( collection, origElems ) {
-        for ( var idx = 0; idx < collection.length; idx++ ) {
-          var elem = collection.item(idx);
-          var origElem = origElems[idx];
-
-          [
-            "fill", "stroke"
-          ].forEach( function(attrname) {
-            elem.setAttribute(attrname,
-                              rgb2hex($(origElem).attr(attrname) ||
-                                      $(origElem).css(attrname) ));
-          });
-
-          [
-            "stroke-width","fill-opacity","stroke-opacity","opacity"
-          ].forEach(function(attrname) {
-            elem.setAttribute(attrname,
-                              $(origElem).attr(attrname) ||
-                              $(origElem).css(attrname));
-          });
-
-          if ( $(origElem).hasClass('hide') ) {
-            if ( elem.tagName == "g" ) {
-              // according to the SVG standard, visibility cannot be applied
-              // (or better said: has no effect) on 'g' (group) elements.
-              // Inkscape is rather pedantic about this and will show the
-              // group, so hack-it by using opacity. Browsers (firefox) doesn't
-              // seem to care and will apply visibility to 'g' elements.
-              elem.setAttribute("opacity", "0");
-            }
-            elem.setAttribute("visibility", "hidden");
-          }
-        }
-      }
-
-      // include font details on the text elements.
-      var convertFontsToAttr = function( collection, origElems ) {
-        for ( var idx = 0; idx < collection.length; idx++ ) {
-          var elem = collection.item(idx);
-          var origElem = origElems[idx];
-
-          ["font-family", "font-size", "font-size-adjust", "font-stretch",
-           "font-style", "font-variant", "font-weight"
-          ].forEach( function(attrname) {
-            elem.setAttribute(attrname,
-                              $(origElem).attr(attrname) ||
-                              $(origElem).css(attrname) );
-          })
-        }
-      }
-
-      // probably missed some elements ...
-      var tagnames = [ "g", "rect", "line", "path", "circle", "image" ];
-      tagnames.forEach( function(tagname) {
-        convertCssToAttr(doc.getElementsByTagName(tagname),
-                         origSvg.find(tagname));
+      nr_intro_generate_svg( (svgdata) => {
+        that.editor.setValue( svgdata );
       });
 
-      [ "text" ].forEach( function(tagname) {
-        convertCssToAttr(doc.getElementsByTagName(tagname),
-                         origSvg.find(tagname));
-
-        convertFontsToAttr(doc.getElementsByTagName(tagname),
-                           origSvg.find(tagname));
-      });
-
-      // inline image data. Image types supported: Jpeg, Png and Svg.
-      var imageColl = doc.getElementsByTagName("image");
-
-      var getDataAndCallbackWhenDone = (elem, cntr, cb) => {
-        var postfix = elem.getAttribute("xlink:href").substr(-4,4).toLowerCase();
-
-        switch(postfix){
-        case ".jpg":
-        case "jpeg":
-        case ".png":
-          var fileType = {
-            ".jpg": "jpeg",
-            "jpeg": "jpeg",
-            ".png": "png"
-          };
-
-          var oReq = new XMLHttpRequest();
-          oReq.open("GET", elem.getAttribute( "xlink:href" ), true);
-          oReq.responseType = "arraybuffer";
-
-          var arrayBufferToBase64 = ( buffer ) => {
-            var binary = '';
-            var bytes = new Uint8Array( buffer );
-            var len = bytes.byteLength;
-            for (var i = 0; i < len; i++) {
-              binary += String.fromCharCode( bytes[ i ] );
-            }
-            return window.btoa( binary );
-          };
-
-          oReq.onload = function (oEvent) {
-            var arrayBuffer = oReq.response; // Note: not oReq.responseText
-            if (arrayBuffer) {
-              elem.setAttribute("xlink:href",
-                                "data:image/"+fileType[postfix]+";base64," +
-                                arrayBufferToBase64(arrayBuffer));
-              cb(cntr-1)
-            } else {
-              cb(cntr-1)
-            }
-          };
-
-          oReq.send(null);
-          break;
-
-        case ".svg":
-          $.get( elem.getAttribute( "xlink:href" ), function(data) {
-            const serializer = new XMLSerializer();
-            elem.setAttribute( "xlink:href",
-                               "data:image/svg+xml;base64," +
-                               btoa(serializer.serializeToString(data)));
-            cb(cntr-1)
-          });
-          break;
-        }
-      };
-
-      var cb = (cntr) => {
-        if ( cntr < 0 ) {
-          const serializer = new XMLSerializer();
-          that.editor.setValue( serializer.serializeToString(doc) );
-        } else {
-          getDataAndCallbackWhenDone( imageColl.item(cntr), cntr, cb );
-        }
-      };
-
-      if ( imageColl.length > 0 ) {
-        getDataAndCallbackWhenDone( imageColl.item(imageColl.length-1),
-                                    imageColl.length-1,
-                                    cb );
-      } else {
-        const serializer = new XMLSerializer();
-        that.editor.setValue( serializer.serializeToString(doc) );
-      }
-
       // handle the download button under the editor window.
       $('#node-screenshot-download-svg').on("click", function (e) {
         e.preventDefault();
@@ -257,8 +291,6 @@
         document.body.removeChild(downloadLink);
       });
 
-      // normality resumes here, all the SVG handling is done.
-
       $("#node-input-format").on("change", function() {
         var mod = "ace/mode/"+$("#node-input-format").val();
         that.editor.getSession().setMode({
@@ -289,6 +321,16 @@
       })
     },
 
+    oneditsave: function() {
+      this.editor.destroy();
+      delete this.editor;
+    },
+
+    oneditcancel: function() {
+      this.editor.destroy();
+      delete this.editor;
+    },
+
     oneditresize: function(size) {
       var rows = $("#dialog-form>div:not(.node-text-editor-row)");
       var height = $("#dialog-form").height();

package/nodes/15-screenshot.js

@@ -9,7 +9,14 @@ module.exports = function(RED) {
       node.status({});
     });
 
-    node.on("input",function(msg, send, done) {
+    node.on("input", function(msg, send, done) {
+      RED.comms.publish("introspect:" + node.id, RED.util.encodeObject({
+        msg: "timer-tripped",
+      }));
+
+      node.status({ fill: "green", shape: "dot", text:"Taking screenshot" });
+      setTimeout( () => { node.status({}) }, 1432 );
+
       send(msg);
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gregoriusrippenstein/node-red-contrib-introspection",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "keywords": [
     "node-red"
   ],