I have a standard dashboard slider.
I am trying to implement a "Inc" button that will increment the slider by 1 and a "Dec" button that will decrease the slider value by 1 - Fine Control on a tablet....
I have made two buttons and a function that read the slider out value.
Sending the new payload to the input of the slider does not change it's value.
How do i send a msg from this function to "update / change" the slider value?
A little bit safety is always not too much. By disabling the buttons if they should not move the slider value outside of slider limits it is quite of neat extra feature.
But most of it is quite simple.
Slider current value should be stored in (flow) context so it can be reached from nearby functions.
It is reasonable to add also min and max values to the slider data object so the function's can be more abstract.
Buttons will give payload +1 or -1, this should be added to current slider value and feed back to the slider.
[{"id":"30871b69.55cd14","type":"ui_button","z":"407e1abc.6d1cb4","name":"up","group":"cc466763.adda38","order":3,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-arrow-up","payload":"1","payloadType":"num","topic":"move","topicType":"str","x":350,"y":260,"wires":[["ca065768.ff8438"]]},{"id":"7d0ab98e.a18118","type":"ui_button","z":"407e1abc.6d1cb4","name":"down","group":"cc466763.adda38","order":1,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-arrow-down","payload":"-1","payloadType":"num","topic":"move","topicType":"str","x":350,"y":300,"wires":[["ca065768.ff8438"]]},{"id":"f8de12f4.0b278","type":"ui_slider","z":"407e1abc.6d1cb4","name":"","label":"","tooltip":"","group":"cc466763.adda38","order":2,"width":4,"height":1,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":10,"step":1,"x":650,"y":280,"wires":[["f72cc27a.cd49"]]},{"id":"28a27fe6.42577","type":"function","z":"407e1abc.6d1cb4","name":"","func":"var slider = flow.get(\"slider\") || {value:0,min:0,max:10}\nvar up = {enabled:true}\nvar down = {enabled:true}\nif(slider.value == slider.min){\n down.enabled = false\n}\nif(slider.value == slider.max){\n up.enabled = false\n}\nreturn [up,down];","outputs":2,"noerr":0,"initialize":"","finalize":"","libs":[],"x":180,"y":280,"wires":[["30871b69.55cd14"],["7d0ab98e.a18118"]]},{"id":"f72cc27a.cd49","type":"change","z":"407e1abc.6d1cb4","name":"","rules":[{"t":"set","p":"slider.value","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":810,"y":280,"wires":[["aeca0568.0c8a08","c5c43602.b99a98"]]},{"id":"aeca0568.0c8a08","type":"link out","z":"407e1abc.6d1cb4","name":"from-slider","links":["d79dd598.421bc8"],"x":935,"y":280,"wires":[]},{"id":"d79dd598.421bc8","type":"link in","z":"407e1abc.6d1cb4","name":"to-slidercontrol","links":["aeca0568.0c8a08"],"x":75,"y":280,"wires":[["28a27fe6.42577"]]},{"id":"b166735b.de111","type":"change","z":"407e1abc.6d1cb4","name":"","rules":[{"t":"set","p":"slider","pt":"flow","to":"{\"value\":0,\"min\":0,\"max\":10}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":140,"wires":[[]]},{"id":"12bb6f58.d788b1","type":"inject","z":"407e1abc.6d1cb4","name":"init","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":140,"wires":[["b166735b.de111"]]},{"id":"ca065768.ff8438","type":"function","z":"407e1abc.6d1cb4","name":"","func":"var slider = flow.get(\"slider\") || {value:0,min:0,max:10}\nmsg.payload = slider.value + msg.payload\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":500,"y":280,"wires":[["f8de12f4.0b278"]]},{"id":"c096a784.c9bc18","type":"comment","z":"407e1abc.6d1cb4","name":"initialize slider object in flow context before using it","info":"","x":330,"y":80,"wires":[]},{"id":"c5c43602.b99a98","type":"debug","z":"407e1abc.6d1cb4","name":"SLIDER","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":820,"y":340,"wires":[]},{"id":"cc466763.adda38","type":"ui_group","name":"Default","tab":"826dc63e.367f48","order":1,"disp":true,"width":"6","collapse":false},{"id":"826dc63e.367f48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
2 Likes
Hi hotNipi
Thank you again...
Was doing something similar, but without all the checks.
After incorporating your flow, i again got stuck.
Could not figure out why it works on it own, but not when i incorporate it.
Then this afternoon the 
went on...
I set the slider with "steps" depending on another selection.
So now i need to incorporate a "step" value on the button based on a flow.set('Slide_Step',xxx)
Well, defining the slider properties you can add any definition for it.
Why not the step.
As the button can give payload defined in flow variable it will be easy enough to have slider data:
{
"value": 0,
"min": 0,
"max": 10,
"stepUp":1,
"stepDown":-1
}
And for buttons to send payload accordingly
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
