Slider incoherent behaviour when disabled

[Robertotarga]

IMHO current implementation (v. 2.22.1) of dashboard-slider component in disabled mode has two flaws:

1. it moves leftwise to its minumum position while keeping its current payload value. That's uncoherent and the user might think its value reached its minimum.
   In the attached image current value is 20.6 while minimum is 15, but when disabled mode it moves to the minimum while keeping its correct value
   

   

2. when receiving an msg.enabled = true it becomes active, but it keeps its left minimum position, whereas it should regain its current value position. See attached image where the slider becomes enabled but keeps its wrong left minimum value (15) whereas it should move towards the center (value 20.6)

I suggest that in disabled mode the slider simply keeps its current position and updates it even after it's disabled, simply it will be no longer user operable. So when enabled again it will already have its correct position and the user simply will interact with it. In this way we would solve both before mentioned problems.

[dceejay]

not unreasonable

[Robertotarga]

Hi dceejay,
glad you second my considerations. Will you be able to report this issue to the dashboard team so they will give it a look?

Best

Roberto

[ristomatti]

If this is one of the default dashboard nodes, you can consider @dceejay AS the team: https://github.com/node-red/node-red-dashboard/graphs/contributors.

[Robertotarga]

Ok, so we are in good hands!

[dceejay]

Hi,
I have just done a simple test here and it seems to work as expected... can you share your example that doesn't ? and can you add a debug to the node that is sending to the slider ?

[Robertotarga]

This is the sample flow :

From the dashboard you see this after clicking on "Disable" button::

If after disabling you resend the msg.payload via the "Set value" slider the UI slider gets its correct position. What I expect is that the slider doesn't lose its correct value when receiving a "disable" msg.

This is the test script you can use to reproduce the problem:

[{"id":"66f8b17b.e89e","type":"debug","z":"ff9f6e72.01c63","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":2210,"y":240,"wires":[]},{"id":"bf59880f.c64f68","type":"ui_slider","z":"ff9f6e72.01c63","name":"setpoint UI","label":"Setpoint °C","tooltip":"","group":"f1c89d57.a8411","order":3,"width":"7","height":"1","passthru":true,"outs":"end","topic":"","min":"18","max":"26","step":"0.1","x":2230,"y":360,"wires":[[]]},{"id":"61325249.675dfc","type":"function","z":"ff9f6e72.01c63","name":"enable/disable","func":"msg.enabled = msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":2030,"y":360,"wires":[["bf59880f.c64f68"]]},{"id":"1ceb9bb7.667c64","type":"ui_slider","z":"ff9f6e72.01c63","name":"Value Provider","label":"Setpoint °C","tooltip":"","group":"f1c89d57.a8411","order":3,"width":"6","height":"1","passthru":true,"outs":"all","topic":"","min":"18","max":"26","step":"0.1","x":2020,"y":300,"wires":[["bf59880f.c64f68","66f8b17b.e89e","f86fbc93.0b024"]]},{"id":"f86fbc93.0b024","type":"ui_text","z":"ff9f6e72.01c63","group":"f1c89d57.a8411","order":5,"width":"2","height":"1","name":"Text Value","label":"","format":"{{msg.payload}}","layout":"row-spread","x":2230,"y":300,"wires":[]},{"id":"72fbd585.16864c","type":"ui_button","z":"ff9f6e72.01c63","name":"","group":"f1c89d57.a8411","order":6,"width":0,"height":0,"passthru":false,"label":"Enable","tooltip":"","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":1840,"y":320,"wires":[["61325249.675dfc"]]},{"id":"3dc7a4b3.cfd06c","type":"ui_button","z":"ff9f6e72.01c63","name":"","group":"f1c89d57.a8411","order":7,"width":0,"height":0,"passthru":false,"label":"Disable","tooltip":"","color":"","bgcolor":"","icon":"","payload":"false","payloadType":"bool","topic":"","x":1840,"y":380,"wires":[["61325249.675dfc"]]},{"id":"f1c89d57.a8411","type":"ui_group","z":"","name":"Studio","tab":"6792269c.442228","order":2,"disp":true,"width":"7","collapse":true},{"id":"6792269c.442228","type":"ui_tab","z":"","name":"Stanze","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

HTH

[dceejay]

Thanks, will take a look shortly.

[dceejay]

As I suspected - your function node is still sending a payload (of true or false) to the slider - which it then interprets as "no data". You need to clear out the msg.payload, or use a change node instead to "move" the payload to enabled.
Here is your flow edited.

[{"id":"70dae570.6fe52c","type":"debug","z":"a3c2a16b.fa113","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":570,"y":1480,"wires":[]},{"id":"bc5f9e77.e136b","type":"ui_slider","z":"a3c2a16b.fa113","name":"setpoint UI","label":"Setpoint °C","tooltip":"","group":"3061152d.046afa","order":3,"width":"7","height":"1","passthru":true,"outs":"end","topic":"","min":"18","max":"26","step":"0.1","x":550,"y":1600,"wires":[[]]},{"id":"be5d18e5.f1ae08","type":"function","z":"a3c2a16b.fa113","name":"enable/disable","func":"msg.enabled = msg.payload;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":340,"y":1580,"wires":[[]]},{"id":"902e0524.c8d728","type":"ui_slider","z":"a3c2a16b.fa113","name":"Value Provider","label":"Setpoint °C","tooltip":"","group":"3061152d.046afa","order":3,"width":"6","height":"1","passthru":true,"outs":"all","topic":"","min":"18","max":"26","step":"0.1","x":340,"y":1540,"wires":[["bc5f9e77.e136b","70dae570.6fe52c","1a837a6a.c65de6"]]},{"id":"1a837a6a.c65de6","type":"ui_text","z":"a3c2a16b.fa113","group":"3061152d.046afa","order":5,"width":"2","height":"1","name":"Text Value","label":"","format":"{{msg.payload}}","layout":"row-spread","x":550,"y":1540,"wires":[]},{"id":"84e4201d.0d4fe","type":"ui_button","z":"a3c2a16b.fa113","name":"","group":"3061152d.046afa","order":6,"width":0,"height":0,"passthru":false,"label":"Enable","tooltip":"","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":160,"y":1560,"wires":[["15893070.d3514"]]},{"id":"8e2be221.0bc2a","type":"ui_button","z":"a3c2a16b.fa113","name":"","group":"3061152d.046afa","order":7,"width":0,"height":0,"passthru":false,"label":"Disable","tooltip":"","color":"","bgcolor":"","icon":"","payload":"false","payloadType":"bool","topic":"","x":160,"y":1620,"wires":[["15893070.d3514"]]},{"id":"15893070.d3514","type":"change","z":"a3c2a16b.fa113","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"enabled","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":1620,"wires":[["bc5f9e77.e136b","70dae570.6fe52c"]]},{"id":"3061152d.046afa","type":"ui_group","z":"","name":"Studio","tab":"f74bf3e6.eaf5e","order":2,"disp":true,"width":"7","collapse":true},{"id":"f74bf3e6.eaf5e","type":"ui_tab","z":"","name":"Stanze","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

[Robertotarga]

In the function node I added the line:

msg.payload = null;

and now the slider position is not changed when disabling the node!
However, as a side effect, now the slider raise an error to the debugger:

"TypeError: Cannot read property 'toString' of null".
It's not harmful/meaningful, I just let you know.

As you suggest I used two change nodes of type "move" that converts a msg. payload to a msg.enabled.
It works well and they do not raise errors. The debugger reports a "undefined" msg.payload, but that's fine.
So I will adopt this second solution.

I couldn't imagine that a true/false payload sent to a slider resets its position to the left minimum while keeping its actual correct value!
Since the slider it's an intrinsecally numerical node it should simply ignore a pure true/false payload.

Thank you again for your precious assistance.

[dceejay]

well it tries to be helpful and parse whatever you send to be a number (in case you send 20C for example) - so it parses false to 0 and thus moves the pointer. And indeed ISTR that behaviour may have been requested at some point as a way to indicate that the incoming values were invalid/unknown - so I'm not going to change that behaviour.

PS the way to do it in a function is to delete msg.payload rather than set to null.
(but yes will look to catch that error)

[Robertotarga]

OK dceejay. I understand your point and will not insist in asking an alteration to the standard behaviour.
I added the delete msg.payload to the function node and used this solution rather the one with two change nodes.
I apreciate your efforts to teach the correct way to use the beautiful world of NR!

[Colin]

@dceejay

so it parses false to 0 and thus moves the pointer.

Should it not change the value shown to 0 in that case?

[dceejay]

you are correct - as it fails to parse it correctly it just moves the pointer to the minimum value the slider will accept.