Boost timer for heating.... help please.

[John Magill]

Hi I'm a bit lost with this template stuff. I'm planning a group of buttons to control/boost my heating and cannot seem to get any alignment or layout which looks right.

For each boost ideally there would be 2 buttons.

First button would boost the heating for say 30 minutes and each subsequent press would add 30 more minutes. The button should display the remaining minutes.

Second button stops the timer.

I have had a go at it (counting down in seconds and this is displayed in a text box ) but cannot get it all on one line. File attached

Any help much appreciated..

[John Magill]

I've has some success with the buttons and timer function.

Here is the buttons template, which now shows the countdown on button 1. Is there a way to hide the second "STOP" button when msg.payload is zero ?

<div layout="row" layout-align="space-between">

<md-button class="md-raised"   ng-click="send({topic: 'add'})"> 

   Liv boost <br> {{msg.payload}}

</md-button> 

<md-button class="md-raised"  ng-click="send({topic: 'stop'})"> 

  STOP

</md-button> <br>

</div>  

[steve rickus]

I have not tried this, but according to this angular directives page, it should work for you:

<md-button class="md-raised" ng-show="payload" ng-click="send({topic: 'stop'})">
  STOP
</md-button> <br>

since any positive value in msg.payload would be evaluated as "true". Alternately, you could probably use ng-hide="payload == 0"