Create temperature webpage with node red

BlackSoll
Posts: 31
Joined: Sat Jul 04, 2015 9:07 am

Create temperature webpage with node red

Postby BlackSoll » Wed Aug 12, 2015 8:57 am

What this on is doing is basically emulating 3 mqtt inputs, with options to see 2 different temperatures.
Send it over via websocket and also use a http request node to serve a webpage straight from nodered, styled and everything, but without use for a server.
The question is how to create 3 temperature sensors that reads my unipi and add them instead of the input nodes ?

I have tried with https://www.npmjs.com/package/node-red-contrib-owfs , http://flows.nodered.org/node/node-red-contrib-ds18b20 , http://flows.nodered.org/node/node-red- ... b20-sensor , but without success....

Some pictures:
Image
Image

Code: Select all

[{"id":"a770a428.588f58","type":"websocket-listener","path":"/admin/ws/temp","wholemsg":"false"},{"id":"40dd0e92.bf22f","type":"http in","name":"allow request on localhost:1880/temp","url":"/temp","method":"get","x":809,"y":578,"z":"cda8f31c.32571","wires":[["e2702220.1d8fe","baa85854.4557a8"]]},{"id":"e2702220.1d8fe","type":"template","name":"make HTTP response","field":"payload","template":"<!DOCTYPE HTML>\n<html>\n    <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Temp</title>\n\n    <!-- Bootstrap -->\n    <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\">\n\n    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\n    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->\n    <!--[if lt IE 9]>\n      <script src=\"https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js\"></script>\n      <script src=\"https://oss.maxcdn.com/respond/1.4.2/respond.min.js\"></script>\n    <![endif]-->\n    \n    </head>\n    <script type=\"text/javascript\">\n        var server = window.location.hostname;\n        var topics = {};\n        var wsUriC = \"ws://192.168.1.111:1880/admin/ws/temp\";\n        function wsConnectC() {\n            console.log(\"connect\",wsUriC);\n            var ws = new WebSocket(wsUriC);\n            ws.onmessage = function(msg) {\n               \n                var payloadObj = JSON.parse(msg.data);\n                console.log(payloadObj);\n\t\t\t\tvar output = \"\";\n\t\t\t\t\tfor (var property in payloadObj) {\n  \t\t\t\t\t\toutput += '<li class=\"list-group-item\"><strong>' +property + '</strong>' + ': ' + payloadObj[property]+'°C</li>';\n\t\t\t\t\t\t}\n                document.getElementById('messages').innerHTML = output;                                     \n              \n            }\n            ws.onopen = function() {\n                document.getElementById('status').innerHTML = \"<small>connected</small>\";\n                console.log(\"connected\");\n            }\n            ws.onclose = function() {\n                document.getElementById('status').innerHTML = \"not connected\";\n                setTimeout(wsConnectC,1000);\n            }\n        }\n    </script>\n    <body onload=\"wsConnectC();\" onunload=\"ws.disconnect;\">\n    <div class=\"container\">\n      <div class=\"panel panel-default\" margin: 15px;>\n  \t\t\t\t\t<div class=\"panel-heading\"><h3>Temperaturer</h3></div>\n       \t\t\t\t\t <div class=\"panel-body\" id=\"messages\">\n       \t\t\t\t\t <ul class=\"list-item\" id=\"messages\">\n       \t\t\t\t\t </ul>\n       \t\t\t\t\t \n       \t\t\t\t\t </div>\n        \t\t <div class=\"panel-footer\" id=\"status\"><small>disconnected</small></div>\n      </div>  \t\n     </div> \n    <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js\"></script>  \n    \n    </body>\n</html>","x":1156,"y":513,"z":"cda8f31c.32571","wires":[["ee850758.117af8"]]},{"id":"ee850758.117af8","type":"http response","name":"","x":1267,"y":439,"z":"cda8f31c.32571","wires":[]},{"id":"4f43f8f8.b0bc08","type":"websocket out","name":"","server":"a770a428.588f58","x":1226,"y":389,"z":"cda8f31c.32571","wires":[]},{"id":"77a6395f.8859c8","type":"function","name":"set topic Bedroom","func":"msg.topic=\"Bedroom\";\nreturn msg;","outputs":1,"x":298,"y":237,"z":"cda8f31c.32571","wires":[["e7a54f35.185ab"]]},{"id":"69bbfd9e.964404","type":"function","name":"set topic Kitchen","func":"msg.topic=\"Kitchen\";\nreturn msg;","outputs":1,"x":304,"y":319,"z":"cda8f31c.32571","wires":[["e7a54f35.185ab"]]},{"id":"e37062a.f1c8fa","type":"debug","name":"","active":true,"console":"false","complete":"false","x":1105,"y":238,"z":"cda8f31c.32571","wires":[]},{"id":"208f83d.fdf707c","type":"inject","name":"","topic":"","payload":"22.6","payloadType":"string","repeat":"","crontab":"","once":false,"x":109,"y":298,"z":"cda8f31c.32571","wires":[["69bbfd9e.964404"]]},{"id":"b9972cd4.4668d","type":"inject","name":"","topic":"","payload":"23.8","payloadType":"string","repeat":"","crontab":"","once":false,"x":109,"y":203,"z":"cda8f31c.32571","wires":[["77a6395f.8859c8"]]},{"id":"4ba6c90c.b45938","type":"inject","name":"","topic":"","payload":"24.7","payloadType":"string","repeat":"","crontab":"","once":false,"x":106,"y":409,"z":"cda8f31c.32571","wires":[["9d9cbe26.62634"]]},{"id":"e7a54f35.185ab","type":"function","name":"Add together all payloads and send over as JSON","func":"context.temp = context.temp || new Object();\n\nif (msg.payload == \"\") {\n\tmsg2 = new Object();\n\tmsg2 = context.temp;\n\tmsg.payload=JSON.stringify(msg2);\n\t} else {\n\tcontext.temp[msg.topic] = msg.payload;        \n\tmsg2 = new Object();\n\tmsg2 = context.temp;\n\tmsg.payload=JSON.stringify(msg2);\n\t};\n\n\treturn msg;\n\n","outputs":1,"x":847,"y":296,"z":"cda8f31c.32571","wires":[["e37062a.f1c8fa","4f43f8f8.b0bc08"]]},{"id":"9d9cbe26.62634","type":"function","name":"set topic Basement","func":"msg.topic=\"Basement\";\nreturn msg;","outputs":1,"x":310,"y":388,"z":"cda8f31c.32571","wires":[["e7a54f35.185ab"]]},{"id":"3cb28a44.c34d76","type":"inject","name":"","topic":"","payload":"22.6","payloadType":"string","repeat":"","crontab":"","once":false,"x":110,"y":240,"z":"cda8f31c.32571","wires":[["77a6395f.8859c8"]]},{"id":"89646127.769ba","type":"inject","name":"","topic":"","payload":"24.7","payloadType":"string","repeat":"","crontab":"","once":false,"x":107,"y":331,"z":"cda8f31c.32571","wires":[["69bbfd9e.964404"]]},{"id":"dbd016fe.242fe8","type":"inject","name":"","topic":"","payload":"23.8","payloadType":"string","repeat":"","crontab":"","once":false,"x":106,"y":376,"z":"cda8f31c.32571","wires":[["9d9cbe26.62634"]]},{"id":"baa85854.4557a8","type":"function","name":"send empty payload to send last known temperatures","func":"msg.payload=\"\";\nreturn msg;","outputs":1,"x":749,"y":528,"z":"cda8f31c.32571","wires":[["5a9cc578.a5633c"]]},{"id":"5a9cc578.a5633c","type":"delay","name":"Delay so websocket is started before sending","pauseType":"delay","timeout":"2","timeoutUnits":"seconds","rate":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":776,"y":487,"z":"cda8f31c.32571","wires":[["e7a54f35.185ab"]]}]
tomas_hora
Site Admin
Posts: 298
Joined: Wed Oct 29, 2014 9:56 am

Re: Create temperature webpage with node red

Postby tomas_hora » Thu Aug 13, 2015 3:24 pm

Nice work!

What you need is to connect to the Evoks websocket and parse its messages. Here is a quick example:

Code: Select all

[{"id":"59462dd4.a6b9d4","type":"websocket-client","path":"ws://127.0.0.1/ws","wholemsg":"false"},{"id":"e321a7e4.1cde58","type":"websocket in","name":"","server":"","client":"59462dd4.a6b9d4","x":132,"y":129,"z":"92749a8.f6d8b68","wires":[["6c5138c7.93aec8"]]},{"id":"6c5138c7.93aec8","type":"function","name":"map_sensors","func":"var status = JSON.parse(msg.payload);\nif (status.dev == \"temp\" && status.circuit==\"285116D9060000A4\") {\n    msg.topic=\"Bedroom\";\n    msg.payload=status.value.toString();\n\treturn msg;\n}","outputs":1,"noerr":0,"x":406.5,"y":130,"z":"92749a8.f6d8b68","wires":[["bf716bbe.408e98","3a80109d.c57ff"]]}]


Just connect the output of the 'map_sensors' function node to the 'Add together all payloads and send over as JSON' function node.
BlackSoll
Posts: 31
Joined: Sat Jul 04, 2015 9:07 am

Re: Create temperature webpage with node red

Postby BlackSoll » Fri Aug 14, 2015 8:01 am

It is working great ! Thanks a lot for the help !
tomas_hora
Site Admin
Posts: 298
Joined: Wed Oct 29, 2014 9:56 am

Re: Create temperature webpage with node red

Postby tomas_hora » Fri Aug 14, 2015 10:22 am

You are welcome :) It would be great if you share your nodered project here once it is ready.
jnapolit
Posts: 1
Joined: Thu Jul 21, 2016 4:38 pm

Re: Create temperature webpage with node red

Postby jnapolit » Thu Jul 21, 2016 4:40 pm

Hi! I looked over your flow and this is exactly what I am trying to do! If you could post your final flow that would be amazing. Really struggling over here. Thanks
BlackSoll
Posts: 31
Joined: Sat Jul 04, 2015 9:07 am

Re: Create temperature webpage with node red

Postby BlackSoll » Fri Jul 22, 2016 2:11 pm

Here is an example of the flow with Tomas flow as well.
You must edit the nodes to match with your installation. My evok listens at port 8181 so you must edit that also edit make http responce node with your own ip installation and the nodes for temp sensors..............

Select all and import it to nodered ! ;) After edit, visit http:// your_unipi_ip:1880/temp and see the temperature page. You must wait a few seconds until evok reads the sensors. Just refresh the page.

Code: Select all

[{"id":"348bbeef.fe7752","type":"websocket-listener","path":"/admin/ws/temp","wholemsg":"false"},{"id":"fca23e4f.a8ce2","type":"websocket-client","z":"","path":"ws://127.0.0.1:8181/ws","wholemsg":"false"},{"id":"7b46b282.7c3d4c","type":"websocket out","z":"4505aa70.04b544","name":"","server":"","client":"fca23e4f.a8ce2","x":621,"y":57,"wires":[]},{"id":"235e84c1.5908bc","type":"inject","z":"4505aa70.04b544","name":"R1 ON","topic":"","payload":"{\"dev\":\"relay\", \"circuit\":\"1\", \"value\":\"1\"}","payloadType":"string","repeat":"","crontab":"","once":false,"x":315,"y":72,"wires":[["7b46b282.7c3d4c"]]},{"id":"e7fe6581.4261f8","type":"inject","z":"4505aa70.04b544","name":"R1 OFF","topic":"","payload":"{\"dev\":\"relay\", \"circuit\":\"1\", \"value\":\"0\"}","payloadType":"string","repeat":"","crontab":"","once":false,"x":308,"y":116,"wires":[["7b46b282.7c3d4c"]]},{"id":"aa9371be.e0d55","type":"inject","z":"4505aa70.04b544","name":"AO set 5V a","topic":"","payload":"{\"dev\":\"ao\", \"circuit\":\"1\", \"value\":\"5\"}","payloadType":"string","repeat":"","crontab":"","once":false,"x":293,"y":27,"wires":[["7b46b282.7c3d4c"]]},{"id":"97e446ec.817df8","type":"websocket in","z":"4505aa70.04b544","name":"","server":"","client":"fca23e4f.a8ce2","x":105,"y":198,"wires":[["7218830.9bb6d7c","6b66ea3a.2589b4","12af52a9.85b71d","3f1016b9.ceee9a","d97ae6ba.727c78","c6ef55a5.4e3838"]]},{"id":"7218830.9bb6d7c","type":"debug","z":"4505aa70.04b544","name":"","active":true,"console":"false","complete":"payload","x":377,"y":288,"wires":[]},{"id":"6b66ea3a.2589b4","type":"function","z":"4505aa70.04b544","name":"IN 1-7 -> RELAY 1-7","func":"var status = JSON.parse(msg.payload);\nvar msg = {};\nif (status.dev == \"input\" && status.circuit<8) {\n\t//leave the relay 8 to the temp control node\n\tif (status.value == 0) {\n\t\tmsg.payload = {\"dev\":\"relay\", \"circuit\":\"\", \"value\":\"0\"};\n\t\tmsg.payload[\"circuit\"] = status.circuit;\n\t}\n\telse {\n\t\tmsg.payload = {\"dev\":\"relay\", \"circuit\":\"\", \"value\":\"1\"};\n\t\tmsg.payload[\"circuit\"] = status.circuit;\n\t}\n\treturn msg;\n}\nelse return;\n","outputs":1,"x":364,"y":178,"wires":[["7b46b282.7c3d4c"]]},{"id":"12af52a9.85b71d","type":"function","z":"4505aa70.04b544","name":"Temp >= 26 -> R8 On","func":"var status = JSON.parse(msg.payload);\nvar newMsg = {};\nif (status.dev == \"temp\" && status.address==\"28C70460070000F1\") {\n\tnewMsg.payload = {\"dev\":\"relay\", \"circuit\":\"8\"}\n\tif (status.value>=26) newMsg.payload[\"value\"]=1;\n\telse newMsg.payload[\"value\"]=0;\n\treturn newMsg;\n}\nelse return;","outputs":1,"noerr":0,"x":367.5,"y":222,"wires":[["7b46b282.7c3d4c"]]},{"id":"490890a6.d198a","type":"http in","z":"4505aa70.04b544","name":"allow request on localhost:1880/temp","url":"/temp","method":"get","x":526,"y":708,"wires":[["69116356.458b4c","5f32dd6.45a9124"]]},{"id":"69116356.458b4c","type":"template","z":"4505aa70.04b544","name":"make HTTP response","field":"payload","fieldType":"msg","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n    <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Temp</title>\n\n    <!-- Bootstrap -->\n    <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\">\n\n    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\n    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->\n    <!--[if lt IE 9]>\n      <script src=\"https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js\"></script>\n      <script src=\"https://oss.maxcdn.com/respond/1.4.2/respond.min.js\"></script>\n    <![endif]-->\n    \n    </head>\n    <script type=\"text/javascript\">\n        var server = window.location.hostname;\n        var topics = {};\n        var wsUriC = \"ws://192.168.1.79:1880/admin/ws/temp\";\n        function wsConnectC() {\n            console.log(\"connect\",wsUriC);\n            var ws = new WebSocket(wsUriC);\n            ws.onmessage = function(msg) {\n               \n                var payloadObj = JSON.parse(msg.data);\n                console.log(payloadObj);\n\t\t\t\tvar output = \"\";\n\t\t\t\t\tfor (var property in payloadObj) {\n  \t\t\t\t\t\toutput += '<li class=\"list-group-item\"><strong>' +property + '</strong>' + ': ' + payloadObj[property]+'°C</li>';\n\t\t\t\t\t\t}\n                document.getElementById('messages').innerHTML = output;                                     \n              \n            }\n            ws.onopen = function() {\n                document.getElementById('status').innerHTML = \"<small>connected</small>\";\n                console.log(\"connected\");\n            }\n            ws.onclose = function() {\n                document.getElementById('status').innerHTML = \"not connected\";\n                setTimeout(wsConnectC,1000);\n            }\n        }\n    </script>\n    <body onload=\"wsConnectC();\" onunload=\"ws.disconnect;\">\n    <div class=\"container\">\n      <div class=\"panel panel-default\" margin: 15px;>\n  \t\t\t\t\t<div class=\"panel-heading\"><h3>Temperature Page</h3></div>\n       \t\t\t\t\t <div class=\"panel-body\" id=\"messages\">\n       \t\t\t\t\t <ul class=\"list-item\" id=\"messages\">\n       \t\t\t\t\t </ul>\n       \t\t\t\t\t \n       \t\t\t\t\t </div>\n        \t\t <div class=\"panel-footer\" id=\"status\"><small>disconnected</small></div>\n      </div>  \t\n     </div> \n    <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js\"></script>  \n    \n    </body>\n</html>","x":585,"y":792,"wires":[["66bd018b.be7e7"]]},{"id":"66bd018b.be7e7","type":"http response","z":"4505aa70.04b544","name":"","x":844,"y":792,"wires":[]},{"id":"672b0cd2.571414","type":"websocket out","z":"4505aa70.04b544","name":"","server":"348bbeef.fe7752","x":1167,"y":531,"wires":[]},{"id":"2435b548.02275a","type":"function","z":"4505aa70.04b544","name":"set topic Bedroom","func":"msg.topic=\"Bedroom\";\nreturn msg;","outputs":1,"x":588,"y":376,"wires":[["5a48d307.8e9f4c"]]},{"id":"1baeb6cd.95a5c9","type":"function","z":"4505aa70.04b544","name":"set topic Kitchen","func":"msg.topic=\"Kitchen\";\nreturn msg;","outputs":1,"x":588,"y":430,"wires":[["5a48d307.8e9f4c"]]},{"id":"e2ce9dd9.58d24","type":"debug","z":"4505aa70.04b544","name":"","active":true,"console":"false","complete":"false","x":1159,"y":475,"wires":[]},{"id":"5a48d307.8e9f4c","type":"function","z":"4505aa70.04b544","name":"Add together all payloads and send over as JSON","func":"context.temp = context.temp || new Object();\n\nif (msg.payload == \"\") {\n\tmsg2 = new Object();\n\tmsg2 = context.temp;\n\tmsg.payload=JSON.stringify(msg2);\n\t} else {\n\tcontext.temp[msg.topic] = msg.payload;        \n\tmsg2 = new Object();\n\tmsg2 = context.temp;\n\tmsg.payload=JSON.stringify(msg2);\n\t};\n\n\treturn msg;\n\n","outputs":1,"x":992,"y":420,"wires":[["e2ce9dd9.58d24","672b0cd2.571414"]]},{"id":"e00c33f0.a4ca6","type":"function","z":"4505aa70.04b544","name":"set topic Basement","func":"msg.topic=\"Basement\";\nreturn msg;","outputs":1,"x":589,"y":486,"wires":[["5a48d307.8e9f4c"]]},{"id":"5f32dd6.45a9124","type":"function","z":"4505aa70.04b544","name":"send empty payload to send last known temperatures","func":"msg.payload=\"\";\nreturn msg;","outputs":1,"x":515,"y":634,"wires":[["6f707012.a69b3"]]},{"id":"6f707012.a69b3","type":"delay","z":"4505aa70.04b544","name":"Delay so websocket is started before sending","pauseType":"delay","timeout":"2","timeoutUnits":"seconds","rate":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":512,"y":554,"wires":[["5a48d307.8e9f4c"]]},{"id":"3f1016b9.ceee9a","type":"function","z":"4505aa70.04b544","name":"map_sensors","func":"var status = JSON.parse(msg.payload);\nif (status.dev == \"temp\" && status.circuit==\"28CB515F07000019\") {\n    msg.topic=\"Bedroom\";\n    msg.payload=status.value.toString();\n\treturn msg;\n}","outputs":1,"noerr":0,"x":380.5,"y":376,"wires":[["2435b548.02275a"]]},{"id":"d97ae6ba.727c78","type":"function","z":"4505aa70.04b544","name":"map_sensors","func":"var status = JSON.parse(msg.payload);\nif (status.dev == \"temp\" && status.circuit==\"28A94860070000E9\") {\n    msg.topic=\"Kitchen\";\n    msg.payload=status.value.toString();\n\treturn msg;\n}","outputs":1,"noerr":0,"x":386,"y":430,"wires":[["1baeb6cd.95a5c9"]]},{"id":"c6ef55a5.4e3838","type":"function","z":"4505aa70.04b544","name":"map_sensors","func":"var status = JSON.parse(msg.payload);\nif (status.dev == \"temp\" && status.circuit==\"28CD2460070000C6\") {\n    msg.topic=\"Basement\";\n    msg.payload=status.value.toString();\n\treturn msg;\n}","outputs":1,"noerr":0,"x":389,"y":486,"wires":[["e00c33f0.a4ca6"]]}]

Return to “General discussion”

Who is online

Users browsing this forum: No registered users and 2 guests