{{ state_attr('timer.garage', 'remaining') }}
Both attributes, remaining or duration, only show the timer amount, 10 minutes in this case.
2 Likes
Could you send a screenshot of the timer in the States tab of Developer Tools?
1 Like
Youāll need to use templating to read the finishes_at, then subtract the current time from it.
I think I may have tried something similar that I found in another post but it didnāt auto-refresh/countdown I had to manually refresh the page to change the time. Itās entirely possible I just did something wrong though. I will re-visit the finishes_at angle. Thanks for the replies.
You can always send your code that didnāt auto update for us to look at.
Mind sharing your drop down remote card and icons? They look super cool!
Doing a quick google search for the finishes_at attribute, I found the template below. In testing, I noticed that the template does auto-update, just every minute instead of continuously like the entity. Iām
fine with this, not going to lie itās not as cool as the continuous countdown but it will work. Thanks for pointing me in the right direction.
{% set f = state_attr('timer.garage', 'finishes_at') %}
{{ 'Idle' if f == None else
(as_datetime(f) - now()).total_seconds() | timestamp_custom('%H:%M:%S', false) }}
3 Likes
Same, how did you implement the dropdown? The lights one looks similar to my request, so itād be nice if I could know how to implement it for now, and if you gave it a 
.
1 Like
A countdown card which shows the seconds counting down would be very cool, the only way I could get this to work which I use as a generic kitchen timer and a more complex Smoker timer is custom:flipdown-timer-card. It works but not as customizable as Mushrooms.
How can I make Entity card to show image instead of icon?
I used following definition, but it still shows default icon.
type: custom:mushroom-entity-card
entity: switch.plug_voron
fill_container: false
primary_info: name
tap_action:
action: toggle
name: Voron
icon: entity-picture
entity-picture: /config/www/voron_logo.png
Is it possible to do 2 actions inside of an action? This doesnāt seem to work.
This is inside of a pop-up, I want to navigate to another page but for it to work seamlessly the pop-up needs to be closed so Iām trying to do that automatically.
- type: custom:mushroom-template-card
primary: ''
secondary: Secure
icon: phu:reolink-842
layout: vertical
icon_color: red
tap_action:
- action: navigate
navigation_path: cameras
- action: fire-dom-event
browser_mod:
command: close_popup
deviceID:
- this
picture: local/icons/custom_icons/camera.svg
Can anyone advise how to merge these two style entries ? - I have both working on their own but not sure the correct syntax to merge them togetherā¦ Iām trying to swap around the template card so that the icon appears on the right side instead.
How do I add this:
mushroom-state-item:
$: |
.container {
flex-direction: row-reverse !important;
}
into this:
- type: custom:mushroom-template-card
primary: Home
icon: mdi:home
icon_color: blue
card_mod:
style: |
mushroom-card {
background: rgba(10,70,170,0.2);
padding: 6px;
border-radius: 12px
}
ha-card {
box-shadow: none !important;
padding-top: 0px !important;
padding-bottom: 10px !important;
--card-primary-font-size: 18px;
--card-primary-font-weight: 300 !important;
}
@piitaya I figured I should reply here to not take the issue off topic.
Thatās interesting because using this doesnāt work for me on either entity or light cards only on template cards.
Works
- type: custom:mushroom-template-card
primary: ''
secondary: Scenes
icon: phu:scene-relax
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: scenes
picture: local/icons/custom_icons/spotlight2.png
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
background: transparent;
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
Doesnāt work.
- type: custom:mushroom-entity-card
name: Daniels š”
entity: script.strips_1_and_2_night
picture: local/icons/custom_icons/spotlight2.png
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID:
- this
Pop-up cards are supplied for this card, just not needed to post for this issue to keep it simple.
Editā¦ I noticed the request is for
entity_picture Iām referring to actual pictures.
You can add you picture to your entities using Customizing entities - Home Assistant
Then, you can use 'icon-type: entity-picture` to use it in any card.
For information, all card options are available from the UI editor. If youāre adding additional option to yaml, it certainly wonāt work.
1 Like
How can I show an entity attribute as second information?
type: custom:mushroom-entity-card
entity: sensor.rpi_monitor_raspberrypi
secondary_info: ???????
Iāve also tried using an ātemplateā. Even that doesnāt work:
- platform: template
raspberry_pi_cpu_load_15:
friendly_name_template: "Raspberry Pi CPU Load 15 Minutes"
value_template: "{{state_attr('sensor.rpi_monitor_raspberrypi', 'load_15min_prcnt')}}"
unit_of_measurement: 'Ā°C'
Thanks!
card_mod:
style:
mushroom-state-item:
$: |
.container {
flex-direction: row-reverse !important;
}
.: |
mushroom-card {
background: rgba(10,70,170,0.2);
padding: 6px;
border-radius: 12px
}
ha-card {
box-shadow: none !important;
padding-top: 0px !important;
padding-bottom: 10px !important;
--card-primary-font-size: 18px;
--card-primary-font-weight: 300 !important;
}
Something like that.
1 Like
I see, I was trying to see if I could avoid hard coding for each entity and use this in an auto entities by having all auto generated cards use a single picture by simply adding this (picture: ...) the way I did in the Template card.
Is it possible to add support for specifying a picture path to all mushroom cards?
Works perfectly, many thanks 
Thanks a lot.
I took the icons from https://www.pngegg.com/. There are millions of options in this site. Just search for what you want and as for download, if the size of the png is large, use the resize option at the right side of the screen before downloading.
and as for the code :
square: false
columns: 1
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: null
cards: null
- square: false
columns: 7
type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'off'
chip:
type: entity
entity: scene.klima_ac
name: Klima
content_info: name
use_entity_picture: true
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 15px;
margin-left: 5px;
width: 400px;
}
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'off'
chip:
type: action
icon_color: amber
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.klima_ac
icon: mdi:plus
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 15px;
margin-left: 30px;
margin-bottom: -12px;
width: 400px
}
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'off'
chip:
type: action
icon_color: amber
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.klima_kapat
icon: mdi:minus
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 15px;
margin-left: 20px;
margin-bottom: -12px;
width: 400px
}
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'off'
chip:
type: entity
entity: scene.tv_ac
name: TV
content_info: name
use_entity_picture: true
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 10px;
margin-left: 20px;
width: 400px;
}
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'off'
chip:
type: action
icon_color: amber
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.tv_ac
icon: mdi:plus
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 15px;
margin-left: 25px;
margin-bottom: -12px;
width: 400px
}
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'off'
chip:
type: action
icon_color: amber
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.tv_kapat
icon: mdi:minus
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 15px;
margin-left: 10px;
margin-bottom: -12px;
width: 400px
}
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.amps_dropdown
icon_color: disabled
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0px;
--chip-icon-size: 20px;
margin-right: -4px;
margin-bottom: -12px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 15px;
margin-left: -6px;
margin-bottom: -12px;
width: 400px
}
alignment: start
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'on'
card:
type: custom:mushroom-entity-card
entity: scene.klima_ac
secondary_info: none
layout: vertical
primary_info: name
name: Klima
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
use_entity_picture: true
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'on'
card:
type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: scene.klima_ac
name: AƧ
secondary_info: none
layout: vertical
primary_info: name
fill_container: false
hide_icon: true
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.klima_ac
- type: custom:mushroom-entity-card
entity: scene.klima_kapat
name: Kapat
secondary_info: none
layout: vertical
primary_info: name
fill_container: false
hide_icon: true
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.klima_kapat
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'on'
card:
type: custom:mushroom-entity-card
entity: scene.tv_ac
secondary_info: none
layout: vertical
primary_info: name
name: TV
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
use_entity_picture: true
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'on'
card:
type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: scene.tv_ac
name: AƧ
secondary_info: none
layout: vertical
primary_info: name
fill_container: false
hide_icon: true
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.tv_ac
- type: custom:mushroom-entity-card
entity: scene.tv_kapat
name: Kapat
secondary_info: none
layout: vertical
primary_info: name
fill_container: false
hide_icon: true
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.tv_kapat
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'on'
card:
type: custom:mushroom-entity-card
entity: scene.anfi_ac
secondary_info: none
layout: vertical
primary_info: name
name: Anfi
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
use_entity_picture: true
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'on'
card:
type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: scene.anfi_ac
name: AƧ
secondary_info: none
layout: vertical
primary_info: name
fill_container: false
hide_icon: true
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.anfi_ac
- type: custom:mushroom-entity-card
entity: scene.anfi_kapat
name: Kapat
secondary_info: none
layout: vertical
primary_info: name
fill_container: false
hide_icon: true
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.anfi_kapat
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'on'
card:
type: custom:mushroom-entity-card
entity: scene.hdmi_1
secondary_info: none
layout: vertical
primary_info: name
name: HDMI
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
use_entity_picture: true
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'on'
card:
type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: scene.hdmi_1
name: 1
secondary_info: none
layout: vertical
primary_info: name
fill_container: false
hide_icon: true
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.hdmi_1
- type: custom:mushroom-entity-card
entity: scene.hdmi_2
name: 2
secondary_info: none
layout: vertical
primary_info: name
fill_container: false
hide_icon: true
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.hdmi_2
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'on'
card:
type: custom:mushroom-entity-card
entity: scene.ses_yukselt
secondary_info: none
layout: vertical
primary_info: name
name: Ses
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
use_entity_picture: true
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'on'
card:
type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: scene.ses_yukselt
name: +
secondary_info: none
layout: vertical
primary_info: name
fill_container: false
hide_icon: true
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.ses_yukselt
- type: custom:mushroom-entity-card
entity: scene.ses_azalt
name: '-'
secondary_info: none
layout: vertical
primary_info: name
fill_container: false
hide_icon: true
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.ses_azalt
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'on'
card:
type: custom:mushroom-entity-card
entity: light.star_projector
secondary_info: none
layout: vertical
primary_info: name
name: Star Projector
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
use_entity_picture: true
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'on'
card:
type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: light.star_projector
name: AƧ
secondary_info: none
layout: vertical
primary_info: name
fill_container: false
hide_icon: true
tap_action:
action: call-service
service: light.turn_on
service_data: {}
target:
entity_id: light.star_projector
- type: custom:mushroom-entity-card
entity: light.star_projector
name: Kapat
secondary_info: none
layout: vertical
primary_info: name
fill_container: false
hide_icon: true
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.star_projector
card_mod:
style: |
ha-card {
padding: 5px;
background: #1a1a1a;
}
2 Likes