This repository was archived by the owner on Jan 17, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
Expand file tree
/
Copy pathflow.json
More file actions
1 lines (1 loc) · 10.2 KB
/
flow.json
File metadata and controls
1 lines (1 loc) · 10.2 KB
1
[{"id":"435211f1.bcadf","type":"websocket-listener","path":"/ws/rtchart","wholemsg":"false"},{"id":"191af3af.e6e50c","type":"template","name":"Real Time Chart v0.1 ","field":"payload","template":"<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <meta HTTP-EQUIV=\"CACHE-CONTROL\" CONTENT=\"NO-CACHE\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /> \n <meta name=\"apple-mobile-web-app-capable\" content=\"yes\" />\n <title>Real Time Chart v0.1</title>\n <link rel=\"stylesheet\" href=\"//code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css\" />\n <script src=\"//code.jquery.com/jquery-1.11.1.min.js\"></script>\n <script src=\"//code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js\"></script>\n \n <script src=\"//cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.4/highcharts.js\"></script>\n \n <script>//Node-Red mobi ui - LHG industrialinternet.co.uk\n\tconsole.log(\"NR Real Time Charts: v0.0.B\");\n\tvar schedule = null;\t\t\t\t// schedule Obj \n\tvar itemLookup = null; \t\t\t// pointer to current schedule event\n\tvar statusMsgDisplayed= false;\t// flag to stop msg disco effect\n\tvar prioritySet =false;\t\t \t// flag showing if high prio msg being displayed\n\tvar daiableWidgets = false; \n\tvar connected = false;\n \tvar chart; \n \t\n \tif(location.protocol==\"https:\"){\n\t\tvar wsUri=\"wss://\"+window.location.hostname+\":1880/ws/rtchart\";\n\t} else {\n\t\tvar wsUri=\"ws://\"+window.location.hostname+\":1880/ws/rtchart\";\n\t}\n\tvar ws=null;\n\n\tfunction wsConn() {\n\t\tws = new WebSocket(wsUri);\n\t\tws.onmessage = function(m) {\n\t\t\tconsole.log('< from-node-red:',m.data);\n\t\t\tif (typeof(m.data) === \"string\" && m. data !== null){\n\t\t\t\tvar msg =JSON.parse(m.data);\n\t\t\t\tvar ftc = msg.id.substring(0, 3);\n\t\t\t\tif(ftc==\"apt\"){chartAddPoint(msg.v);}\n\t\t\t\tif(ftc==\"sta\"){statusMsgDisplayed= false;setStatus(msg.v.stMsg,msg.v.dur,msg.v.pri);}\n\t\t\t\tif(ftc==\"ack\"){clearReq();}\n\t\t\t}\n\t\t}\n\t\tws.onopen = function() { \n\t\t\tstatusMsgDisplayed=false;\n\t\t\tif(daiableWidgets==true){enablePage();}\n\t\t\tsetStatus(\"Connected\",5,0); \n\t\t\tconnected = true;\n\t\t\tvar obj = {\"id\":\"init\",\"v\":document.cookie};\n\t\t\tgetRequest = JSON.stringify(obj); \t\n\t\t\tws.send(getRequest);\t\t\t// Request ui status from NR\n\t\t\tconsole.log(\"sent init requeset\");\n\t\t}\n\t\tws.onclose = function() {\n\t\t\tconsole.log('Node-RED connection closed: '+new Date().toUTCString()); \n\t\t\tconnected = false; \n\t\t\tws = null;\n\t\t\tsetStatus(\"No connection to server!\",0,1);\n\t\t\tif(daiableWidgets==false){disablePage();}\n\t\t\tsetTimeout(wsConn, 10000);\n\t\t}\t\n\t\tws.onerror = function(){\n\t\t\tconsole.log(\"connection error\");\n\t\t}\n\t}\n\twsConn(); \t\t\t\t\t// connect to Node-RED server\n\n\tfunction setStatus(msg,dur,pri){\t // show msg on status bar\n\t\tconsole.log(\"statusMsgDisplayed:\"+statusMsgDisplayed);\n\t\tif(statusMsgDisplayed== true){return};\n\t\tstatusMsgDisplayed=true;\n\t\tif(pri>0 && prioritySet == false ){\n\t\t\tprioritySet = true;\t\t\t\n\t\t\t$(\"#statusView\").toggleClass(\"statusViewAlert\"); // toggle ON\n\t\t} else if ( pri==0 && prioritySet == true) {\n\t\t\tprioritySet = false;\n\t\t\t$(\"#statusView\").toggleClass(\"statusViewAlert\"); // toggle Off\n\t\t}\n\t\t$(\"#statusView\").show();\n\t\t$(\"#statusView\").html(msg);\n\t\tdur = dur*1000;\n\t\tif(dur >0){\n\t\t\tsetTimeout(function(){$(\"#statusView\").hide(200);$(\"#statusView\").html(\"\"); statusMsgDisplayed= false;prioritySet=false;},dur)\n\t\t}\n\t}\n\t\n\tfunction disablePage(){\t\t\n\t\t$(\"[data-role=flipswitch]\").flipswitch( \"disable\" );\n\t\t//$(\"[data-role=range]\").disabled = true;\n\t\t$(\"[data-role=range]\").slider( \"option\", \"disabled\", true );\n\t\t$(\"[data-rel=popup]\").toggleClass(\"ui-disabled\");\n\t\tdaiableWidgets = true;\n\t}\n\tfunction enablePage(){\n\t\t$(\"[data-role=flipswitch]\").flipswitch( \"enable\" );\n\t\t$(\"[data-role=range]\").slider( \"option\", \"enabled\", true );\n\t\t$(\"[data-role=range]\").slider( \"enable\" );\n\t\t$(\"[data-rel=popup]\").toggleClass(\"ui-disabled\");\n\t\tdaiableWidgets = false;\n\t}\n\t\n\tfunction chartAddPoint(point) {\n\t\tvar series = chart.series[0],\n\t\tshift = series.data.length > 20;\t\t\t\t\t\t // shift if the series is longer than 20\n\t\tchart.series[0].addPoint(eval(point), true, shift); \t// add the point\n\t}\n\t\n\t$(function() {\n\t\tchart = new Highcharts.Chart({\n\t\t\tchart: {\n\t\t\t\trenderTo: 'container',\n\t\t\t\tdefaultSeriesType: 'spline',\n\t\t\n\t\t\t},\n\t\t\ttitle: {\n\t\t\t\ttext: 'Live random data'\n\t\t\t},\n\t\t\txAxis: {\n\t\t\t\ttype: 'datetime',\n\t\t\t\ttickPixelInterval: 150,\n\t\t\t\tmaxZoom: 20 * 1000\n\t\t\t},\n\t\t\tyAxis: {\n\t\t\t\tminPadding: 0.2,\n\t\t\t\tmaxPadding: 0.2,\n\t\t\t\ttitle: {\n\t\t\t\t\ttext: 'Value',\n\t\t\t\t\tmargin: 80\n\t\t\t\t}\n\t\t\t},\n\t\t\tseries: [{\n\t\t\t\tname: 'Random data',\n\t\t\t\tdata: []\n\t\t\t}]\n\t\t});\t\n\t});\n </script>\n <style>\n\t\t#c1, #c2 {background-color: #FFF !important;}\n \t\tdiv .ui-input-text {padding:0 .4em;} \n\t\t.valLable {float: left !important; min-width: 85px !important; margin-top:4px !important; padding: 0;}\n\t\t.valSmall {width:70px; height: 40px !important; float: left !important; margin-top:-12px !important;}\n\t\t.valMedium {width:156px; height: 40px !important; float: left !important; margin-top:-12px !important;}\n\t\t.valLarge {width:220px; height: 40px !important; float: left !important; margin-top:-12px !important;}\n\t\t.valHour {width:100px; height: 40px !important; float: left !important; margin-top:-12px !important;}\n\t\t.flipLable {float: left !important; min-width: 140px !important;}\n\t\t@media only screen and (min-width: 521px){\n\t\t\t#header1 {width: 1507px !important; margin:auto auto !important; position: relative !important; border:1px solid #cccccc;}\n\t\t\t#c1 {width: 1475px !important; min-height:500px !important; margin:auto auto !important; position: relative !important; border:1px solid #cccccc; border-top:0px;}\n\t\t\t#c2 {width: 1475px !important; min-height:500px !important; margin:auto auto !important; position: relative !important; border:1px solid #cccccc; border-top:0px;}\n\t\t\t.t1 {width: 1506px !important; margin:auto auto !important; position: relative !important; padding-right: 4px !important;}\n\t\t\t.flipLable {float: left !important; min-width: 320px !important;}\n\t\t\t.valMedium {width:330px; height: 40px !important; float: left !important; margin-top:-12px !important;}\n\t\t\t.sep {display: none !important;}\n\t\t}\t\n\t\t.alert {font-weight: bold; color: #FF6C01;}\n\t\t.smallin .ui-input-text {width: 200px !important; color:red;}\n\t\tlegend.h1lb {padding:0 0 0 0;}\n\t\t.statusView {width: 100% !important; margin:0px; position: relative !important; height:28px; padding:10px 0 0 0; background-color:#E9E9E9; font-weight:bold; -webkit-border-radius: 0.7em !important; border-radius: 0.7em; text-align:center; }\n\t\t.statusViewAlert {width: 100% !important; margin:0px; position: relative !important; height:28px; padding:10px 0 0 0; background-color:#F8B584 !important; font-weight:bold; -webkit-border-radius: 0.7em !important; border-radius: 0.7em; display:none; text-align:center; }\n\t\t.ui-flipswitch {\"border-radius: 2em !important; -webkit-border-radius: 2em !important; -moz-border-radius: 2em !important;}\n\t\t/* Active button */\n\t\t.ui-page-theme-a .ui-btn.ui-btn-active,html .ui-bar-a .ui-btn.ui-btn-active,html .ui-body-a .ui-btn.ui-btn-active,html body .ui-group-theme-a .ui-btn.ui-btn-active,html head + body .ui-btn.ui-btn-a.ui-btn-active,\n\t\t/* Active checkbox icon */\n\t\t.ui-page-theme-a .ui-checkbox-on:after,html .ui-bar-a .ui-checkbox-on:after,html .ui-body-a .ui-checkbox-on:after,html body .ui-group-theme-a .ui-checkbox-on:after,.ui-btn.ui-checkbox-on.ui-btn-a:after,\n\t\t/* Active flipswitch background */.ui-page-theme-a .ui-flipswitch-active,html .ui-bar-a .ui-flipswitch-active,html .ui-body-a .ui-flipswitch-active,html body .ui-group-theme-a .ui-flipswitch-active,\n\t\thtml body .ui-flipswitch.ui-bar-a.ui-flipswitch-active,\n\t\t/* Active slider track */\n\t\t.ui-page-theme-a .ui-slider-track .ui-btn-active,html .ui-bar-a .ui-slider-track .ui-btn-active,html .ui-body-a .ui-slider-track .ui-btn-active,html body .ui-group-theme-a .ui-slider-track .ui-btn-active,html body div.ui-slider-track.ui-body-a .ui-btn-active {\n\t\t\tbackground-color: \t\t#FF6C01 !important;\n\t\t\tborder-color:\t \t\t#FF6C01 !important;\n\t\t\tcolor: \t\t\t\t\t#fff /*{a-active-color}*/;\n\t\t\ttext-shadow: 0 /*{a-active-shadow-x}*/ 1px /*{a-active-shadow-y}*/ 0 /*{a-active-shadow-radius}*/ #005599 /*{a-active-shadow-color}*/;\n\t\t}\n </style>\n</head>\n<body>\n <!-- Home -->\n <div data-role=\"page\" id=\"noderedmobiui\">\n <div id=\"header1\" data-role=\"header\">\n <h3 style=\"color:#FF6C01\">Real Time Charts v0.1</h3>\n\t\t<a href=\"#\" title=\"reload\" class=\"ui-btn ui-shadow ui-corner-all ui-icon-refresh ui-btn-icon-notext ui-btn-inline\" id=\"b1\" >Reload</a>\t\n\t</div>\n\t\t<div id=\"c1\" class=\"ui-content\">\n\t\t\t<div id=\"statusView\" class=\"statusView\" style=\"display:none;\"></div>\t\t\n\t\t\t<div id=\"container\" style=\"width: 100%; margin-left:-5px;\"></div>\t\t\n\t\t</div>\n\t</div><!-- eof page -->\n </body>\n</html>","x":439,"y":130,"z":"9e7e63ac.6181a","wires":[["e50b9b00.1af468"]]},{"id":"e50b9b00.1af468","type":"http response","name":"rtchart","x":710,"y":129,"z":"9e7e63ac.6181a","wires":[]},{"id":"dd2a1c76.22d5e","type":"http in","name":"http-get-rtchart","url":"/rtchart","method":"get","x":187,"y":129,"z":"9e7e63ac.6181a","wires":[["191af3af.e6e50c"]]},{"id":"36fa76cd.c9058a","type":"inject","name":"update chart","topic":"","payload":"","payloadType":"date","repeat":"2","crontab":"","once":false,"x":200.142822265625,"y":183.4285888671875,"z":"9e7e63ac.6181a","wires":[["41bb698c.be4498"]]},{"id":"41bb698c.be4498","type":"function","name":"Real Time Chart","func":"var vr = Math.random()*42;\nif(vr > 50){vr = 50;}\nmsg.payload = {id:\"apt\", v:[msg.payload,vr]};\nreturn msg;","outputs":1,"x":452.142822265625,"y":185.4285888671875,"z":"9e7e63ac.6181a","wires":[["6c2cfe05.93d3"]]},{"id":"6c2cfe05.93d3","type":"websocket out","name":"ws-rtchart","server":"435211f1.bcadf","x":711,"y":184,"z":"9e7e63ac.6181a","wires":[]}]