A user pasted a question in a separate topic (and private message) I shall create the tutorial over here, maybe others have a use for a timer button as well.
Hi Michael,
Sure, no problem. I will try to help you out. As I understand it, you are controlling the OVMS via MQTT, and although Dashboard Studio is MQTT compatible, I do not advise using the MQTT functionality here. The direct Homey integration is way better and gives you a lot of extra functionality.
Dashboard Studio does not provide built in timer functionality. This should be handled inside Homey. Homey controls Dashboard Studio, and Dashboard Studio can control Homey.
Let’s take it one step at a time. Do not get scared of this long tutorial, it is just a long explanation of what and why we do things, but it is basically just 5 to 10 things you need to configure.
The basic steps are:
[Add button] => [Set trigger to homey] => [let this trigger start a timer] => [on every second send message to dashboard Studio] => [Show second value]
It would be quicker to configure everything at once (like the button), but for the best understanding, we will go through it step by step in logical order.
First, reset the canvas and press “Skip Wizard”. This will create a default advanced canvas. Or use your current Dashboard if you already was working on it.
First, let’s create a button.
Press “Create Widget” and select “Switch/Button”.
This will add a default pill switch style to the canvas.
We want a push button style. The easiest way is to just select a preset.
Choose something like “Button Label Inside”. You can change the font size, icon, etc. inside the button settings.
Now open the “Action & Behavior” section.
“Mode” should be set to “Toggle Switch” (this is the default setting). A toggle switch is simply an on and off switch.
When the button is pressed, Homey needs to know about it. Dashboard Studio communicates just like MQTT using “Topics”. These are messages that can contain values. We can make up topic names ourselves. Let’s call this Enable_Climate_Control (do not use spaces!) and add it to the output topic.
Now when you push the button, the value true or false is sent to Homey on the topic “Enable_Climate_Control”.
When the button is pressed, you want to see a countdown. Homey does not have built in timer flow capabilities (other than the “Wait” card), so we need to install a separate app for that. There are several timer apps available, and in this tutorial, we will install the app called “Chronograph”. This app can also be triggered on intermediate timings.
Go to your Homey web environment and create an Advanced Flow. Add a “Dashboard Studio Trigger” card and let it trigger on Enable_Climate_Control. Now every time the button is pressed, this is triggered.
Next, feed this into a Logic “is equal to ‘yes’” card. We only want to trigger the timer when the button is pressed down (true/yes), not when it goes up (false/no).
Connect this to a Chronograph “Start or replace transition” card. I made up the name “Climate_Control_Timer”. When this timer is activated, I want a trigger every second with the remaining seconds. So in 10 minutes, I want 600 messages (since there are 600 seconds in 10 minutes). We fill in from 600 to 0 in 601 steps (one extra step because counting down to 0 takes 601 steps). At each step, it will send a message over the course of 10 minutes.
Now below this, add the Chronograph card “Transition has reached a step” and add the timer name “Climate_Control_Timer”. This will trigger every second while the timer is running. We need to send this value to Dashboard Studio.
Add a Dashboard Studio “Send with value to Dashboard” flow card to the flow. I made up the topic name “TimerTime”, and for the value, use the “Transition value” tag from the transition card.
Now go back to Dashboard Studio. We want to display these remaining seconds, and we can do this in several ways. Let’s start simple and add a Label widget to the canvas. Scroll to the “Text Settings” section. Inside Dashboard Studio, almost ANY setting can be made dynamic. In this case, we want to make the “Text” dynamic.
Hover over this setting and a little chain icon will pop up. Click it to make this setting dynamic, and fill in the TimerTime topic you made up earlier.
Now save the dashboard and exit the editor. Press the button. You should now see the timer counting down from 600 to 0 in the text widget. Great! We can do way more though. Let’s have a bit of fun and add a Gauge widget to the canvas.
Select the preset “Horizontal / Icon Left”. Open the “Data Configuration” section and set “Max” to 600. Make the “Value” dynamic (just like before) and fill in the “TimerTime” topic. Now we have a percentage bar that counts down. Or if you want it to fill up instead, set Min to 600 and Max to 0.
Let’s take it one step further, which is probably the best way to use it. I want the button label itself to show the remaining seconds.
Open the editor, select the button, and open the “Text & Typography” section. Now make the button label dynamic and fill in TimerTime. When you press the button, it will show the remaining seconds… but we actually want to see the button label text as well. We can do this by adding binding formulas. Hover over the setting and you will see a slider icon next to the chain icon. Press it. Here you can add a formula to change the payload.
Add "Climate Control (" + value + "s)". Now it shows the label along with the remaining seconds!
Let’s take it a step further. When it hits 0, it should not show that there are 0 seconds left. Change the payload formula to: "Climate Control"+ if (value > 0," ("+ value +"s)","")
This is a simple if/else snippet that basically says: “When the value is above 0, add the seconds, otherwise do not add anything.”
We can even take it another step further if you add:
"Climate Control"+ if (value > 0," ("+ round((value / 60) - 0.5) + "m" + ( value - (round(( value / 60) - 0.5) * 60)) + "s)","")
This will convert the seconds into minutes and seconds, like “Climate Control (2m27s)”.
Okay, enough fun with showing the seconds. We still have a problem: when the button is pressed, we can press it again to deactivate it. That should not be possible, so we need to disable the button while the timer is active. There are multiple ways to do this. You could send an activation topic from Homey to enable and disable the button when you enable the timer and when the timer is finished, but we can already do this with just using the timer seconds we have.
With the button widget selected, open the widget section and make the “Deactivated” setting dynamic. Fill in the TimerTime topic. Basically, this should work right out of the box because 0 equals “false” and everything other than 0 equals “true”.
However, we can make it a bit neater by adding the binding formula: if( value > 0, 1, 0). This basically says “If the value is above 0, the result is 1 (true), otherwise 0 (false).”
Since we wanted the button to be red when activated, just change the “Deactivated Color” to red inside the Appearance section.
Now, after the 10 minutes are up, we want the state of the button to be turned off again. Go to the “Action & Behavior” section, make the “State (on/off)” setting dynamic as well, fill in the TimerTime topic, and use the exact same if( value > 0, 1, 0) formula.
One thing missing is the “glow”, because a disabled widget does not have a glow option. You could solve this by adding a container hidden behind the button, configuring a glow on that container, and making its visibility setting dynamic using the same formula.
[EDIT] I stumbled during testing of this tutorial on a bug. Make sure you are on version 2.0.16 (or later) , this resolves the bug (you can see the version in the top of the editor)
