Hi all, I am looking to create a card which has a dynamic timer for my furnace fan allowing me to increase or decrease the runtime as well as show a countdown for the time remaining. Admittedly, my YAML skills are fairly underwhelming however have been able to fumble along through modification of some existing YAML code on the forums. I have been able to setup the dashboard card showing what I would like, however I am having difficulties with the corresponding timer / integration between the timer and card. Here is the code that I currently have for the card, can someone please help me with the timer YAML code as well as corresponding integration into the card YAML code?
type: custom:button-card
variables:
my-timer:
- x
styles:
grid:
- grid-template-areas: "\"time plus\" \"time minus\""
- grid-template-columns: 3fr 1fr
- grid-template-rows: 1fr 1fr
custom_fields:
time:
card:
type: custom:button-card
entity:
- x
layout: icon_name_state2nd
icon: mdi:fan
show_name: true
show_icon: true
show_state: true
show_label: true
name: Furnace Fan Timer
tap_action:
action: call-service
service: timer.start
service_data:
entity_id:
- x
duration: "00:10:00"
hold_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
margin-top: 0px;
margin-left: 0px;
}
plus:
card:
type: custom:mushroom-template-card
entity:
- x
icon: mdi:plus
primary: 2 Min
tap_action:
action: call-service
service: script.add_time_to_timer
service_data:
timer_entity:
- x
minutes: 2
icon_color: blue
card_mod:
style: |
ha-card {
border: none;
}
minus:
card:
type: custom:mushroom-template-card
entity:
- x
icon: mdi:minus
primary: 2 Min
tap_action:
action: call-service
service: timer.change
target:
entity_id:
- x
service_data:
duration: "-00:2:00"
icon_color: red
card_mod:
style: |
ha-card {
border: none;
Some adjustments to get you started
type: custom:button-card
styles:
grid:
- grid-template-areas: "\"time plus\" \"time minus\""
- grid-template-columns: 3fr 1fr
- grid-template-rows: 1fr 1fr
custom_fields:
time:
card:
type: custom:button-card
entity: timer.timer
icon: mdi:fan
show_name: true
show_icon: true
show_state: true
show_label: true
name: Furnace Fan Timer
state:
- value: idle
styles:
icon:
- color: grey
- value: active
styles:
icon:
- color: lime
card_mod:
style: |
ha-card {
border: none;
margin-top: 0px;
margin-left: 0px;
}
plus:
card:
type: custom:mushroom-template-card
entity:
- timer.timer
icon: mdi:plus
primary: 2 Min
tap_action:
action: perform-action
perform_action: timer.change
target:
entity_id: timer.timer
data:
duration: 120
icon_color: blue
card_mod:
style: |
ha-card {
border: none;}
minus:
card:
type: custom:mushroom-template-card
icon: mdi:minus
primary: 2 Min
tap_action:
action: perform-action
perform_action: timer.change
target:
entity_id: timer.timer
data:
duration: -120
icon_color: red
card_mod:
style: |
ha-card {
border: none;}
Your current setup will not allow the Plus option to exceed the timer’s max setting.
I added a color change based on the timer state. There is a method to slim this down by consolidating this code:
type: custom:button-card
styles:
grid:
- grid-template-areas: "\"time plus\" \"time minus\""
- grid-template-columns: 3fr 1fr
- grid-template-rows: 1fr 1fr
custom_fields:
time:
card:
type: custom:button-card
A fancier example…
type: custom:button-card
entity: timer.timer
name: Furnace Fan Timer
size: 8em
show_state: true
icon: |
[[[ return entity.state === 'active' ? 'mdi:fan' : 'mdi:fan-off';
]]]
styles:
grid:
- grid-template-columns: 2fr 1fr
state:
- color: |
[[[ return entity.state === 'active' ? 'green' :
'grey';
]]]
icon:
- animation: >
[[[ return entity.state === 'active' ? ' rotating 1s linear infinite' :
'none';
]]]
- color: |
[[[ return entity.state === 'active' ? 'dodgerblue' :
'grey';
]]]
name:
- color: |
[[[ return entity.state === 'active' ? '#B0C4DE' :
'grey';
]]]
custom_fields:
controls:
- position: absolute
- left: 70%
custom_fields:
controls:
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: timer.timer
icon: mdi:plus
primary: 2 Min
tap_action:
action: perform-action
perform_action: timer.change
target:
entity_id: timer.timer
data:
duration: 120
icon_color: blue
card_mod:
style: |
ha-card {
border: none;
margin-top: 5px;}
- type: custom:mushroom-template-card
icon: mdi:minus
primary: 2 Min
tap_action:
action: perform-action
perform_action: timer.change
target:
entity_id: timer.timer
data:
duration: -120
icon_color: red
card_mod:
style: |
ha-card {
border: none;
margin-top: -14px;
background: none;}
- type: custom:mushroom-template-card
entity: timer.timer
icon: mdi:play
primary: Start
tap_action:
action: perform-action
perform_action: timer.start
target:
entity_id: timer.timer
icon_color: green
card_mod:
style: |
ha-card {
border: none;
margin-top: 10px;
background: none;
}
- type: custom:mushroom-template-card
entity: timer.timer
icon: mdi:stop
primary: Finish
tap_action:
action: perform-action
perform_action: timer.finish
target:
entity_id: timer.timer
icon_color: red
card_mod:
style: |
ha-card {
border: none;
margin-top: -14px;
background: none;
}
card_mod:
style: |
ha-card {
border: none;
}
