Dashboard question with lists

Dashboard
1

Hi again folks.

I’ve had a bit of a break, but now am back.

I am “stuck” with the request to show a list of “events” (messages) on a screen and have them shown something like this: (see code)

[{"id":"65665c0d.74b864","type":"mqtt in","z":"c3ec93b2.f3154","name":"Return Codes from remote commands","topic":"COMMAND_REPLY/#","qos":"2","broker":"b2b92c0f.4429d8","x":170,"y":150,"wires":[["8d44eb6c.8731c","28f89fc4.70c178"]]},{"id":"8d44eb6c.8731c","type":"function","z":"c3ec93b2.f3154","name":"Command spliter","func":"var result_ = msg.payload;\nif (result_.indexOf('code\":1') !== -1)\n{\n    //\n    node.status({fill:\"yellow\",shape:\"dot\",text:\"Oops\"});\n    msg.payload = \"Oops\";\n    //  more code here for the second output.\n    var msg2 = {payload: \"yellow\"};\n}\n\nif (result_.indexOf('code\":127') !== -1)\n{\n    node.status({fill:\"red\",shape:\"dot\",text:\"Fail\"});\n    msg.payload = \"Command fail.\";\n    //  more code here for the second output.\n    var msg2 = {payload: \"red\"};\n}\nreturn [msg,msg2];\n","outputs":2,"noerr":0,"x":450,"y":150,"wires":[["fc371fef.41de88"],["77c9af2e.1f992","aedf9c70.5088c8"]]},{"id":"77c9af2e.1f992","type":"ui_text","z":"c3ec93b2.f3154","group":"b6cd7085.bd4458","order":4,"width":"1","height":"1","name":"Command reply status LED","label":"","format":"<font color={{msg.payload}} ><i class=\"fa fa-circle\" style=\"font-size:24px;\"></i></font>","layout":"row-center","x":710,"y":210,"wires":[]},{"id":"42b86d41.5aec0c","type":"ui_text","z":"c3ec93b2.f3154","group":"b6cd7085.bd4458","order":5,"width":"6","height":"1","name":"","label":"","format":"{{msg.payload}}","layout":"row-center","x":780,"y":150,"wires":[]},{"id":"7462dce0.63a6e4","type":"ui_template","z":"c3ec93b2.f3154","group":"b6cd7085.bd4458","name":"stuff","order":2,"width":"0","height":"0","format":"<style>\n  .filled { \n      height: 100% !important;\n\n      padding: 0 !important;\n      margin: 0 !important;\n  }\n  .nr-dashboard-template {\n      padding: 0;\n      margin: 0;\n  }\n  \n  .rounded {\n  border-radius: 12px 12px 12px 12px;\n}\n \n   .bigfont {\n  font-size: 18px;\n}\n\n   .smallfont {\n  font-size: 12px;\n}\n  \n</style>\n\n<script>\n$('.vibrate').on('click', function() {\n  navigator.vibrate(100);\n});\n\nfunction restore_bg(x) {\n            $(this).css(\"background-color\", x);\n    };\n\n$('.touched').on('mousedown', function() {\n    \n    var x= $(this).css(\"background-color\");\n    $(this).css(\"background-color\", \"yellow\");\n    \n    setTimeout(restore_bg.bind(this,x),100);\n    navigator.vibrate(80);\n    });\n    \n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":280,"y":110,"wires":[[]]},{"id":"28f89fc4.70c178","type":"debug","z":"c3ec93b2.f3154","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":120,"y":200,"wires":[]},{"id":"aedf9c70.5088c8","type":"debug","z":"c3ec93b2.f3154","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":660,"y":240,"wires":[]},{"id":"fc371fef.41de88","type":"switch","z":"c3ec93b2.f3154","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Command successful.","vt":"str"},{"t":"eq","v":"Oops","vt":"str"},{"t":"eq","v":"Command fail.","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":630,"y":150,"wires":[[],["42b86d41.5aec0c","36d66939.45039e"],["42b86d41.5aec0c","36d66939.45039e"]]},{"id":"9cd2d6aa.ba8328","type":"ui_template","z":"c3ec93b2.f3154","group":"b6cd7085.bd4458","name":"ARA","order":3,"width":"2","height":"1","format":"\n<md-button class=\"vibrate filled touched smallfont rounded\" style=\"background-color:#166085\"   ng-click=\"send({payload: 'ARA'})\"> \n    ARA<br/>\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":930,"y":150,"wires":[["22e5ebfa.dd5d44","36d66939.45039e"]]},{"id":"935699b6.cf8ae8","type":"ui_template","z":"c3ec93b2.f3154","group":"b6cd7085.bd4458","name":"Text formatting","order":1,"width":0,"height":0,"format":"    <style>\n    .nr-dashboard-cardtitle {\n        text-align:center;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":130,"y":110,"wires":[[]]},{"id":"ff74f86c.5fe678","type":"ui_template","z":"c3ec93b2.f3154","group":"b6cd7085.bd4458","name":"CLEAR","order":6,"width":"2","height":"1","format":"\n<md-button class=\"vibrate filled touched smallfont rounded\" style=\"background-color:#ff0000\"   ng-click=\"send({payload: 'CLEAR'})\"> \n    CLEAR<br/>\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1180,"y":150,"wires":[["677cfa8c.e86da4","a979308d.54b0c8"]]},{"id":"4dd41893.5cbb98","type":"comment","z":"c3ec93b2.f3154","name":"Display","info":"","x":550,"y":110,"wires":[]},{"id":"e92b45fa.c911e8","type":"comment","z":"c3ec93b2.f3154","name":"Buttons","info":"","x":1080,"y":70,"wires":[]},{"id":"677cfa8c.e86da4","type":"debug","z":"c3ec93b2.f3154","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1290,"y":110,"wires":[]},{"id":"a979308d.54b0c8","type":"function","z":"c3ec93b2.f3154","name":"Clear alarms","func":"\n//  Wipe message\nvar msg1 = {payload: \" no alarms active \"};\n//  LED colour\nvar msg2 = {payload: \"black\"};\n\nreturn [msg1,msg2];\n","outputs":2,"noerr":0,"x":1190,"y":210,"wires":[["2f16a4f6.13ee6c"],["9d8021f6.416418"]]},{"id":"6c238aef.c81874","type":"link in","z":"c3ec93b2.f3154","name":"Alarm LED RX","links":["9d8021f6.416418","edc0482b.469028"],"x":515,"y":210,"wires":[["77c9af2e.1f992"]]},{"id":"f3cb9dbc.4db6f","type":"link in","z":"c3ec93b2.f3154","name":"ALARM TEXT RX","links":["2f16a4f6.13ee6c","c13ae9e6.631a28"],"x":665,"y":110,"wires":[["42b86d41.5aec0c","401b2fa9.4bc168"]]},{"id":"9d8021f6.416418","type":"link out","z":"c3ec93b2.f3154","name":"","links":["6c238aef.c81874"],"x":1305,"y":230,"wires":[]},{"id":"2f16a4f6.13ee6c","type":"link out","z":"c3ec93b2.f3154","name":"","links":["f3cb9dbc.4db6f"],"x":1305,"y":190,"wires":[]},{"id":"401b2fa9.4bc168","type":"debug","z":"c3ec93b2.f3154","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":800,"y":110,"wires":[]},{"id":"36d66939.45039e","type":"function","z":"c3ec93b2.f3154","name":"Ack' alarms","func":"\nif (msg.payload != 'ARA')\n{\n    context.set('alarm',msg.payload);\n}\n\nif (msg.payload == 'ARA')\n{\n    //  message\n    var alarm = context.get('alarm');\n    var msg1 = {payload: alarm};\n    //  LED colour\n    var msg2 = {payload: \"cyan\"};\n}\nreturn [msg1,msg2];\n","outputs":2,"noerr":0,"x":950,"y":210,"wires":[["c13ae9e6.631a28"],["edc0482b.469028"]]},{"id":"c13ae9e6.631a28","type":"link out","z":"c3ec93b2.f3154","name":"","links":["f3cb9dbc.4db6f"],"x":1065,"y":190,"wires":[]},{"id":"edc0482b.469028","type":"link out","z":"c3ec93b2.f3154","name":"","links":["6c238aef.c81874"],"x":1065,"y":230,"wires":[]},{"id":"22e5ebfa.dd5d44","type":"debug","z":"c3ec93b2.f3154","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1030,"y":110,"wires":[]},{"id":"b2b92c0f.4429d8","type":"mqtt-broker","z":"","name":"192.168.0.99:1883","broker":"TimePi","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willPayload":"","birthTopic":"","birthQos":"0","birthPayload":""},{"id":"b6cd7085.bd4458","type":"ui_group","z":"","name":"Alarm display","tab":"48f5e285.67a4c4","order":1,"disp":true,"width":"14","collapse":false},{"id":"48f5e285.67a4c4","type":"ui_tab","z":"","name":"ALARMS","icon":"dashboard","order":12}]

The idea is that an event happens and it is logged (to call it something) and the user is notified.
The “alarm” can be acknowledge or cleared.
Acknowledge keeps it in the list. Cleared wipes it from the list.

But there is a possibility (truth?) that there will be more than one.

Can NR do this? My thoughts are that it will need file I/O for the events.
But at this stage, I am not good enough to know where to look and/or how to do it.

It isn’t that I want someone to solve it for me, but to help me with where to look and help me get my head around what to do.

Appreciated.

2

Hi mate, sure will be more fancy ways to do it but one easy way (as I actually do) i to pull each message to a file with the standard file out from the pallette. select the option of “append to a file” and previously have added <br> at the end of each message.payload.

If your messages are coming all at one maybe you will have to use the split function first to separate one by one and proceed as mentioned.

This will add a line per message as plain text on the file.

Then one inject node repeated each second for instance to pull the data from data in to the text node with a defined long size to be able to display the messages (another option is to create a template).

in order to delete the log just inject on another file out a payload with nothing and select into the file node ·“overwrite file” this will detele all previous info and you will have nothing.

As an extra (what I do) is prior to delete the history log, add all info on a big file where all info it’s being stored, with this I have a single file with all historical info (never lost) and another file with the latest data, the one which is displayed only on the dashboard until you push to delete.

I think the concept is clear, let me know if you need more info, but it’s easy, as told I’m actually
doing that and in fact is very simple.

Regards

3

check this out as starting point:

[{"id":"130ea40a.2a6b8c","type":"inject","z":"a6e46fb5.ebba1","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":164,"y":146,"wires":[["abc2bc63.0f0a"]]},{"id":"1827b298.dfc80d","type":"comment","z":"a6e46fb5.ebba1","name":"coming message","info":"","x":165,"y":100,"wires":[]},{"id":"abc2bc63.0f0a","type":"function","z":"a6e46fb5.ebba1","name":"add end line to message","func":"var message = msg.payload + \"<br>\";\nmsg.payload = message;\nreturn msg;","outputs":1,"noerr":0,"x":375,"y":146,"wires":[["c412aada.9f5988","8a7a52ef.be403"]]},{"id":"c412aada.9f5988","type":"debug","z":"a6e46fb5.ebba1","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":630,"y":83,"wires":[]},{"id":"8a7a52ef.be403","type":"file","z":"a6e46fb5.ebba1","name":"store to file","filename":"/home/pi/logtest","appendNewline":false,"createDir":true,"overwriteFile":"false","x":652,"y":144,"wires":[]},{"id":"3321de3c.273682","type":"inject","z":"a6e46fb5.ebba1","name":"","topic":"","payload":"","payloadType":"str","repeat":"1","crontab":"","once":true,"onceDelay":0.1,"x":142,"y":290,"wires":[["4810ce2a.05f16"]]},{"id":"4810ce2a.05f16","type":"file in","z":"a6e46fb5.ebba1","name":"","filename":"/home/pi/logtest","format":"utf8","chunk":false,"sendError":false,"x":376,"y":291,"wires":[["55c684fa.9ef1bc"]]},{"id":"9831c50a.bb7d68","type":"file","z":"a6e46fb5.ebba1","name":"delete file displayed","filename":"/home/pi/logtest","appendNewline":true,"createDir":false,"overwriteFile":"true","x":766,"y":407,"wires":[]},{"id":"55c684fa.9ef1bc","type":"ui_text","z":"a6e46fb5.ebba1","group":"f21f2722.4727c8","order":2,"width":"10","height":"14","name":"display info","label":"","format":"{{msg.payload}}","layout":"row-center","x":574,"y":288,"wires":[]},{"id":"8a407d17.dd1ab","type":"ui_button","z":"a6e46fb5.ebba1","name":"","group":"f21f2722.4727c8","order":1,"width":0,"height":0,"passthru":false,"label":"delete log","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":159,"y":409,"wires":[["d445607b.82ef3","99395a32.a1f3f8"]]},{"id":"d445607b.82ef3","type":"file in","z":"a6e46fb5.ebba1","name":"stored display file data","filename":"/home/pi/logtest","format":"utf8","chunk":false,"sendError":false,"x":399,"y":514,"wires":[["1562c678.ddfd0a"]]},{"id":"1562c678.ddfd0a","type":"file","z":"a6e46fb5.ebba1","name":"store to secondary historical file","filename":"/home/pi/loghistoricaltest","appendNewline":true,"createDir":true,"overwriteFile":"false","x":674,"y":514,"wires":[]},{"id":"99395a32.a1f3f8","type":"delay","z":"a6e46fb5.ebba1","name":"","pauseType":"delay","timeout":"2","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":375,"y":409,"wires":[["a64b11cd.fd5ad"]]},{"id":"82a2b8c6.3d2898","type":"comment","z":"a6e46fb5.ebba1","name":"pull data each second to be displayed","info":"","x":215,"y":229,"wires":[]},{"id":"cedf8833.bc9948","type":"comment","z":"a6e46fb5.ebba1","name":"delete displayed data","info":"","x":447,"y":355,"wires":[]},{"id":"bb676c54.15e11","type":"comment","z":"a6e46fb5.ebba1","name":"save data to a secondary file prior to delete all","info":"","x":511,"y":457,"wires":[]},{"id":"a64b11cd.fd5ad","type":"change","z":"a6e46fb5.ebba1","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":556,"y":406,"wires":[["9831c50a.bb7d68"]]},{"id":"f21f2722.4727c8","type":"ui_group","z":"","name":"test","tab":"95e900a4.9d5ff","order":1,"disp":true,"width":"10","collapse":true},{"id":"95e900a4.9d5ff","type":"ui_tab","z":"","name":"test","icon":"dashboard","order":26}]
4

you can format color and sizes and add a title very easy likes this, more advanced maybe will have to make a template to make text alignments and so on…

[{"id":"130ea40a.2a6b8c","type":"inject","z":"a6e46fb5.ebba1","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":164,"y":146,"wires":[["abc2bc63.0f0a"]]},{"id":"1827b298.dfc80d","type":"comment","z":"a6e46fb5.ebba1","name":"coming message","info":"","x":165,"y":100,"wires":[]},{"id":"abc2bc63.0f0a","type":"function","z":"a6e46fb5.ebba1","name":"add end line to message","func":"var message =\"<font size =4, color =yellow>\"+ msg.payload + \"<br>\";\nmsg.payload = message;\nreturn msg;","outputs":1,"noerr":0,"x":375,"y":146,"wires":[["c412aada.9f5988","8a7a52ef.be403"]]},{"id":"c412aada.9f5988","type":"debug","z":"a6e46fb5.ebba1","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":630,"y":83,"wires":[]},{"id":"8a7a52ef.be403","type":"file","z":"a6e46fb5.ebba1","name":"store to file","filename":"/home/pi/logtest","appendNewline":false,"createDir":true,"overwriteFile":"false","x":652,"y":144,"wires":[]},{"id":"3321de3c.273682","type":"inject","z":"a6e46fb5.ebba1","name":"","topic":"","payload":"","payloadType":"str","repeat":"1","crontab":"","once":true,"onceDelay":0.1,"x":142,"y":290,"wires":[["4810ce2a.05f16"]]},{"id":"4810ce2a.05f16","type":"file in","z":"a6e46fb5.ebba1","name":"","filename":"/home/pi/logtest","format":"utf8","chunk":false,"sendError":false,"x":376,"y":291,"wires":[["55c684fa.9ef1bc"]]},{"id":"9831c50a.bb7d68","type":"file","z":"a6e46fb5.ebba1","name":"delete file displayed","filename":"/home/pi/logtest","appendNewline":true,"createDir":false,"overwriteFile":"true","x":766,"y":407,"wires":[]},{"id":"55c684fa.9ef1bc","type":"ui_text","z":"a6e46fb5.ebba1","group":"f21f2722.4727c8","order":2,"width":"10","height":"14","name":"display info","label":"","format":"{{msg.payload}}","layout":"row-spread","x":574,"y":288,"wires":[]},{"id":"8a407d17.dd1ab","type":"ui_button","z":"a6e46fb5.ebba1","name":"","group":"f21f2722.4727c8","order":1,"width":"10","height":"1","passthru":false,"label":"delete log","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":159,"y":409,"wires":[["d445607b.82ef3","99395a32.a1f3f8"]]},{"id":"d445607b.82ef3","type":"file in","z":"a6e46fb5.ebba1","name":"stored display file data","filename":"/home/pi/logtest","format":"utf8","chunk":false,"sendError":false,"x":399,"y":514,"wires":[["1562c678.ddfd0a"]]},{"id":"1562c678.ddfd0a","type":"file","z":"a6e46fb5.ebba1","name":"store to secondary historical file","filename":"/home/pi/loghistoricaltest","appendNewline":true,"createDir":true,"overwriteFile":"false","x":674,"y":514,"wires":[]},{"id":"99395a32.a1f3f8","type":"delay","z":"a6e46fb5.ebba1","name":"","pauseType":"delay","timeout":"2","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":375,"y":409,"wires":[["a64b11cd.fd5ad"]]},{"id":"82a2b8c6.3d2898","type":"comment","z":"a6e46fb5.ebba1","name":"pull data each second to be displayed","info":"","x":215,"y":229,"wires":[]},{"id":"cedf8833.bc9948","type":"comment","z":"a6e46fb5.ebba1","name":"delete displayed data","info":"","x":447,"y":355,"wires":[]},{"id":"bb676c54.15e11","type":"comment","z":"a6e46fb5.ebba1","name":"save data to a secondary file prior to delete all","info":"","x":511,"y":457,"wires":[]},{"id":"a64b11cd.fd5ad","type":"change","z":"a6e46fb5.ebba1","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"<font size =16>HISTORICAL LOG","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":556,"y":406,"wires":[["9831c50a.bb7d68"]]},{"id":"f21f2722.4727c8","type":"ui_group","z":"","name":"test","tab":"95e900a4.9d5ff","order":1,"disp":true,"width":"10","collapse":true},{"id":"95e900a4.9d5ff","type":"ui_tab","z":"","name":"test","icon":"dashboard","order":26}]
5

Nice.

I have only just now looked at the flows.
I am going to have to go through them to get my head around how they work.

In retrospect it is now clear I left out some "important" things. (Sorry. Not your fault. Definitely mine.)

The flow I posted at the start is "wrapped around" the message.

So (excuse the messy screen shot.)

Alarm_display_example
Alarm_display_example.png1360×768 50.8 KB

Putting aside the right side.

The blue box on the left.

That block of code is used for each line/event.
The text is displayed between the black dot (LED) and the red CLEAR button.
That is then repeated down the screen for each event. (I'll call them that now as it is a better generic name than the ones I was using, and to try and establish a known name for them.)

So, if an event is received, it is "wrapped" in that code and displayed.
The LED is RED.
If the ARA button is pressed the LED changes colour but it stays there.
If the CLEAR button is pressed, it is wiped.
However...... If the event ceases (goes away?) it is also wiped.

Sure that is code, but just something I now realised I negated to declare.

So.... Working with what you have shown me:
I'll guess I would use the read part, but after the inject node, I would get the line of text (so I would keep the "FILE IN" node?) and use the payload from that to be sent to the next part where the payload would be used in the part I originally posted.

Sound about right?

And, rather than reading the file every second - which is fair enough - is there a "file changed" node to detect the file being altered?

Probably won't save that much overhead, but.... All the little things saved can add up to a big saving.

Thanks.

P.S.

Here is an example of what I mean with screen grabs.
First one is when an event arrives.
Second is when the ARA button has been pressed.

Screenshot%20from%202018-06-27%2012-21-07
Screenshot from 2018-06-27 12-21-07.png1360×768 47.6 KB
Screenshot%20from%202018-06-27%2012-22-26
Screenshot from 2018-06-27 12-22-26.png1360×768 47.6 KB

6

Frankly speaking, I will need to take much more time to try to understand exactly what you wanted to do in detail to understand deeper…

Regarding the latest part is quite simple, I think is not gonna make any change on the system itself but if you prefer what you can do is inject directly the new message coming and the delete message into the out file node, this directly will pull data from the file only when a new message (even the clear) is coming.

At that point It think you need to screw your head up a bit and try to reach whatever u wanted yourself, and if u really get stuck somewhere then ask again after several attempts.

Regards

7

Please don’t read what I posted then as expecting you to do the work for me.

I am just wanting to discuss it and get ideas/pointers in how to get it done.

I’ve just found another problem else where in the setup and need to spend some time fixing that problem. (Gotta love programs.)

But thanks for the replies. I will look at what you said and learn things from it.

8

No problem mate, the point is that is 4:31 am in here and just started to read your previous post and think my head is not prepared at this time for this… hahahahha anyway the truth is… to learn the best is try,try and try yourself and ask whenever you are really blocked and then keep going… :slight_smile:

Good nite

1 Like