Most of my pictures are located in a folder inside HA. Most of them are being used with css but I also do have some pictures entered straight into config. I downloaded them from png egg website. The site lets you to resize the pictures before downloading.
I saw the resize part but I’m curious what size you’re resizing to.
Your roomcard, can you share that?
I tried putting that in the mushroom.yaml and clearing cache but it didn’t change anything.
Can this be applied as a style with card-mod?
mush-title-padding: 12px 12px 6px
mush-title-spacing: 6px
min 500x. You can resize at the site too.
1 Like
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Half Bath
secondary: Bathroom
icon: mdi:toilet
fill_container: true
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: half-bath
icon_color: teal
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 56px;
margin-left: -2px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
- type: conditional
conditions:
- entity: light.vanity_light
state: 'on'
chip:
type: entity
entity: light.vanity_light
icon_color: amber
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.vanity_light
content_info: none
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: fan.exhaust_fan
state: 'on'
chip:
type: entity
entity: fan.exhaust_fan
icon_color: green
card_mod: null
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
{% if states('fan.exhaust_fan') == 'on' %}
animation-duration: 1s;
{%- else -%}
{%- endif %}
}
tap_action:
action: call-service
service: fan.turn_off
service_data: {}
target:
entity_id: fan.exhaust_fan
content_info: none
icon: mdi:fan
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-right: 6px;
}
card_mod:
style: |
ha-card {
height: 92px;
{% if is_state('light.vanity_light', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
2 Likes
Do anyone know how i can show a whole picture?
i.e remove the round frame around an entity picture? - It cuts of a lot of essential information about a state…
(Two cards on the bottom)
Hi. I’m curious if anyone has managed to get a timer entity to display the timer countdown in a mushroom card or maybe we could have a “light timer” card in the future?
Previously I used the top card to visualize the lights I have on timers and would like to move this functionality to a mushroom card where the icon illuminates when the light is on and the countdown of the timer displays below the name. Currently, I’m using the template card and have only been able to get the state of the timer (idle/active). Is it possible to get the timer countdown via a template?
2 Likes
Can you use state_attr to get the time remaining?
{{ 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.