@gregoriusrippenstein/node-red-contrib-introspection 0.1.0 → 0.1.2

package/README.md

@@ -65,9 +65,13 @@ 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. 
+
 ## 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

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/15-screenshot.html

@@ -249,14 +249,24 @@
       if ( !window[functName] ) {
         window[functName] = (e,m) => {
           if ( m.msg == "timer-tripped" ) {
-            RED.notify("Screenshot triggered", { type: "warning" });
+
+            if ( m.notification != "off" ) {
+              RED.notify("Screenshot triggered", { type: "warning" });
+            }
+
+            var notification = m.notification;
             nr_intro_generate_svg( (svgdata) => {
               $.ajax({
                 type: "POST",
                 url: "/screenshot",
-                data: { d: svgdata },
+                data: {
+                  ...m,
+                  d: svgdata
+                },
                 complete: (data) => {
-                  RED.notify("Screenshot posted", { type: "success" });
+                  if ( notification != "off" ) {
+                    RED.notify("Screenshot posted", { type: "success" });
+                  }
                 },
                 dataType: "image/svg+xml;charset=utf-8"
               });

package/nodes/15-screenshot.js

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

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.0",
+  "version": "0.1.2",
   "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.",