@gregoriusrippenstein/node-red-contrib-introspection 0.4.5 → 0.5.0

package/nodes/60-client-code.html

@@ -43,6 +43,7 @@
 
      var nodeid = data.nodeid;
      var _msg = data._msg;
+     var msg = data._msg;
 
      var node = {
        send: (dt) => {
@@ -202,4 +203,33 @@
 
 <script type="text/html" data-help-name="ClientCode">
   <p>Execute Javascript code in the Node-RED frontend, triggered from the server.</p>
+  
+  The code is executed in the users browser and has the following enviornment defined:
+  <pre>
+  <code>
+Variables:
+  nodeid - id of this node
+  _msg - a reference to the msg object passed to this node
+  msg - alias for _msg
+  node.id - id of this node, same as `nodeid` above
+  payload - a reference to msg.payload as it was received by this node
+  topic - a reference to the msg.topic as it was recieved by this node
+
+Functionality:
+  node.send({..}) - send data to the output port of this node
+  node.error("msg") - generate an error for the node
+    </code>
+   </pre>
+
+    <p>
+    This might be confusing since the code in the node <b>is not</b> 
+    executed on the Node-RED server, rather it is executed in the client
+    browser.
+    <p>
+    This of course makes no sense for flows that are executed "head less"
+    on the server in the backgrond on some dark and stormy night. The ClientCode
+    node is intended for immediate, frontend-only use.
+    <p>
+    An example flow with some use cases is included and can be accessed either via 
+    the Import Flow dialog or accessed online <a style="color: blue" href="https://flowhub.org/f/e02ba6e534f7a0f4" target="_blank">at here <i class="fa fa-external-link"></i></a>.
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gregoriusrippenstein/node-red-contrib-introspection",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "dependencies": {
     "got": "latest"
   },
@@ -15,14 +15,13 @@
   },
   "node-red": {
     "version": ">=2.0.0",
+    "plugins": {
+      "screenshot": "plugins/screenshot.html",
+      "orphans": "plugins/orphans.html"
+    },
     "nodes": {
       "seeker":        "nodes/05-seeker.js",
       "sink":          "nodes/10-sink.js",
-      "screenshot":    "nodes/15-screenshot.js",
-      "orphans":       "nodes/20-orphans.js",
-      "ismobile":      "nodes/25-ismobile.js",
-      "navigator":     "nodes/30-navigator.js",
-      "drawsvg":       "nodes/40-drawsvg.js",
       "getflows":      "nodes/45-get-flows.js",
       "sendflow":      "nodes/50-send-flow.js",
       "clientcode":    "nodes/60-client-code.js"

package/plugins/orphans.html

@@ -0,0 +1,45 @@
+<script type="text/javascript">
+(function() {
+   function setupTreelist(){var e=collectOrphans();if(0==e.length){RED.notify("No Orphans Found",{type:"warning",timeout:2e3});try{$("#node-input-orphan-target-container-div").treeList("empty")}catch(e){}}else{try{$("#node-input-orphan-target-container-div").treeList("empty")}catch(e){$("#node-input-orphan-target-container-div").css({width:"100%",height:"400px"}).treeList({multi:!1}).on("treelistitemmouseover",function(e,t){t.node&&t.node.z==RED.workspaces.active()&&(RED.view.reveal(t.node.id,!0),RED.view.redraw())}).on("treelistitemmouseout",function(e,t){}).on("treelistselect",function(e,t){t.node&&(RED.workspaces.show(t.node.z,!1,!1,!0),RED.view.reveal(t.node.id,!0),RED.view.redraw())}),$("#node-input-orphan-target-filter").show();var n=$("#node-input-orphan-target-filter").searchBox({style:"compact",delay:300,change:function(){var e,t=$(this).val().trim().toLowerCase();""===t?($("#node-input-orphan-target-container-div").treeList("filter",null),n.searchBox("count","")):(e=$("#node-input-orphan-target-container-div").treeList("filter",function(e){return-1<e.label.toLowerCase().indexOf(t)||-1<e.node.type.toLowerCase().indexOf(t)}),n.searchBox("count",e+" / "+$("#node-input-orphan-target-container-div").treeList("data").length))}})}$("#node-input-orphan-target-container-div").treeList("data",e.sort((e,t)=>e.node.z>t.node.z))}}function collectOrphans(){const t=new Set;var n=[],r=(RED.nodes.eachLink(e=>{t.add(e.source),t.add(e.target)}),RED.nodes.eachNode(e=>{t.has(e)||n.push(e)}),[]),i={};return n.forEach(function(e){var t=RED.nodes.getType(e.type);if(t){var n=t.label,n=("function"==typeof n?n.call(e):n)||"",o=e.type;if(0===o.indexOf("subflow:"))return}t&&n||(n=e.type),i[e.id]={node:e,label:n,sublabel:o,selected:!1,checkbox:!1},r.push(i[e.id])}),r}
+
+   var initialiseSidebarOrphanNodeOnce = () => {
+      RED.events.off('runtime-state', initialiseSidebarOrphanNodeOnce);
+
+      // The html content of the sidebar has been specified below as a data-template, from where it can be loaded:
+      var content = $($('script[type="text/x-red"][data-template-name="Orphans"]').i18n().html());
+    
+      // Add a "Your sidebar" tabsheet to the right sidebar panel, in which this sidebar panel can be displayed
+      // --> more details: https://nodered.org/docs/api/ui/sidebar/
+      RED.sidebar.addTab({
+         id: "Orphans",
+         label: "Orphans", // short name for the tab
+         name: "Orphan Nodes", // long name for the menu
+         content: content,
+         enableOnEdit: true,
+         iconClass: "fa fa-life-ring" // your fontawesome icon
+      });
+
+      // When the user has entered new data in the sidebar, then store it into the config node
+      $("#node-input-orphan-find-btn").on("click", function(e) {
+         if ( e ) { e.preventDefault() }
+         setupTreelist();
+      })
+   };
+   RED.events.on('runtime-state', initialiseSidebarOrphanNodeOnce);
+})();
+</script>
+
+<!-- The html for the right sidebar plugin screen -->
+<script type="text/x-red" data-template-name="Orphans">
+   <div class="form-row node-input-target-row" style="margin-left: 10px; margin-top: 30px">
+      <button id="node-input-orphan-find-btn"
+               class="red-ui-button">Find Orphans</button>
+   </div>
+
+   <div class="form-row node-input-target-row node-input-target-list-row" style="margin-left: 10px; position: relative; min-height: 200px; margin-right: 15px;">
+      <div style="margin-bottom: 5px; width: 35%; padding-left: 60%;">
+        <input type="text" id="node-input-orphan-target-filter" style="display: none;">
+      </div>
+      <div id="node-input-orphan-target-container-div"></div>
+   </div>
+</script>

package/plugins/screenshot.html

@@ -0,0 +1,74 @@
+<script type="text/javascript">
+(function() {
+   var globalRefToSvgData;
+
+   function nr_intro_generate_svg_3_1(r){return e=>{try{handleSvgObject($($("svg[width=8000]")[0]),e)}catch(t){var n="Error Generating SVG: "+JSON.stringify(t);r.notify(n,{type:"error"}),e('<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="1000" height="1000" viewBox="0 0 1000 1000" pointer-events="all" style="cursor: crosshair; touch-action: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style>.small { font: bold 20px sans-serif; fill: red;}</style><text x="10" y="30" class="small">'+n+"</text></svg>")}}}function nr_intro_generate_svg_3_0(r){return e=>{try{handleSvgObject($($("svg")[0]),e)}catch(t){var n="Error Generating SVG: "+JSON.stringify(t);r.notify(n,{type:"error"}),e('<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="1000" height="1000" viewBox="0 0 1000 1000" pointer-events="all" style="cursor: crosshair; touch-action: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style>.small { font: bold 20px sans-serif; fill: red;}</style><text x="10" y="30" class="small">'+n+"</text></svg>")}}}function handleSvgObject(o,e){var t=o.clone();t.find("foreignObject").remove(),t.find("svg.__screenshot").remove();function a(t,e){for(var n=0;n<t.length;n++){var s=t.item(n),i=e[n];["stroke-width","fill-opacity","stroke-opacity","opacity","stroke-dasharray"].forEach(function(t){s.setAttribute(t,$(i).attr(t)||$(i).css(t))}),["fill","stroke"].forEach(function(t){var e,n,r=(e=$(i).attr(t)||$(i).css(t))&&null!==e&&"none"!=e?(n=e.match(/^#(.)(.)(.)$/))?"#"+n[1]+n[1]+n[2]+n[2]+n[3]+n[3]:(n=e.match(/^#......$/))?e:null===(n=e.match(/^rgb\(([0-9]+),\s+([0-9]+),\s+([0-9]+)/))?(r=e.match(/^rgba\(([0-9]+),\s+([0-9]+),\s+([0-9]+),\s+([0-9]+)/))?{clr:"#"+("0"+parseInt(r[1],10).toString(16)).slice(-2)+("0"+parseInt(r[2],10).toString(16)).slice(-2)+("0"+parseInt(r[3],10).toString(16)).slice(-2),opa:r[4]}:(console.log("Screenshot node: returned unknown color: "+e),e):"#"+("0"+parseInt(n[1],10).toString(16)).slice(-2)+("0"+parseInt(n[2],10).toString(16)).slice(-2)+("0"+parseInt(n[3],10).toString(16)).slice(-2):"none";"object"==typeof r?(s.setAttribute(t+"-opacity",r.opa),s.setAttribute(t,r.clr)):s.setAttribute(t,r)}),$(i).hasClass("hide")&&("g"==s.tagName&&s.setAttribute("opacity","0"),s.setAttribute("visibility","hidden"))}}var n='<?xml version="1.0" standalone="no"?>\r\n<svg '+('width="'+o.attr("width")+'" height="'+o.attr("height")+'"')+' pointer-events="all" style="cursor: crosshair; touch-action: none;" xmlns="http://www.w3.org/2000/svg" class="__screenshot" xmlns:xlink="http://www.w3.org/1999/xlink">\r\n',t=t.html(),l=(new DOMParser).parseFromString(n+t+"\r\n</svg>","image/svg+xml"),r=e=>(["g","rect","line","path","circle","image","text"].forEach(t=>{$(e.getElementsByTagName(t)).each((t,e)=>{e.setAttribute("class",""),e.setAttribute("id","")})}),e),s=(["g","rect","line","path","circle","image"].forEach(function(t){a(l.getElementsByTagName(t),o.find(t))}),["text"].forEach(function(t){a(l.getElementsByTagName(t),o.find(t));for(var e=l.getElementsByTagName(t),n=o.find(t),r=0;r<e.length;r++){var s=e.item(r),i=n[r];["font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","text-anchor","dominant-baseline"].forEach(function(t){s.setAttribute(t,$(i).attr(t)||$(i).css(t))})}}),l.getElementsByTagName("image")),g={},i=(n,r,s)=>{var i=n.getAttribute("xlink:href"),o=i.substr(-4,4).toLowerCase(),a={".jpg":"jpeg",jpeg:"jpeg",".png":"png",".svg":"svg+xml"};if(g[i])return n.setAttribute("xlink:href","data:image/"+a[o]+";base64,"+g[i]),s(r-1);switch(o){case".jpg":case"jpeg":case".png":var l=new XMLHttpRequest;l.open("GET",i,!0),l.responseType="arraybuffer";l.onload=function(t){var e=l.response;e&&(e=(t=>{for(var e="",n=new Uint8Array(t),r=n.byteLength,s=0;s<r;s++)e+=String.fromCharCode(n[s]);return window.btoa(e)})(e),g[i]=e,n.setAttribute("xlink:href","data:image/"+a[o]+";base64,"+e)),s(r-1)},l.send(null);break;case".svg":$.get(i,function(t){var e=new XMLSerializer,e=btoa(e.serializeToString(t));g[i]=e,n.setAttribute("xlink:href","data:image/svg+xml;base64,"+e),s(r-1)})}},c=t=>{t<0?e((new XMLSerializer).serializeToString(r(l))):i(s.item(t),t,c)};0<s.length?i(s.item(s.length-1),s.length-1,c):e((new XMLSerializer).serializeToString(r(l)))}function generatorFunctionForVersion(t){var n,e=t.settings.version.split("."),r=e[0],e=e[1];if("3"==r){if("0"==e)return nr_intro_generate_svg_3_0(t);if("1"==e)return nr_intro_generate_svg_3_1(t)}return n=t,t=>{var e="Node-RED version ("+n.settings.version+") not supported";n.notify(e,{type:"error"}),t&&t('<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="1000" height="1000" viewBox="0 0 1000 1000" pointer-events="all" style="cursor: crosshair; touch-action: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style>.small { font: bold 20px sans-serif; fill: red;}</style><text x="10" y="30" class="small">'+e+"</text></svg>")}}
+
+   // Add your plugin as a new tabsheet in the right sidebar AFTER the flow editor is completely started
+   var initialiseConfigNodeOnce = () => {
+      RED.events.off('runtime-state', initialiseConfigNodeOnce);
+
+      // The html content of the sidebar has been specified below as a data-template, from where it can be loaded:
+      var content = $($('script[type="text/x-red"][data-template-name="Screenshot"]').i18n().html());
+    
+      // Add a "Your sidebar" tabsheet to the right sidebar panel, in which this sidebar panel can be displayed
+      // --> more details: https://nodered.org/docs/api/ui/sidebar/
+      RED.sidebar.addTab({
+         id: "Screenshot",
+         label: "Screenshot", // short name for the tab
+         name: "Screenshot", // long name for the menu
+         content: content,
+         enableOnEdit: true,
+         iconClass: "fa fa-camera" // your fontawesome icon
+      });
+
+      $('#node-screenshot-capture-btn').on("click", function (e) {
+         if ( e ) { e.preventDefault() }
+
+         $('#node-input-screenshot-svgcontainer').html( "Please wait, screenshot being prepared ..." );
+
+         generatorFunctionForVersion(RED)( (svgdata) => {
+            $('#node-input-screenshot-svgcontainer').html(svgdata);
+            globalRefToSvgData = svgdata;
+         });
+      })
+
+      // handle the download button under the editor window.
+      $('#node-screenshot-download-svg').on("click", function (e) {
+        if (e) { e.preventDefault(); }
+        var svgBlob = new Blob([globalRefToSvgData], {type:"image/svg+xml;charset=utf-8"});
+        var svgUrl = URL.createObjectURL(svgBlob);
+        var downloadLink = document.createElement("a");
+        downloadLink.href = svgUrl;
+        downloadLink.download = "screenshot.svg";
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+      });
+
+      $('#node-screenshot-copy-to-clipboard-svg').on("click", function (e) {
+        if (e) { e.preventDefault(); }
+        if ( RED.clipboard.copyText(globalRefToSvgData) ) {
+          RED.notify("SVG copied to clipboard", { type: "success" });
+        }
+      });
+   };
+   RED.events.on('runtime-state', initialiseConfigNodeOnce);
+})();
+</script>
+
+<!-- The html for the right sidebar plugin screen -->
+<script type="text/x-red" data-template-name="Screenshot">
+   <div class="form-row" style="margin-left: 10px; margin-top: 30px;">
+      <button type="button" id="node-screenshot-capture-btn" class="red-ui-button red-ui-button-large"><i class="fa fa-camera"></i> Capture</button>
+   </div>
+
+   <div class="form-row" style="min-height: 300px; overflow: scroll; margin-left: 10px; margin-right: 15px; height: 300px; border: 1px rgb(196, 196, 196) solid; border-radius: 5px;">
+      <div id="node-input-screenshot-svgcontainer"></div>
+   </div>
+
+   <div class="form-row" style="margin-left: 10px; margin-top: 5px;">
+      <button type="button" id="node-screenshot-download-svg" class="red-ui-button red-ui-button-large"><i class="fa fa-download"></i>Download</button>
+      <button type="button" id="node-screenshot-copy-to-clipboard-svg" class="red-ui-button red-ui-button-large"><i class="fa fa-clipboard"></i>Copy to Clipboard</button>
+   </div>
+</script>

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

@@ -1,155 +0,0 @@
-[
-    {
-        "id": "e815c52d1e6a0d25",
-        "type": "tab",
-        "label": "Trigger Screenshot Example",
-        "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"
-            ]
-        ]
-    }
-]