Dashboard does not refresh

Dashboard
1

Hi everyone. I have a problem with the Dashboard

I built a "flow" manageable by a "Group" named "Settings". A ball should move left and right when a button is pressed or a switch is changed and be displayed in a "Group" named "Display"

The problem is that if the browser tab (Display) is already open, nothing happens until F5 is pressed.

If instead I use "Inject" it works perfectly, even if the browser tab (Display) is already open

Can anyone tell me how to solve it?
Thanks to anyone who can help me...

I attach the code.
flows.json (8.3 KB)

2

If you are talking about viewing in a different window or browsers, then you need to delete msg.socketid after the switch node.
e.g

[{"id":"1abae639752d75b0","type":"inject","z":"ca26d812e65b8a9e","name":"Left","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":190,"y":140,"wires":[["d4ef44d286dbd4d9"]]},{"id":"d4ef44d286dbd4d9","type":"switch","z":"ca26d812e65b8a9e","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":430,"y":200,"wires":[["3d8646aeac535a52"],["a2a1b23a93567f3a"]]},{"id":"4dfc1f3f16423c90","type":"inject","z":"ca26d812e65b8a9e","name":"Right","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":190,"y":260,"wires":[["d4ef44d286dbd4d9"]]},{"id":"e6c9b8eeb7086196","type":"change","z":"ca26d812e65b8a9e","name":"","rules":[{"t":"delete","p":"socketid","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":260,"y":200,"wires":[["d4ef44d286dbd4d9","8eee26c79ea65857"]]},{"id":"3d8646aeac535a52","type":"template","z":"ca26d812e65b8a9e","name":"Left","field":"style","fieldType":"msg","format":"html","syntax":"mustache","template":"img {\ndisplay: block;\nmargin-left: 1px;\nmargin-right: auto;\nmargin-top: auto;\nmargin-bottom: auto;\n}\n","output":"str","x":550,"y":180,"wires":[["3d9c243525f1564b"]]},{"id":"a2a1b23a93567f3a","type":"template","z":"ca26d812e65b8a9e","name":"Right","field":"style","fieldType":"msg","format":"html","syntax":"mustache","template":"img {\ndisplay: block;\nmargin-left: auto;\nmargin-right: 1px;\nmargin-top: auto;\nmargin-bottom: auto;\n}","output":"str","x":550,"y":220,"wires":[["3d9c243525f1564b"]]},{"id":"fd676e5bd54ea90a","type":"ui_switch","z":"ca26d812e65b8a9e","name":"","label":"Cambio Palla","tooltip":"","group":"127399c0a25c2697","order":1,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"false","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"true","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":70,"y":200,"wires":[["e6c9b8eeb7086196"]]},{"id":"8eee26c79ea65857","type":"debug","z":"ca26d812e65b8a9e","name":"debug 2488","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":530,"y":100,"wires":[]},{"id":"3d9c243525f1564b","type":"ui_template","z":"ca26d812e65b8a9e","group":"fec001471864780b","name":"Divisore","order":5,"width":"5","height":"2","format":"<style>\n  {{ msg.style }}\n</style>\n\n<img src=\"https://cdn-icons-png.flaticon.com/128/8622/8622554.png\" style=\"width:25%;\">","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":700,"y":200,"wires":[[]]},{"id":"127399c0a25c2697","type":"ui_group","name":"Impostazioni","tab":"06b25a1845bda19b","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"fec001471864780b","type":"ui_group","name":"Display","tab":"035e2089087f4c3d","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"06b25a1845bda19b","type":"ui_tab","name":"Impostazioni","icon":"dashboard","disabled":false,"hidden":false},{"id":"035e2089087f4c3d","type":"ui_tab","name":"Display","icon":"dashboard","disabled":false,"hidden":false}]

Also deselect Add output messages to stored state as this may cause issues .

3

I as well had the situation several times that the (single) browser was not refreshing the content properly.... I tested in Chrome and Edge browser and it did have the same behavior

setup:

  1. a slider is input to a ui-template (from gauge example)
  2. the page is loading correctly
    slider_gauge.json (25.5 KB)

issue:

  1. generating a slider-node and gauge via ui-template
  2. full deploy of Node-Red flows
  3. moving the slider is updating the gauge graph (ui-template)
  4. moving to another page/tab of this dashboard and back
  5. moving the slider .. is not updating the gauge graph (ui-template)
  6. pressing F5, the gauge graph is updated
  7. moving the slider ... the gauge graph is updated
    ==> the response or none response happens occacionally

fix (so far):

  • I do a full restart of my Node-Red (I run in docker)
  • now th slider and gauge work all the time

comment ==> after a NR restart, I repeated the issue steps above with another slider and gauge on a different tab

  • the original one was working
  • the newly developed gauge (no NR restart) was having the refresh issue (gone after NR restart)
  • i seen the dashboard refresh issue several times but it usually dissapears after NR restart (which is not a good solution :wink: )

Another example:
image
temp.json (11.2 KB)

  1. moving the sliders will update the ui-template
  2. moving away from this page/tab to another page/tab and back .. the sliders are back to zero .. but the ui-template is refreshing correctly

I hope that helps

4

f you are talking about viewing in a different window or browsers, then you need to delete msg.socketid after the switch node.
Also deselect Add output messages to stored state. as this amy cause issues .

Thanks for your solution.
I tried it now and it works perfectly.

Thank you very much

Ciao
Mario

5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.