@gregoriusrippenstein/node-red-contrib-introspection 0.1.1 → 0.1.3

package/README.md

@@ -65,13 +65,18 @@ Is a palette-only node meaning that it should not be included in any flows. What
 
 This is a hack that uses the `onpaletteadd` callback to do its magic. If this functionality is not desired, then disable this node in the palette manager.
 
+### DrawSVG
+
+A node for inserting an SVG image into the workspace. The image is layered above the grid but below nodes and their connections. The input message must contain SVG data (in string form) in the `payload` attribute.
+
 ## Examples
 
-There are some example flow contained in the package. There are also examples to be found online: 
+There are [example flows](/examples) contained in the package, examples can also be found online: 
 
 - [Orphans](https://demo.openmindmap.org/omm/#flow/3ebb65fdbecb182e/n/2be3f8794979d47b) - node is top left of flow or search for `type:Orphans`
 - [Seeker](https://demo.openmindmap.org/omm/#flow/40ea5f2aea6592ae/n/b5f189a78d829197) - top left and the [Sink](https://demo.openmindmap.org/omm/#flow/459c271a96458c7c/n/e3262d9d2791ab78) - top right
 - [Screenshot](https://demo.openmindmap.org/omm/#flow/4e2d8c13066b705e/n/499b1383580831aa) - top left
+- [DrawSVG](https://demo.openmindmap.org/omm/#flow/6c8ce462533a1da4/n/248f2edd3d8acd96)
 
 Example screenshot: 
 

package/examples/drawsvg-flow.json

@@ -0,0 +1,72 @@
+[
+    {
+        "id": "214f1986d70db2a6",
+        "type": "tab",
+        "label": "DrawSVG Example",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "97790509b555e06a",
+        "type": "DrawSVG",
+        "z": "214f1986d70db2a6",
+        "name": "",
+        "x": 488,
+        "y": 997,
+        "wires": []
+    },
+    {
+        "id": "be970616115487ae",
+        "type": "http request",
+        "z": "214f1986d70db2a6",
+        "name": "",
+        "method": "GET",
+        "ret": "txt",
+        "paytoqs": "ignore",
+        "url": "https://demo.openmindmap.org/content/open_mind.svg",
+        "tls": "",
+        "persist": false,
+        "proxy": "",
+        "insecureHTTPParser": false,
+        "authType": "",
+        "senderr": false,
+        "headers": [],
+        "x": 347,
+        "y": 923,
+        "wires": [
+            [
+                "97790509b555e06a"
+            ]
+        ]
+    },
+    {
+        "id": "e6c50e3da88baae0",
+        "type": "inject",
+        "z": "214f1986d70db2a6",
+        "name": "",
+        "props": [
+            {
+                "p": "payload"
+            },
+            {
+                "p": "topic",
+                "vt": "str"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "payload": "",
+        "payloadType": "date",
+        "x": 211,
+        "y": 867,
+        "wires": [
+            [
+                "be970616115487ae"
+            ]
+        ]
+    }
+]

package/examples/seeker-sink.json

@@ -2,7 +2,7 @@
     {
         "id": "6bab6804614c2612",
         "type": "tab",
-        "label": "Flow 2",
+        "label": "Seeker Sink Example",
         "disabled": false,
         "info": "",
         "env": []
@@ -2606,4 +2606,4 @@
         "y": 88,
         "wires": []
     }
-]
+]

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

@@ -2,7 +2,7 @@
     {
         "id": "e815c52d1e6a0d25",
         "type": "tab",
-        "label": "Flow 3",
+        "label": "Trigger Screenshot Example",
         "disabled": false,
         "info": "",
         "env": []
@@ -152,4 +152,4 @@
             ]
         ]
     }
-]
+]

package/nodes/40-drawsvg.html

@@ -0,0 +1,53 @@
+<script type="text/javascript">
+  RED.nodes.registerType('DrawSVG',{
+    color: '#e5e4ef',
+    icon: "font-awesome/fa-image",
+    category: 'introspection',
+    defaults: {
+      name: {
+        value:"",
+      },
+    },
+    inputs:1,
+    outputs:0,
+
+    label: function() {
+      return (this.name || this._def.paletteLabel);
+    },
+
+    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 == "svgdata" ) {
+            $($($('svg')[0]).find('> g > g > g')[2]).append(m.payload);
+          }
+        }
+      }
+
+      RED.comms.unsubscribe(functName, window[functName]);
+      RED.comms.subscribe(functName, window[functName] );
+
+      return this.name?"node_label_italic":"";
+    },
+  });
+</script>
+
+<script type="text/html" data-template-name="DrawSVG">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-input-name" placeholder="Name">
+    </div>
+</script>
+
+<script type="text/html" data-help-name="DrawSVG">
+  <p>Draw the given SVG onto the workspace placing it between the grid and the nodes and their connections. To remove the image, reload the workspace. Doing a deploy will completely ignore any image added to the workspace.</p>
+</script>

package/nodes/40-drawsvg.js

@@ -0,0 +1,25 @@
+module.exports = function(RED) {
+  function DrawSVGFunctionality(config) {
+    RED.nodes.createNode(this,config);
+
+    var node = this;
+    var cfg = config;
+
+    node.on('close', function() {
+      node.status({});
+    });
+
+    node.on("input", function(msg, send, done) {
+      RED.comms.publish("introspect:" + node.id, RED.util.encodeObject({
+        ...msg,
+        msg: "svgdata",
+      }));
+
+      node.status({ fill: "green", shape: "dot", text: "SVG Data sent" });
+      setTimeout( () => { node.status({}) }, 1432 );
+
+      send(msg);
+    });
+  }
+  RED.nodes.registerType("DrawSVG", DrawSVGFunctionality);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gregoriusrippenstein/node-red-contrib-introspection",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "keywords": [
     "node-red"
   ],
@@ -18,7 +18,8 @@
       "screenshot": "nodes/15-screenshot.js",
       "orphans":    "nodes/20-orphans.js",
       "ismobile":   "nodes/25-ismobile.js",
-      "navigator":  "nodes/30-navigator.js"
+      "navigator":  "nodes/30-navigator.js",
+      "drawsvg":    "nodes/40-drawsvg.js"
     }
   },
   "description": "Node-RED Editor-only nodes for introspecting flows.",