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.
platform: macOS 10.14.6
Node-RED: v1.1.0
Node.js: v12.13.0
Safari, FireFox and Chrome all act the same way
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.
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...
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 
Don't tell my wife though 
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 
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.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy
