You can do this directly
Place a switch widget on the dashboard in dashboard studio. Keep te dashboard open and go to the the Dashboard Studio settings in Homey (in another browser tab). Find your light and capability you want to control. In this case “Turned on”
Enable this capability. Homey sends this capability state directivity to the dashboard. If you have the dashboard open (like you have in another tab) it stores it.
Now go back to the Dashboard Studio tab, and open up the “Data Stream Explorer”. Here You can monitor all incoming data. Type a part of the name of the device you want to control in the filter box:
And press the “copy Topic Name”
Now select the switch widget, and open up the “Action and Behaviour” section":
And paste this topic name in the output topic. Note: You can also go the the output topic and find the correct topic in there. I just want to inform you about the data explorer also so you can see and debug the actual data coming in.
Make sure the button is configured as “Toggle Switch”. Now go out of the edit mode and you can turn on and off your light.
There is also a “Light Grid” widget. Where you can easy add lights to on/off control directly, (even multiple lights at once) and when you select the light you can control the brightness / color and white mode.
This needs the custom virtual “Unified Light State (JSON)” Capability, because it needs to set multiple settings at once.
Icon widgets do not have interactive controls. You need the button for that, but you can configure the button to show only the icon. Let’s keep it simple for now: Show the slider when the button (icon) is pressed, and hide it when the button is disabled:
This tutorial looks like a lot of steps, but it is quite easy and straightforward once you understand how to do things:
Add a switch widget to the dashboard and configure it like this:
Container style => Background = Disabled (this hides the container behind it)
Appearance => Visual Style = Image Only (I should rename this to Image and Icon only)
Icon => Select the on and off icons.
Now in the Action & Behavior go to the Output Topic. In this example we are going to use a local topic. This is a topic that does not broadcast over the network. If you want to do a more advanced setup, I explain later, we need some Homey logic and then you do not need to create a local topic. But it is good practice to use local topics when you want to interact directly with Dashboard studio widgets on the same dashboard:
Add “local/sliderVisible” (the “local/” indicates it is a local topic. And the “sliderVisible” is a custom name you can invent (case sensitive!)).
Now add the slider widget. Go to the “Widget Info” section an click the little chain icon above the visibility. With this action you make the visibility seting dynamic, and you can fill in a topic (you can make almost any setting dynamic). Fill in “local/sliderVisible”:
The button is now sending “true / false” to this setting. Go out of edit mode, and press the icon to show and hide the slider.
Now for your more advanced solution:
There are no timers or something that automaticaly hides controls after usage. You need to make your own Homey Logic for that. In this case, you do need to broadcast the topic to Homey. So homey can control the visibility and the switch when you use it.
Replace the “local/sliderVisible” to “sliderVisible” (remove the “local/”) Now this value is also send to Homey. Also add a topic in the “output topic” of the slider:
I chose “sliderValue”. This value gets send to Homey. Note: Lots of homey controls use 0 to 1 values (not 0 to 100). So you might need to change the min and max values and enable fractions.
Go to your homey flows and create the following flow:
When the slider is moved it triggers “sliderValue”, waits 5 seconds and then sends sliderVisible, with “false” to the dashboard. So after the sider is moved it hides the slider automatically. This should work now. But the button does not know that. En in this case the button stay’s enabled, while the silder is automatically hidden. Simple way is to change the button to momentary. So it only shows the slider and the silder automatically hides when you slide it. More advanced way is to also make the button dynamic:
In the “Action & Behavior” setting of the Button / switch, there is a “State” setting. Make this dynamic, and fill in the same “sliderVisible” topic. Now when the slider gets a false to set the slider invisible, the button also gets the same false to set the state of the button to off.
Well that it. Like I said, looks like a massive amount of things you need to do, but it is really not that complicated. Just a couple of settings.
Note: You can control your device with the slider value in the same flow:
(I controlled a brightness of a light with it)
If setting the button state does not correctly behaves, please install the latest 1.7.3 test version. There is a bug fixed that involves the button state setting.
