Light control button and slider

Dashboard
1

Hello,

I have a button to control the light.
image
The button is a template. Now I want to add a slider to the same template but I've tried many sliders, wiich I found in the forum, but none of them works.

This is the flow:

[{"id":"9f116efb.7362c","type":"mqtt in","z":"ad80e500.3c7e98","name":"MQTT receiver light","topic":"homie/homey-5d14b942367eb80ccf0c77c3/woonkamer/onoff","qos":"2","datatype":"auto","broker":"a4ac80e1.bc5fe","x":190,"y":560,"wires":[["75713fab.deb13"]]},{"id":"75713fab.deb13","type":"function","z":"ad80e500.3c7e98","name":"Kleur en icoon","func":"var color;\n\nif(msg.payload === \"true\"){\n msg.ui_control = {icon:\"icons/light-bulb-on-60.png\", tooltip:\"Licht is aan\"};\n msg.label = \"Licht is aan\"\n \n}\n\nelse{\n msg.ui_control = {icon:\"icons/light-bulb-off-60.png\", tooltip:\"Licht is uit\"};\n msg.label = \"Licht is uit\"\n}\nmsg.icon = color;\nreturn [msg];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":560,"wires":[["1cf370ef.c5275f"]]},{"id":"1ef377ea.07b3a8","type":"mqtt out","z":"ad80e500.3c7e98","name":"MQTT Transmitter","topic":"homie/homey-5d14b942367eb80ccf0c77c3/woonkamer/onoff/set","qos":"","retain":"","broker":"a4ac80e1.bc5fe","x":1030,"y":560,"wires":[]},{"id":"1cf370ef.c5275f","type":"ui_template","z":"ad80e500.3c7e98","group":"b290cc21.d734d","name":"Woonkamer","order":7,"width":4,"height":2,"format":"<md-button class=\"btn1\" id=\"buttonlight\" style=\"background-color:#ff333333\" ng-click=\"send({payload: msg.payload })\"> \n    <img id=\"imgofbutton\" src=\"{{msg.ui_control.icon}}\">\n    <div class=\"textofbutton\">\n        <b id=\"buttonslighttext\">Woonkamer</b>\n    </div>\n</md-button>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":650,"y":560,"wires":[["6ce1b6de.567ff8"]]},{"id":"6ce1b6de.567ff8","type":"function","z":"ad80e500.3c7e98","name":"","func":"\nif (msg.payload === \"false\" ){\n    msg.payload = \"true\";\n}\nelse { msg.payload = \"false\";\n}\nreturn [msg];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":820,"y":560,"wires":[["1ef377ea.07b3a8"]]},{"id":"a4ac80e1.bc5fe","type":"mqtt-broker","z":"","name":"Homey MQTT","broker":"192.168.1.6","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"b290cc21.d734d","type":"ui_group","z":"","name":"Buttons","tab":"2a0bd1d7.7ca9ce","order":1,"disp":false,"width":30,"collapse":false},{"id":"2a0bd1d7.7ca9ce","type":"ui_tab","z":"","name":"Tab3","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

Can anyone help me out?

2

This cropped up recently on the forum - have you tried a number input with range?

3

This is the template node with the slider:

<md-button class="btn1" id="buttonlight" style="background-color:#ff333333" ng-click="send({payload: msg.payload })"> 
    <img id="imgofbutton" src="{{msg.ui_control.icon}}">
    <div class="textofbutton">
        <b id="buttonslighttext">Woonkamer</b>
    </div>
</md-button>
  <md-content layout="row" layout-padding style="overflow: hidden; padding: 0px;">
    <md-slider-container flex style="padding: 0px; height: 48px">
      <md-slider ng-model="msg.payload" md-discrete min="0" max="100" step="1" aria-label="volume" id="volume-slider" class="md-discrete" ng-mouseup="send(msg)" md-range></md-slider>
      <md-input-container>
      </md-input-container>
    </md-slider-container>
  </md-content>

I searched the forum a lot but diidn't find a solution.

1 Like
4

I don't really use Dashboard much and I'm not familiar with md-slider so I don't know if it is available in Dashboard. What I was referring to was using the input type of range:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

5

I use md-sliders in dashboard template nodes. Here is one I use for example:

<md-slider-container>
    <span style="white-space: nowrap; padding-left: 12px; padding-right: 58px">Deckenlampe</span>
    <md-slider min="0" max="100" ng-model="msg.payload" ng-change="send(msg)"></md-slider>
    <span style="padding-right: 18px; text-align: right">{{msg.payload}}</span>
</md-slider-container>

which gives me this:

Screenshot 2020-09-02 at 11.05.36
Screenshot 2020-09-02 at 11.05.36718Ă—120 3.35 KB

You should be able do salvage this for your use case.

Johannes

2 Likes
6

Thanks for your help. When I use your code in a separate template it works. But when I add it to my light button it doesn't. When I moved the slider it just moves back to 0

7

If I use your code and set the slider to a position. The slider moves back to zero.

8

Yes this is on purpose. The slider gets set to the value of the incoming msg.payload. This is because when i set this up I wanted the slider to represent the real world state of the dimmer at any time as it can also be changed at the device. So either loop back the output of the node to its input (best with a trigger node inbetween as not to overflow) or connect a state output from the device your addressing the with the slider to the input which is what I do.

Johannes

9

image
image1093Ă—79 5.02 KB

Then my flow should work. The slider gets the new value via MQTT
But it doesn't

[{"id":"cf84f42a.fdca58","type":"mqtt out","z":"ad80e500.3c7e98","name":"MQTT Transmitter","topic":"homie/homey-5d14b942367eb80ccf0c77c3/woonkamer/dim/set","qos":"","retain":"","broker":"a4ac80e1.bc5fe","x":1030,"y":640,"wires":[]},{"id":"2d570c90.8fbc24","type":"mqtt in","z":"ad80e500.3c7e98","name":"MQTT receiver light","topic":"homie/homey-5d14b942367eb80ccf0c77c3/woonkamer/dim","qos":"1","datatype":"auto","broker":"a4ac80e1.bc5fe","x":190,"y":640,"wires":[["279500ed.f416b"]]},{"id":"279500ed.f416b","type":"ui_template","z":"ad80e500.3c7e98","group":"b290cc21.d734d","name":"","order":13,"width":4,"height":1,"format":"<div id=\"slidernew1\">\n    <md-slider-container>\n    <md-slider min=\"0\" max=\"100\" ng-model=\"msg.payload\" ng-change=\"send(msg)\"></md-slider>\n    <span style=\"padding-right: 18px; text-align: right\">{{msg.payload}}</span>\n</md-slider-container> \n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":640,"y":640,"wires":[["cf84f42a.fdca58"]]},{"id":"a4ac80e1.bc5fe","type":"mqtt-broker","z":"","name":"Homey MQTT","broker":"192.168.1.6","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"b290cc21.d734d","type":"ui_group","z":"","name":"Buttons","tab":"2a0bd1d7.7ca9ce","order":1,"disp":false,"width":30,"collapse":false},{"id":"2a0bd1d7.7ca9ce","type":"ui_tab","z":"","name":"Tab3","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
10

Add a debug node showing what is coming out of the MQTT In and check it is what the slider expects.

11

Is the slider expecting a number and getting a string instead?

1 Like
12

This is the flow :

`[{"id":"9f116efb.7362c","type":"mqtt in","z":"ad80e500.3c7e98","name":"MQTT receiver light","topic":"homie/homey-5d14b942367eb80ccf0c77c3/woonkamer/onoff","qos":"2","datatype":"auto","broker":"a4ac80e1.bc5fe","x":190,"y":560,"wires":[["75713fab.deb13"]]},{"id":"75713fab.deb13","type":"function","z":"ad80e500.3c7e98","name":"Kleur en icoon","func":"// note that this flow is triggered by an mqtt message AND by the repeating timestamp node\n// here we deal with the message payload only\nif (msg.payload === \"true\"){\n\n    flow.set(\"statusWoonkamerLamp\", true);\n}\nelse if (msg.payload ===\"false\") {\n    flow.set(\"statusWoonkamerLamp\", false);\n}\nelse {\n    // don't do anything here as this could be your timestamp trigger\n}\n\n// here we deal with the flow variable.\nif (flow.get(\"statusWoonkamerLamp\")){\n    msg.ui_control = {icon:\"icons/light-bulb-on-60.png\", tooltip:\"Licht is aan\"};\n    msg.label = \"Licht is aan\"\n}\nelse {\n    msg.ui_control = {icon:\"icons/light-bulb-off-60.png\", tooltip:\"Licht is uit\"};\n    msg.label = \"Licht is uit\"\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":560,"wires":[["1cf370ef.c5275f"]]},{"id":"1ef377ea.07b3a8","type":"mqtt out","z":"ad80e500.3c7e98","name":"MQTT Transmitter","topic":"homie/homey-5d14b942367eb80ccf0c77c3/woonkamer/onoff/set","qos":"","retain":"","broker":"a4ac80e1.bc5fe","x":1030,"y":560,"wires":[]},{"id":"1cf370ef.c5275f","type":"ui_template","z":"ad80e500.3c7e98","group":"b290cc21.d734d","name":"Woonkamer","order":7,"width":4,"height":3,"format":"<md-button class=\"btn1\" id=\"buttonlight\" style=\"background-color:#ff333333\" ng-click=\"send({payload: msg.payload })\"> \n    <img id=\"imgofbutton\" src=\"{{msg.ui_control.icon}}\">\n    <div class=\"textofbutton\">\n         <b id=\"buttonslighttext\">Woonkamer</b>\n    </div>\n</md-button>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":650,"y":560,"wires":[["6ce1b6de.567ff8"]]},{"id":"6ce1b6de.567ff8","type":"function","z":"ad80e500.3c7e98","name":"","func":"\nif (msg.payload === \"false\" ){\n    msg.payload = \"true\";\n}\nelse { msg.payload = \"false\";\n}\nreturn [msg];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":820,"y":560,"wires":[["1ef377ea.07b3a8"]]},{"id":"cf84f42a.fdca58","type":"mqtt out","z":"ad80e500.3c7e98","name":"MQTT Transmitter","topic":"homie/homey-5d14b942367eb80ccf0c77c3/woonkamer/dim/set","qos":"","retain":"","broker":"a4ac80e1.bc5fe","x":1030,"y":640,"wires":[]},{"id":"2d570c90.8fbc24","type":"mqtt in","z":"ad80e500.3c7e98","name":"MQTT receiver light","topic":"homie/homey-5d14b942367eb80ccf0c77c3/woonkamer/dim","qos":"2","datatype":"auto","broker":"a4ac80e1.bc5fe","x":190,"y":640,"wires":[["6bc7cc75.5d06d4","b2bcb601.de5fb8"]]},{"id":"6bc7cc75.5d06d4","type":"debug","z":"ad80e500.3c7e98","name":"light_slider","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":450,"y":700,"wires":[]},{"id":"279500ed.f416b","type":"ui_template","z":"ad80e500.3c7e98","group":"b290cc21.d734d","name":"Woonkamerdim","order":14,"width":4,"height":1,"format":"<div id=\"slidernew1\">\n    <md-slider-container>\n    <md-slider min=\"0\" max=\"100\" ng-model=\"msg.payload\" ng-change=\"send(msg)\"></md-slider>\n    <span style=\"padding-right: 18px; text-align: right\">{{msg.payload}}</span>\n</md-slider-container> \n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":660,"y":640,"wires":[["cf84f42a.fdca58"]]},{"id":"242fdd78.18f232","type":"inject","z":"ad80e500.3c7e98","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"15","crontab":"","once":true,"onceDelay":"5","topic":"","payload":"","payloadType":"date","x":210,"y":520,"wires":[["75713fab.deb13"]]},{"id":"b2bcb601.de5fb8","type":"function","z":"ad80e500.3c7e98","name":"set variable","func":"flow.set(\"statusWoonkamerLampDim\", msg.payload);\n// here we deal with the flow variable.\nflow.get(\"statusWoonkamerLampDim\")\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":430,"y":640,"wires":[["279500ed.f416b"]]},{"id":"a4ac80e1.bc5fe","type":"mqtt-broker","z":"","name":"Homey MQTT","broker":"192.168.1.6","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"b290cc21.d734d","type":"ui_group","z":"","name":"Buttons","tab":"2a0bd1d7.7ca9ce","order":1,"disp":false,"width":30,"collapse":false},{"id":"2a0bd1d7.7ca9ce","type":"ui_tab","z":"","name":"Tab3","icon":"dashboard","order":3,"disabled":false,"hidden":false}]`

And this is the output:

{"topic":"homie/homey-5d14b942367eb80ccf0c77c3/woonkamer/dim","payload":"50","qos":0,"retain":true,"_msgid":"a94f0b5a.062e48"}

But the slider doesn't update. But I have a new problem now. When I turn off the lights, the lights will turn on automatically

13

Make sure you turn off the UI-template option Pass through messages from input, otherwise you'll have an infinite loop

14

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