@gregoriusrippenstein/node-red-contrib-introspection 0.0.3 → 0.0.5

package/README.md

@@ -34,25 +34,28 @@ Double click on the top-level node and all nodes in the pathway are highlighted.
 
 Drag the node into a flow, double-click on the node and the tray opens -depending on the size of the flow, this might take a moment. Once the tray is opened, the SVG is shown in the editor window (I took the code from the template node hence the syntax dropdown). Below the editor window is the download button. Pressing that will download the SVG as it is in the editor window, so making changes in that window will be reflected in the downloaded content.
 
-The SVG code can also be copied and pasted into something like [drawsvg.org](https://drawsvg.org/drawsvg.html) hence select-all-copy-paste is provide by having the editor window.
+The SVG code can also be copied and pasted into something like [drawsvg.org](https://drawsvg.org/drawsvg.html) hence select-all-copy-paste is provided by having the editor window.
 
 Improvements over [svgexport.io](https://svgexport.io) browser plugin:
 
-- Respects the 'hide' CSS class that is used to hide specific elements, this the svgexport plugin cannot know.
+- Respects the 'hide' CSS class that is used to hide specific elements, this is something that the svgexport plugin cannot know.
 - Compliments the setting of visibility on the 'g' element with opacity=0. The SVG Standard ignores visibility on 'g' elements but browsers don't seem to care, Inkscape does care.
 - Image data (i.e. icons) is inlined using `data:image/XXXX;base64,` - this is good for things such as Inkscape that can't resolve relative urls. PNG, JPEG and SVG are supported.
 - It also retrieves font details and includes them in the SVG. This makes the font italic, even if it's not the correct font family (because font might not be installed on system).
 
 Disappointments:
 
-- Font-awesome icons, because they use the font-awesome font, aren't inlined and therefore aren't available in external tools (but are visible if SVG opened in browser). If the font-awesome fonts are installed on the system icons do work in Inkscape.
-- 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: on Firefox (on mac), your mileage might vary
+- 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.
+- 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
@@ -64,7 +67,7 @@ Example screenshot:
 
 ## License
 
-[Do whatever but don't do evil](/LICENSE)
+[*Do whatever but don't do evil* license](/LICENSE)
 
 ## Contribution & Ideas
 

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,193 +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));
-      });
-
-      [ "text" ].forEach( function(tagname) {
-        convertCssToAttr(doc.getElementsByTagName(tagname),
-                         origSvg.find(tagname));
-
-        convertFontsToAttr(doc.getElementsByTagName(tagname),
-                           origSvg.find(tagname));
+      nr_intro_generate_svg( (svgdata) => {
+        that.editor.setValue( svgdata );
       });
 
-      // 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 );
-      }
-
       // handle the download button under the editor window.
       $('#node-screenshot-download-svg').on("click", function (e) {
         e.preventDefault();
@@ -254,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({

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.3",
+  "version": "0.0.5",
   "keywords": [
     "node-red"
   ],