Node-red-contrib-ui-svg example flow not working properly

I've installed node-red-contrib-ui-svg to start playing with it. So I imported the example flow.

The example says 'click Station 10 for page 2'. When I click 'Station 10' I see page 2 momentarily and it reverts back to page 1.

SVG-ISSUE

platform: macOS 10.14.6
Node-RED: v1.1.0
Node.js: v12.13.0

Safari, FireFox and Chrome all act the same way

1 Like

Hi Paul, I did that demo while still in beta as a POC of HMI possibilities.

Unfortunately, it hasn't been updated since the node was finalised and subsequent updates.

If you can fix it up or make a better working HMI demo I will update the the repo.

If you don't, I'll try to get it updated at some point.

Sorry.

@BartButenaers

EDIT...

Here is an updated version. This version uses the click events rather than animations. For whatever reason I was having a problem getting an SVG SMIL animation to show and hide 2 items from an element click so instead, I utilised the click events. It should be fairly obvious how its done - but ask if you need help.

The updated flow

[{"id":"78506e2.b242d9","type":"inject","z":"25c59cf6.49d884","name":"","repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":230,"y":260,"wires":[["b93cd37f.da7cf"]]},{"id":"b93cd37f.da7cf","type":"function","z":"25c59cf6.49d884","name":"random mode generator","func":"let r1 = Math.floor(Math.random() * 5000) + 1000;  \n\nfunction randomItem(arr){\n    var len = arr.length;\n    var rand = Math.floor(Math.random() * len);\n    return arr[rand]\n}\n\nlet station = randomItem([\"STN10\",\"STN20\",\"STN30\",\"STN40\",\"STN50\",\"STN60\",\"STN70\",\"STN80\"]);\nlet mode = randomItem([\"auto\",\"manual\",\"fault\",\"auto\",\"other\",\"auto\",\"fault\",\"auto\"]);\nlet fault = randomItem([\"sensor fault\",\"coolant empty\",\"CP tripped\",\"over speed\",\"E-Stop\",\"Safety Mat\"]);\nlet other = randomItem([\"full\",\"waiting\",\"over cycle\"]);\n\nlet statusText = mode == \"other\" ? other : (mode == \"fault\" ? fault : mode);\n\nlet state = flow.get(\"state\") || {}\nif(!state[station]){\n    state[station] = {mode:\"manual\", status:\"manual\", count:0}    \n}\nstate[station].mode = mode;\nstate[station].status = statusText;\nflow.set(\"state\",state)\n\n//$(\"#STN50 > .background\").attr(\"fill\",\"url('#fault')\")\n//$(\"#STN50 > .status\").text(\"hi\")\n\nlet newmsg = {payload:[\n        {\n            \"command\": \"update_attribute\",\n            \"selector\": \"#\" + station + \" > .background\",\n            \"attributeName\": \"fill\",\n            \"attributeValue\": \"url('#\" + mode + \"')\"\n        },\n        {\n            \"command\": \"update_text\",\n            selector: \"#\" + station + \" > .status\",\n            textContent: statusText\n        },\n        {\n            \"command\": \"update_text\",\n            selector: \"#\" + station + \" > .count\",\n            textContent: state[station].count\n        }\n    ]\n}\n\n\nsetTimeout(function () {\n    node.send(newmsg)\n}, r1 - 100);\n\n    \n//return msg;","outputs":1,"noerr":0,"x":430,"y":260,"wires":[["e11e94bf.6d1e08"]]},{"id":"e11e94bf.6d1e08","type":"ui_svg_graphics","z":"25c59cf6.49d884","group":"7629d4bc.d2960c","order":0,"width":"12","height":"9","svgString":"<svg id=\"svghmi\"  viewBox=\"0 0 320 180\" width=\"80%\" height=\"80%\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n  <linearGradient spreadMethod=\"repeat\" y1=\"0\" x1=\"0.5\" y2=\"1\" x2=\"0.5\" id=\"auto\">\n   <stop offset=\"0\" stop-color=\"#00aa00\"/>\n   <stop offset=\"0.5\" stop-color=\"#00ff00\"/>\n   <stop offset=\"1\" stop-color=\"#00aa00\"/>\n  </linearGradient>\n  <linearGradient spreadMethod=\"repeat\" y1=\"0\" x1=\"0.5\" y2=\"1\" x2=\"0.5\" id=\"fault\">\n   <stop offset=\"0\" stop-color=\"#aa0000\"/>\n   <stop offset=\"0.5\" stop-color=\"#ff0000\"/>\n   <stop offset=\"1\" stop-color=\"#aa0000\"/>\n  </linearGradient>\n  <linearGradient spreadMethod=\"repeat\" y1=\"0\" x1=\"0.5\" y2=\"1\" x2=\"0.5\" id=\"other\">\n   <stop offset=\"0\" stop-color=\"#aaaa00\"/>\n   <stop offset=\"0.5\" stop-color=\"#ffff00\"/>\n   <stop offset=\"1\" stop-color=\"#aaaa00\"/>\n  </linearGradient>\n    <linearGradient spreadMethod=\"repeat\" y1=\"0\" x1=\"0.5\" y2=\"1\" x2=\"0.5\" id=\"manual\">\n   <stop offset=\"0\" stop-color=\"#0000aa\"/>\n   <stop offset=\"0.5\" stop-color=\"#0000ff\"/>\n   <stop offset=\"1\" stop-color=\"#0000aa\"/>\n  </linearGradient>\n </defs>\n \n \n <g display=\"inline\">\n  <title>background</title>\n  <rect x=\"0\" fill=\"#000000\" stroke-dasharray=\"null\" stroke-linejoin=\"null\" stroke-linecap=\"null\" y=\"0.70313\" width=\"320\" height=\"180\" id=\"svg_5\" stroke=\"#000000\"/>\n </g>\n \n \n <g display=\"inline\" id=\"page1\">\n  <title>Main Overview</title>\n  <g id=\"STN10\">\n   <rect class=\"background\" fill=\"url(#manual)\" x=\"3.20313\" y=\"28.83594\" width=\"77.25\" height=\"70.625\" rx=\"10\" ry=\"10\" stroke=\"#000000\" id=\"box_1\"/>\n   <text class=\"name\" fill=\"#ffffff\" stroke-width=\"0\" x=\"-39.92712\" y=\"62.62216\" id=\"svg_2\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Station 10</text>\n   <text class=\"status\" fill=\"#ffffff\" stroke-width=\"0\" x=\"-39.37879\" y=\"175.82813\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\" id=\"Status_STN10\">Manual</text>\n   <text class=\"count\" xml:space=\"preserve\" text-anchor=\"middle\" font-family=\"Sans-serif\" font-size=\"24\" id=\"count_1\" y=\"72.78907\" x=\"41.82814\" stroke-linecap=\"null\" stroke-linejoin=\"null\" stroke-dasharray=\"null\" stroke-width=\"0\" stroke=\"#000000\" fill=\"#000000\">0</text>\n  </g>\n  <g id=\"STN20\">\n   <rect id=\"svg_24\" class=\"background\" fill=\"url(#manual)\" x=\"82.65625\" y=\"28.83594\" width=\"77.25\" height=\"70.625\" rx=\"10\" ry=\"10\" stroke=\"#000000\"/>\n   <text id=\"svg_25\" class=\"name\" fill=\"#ffffff\" stroke-width=\"0\" x=\"150.36079\" y=\"62.62215\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Station 20</text>\n   <text id=\"svg_26\" class=\"status\" fill=\"#ffffff\" stroke-width=\"0\" x=\"150.90912\" y=\"175.82812\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Manual</text>\n   <text id=\"svg_27\" class=\"count\" xml:space=\"preserve\" text-anchor=\"middle\" font-family=\"Sans-serif\" font-size=\"24\" y=\"72.78907\" x=\"121.28127\" stroke-linecap=\"null\" stroke-linejoin=\"null\" stroke-dasharray=\"null\" stroke-width=\"0\" stroke=\"#000000\" fill=\"#000000\">0</text>\n  </g>\n  <g id=\"STN30\">\n   <rect id=\"svg_29\" class=\"background\" fill=\"url(#manual)\" x=\"161.54688\" y=\"28.83594\" width=\"77.25\" height=\"70.625\" rx=\"10\" ry=\"10\" stroke=\"#000000\"/>\n   <text id=\"svg_30\" class=\"name\" fill=\"#ffffff\" stroke-width=\"0\" x=\"339.30151\" y=\"62.62216\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Station 30</text>\n   <text id=\"svg_31\" class=\"status\" fill=\"#ffffff\" stroke-width=\"0\" x=\"339.84985\" y=\"175.82813\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Manual</text>\n   <text id=\"svg_32\" class=\"count\" xml:space=\"preserve\" text-anchor=\"middle\" font-family=\"Sans-serif\" font-size=\"24\" y=\"72.78907\" x=\"200.17189\" stroke-linecap=\"null\" stroke-linejoin=\"null\" stroke-dasharray=\"null\" stroke-width=\"0\" stroke=\"#000000\" fill=\"#000000\">0</text>\n  </g>\n  <g id=\"STN40\">\n   <rect id=\"svg_3\" class=\"background\" fill=\"url(#manual)\" x=\"240.43751\" y=\"28.83594\" width=\"77.25\" height=\"70.625\" rx=\"10\" ry=\"10\" stroke=\"#000000\"/>\n   <text id=\"svg_4\" class=\"name\" fill=\"#ffffff\" stroke-width=\"0\" x=\"528.24226\" y=\"62.62216\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Station 40</text>\n   <text id=\"svg_6\" class=\"status\" fill=\"#ffffff\" stroke-width=\"0\" x=\"528.7906\" y=\"175.82813\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Manual</text>\n   <text id=\"svg_7\" class=\"count\" xml:space=\"preserve\" text-anchor=\"middle\" font-family=\"Sans-serif\" font-size=\"24\" y=\"72.78907\" x=\"279.06252\" stroke-linecap=\"null\" stroke-linejoin=\"null\" stroke-dasharray=\"null\" stroke-width=\"0\" stroke=\"#000000\" fill=\"#000000\">0</text>\n  </g>\n  <g id=\"STN50\">\n   <rect id=\"svg_57\" class=\"background\" fill=\"url(#manual)\" x=\"3.20313\" y=\"102.24219\" width=\"77.25\" height=\"70.625\" rx=\"10\" ry=\"10\" stroke=\"#000000\"/>\n   <text id=\"svg_58\" class=\"name\" fill=\"#ffffff\" stroke-width=\"0\" x=\"-39.92712\" y=\"222.78125\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Station 50</text>\n   <text id=\"svg_59\" class=\"status\" fill=\"#ffffff\" stroke-width=\"0\" x=\"-39.37879\" y=\"335.98722\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Manual</text>\n   <text id=\"svg_60\" class=\"count\" xml:space=\"preserve\" text-anchor=\"middle\" font-family=\"Sans-serif\" font-size=\"24\" y=\"146.19532\" x=\"41.82814\" stroke-linecap=\"null\" stroke-linejoin=\"null\" stroke-dasharray=\"null\" stroke-width=\"0\" stroke=\"#000000\" fill=\"#000000\">0</text>\n  </g>\n  <g id=\"STN60\">\n   <rect id=\"svg_62\" class=\"background\" fill=\"url(#manual)\" x=\"82.65625\" y=\"102.24219\" width=\"77.25\" height=\"70.625\" rx=\"10\" ry=\"10\" stroke=\"#000000\"/>\n   <text id=\"svg_63\" class=\"name\" fill=\"#ffffff\" stroke-width=\"0\" x=\"150.36079\" y=\"222.78124\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Station 60</text>\n   <text id=\"svg_64\" class=\"status\" fill=\"#ffffff\" stroke-width=\"0\" x=\"150.90912\" y=\"335.98721\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Manual</text>\n   <text id=\"svg_65\" class=\"count\" xml:space=\"preserve\" text-anchor=\"middle\" font-family=\"Sans-serif\" font-size=\"24\" y=\"146.19532\" x=\"121.28127\" stroke-linecap=\"null\" stroke-linejoin=\"null\" stroke-dasharray=\"null\" stroke-width=\"0\" stroke=\"#000000\" fill=\"#000000\">0</text>\n  </g>\n  <g id=\"STN70\">\n   <rect id=\"svg_67\" class=\"background\" fill=\"url(#manual)\" x=\"161.54688\" y=\"102.24219\" width=\"77.25\" height=\"70.625\" rx=\"10\" ry=\"10\" stroke=\"#000000\"/>\n   <text id=\"svg_68\" class=\"name\" fill=\"#ffffff\" stroke-width=\"0\" x=\"339.30151\" y=\"222.78124\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Station 70</text>\n   <text id=\"svg_69\" class=\"status\" fill=\"#ffffff\" stroke-width=\"0\" x=\"339.84985\" y=\"335.98721\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Manual</text>\n   <text id=\"svg_70\" class=\"count\" xml:space=\"preserve\" text-anchor=\"middle\" font-family=\"Sans-serif\" font-size=\"24\" y=\"146.19532\" x=\"200.17189\" stroke-linecap=\"null\" stroke-linejoin=\"null\" stroke-dasharray=\"null\" stroke-width=\"0\" stroke=\"#000000\" fill=\"#000000\">0</text>\n  </g>\n  <g id=\"STN80\">\n   <rect id=\"svg_72\" class=\"background\" fill=\"url(#manual)\" x=\"240.43751\" y=\"102.24219\" width=\"77.25\" height=\"70.625\" rx=\"10\" ry=\"10\" stroke=\"#000000\"/>\n   <text id=\"svg_73\" class=\"name\" fill=\"#ffffff\" stroke-width=\"0\" x=\"528.24226\" y=\"222.78124\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Station 80</text>\n   <text id=\"svg_74\" class=\"status\" fill=\"#ffffff\" stroke-width=\"0\" x=\"528.7906\" y=\"335.98721\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Manual</text>\n   <text id=\"svg_75\" class=\"count\" xml:space=\"preserve\" text-anchor=\"middle\" font-family=\"Sans-serif\" font-size=\"24\" y=\"146.19532\" x=\"279.06252\" stroke-linecap=\"null\" stroke-linejoin=\"null\" stroke-dasharray=\"null\" stroke-width=\"0\" stroke=\"#000000\" fill=\"#000000\">0</text>\n  </g>\n  <g id=\"MAIN_HEADER\"  class=\"header_bar\">\n   <rect stroke=\"#000000\" class=\"background\" fill=\"url(#manual)\" x=\"0\" y=\"0\" width=\"320\" height=\"22\" id=\"svg_14\"/>\n   <text class=\"name\" fill=\"#ffffff\" stroke-width=\"0\" x=\"237.32815\" y=\"5.23012\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\" id=\"svg_15\">Main Overview</text>\n  </g>\n </g>\n \n <g id=\"page2\" display=\"none\">\n  <title>Station 10 Overview</title>\n  <g id=\"STN10_HEADER\" class=\"header_bar\">\n   <rect stroke=\"#000000\" class=\"background\" fill=\"url(#manual)\" x=\"0\" y=\"0\" width=\"320\" height=\"22\"/>\n   <text class=\"name\" fill=\"#ffffff\" stroke-width=\"0\" x=\"236.24292\" y=\"6.73012\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Station 10</text>\n  </g>\n  <g id=\"STN10_Air\">\n   <rect class=\"background\" fill=\"url(#auto)\" x=\"119.51562\" y=\"61.65625\" width=\"77.25\" height=\"70.625\" rx=\"10\" ry=\"10\" stroke=\"#000000\"/>\n   <text class=\"status\" fill=\"#ffffff\" stroke-width=\"0\" x=\"236.15508\" y=\"186.68609\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Air Supply</text>\n  </g>\n  <g id=\"STN10_Water\">\n   <rect class=\"background\" fill=\"url(#auto)\" x=\"208.51562\" y=\"61.65625\" width=\"77.25\" height=\"70.625\" rx=\"10\" ry=\"10\" stroke=\"#000000\"/>\n   <text class=\"status\" fill=\"#ffffff\" stroke-width=\"0\" x=\"449.30747\" y=\"186.68609\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Water Supply</text>\n  </g>\n  <g id=\"STN10_ControlPower\">\n   <rect class=\"background\" fill=\"url(#fault)\" x=\"32.51562\" y=\"61.65625\" width=\"77.25\" height=\"70.625\" rx=\"10\" ry=\"10\" stroke=\"#000000\"/>\n   <text class=\"status\" fill=\"#ffffff\" stroke-width=\"0\" x=\"27.79263\" y=\"186.68609\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Control Power</text>\n  </g>\n  <g id=\"STN10_home_button\">\n    <rect stroke=\"#000000\" class=\"home_button\" fill=\"#333333\" x=\"215.375\" y=\"147.6875\" width=\"77.25\" height=\"19.625\" rx=\"10\" ry=\"10\"/>\n    <text class=\"status\" fill=\"#ffffff\" stroke-width=\"0\" x=\"469.9828\" y=\"321.04688\" font-size=\"24\" font-family=\"Sans-serif\" text-anchor=\"middle\" xml:space=\"preserve\" font-weight=\"bold\" transform=\"matrix(0.41754164704216323,0,0,0.4583333432674408,58.471179716401295,13.575520584359765) \" stroke=\"#ffffff\">Close</text>\n  </g>\n </g>\n</svg>","clickableShapes":[{"targetId":"#STN10","action":"click","payload":"[{\"command\":\"update_attribute\",\"selector\":\"#page2\",\"attributeName\":\"display\",\"attributeValue\":\"inline\"},{\"command\":\"update_attribute\",\"selector\":\"#page1\",\"attributeName\":\"display\",\"attributeValue\":\"none\"}]","payloadType":"json","topic":"loopback"},{"targetId":"#STN10_home_button","action":"click","payload":"[{\"command\":\"update_attribute\",\"selector\":\"#page2\",\"attributeName\":\"display\",\"attributeValue\":\"none\"},{\"command\":\"update_attribute\",\"selector\":\"#page1\",\"attributeName\":\"display\",\"attributeValue\":\"inline\"}]","payloadType":"json","topic":"loopback"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"selectorAsElementId":true,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","panEnabled":false,"zoomEnabled":false,"controlIconsEnabled":false,"dblClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"","x":660,"y":260,"wires":[["642ffcf5.ac7f84","a3e31b33.d38b18"]]},{"id":"8b3201a6.95a29","type":"function","z":"25c59cf6.49d884","name":"random count generator","func":"function randomInc(station, delayms){\n\n    setTimeout(function () {\n        var state = flow.get(\"state\") || {};\n        if(!state[station]){\n            state[station] = {count: 0}    \n        }\n        if(state[station].mode == \"auto\"){\n            state[station].count += 1;\n            flow.set(\"state\",state)\n            var newmsg = {\n                payload:{\n                    \"command\": \"update_text\",\n                    selector: \"#\" + station + \" > .count\",\n                    textContent: state[station].count\n                }\n            }\n            node.send(newmsg);\n        }\n        \n    }, delayms-5);\n}\n\nvar stns = [\"STN10\",\"STN20\",\"STN30\",\"STN40\",\"STN50\",\"STN60\",\"STN70\",\"STN80\"]\nvar i = 0;\nfor(i=0; i<stns.length; i++){\n    randomInc(stns[i], Math.floor(Math.random() * 1000) )\n}\n\n    \n//return msg;","outputs":1,"noerr":0,"x":430,"y":300,"wires":[["e11e94bf.6d1e08"]]},{"id":"d6c8df79.f235c","type":"inject","z":"25c59cf6.49d884","name":"","repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":230,"y":300,"wires":[["8b3201a6.95a29"]]},{"id":"c86f7b2b.62a6f8","type":"ui_template","z":"25c59cf6.49d884","group":"7629d4bc.d2960c","name":"Click header bar of SVG for full screen","order":1,"width":0,"height":0,"format":"<script>\n    \n    /* When the openFullscreen() function is executed, open the video in fullscreen.\n    Note that we must include prefixes for different browsers, as they don't support the requestFullscreen method yet */\n    function openFullscreen() {\n        debugger\n        /* Get the element you want displayed in fullscreen mode (a video in this example): */\n        var elem = document.getElementById(\"svghmi\");\n        if (elem.requestFullscreen) {\n            elem.requestFullscreen();\n        } else if (elem.mozRequestFullScreen) { /* Firefox */\n            elem.mozRequestFullScreen();\n        } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */\n            elem.webkitRequestFullscreen();\n        } else if (elem.msRequestFullscreen) { /* IE/Edge */\n            elem.msRequestFullscreen();\n        }\n    }\n    \n    //this seems to be too quick\n    $(\".header_bar\").click(openFullscreen);\n    \n    // hack / catch all - something has to work\n    setTimeout(function(){\n        debugger\n        $(\".header_bar\").click(openFullscreen);\n    }, 4000)\n    \n        \n    $(document).ready(function(){\n        //this doesnt seem to work!\n        $('#svghmi').on('load', function() {\n            $(\".header_bar\").click(openFullscreen);\n        }, true);\n        \n        //this seems to be too quick\n        $(\".header_bar\").click(openFullscreen);\n        \n        // hack / catch all - something has to work\n        setTimeout(function(){\n            debugger\n            $(\".header_bar\").click(openFullscreen);\n        }, 2000)\n    })\n\n</script>\n \n \n ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":470,"y":180,"wires":[[]]},{"id":"642ffcf5.ac7f84","type":"debug","z":"25c59cf6.49d884","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":850,"y":260,"wires":[]},{"id":"6b10b56.dd0454c","type":"function","z":"25c59cf6.49d884","name":"init  mode generator","func":"let stations = [\"STN10\",\"STN20\",\"STN30\",\"STN40\",\"STN50\",\"STN60\",\"STN70\",\"STN80\"];\nlet state = flow.get(\"state\") || {}\n\nfunction buildUpdates(station, state){\n    if(isNaN(state.count)){\n        state.count = 0;\n    }\n    msgData.push({\n                \"command\": \"update_attribute\",\n                \"selector\": \"#\" + station + \" > .background\",\n                \"attributeName\": \"fill\",\n                \"attributeValue\": \"url('#\" + (state.mode || \"manual\") + \"')\"\n            })\n    msgData.push({\n                \"command\": \"update_text\",\n                selector: \"#\" + station + \" > .status\",\n                textContent: state.status || \"manual\"\n            })\n    msgData.push({\n                \"command\": \"update_text\",\n                selector: \"#\" + station + \" > .count\",\n                textContent: state.count || 0\n            })\n}\nlet msgData = [];\n\n[\"STN10\",\"STN20\",\"STN30\",\"STN40\",\"STN50\",\"STN60\",\"STN70\",\"STN80\"].forEach(function(station){\n    if(!state[station]){\n        state[station] = {mode:\"manual\", status:\"manual\", count:0}    \n    }\n    buildUpdates(station, state[station]);\n})\n\nflow.set(\"state\",state)\nmsg.payload = msgData;\nreturn msg;","outputs":1,"noerr":0,"x":410,"y":220,"wires":[["e11e94bf.6d1e08","9b6a4a81.eb1048"]]},{"id":"dd18117f.30971","type":"inject","z":"25c59cf6.49d884","name":"","repeat":"","crontab":"","once":true,"onceDelay":"0.5","topic":"","payload":"","payloadType":"date","x":230,"y":220,"wires":[["6b10b56.dd0454c"]]},{"id":"9b6a4a81.eb1048","type":"debug","z":"25c59cf6.49d884","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":650,"y":220,"wires":[]},{"id":"dfa86333.d48f4","type":"ui_ui_control","z":"25c59cf6.49d884","name":"","x":240,"y":180,"wires":[["6b10b56.dd0454c"]]},{"id":"53051830.3b2278","type":"comment","z":"25c59cf6.49d884","name":"HMI Demo with fake data. Click Title bar to full screen, click Station 10 for page 2","info":"","x":420,"y":140,"wires":[]},{"id":"a51edf6.e3b712","type":"link out","z":"25c59cf6.49d884","name":"Loopback","links":["d6e2609e.198ad"],"x":955,"y":340,"wires":[]},{"id":"a3e31b33.d38b18","type":"switch","z":"25c59cf6.49d884","name":"loopback?","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"loopback","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":850,"y":340,"wires":[["a51edf6.e3b712"]]},{"id":"d6e2609e.198ad","type":"link in","z":"25c59cf6.49d884","name":"Loopback","links":["a51edf6.e3b712"],"x":480,"y":340,"wires":[["e11e94bf.6d1e08"]],"l":true},{"id":"7629d4bc.d2960c","type":"ui_group","z":"","name":"HMI","tab":"1700a06.300056","order":1,"disp":true,"width":"12","collapse":false},{"id":"1700a06.300056","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

In action...

2 Likes

this new one works like a charm @Steve-Mcl! Man all I hade to do was go do some yard work and 'poof' it is fixed :joy:

Don't tell my wife though :grin:

1 Like

Hey guys,
I have been working hard last evenings to prepare the 2.0 release. But is a LOT of work. The node has been very actively developed last year, so the readme/ info panel/wiki/import examples/... were not up to date anymore. And during updating those, I found other bugs which I needed to fix. We will get there, but not today :shushing_face:

So I'm glad Steve that you managed to fix that example...

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.