node-red-contrib-ui-svg
Version:
A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard
2 lines (1 loc) • 24.4 kB
JSON
[{"id":"db080335.91c06","type":"inject","z":"60ad596.8120ba8","name":"","topic":"","payload":"","payloadType":"date","repeat":"5","crontab":"","once":false,"onceDelay":0.1,"x":930,"y":580,"wires":[["d874352a.1495e8"]]},{"id":"d874352a.1495e8","type":"function","z":"60ad596.8120ba8","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":1130,"y":580,"wires":[["9ae97533.8f9bc8"]]},{"id":"9ae97533.8f9bc8","type":"ui_svg_graphics","z":"60ad596.8120ba8","group":"d634d288.20fb8","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":"page2","payloadType":"str","topic":"page2"},{"targetId":"STN10_home_button","action":"click","payload":"page1","payloadType":"str","topic":"page1"}],"smilAnimations":[{"id":"hide_page1","targetId":"page1","classValue":"","attributeName":"display","fromValue":"inline","toValue":"none","trigger":"cust","duration":"500","durationUnit":"ms","repeatCount":"1","end":"restore","delay":"1","delayUnit":"s","custom":"STN10.click; "},{"id":"show_page2","targetId":"page2","classValue":"","attributeName":"display","fromValue":"none","toValue":"inline","trigger":"cust","duration":"500","durationUnit":"ms","repeatCount":"1","end":"restore","delay":"1","delayUnit":"s","custom":"STN10.click; "},{"id":"hide_page2","targetId":"page2","classValue":"","attributeName":"display","fromValue":"inline","toValue":"none","trigger":"cust","duration":"500","durationUnit":"ms","repeatCount":"1","end":"restore","delay":"1","delayUnit":"s","custom":"STN10_home_button.click; "},{"id":"show_page1","targetId":"page1","classValue":"","attributeName":"display","fromValue":"none","toValue":"inline","trigger":"cust","duration":"500","durationUnit":"ms","repeatCount":"1","end":"restore","delay":"1","delayUnit":"s","custom":"STN10_home_button.click; "},{"id":"show_page1_copy","targetId":"page1","classValue":"","attributeName":"display","fromValue":"none","toValue":"inline","trigger":"cust","duration":"500","durationUnit":"ms","repeatCount":"1","end":"restore","delay":"1","delayUnit":"s","custom":"STN10_home_button.click; "}],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":1360,"y":580,"wires":[["16c10ad9.ea5c75"]]},{"id":"289594d4.e955ac","type":"function","z":"60ad596.8120ba8","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":1130,"y":620,"wires":[["9ae97533.8f9bc8"]]},{"id":"7e684998.ab7a48","type":"inject","z":"60ad596.8120ba8","name":"","topic":"","payload":"","payloadType":"date","repeat":"5","crontab":"","once":false,"onceDelay":0.1,"x":930,"y":620,"wires":[["289594d4.e955ac"]]},{"id":"429f0a6.a3e31f4","type":"ui_template","z":"60ad596.8120ba8","group":"d634d288.20fb8","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":1170,"y":500,"wires":[[]]},{"id":"16c10ad9.ea5c75","type":"debug","z":"60ad596.8120ba8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1550,"y":580,"wires":[]},{"id":"b30ed944.1945b8","type":"function","z":"60ad596.8120ba8","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":1110,"y":540,"wires":[["9ae97533.8f9bc8","9f176c0.9c6b298"]]},{"id":"e52caa81.e12af8","type":"inject","z":"60ad596.8120ba8","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":"0.5","x":930,"y":540,"wires":[["b30ed944.1945b8"]]},{"id":"9f176c0.9c6b298","type":"debug","z":"60ad596.8120ba8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1350,"y":540,"wires":[]},{"id":"358d15b3.6bf2aa","type":"ui_ui_control","z":"60ad596.8120ba8","name":"","x":940,"y":500,"wires":[["b30ed944.1945b8"]]},{"id":"e9f581ab.2a03a","type":"comment","z":"60ad596.8120ba8","name":"HMI Demo with fake data. Click Title bar to full screen, click Station 10 for page 2","info":"","x":1120,"y":460,"wires":[]},{"id":"d634d288.20fb8","type":"ui_group","z":"","name":"HMI","tab":"978a957f.bdd1b8","disp":true,"width":"12","collapse":false},{"id":"978a957f.bdd1b8","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]