Ui_numeric - how does it maintain state across browser refresh

Dashboard
1

Hi, all.

What options are available to achieve the same behaviour with a ui_template ?

One method I know goes like this:

  1. Within ui_template listen for a commands 'get_state' and 'set_state'.
    Write code to action those commands.
  2. When the flow has started inject 'get_state' and pick up the response with a function node that saves the state to more persistent storage. Make sure that all state changes in the ui_template also update the persistent store.
  3. When a browser refresh occurs inject 'set_state' along with the stored state.

Is there a simpler way any one ?

2

Can I take a no reply as an affirmative that this is the only way ?

Any one ?

3

The options at the bottom of the node should handle most use cases...
image
The first tells it to save any output that the template sends back to the server...
and the second tells the server to send that to the template on a refresh.

1 Like
4

Hi thank you for your reply.

I have several ui_template nodes that form dashboard buttons and a single ui_template that is the event handler.

Could you please tell me are you referring to the button templates in this instance or my event handler or both ?

Also I am trying to extract the correct event data for clientX ,Y and bbox[left,bottom,right,top]

Do you know exactly where this data comes from ?

I have not been able to get the correct values (as produced by a standard dashboard button of the same size and position as my ui_template button) from the e.originalEvent object.

5

i am referring to the generic capabilities of he ui_template node. What your template does is up to you. If they send a payload then it can be stored and replayed.

7

I have found a working ui_template that does not enter a feedback loop like my template does but I am not sure if the observed behaviour is correct.

Here is a flow to demonstrate:

[{"id":"9ea17f7a.df536","type":"tab","label":"Flow 7","disabled":false,"info":""},{"id":"6aeef412.e50ccc","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 1","payloadType":"str","x":190,"y":80,"wires":[["91a4ce0c.b2c85"]]},{"id":"91a4ce0c.b2c85","type":"ui_template","z":"9ea17f7a.df536","group":"eb14755f.a52328","name":"00","order":2,"width":"3","height":1,"format":"\n<div class=\"blocktitle blue\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":390,"y":140,"wires":[["549220ba.d65f2"]]},{"id":"8613b2fb.2dd71","type":"ui_template","z":"9ea17f7a.df536","group":"eb14755f.a52328","name":"Title CSS","order":13,"width":0,"height":0,"format":"<style>\n    .blocktitle{\n        font-weight: bold;\n        background-color: inherit;\n        padding: 6px;\n        text-align: center;\n    }\n    .blocktitle.blue{\n        background-color: blue;\n        \n    }\n    .blocktitle.red{\n        background-color: red;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":400,"y":40,"wires":[["549220ba.d65f2"]]},{"id":"dd380195.41b53","type":"ui_template","z":"9ea17f7a.df536","group":"eb14755f.a52328","name":"11","order":8,"width":"3","height":1,"format":"\n<div class=\"blocktitle red\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":390,"y":380,"wires":[["549220ba.d65f2"]]},{"id":"549220ba.d65f2","type":"debug","z":"9ea17f7a.df536","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":620,"y":200,"wires":[]},{"id":"e7570f96.7c2d3","type":"ui_template","z":"9ea17f7a.df536","group":"eb14755f.a52328","name":"10","order":6,"width":"3","height":1,"format":"\n<div class=\"blocktitle blue\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":390,"y":300,"wires":[[]]},{"id":"ce508c0d.9d32b","type":"ui_template","z":"9ea17f7a.df536","group":"eb14755f.a52328","name":"01","order":4,"width":"3","height":1,"format":"\n<div class=\"blocktitle red\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":390,"y":220,"wires":[[]]},{"id":"a87ee7bd.c3d7a8","type":"ui_text","z":"9ea17f7a.df536","group":"eb14755f.a52328","order":1,"width":"4","height":"1","name":"","label":"False and False","format":"{{msg.payload}}","layout":"row-spread","x":420,"y":100,"wires":[]},{"id":"e4d0db50.3756a8","type":"ui_text","z":"9ea17f7a.df536","group":"eb14755f.a52328","order":5,"width":"4","height":"1","name":"","label":"True and False","format":"{{msg.payload}}","layout":"row-spread","x":420,"y":260,"wires":[]},{"id":"ca0b4efc.50059","type":"ui_text","z":"9ea17f7a.df536","group":"eb14755f.a52328","order":3,"width":"3","height":"1","name":"","label":"False and True","format":"{{msg.payload}}","layout":"row-spread","x":420,"y":180,"wires":[]},{"id":"30757de8.844782","type":"ui_text","z":"9ea17f7a.df536","group":"eb14755f.a52328","order":7,"width":"4","height":"1","name":"","label":"True and True","format":"{{msg.payload}}","layout":"row-spread","x":420,"y":340,"wires":[]},{"id":"94d3c556.406b68","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 1","payloadType":"str","x":190,"y":160,"wires":[["ce508c0d.9d32b"]]},{"id":"c65941a4.e906e","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 1","payloadType":"str","x":190,"y":240,"wires":[["e7570f96.7c2d3"]]},{"id":"c5e4e506.fb8d38","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 1","payloadType":"str","x":190,"y":320,"wires":[["dd380195.41b53"]]},{"id":"7722d8fc.365c88","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 2","payloadType":"str","x":190,"y":120,"wires":[["91a4ce0c.b2c85"]]},{"id":"9211739.260e99","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 2","payloadType":"str","x":190,"y":200,"wires":[["ce508c0d.9d32b"]]},{"id":"1ddd7c1e.82ba74","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 2","payloadType":"str","x":190,"y":280,"wires":[["e7570f96.7c2d3"]]},{"id":"f224c5cd.bf2458","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 2","payloadType":"str","x":190,"y":360,"wires":[["dd380195.41b53"]]},{"id":"eb14755f.a52328","type":"ui_group","z":"","name":"Store and Restore State","tab":"c88be1ab.5033b","order":1,"disp":true,"width":"4","collapse":false},{"id":"c88be1ab.5033b","type":"ui_tab","z":"","name":"Persistence","icon":"dashboard","disabled":false,"hidden":false}]

From a cold start I get:

image
image229Ă—534 7.57 KB

Injecting State 1 into each node and then doing a browser refresh
image
image232Ă—536 8.73 KB

Which is OK I think.
If I now edit the ui_templates and set them all to False False and redeploy
image
image233Ă—529 8.72 KB

Which I think is not OK. I have to restart node-red for it to forget stored state.

Also if I set a ui_template to disabled like the clock toolbar it also remains after redeploy and requires node-red restart.

1 Like
8 
[{"id":"dd380195.41b53","type":"ui_template","z":"9ea17f7a.df536","group":"eb14755f.a52328","name":"11","order":16,"width":"3","height":1,"format":"\n<div class=\"blocktitle red\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":390,"y":380,"wires":[["549220ba.d65f2"]]},{"id":"eb14755f.a52328","type":"ui_group","name":"Store and Restore State","tab":"c88be1ab.5033b","order":1,"disp":true,"width":"4","collapse":false},{"id":"c88be1ab.5033b","type":"ui_tab","name":"Persistence 1881 Dashboard version 2.24.1-beta","icon":"dashboard","disabled":false,"hidden":false}]

I have updated the example to the beta dashboard and the problem is there as well.

It boils down to this:

If a ui_template ever has 'Reload last value on refresh' set to Checked then the value will persist through browser refresh and even a redeploy with the 'Reload last value on refresh' set to Unchecked.

This cannot be right, any one ?

1 Like