Search code examples
javascripthtmljsonnode-red

Visualization sensor data in web page Node Red


I am working with TI Sensortag and Node red. I store the values from the accelerometer in a json-db dataIn. Then I want to visualize the last acceleration value in a web page (via a get request).

I tried to write my {{msg.payload.acc_x}} into the html block but it does not work. What is the correct way to do it?

thanks!

My flow:

[{"id":"1806c6da.bcf299","type":"http in","z":"e6102a63.549ad8","name":"status","url":"/status","method":"get","swaggerDoc":"","x":216.05708694458008,"y":337.15556049346924,"wires":[["a93fc711.c668b8"]]},{"id":"2e44d337.56820c","type":"http response","z":"e6102a63.549ad8","name":"","x":762.5349426269531,"y":379.66663932800293,"wires":[]},{"id":"5e67e951.064d18","type":"template","z":"e6102a63.549ad8","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n    <body>\n        this is my acc:  </br>\n        x: {{payload.acc_x}} </br>\n        y: {{payload.acc_y}}  </br>\n        z: {{payload.acc_z}}\n    </body>\n</html>","x":563.0904083251953,"y":372.33329677581787,"wires":[["2e44d337.56820c"]]},{"id":"6573764c.40f878","type":"inject","z":"e6102a63.549ad8","name":"","topic":"","payload":"{      \"d\":{         \"myName\":\"TI CC2650 SensorTag\",       \"Seq #\":1,       \"Uptime (sec)\":245,       \"Def Route\":\"fe80::212:4b00:afe:5a07\",       \"RSSI (dBm)\":-22,       \"Battery Temp (C)\":29,       \"Battery Volt (mV)\":3339,       \"Air Pressure (hPa)\":977.66,       \"Air Temp (C)\":30.10,       \"Object Temp (C)\":15.781,       \"Ambient Temp (C)\":30.187,       \"Light (lux)\":321.92,       \"HDC Humidity (%RH)\":20.97,       \"HDC Temp (C)\":30.22,       \"Acc X (G)\":0.04,       \"Acc Y (G)\":0.18,       \"Acc Z (G)\":1.07,       \"Gyro X (deg per sec)\":1.65,       \"Gyro Y (deg per sec)\":-2.86,       \"Gyro Z (deg per sec)\":-3.22    } }","payloadType":"str","repeat":"","crontab":"","once":false,"x":143.83482360839844,"y":174.93826580047607,"wires":[["d2cc4f4.e7ac8b"]]},{"id":"ab58c310.39684","type":"function","z":"e6102a63.549ad8","name":"acc","func":"var myacc_x = msg.payload;\nmsg.payload={\n    \"acc_x\": 0,\n    \"acc_y\": 0,\n    \"acc_z\": 0,\n};\n\nmsg.payload.acc_x=myacc_x.d[\"Acc X (G)\"];\nmsg.payload.acc_y=myacc_x.d[\"Acc Y (G)\"];\nmsg.payload.acc_z=myacc_x.d[\"Acc Z (G)\"];\n\nmsg.datapath=\"/\" + Date.now().toString();\n\nreturn msg;","outputs":1,"noerr":0,"x":495.94590759277344,"y":107.82713317871094,"wires":[["dca7f11.a513a1"]]},{"id":"dca7f11.a513a1","type":"DataIn","z":"e6102a63.549ad8","collection":"e65ae0.4abc852","name":"","update":false,"path":"/","x":725.057071685791,"y":145.0493631362915,"wires":[]},{"id":"2540b080.2cab9","type":"debug","z":"e6102a63.549ad8","name":"","active":true,"console":"false","complete":"payload","x":796.8348350524902,"y":231.1882677078247,"wires":[]},{"id":"ac43fd63.53634","type":"inject","z":"e6102a63.549ad8","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":424.83483505249023,"y":239.1882677078247,"wires":[["304f429c.15016e"]]},{"id":"304f429c.15016e","type":"DataOut","z":"e6102a63.549ad8","collection":"e65ae0.4abc852","name":"","path":"/","error":false,"x":614.8348350524902,"y":244.6882677078247,"wires":[["2540b080.2cab9"]]},{"id":"d2cc4f4.e7ac8b","type":"json","z":"e6102a63.549ad8","name":"","x":314.08482360839844,"y":137.43826389312744,"wires":[["ab58c310.39684"]]},{"id":"a93fc711.c668b8","type":"DataOut","z":"e6102a63.549ad8","collection":"e65ae0.4abc852","name":"","path":"/","error":false,"x":366.0570869445801,"y":368.27160358428955,"wires":[["5e67e951.064d18"]]},{"id":"b7daa4c7.444618","type":"mqtt in","z":"e6102a63.549ad8","name":"","topic":"iot-2/evt/status/#","qos":"2","broker":"7fd38af6.a2e464","x":136.05708694458008,"y":93.82715225219727,"wires":[[]]},{"id":"e65ae0.4abc852","type":"json-db-collection","z":"e6102a63.549ad8","name":"testdb","collection":"testdb","save":true},{"id":"7fd38af6.a2e464","type":"mqtt-broker","z":"537e81a1.e4cbf","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willPayload":"","birthTopic":"","birthQos":"0","birthPayload":""}]

Solution

  • Assuming you are using the template node then the mustache templates are scoped at the msg level.

    This means you don't need the msg. on the start {{payload.acc_x}} will work

    EDIT: Added example flow

    [{"id":"c2490525.f8ec68","type":"template","z":"8cdaf657.37241","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n \n \n acc_x: {{payload.acc_x}}\n \n","x":600.5,"y":131,"wires":[["3608d51c.7c3222"]]},{"id":"8354e1e7.7ca9f","type":"http in","z":"8cdaf657.37241","name":"","url":"/test","method":"get","swaggerDoc":"","x":247.5,"y":121,"wires":[["646cd1ad.5bba6"]]},{"id":"3608d51c.7c3222","type":"http response","z":"8cdaf657.37241","name":"","x":768.5,"y":133,"wires":[]},{"id":"646cd1ad.5bba6","type":"function","z":"8cdaf657.37241","name":"","func":"msg.payload.acc_x = 1.5\nreturn msg;","outputs":1,"noerr":0,"x":389.5,"y":129,"wires":[["c2490525.f8ec68"]]}]