Continius input messages in UI

[Lance99]

I have incoming sensors vales into my Ui. Mostly they are presented in graphs.
Is it possible to present them in a table like this ...

sensor id temp. hum.
xxxxxx 16C 45%RH
yyyyyy 15C 41%RH
zzzzzz 21C 42%RH
... and so on ....

New values every 5 sec ... after 10 messages, the first pops out of display, so allways the last 10 messages are display.

Any advice, so I could get a good start on this case?

Thanks!

[sdrshnptl]

@Lance99

xxxxxx 16C 45%RH
yyyyyy 15C 41%RH
zzzzzz 21C 42%RH

[E1cid]

Here is a example of how to show last 10 readings in a table

[{"id":"323d4bfe.23753c","type":"inject","z":"bf9e1e33.030598","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"5","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"{\t   \"sensor_id\": \"abc\" & $ceil($random()*10),\t   \"temp\": 20 + $ceil($random()*4),\t   \"hum\": 35 + $ceil($random()*10)\t}","payloadType":"jsonata","x":200,"y":20,"wires":[["4893f045.72e2e8"]]},{"id":"4893f045.72e2e8","type":"change","z":"bf9e1e33.030598","name":"","rules":[{"t":"set","p":"readings","pt":"flow","to":"[$append([msg.payload],$exists($flowContext(\"readings\")) ? $flowContext(\"readings\") : [])[[0..9]]]","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"readings","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":230,"y":80,"wires":[["9859b2cd.2ab078"]]},{"id":"9859b2cd.2ab078","type":"ui_template","z":"bf9e1e33.030598","group":"187a0d10.a44d4b","name":"","order":3,"width":0,"height":0,"format":"<style>\ntable{\n    background:grey;\n    border: 1px;\n    padding: 2px;\n}\nth, td{ \n    text-align: left;\n    border: 1px;\n    padding: 2px;\n}\n\n</style><table>\n    <tr>\n        <th ng-repeat=\"(key, value) in msg.payload[0]\">{{key}}</th>\n    </tr>\n    <tr ng-repeat=\"row in msg.payload\">\n        <td>{{row.sensor_id}}</td>\n        <td>{{row.temp}} C</td>\n        <td>{{row.hum}} RH</td>\n    </tr>\n</table>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":410,"y":40,"wires":[["651a0ed8.ad7c1"]]},{"id":"651a0ed8.ad7c1","type":"debug","z":"bf9e1e33.030598","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":640,"y":20,"wires":[]},{"id":"187a0d10.a44d4b","type":"ui_group","name":"Group 1","tab":"8abb3dd0.ddf87","order":1,"disp":false,"width":"6","collapse":false,"className":""},{"id":"8abb3dd0.ddf87","type":"ui_tab","name":"tab3","icon":"dashboard","order":8,"disabled":false,"hidden":false}]

or samething using a join node and no context storage.

[{"id":"323d4bfe.23753c","type":"inject","z":"bf9e1e33.030598","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\t   \"sensor_id\": \"abc\" & $ceil($random()*10),\t   \"temp\": 20 + $ceil($random()*4),\t   \"hum\": 35 + $ceil($random()*10)\t}","payloadType":"jsonata","x":90,"y":40,"wires":[["6ce32136.b481d8"]]},{"id":"6ce32136.b481d8","type":"change","z":"bf9e1e33.030598","name":"","rules":[{"t":"set","p":"complete","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":290,"y":60,"wires":[["f5131edf.f602a8"]]},{"id":"f5131edf.f602a8","type":"join","z":"bf9e1e33.030598","name":"","mode":"custom","build":"array","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":470,"y":60,"wires":[["c96a8c70.f2f4b"]]},{"id":"c96a8c70.f2f4b","type":"change","z":"bf9e1e33.030598","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"[$append($$.payload[1],$$.payload[0])[[0..9]]]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":640,"y":60,"wires":[["9859b2cd.2ab078"]]},{"id":"9859b2cd.2ab078","type":"ui_template","z":"bf9e1e33.030598","group":"187a0d10.a44d4b","name":"","order":3,"width":0,"height":0,"format":"<style>\ntable{\n    background:grey;\n    border: 1px;\n    padding: 2px;\n}\nth, td{ \n    text-align: left;\n    border: 1px;\n    padding: 2px;\n}\n\n</style><table>\n    <tr>\n        <th ng-repeat=\"(key, value) in msg.payload[0]\">{{key}}</th>\n    </tr>\n    <tr ng-repeat=\"row in msg.payload\">\n        <td>{{row.sensor_id}}</td>\n        <td>{{row.temp}} C</td>\n        <td>{{row.hum}} RH</td>\n    </tr>\n</table>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":590,"y":120,"wires":[["f5131edf.f602a8","651a0ed8.ad7c1"]]},{"id":"651a0ed8.ad7c1","type":"debug","z":"bf9e1e33.030598","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":790,"y":120,"wires":[]},{"id":"187a0d10.a44d4b","type":"ui_group","name":"Group 1","tab":"8abb3dd0.ddf87","order":1,"disp":false,"width":"6","collapse":false,"className":""},{"id":"8abb3dd0.ddf87","type":"ui_tab","name":"tab3","icon":"dashboard","order":8,"disabled":false,"hidden":false}]

[Colin]

Have a look at the ui_template node