wgumaa
May 22, 2023, 8:15am
6899
@Thekholm hereās the code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-shape-icon$: >
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %}
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
} {% endif %}
.: |
ha-card {
background: none;
border: none;
}
entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate
multiline_secondary: false
primary: |2-
{% set d ={
'Delayed start': 'Delayed Start',
'Running': 'Running',
'Cycle is finished': 'Cycle Ended',
'Off': 'Off'
} %}
{{ d.get(states(entity)) }}
secondary: >
Time - {{states('sensor.electrolux_sawa_washing_machine_wm1_timetoend')}}
Min
{{states('sensor.electrolux_sawa_washing_machine_wm1_cyclephase')}}
{{states('sensor.electrolux_sawa_washing_machine_wm1_cyclesubphase')}}
icon: >-
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %}
mdi:washing-machine
{% elif
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Cycle is finished') %}
mdi:washing-machine-alert
{% else %}
mdi:washing-machine
{% endif %}
icon_color: >-
{% set state=states(entity) %} {% if state=='Running' %} blue {% elif
state== 'Delayed start' %} orange {% elif state== 'Cycle is finished' %}
purple {% else %} grey {% endif %}
- type: custom:mushroom-template-card
entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate
icon: >-
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %}
mdi:washing-machine
{% elif
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Cycle is finished') %}
mdi:washing-machine-alert
{% else %}
mdi:washing-machine
{% endif %}
icon_color: >-
{% set state=states(entity) %} {% if state=='Running' %} red {% elif
state== 'Delayed start' %} orange {% elif state== 'Cycle is finished' %}
purple {% else %} grey {% endif %}
card_mod:
style:
mushroom-shape-icon$: >
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %} ha-icon {
--icon-animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
} {% endif %} .shape {
--shape-color: none;
}
.: |
ha-card {
top: -65px;
background: none;
border: none;
}
- type: custom:mushroom-chips-card
alignment: center
card_mod:
style: |
div.chip-container {
margin-top: -61px;
--chip-border-width: 0px;
--chip-background: none;
}
chips:
- type: template
icon: mdi:tshirt-crew-outline
entity: sensor.electrolux_sawa_washing_machine_wm1_programuid
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: '{{states(''sensor.electrolux_sawa_washing_machine_wm1_programuid'') }} '
- type: template
icon: mdi:thermometer
entity: sensor.electrolux_sawa_washing_machine_wm1_analogtemperature
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{{states('sensor.electrolux_sawa_washing_machine_wm1_analogtemperature')
}}Ā°C
- type: template
icon: mdi:alpha-s-circle-outline
entity: sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{{states('sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed')
}}
- type: template
entity: binary_sensor.electrolux_sawa_washing_machine_wm1_doorlock
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{% set d ={ 'off': 'Locked', 'on': 'Unlocked', } %}
{{d.get(states(entity)) }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:lock
{% else %}
mdi:lock-open-outline
{% endif %}
card_mod:
style: |
ha-card {
height:115px !important;
width: 285px
background: none;
}
Modifications have to be made for themes. The code is for the default theme.
7 Likes
wgumaa
May 22, 2023, 8:29am
6900
Another card I am working on. So I have a garage that opens by means of a ābuttonā switch with a toggle action.
Anyone know how to animate the card when the button is pressed only?
type: custom:mushroom-template-card
primary: 'Garage '
secondary: Open/Close
icon: mdi:garage-variant
entity: button.garage_switch
tap_action:
action: toggle
icon_color: brown
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: door 3s steps(1) infinite alternate;
}
@keyframes door {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
50% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
}
You can try just putting an if else inside the ha-icon.
As far as the washing machine paper is concerned, nice job, I will definitely take a cue from it when I buy a smart one.
1 Like
wgumaa
May 22, 2023, 9:13am
6902
@Mattia2399 , creating an if else statement for an entity state I can do as in the washing machine card but when I check the state of the button I get a timestamp ā2023-05-22T05:13:53.304133+00:00ā.
How would I work that in?
style:
mushroom-shape-icon$: >
{% if
is_state('button.garage_switch',
'**XXXX**) %}
???
swifty
May 22, 2023, 9:47am
6903
Nice work, looks great!
Which theme is that you are using ? - I like the ā3dā effect to the card.
wgumaa
May 22, 2023, 10:06am
6904
Thats the SoftUI theme: with a bit of tweaks. It can be found here:
https://community.home-assistant.io/t/so-i-made-some-soft-ui-themes/220908
However I have resorted to the default theme and code for the washing machine is based on the default theme.
Some cards like āExpander Cardsā donāt play nice with themes.
1 Like
Mattia2399
May 22, 2023, 11:39am
6905
I also have a button for the gate with animation, but since it is connected to the āāonāā state of button, i will see the animation for only a very few milliseconds.
mushroom-shape-icon$: |
ha-icon {
{% if is_state('button.garage', 'on') %}
--icon-animation: door 3s steps(1) infinite alternate;
{% else %}
{%endif%}
}
1 Like
wgumaa
May 22, 2023, 11:56am
6906
@Mattia2399
Thanks Iāll try that and let you know.
wgumaa
May 22, 2023, 11:59am
6907
@Murder3D There is a Mushroom Cover Card for curtains. Why arenāt using that?
I wonder if someone might be able to post an example of using an expander card with a mushroom title card (or otherwise, maybe a template card) as theā¦ title card? Particularly with modified colors and fonts. My mushroom title card is working perfectly as the title card for my expander card, but everything Iāve tried to change the background color and font has not had any effect. Hereās what I have currently:
- type: custom:expander-card
title: ''
cards:
- type: entities
entities:
- entity: climate.first_floor_baseboards
name: First Floor
icon: mdi:radiator
- entity: climate.second_floor_baseboards
name: Second Floor
icon: mdi:radiator
- entity: climate.master_bedroom_baseboards
name: Master Bedroom
icon: mdi:radiator
- entity: climate.basement_baseboards
name: Basement
icon: mdi:radiator
state_color: true
style:
.: |
ha-card {
height: 4em;
background: none;
box-shadow: none;
}
state_color: false
button-background: rgba(7, 103, 215, 0.24)
clear: false
padding: '0'
child-padding: '0'
gap: '0'
title-card:
type: custom:mod-card
style: |
ha-card: {
--background: rgba(7, 103, 215, 0.24)
}
card:
type: custom:mushroom-title-card
title: BASEBOARD HEATERS
card-mod:
style: |
mushroom-title-card$: |
.header {
--title-padding: 23px 0px 40px;
letter-spacing: -0.12vw!important;
}
.title {
font-size: 35px!important;
font-weight: 520!important;
}
I seem to be able to change the color of only the expander button. The font-size and font-weight keys donāt have any affect on the title card. Nor does the --background have any affect on the color of the card.
wgumaa
May 22, 2023, 3:19pm
6909
@Mattia2399 I tried and it didnāt work.
type: custom:mushroom-template-card
primary: 'Garage '
secondary: Open/Close
icon: mdi:garage-variant
entity: button.garage_switch
tap_action:
action: toggle
icon_color: brown
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state('button.garage_switch', 'on') %}
--icon-animation: door 3s steps(1) infinite alternate;
}
@keyframes door {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
50% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
}
{% else %}
{%endif%}
}
I suspect that its a state issue with the button as the attribute is not āonā but a timestamp.
fugley
May 22, 2023, 5:02pm
6910
this works for myself
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state(config.entity, 'on') %}
--icon-animation: door 3s steps(1) infinite alternate;
}
@keyframes door {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
50% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
}
{% else %}
{%endif%}
}
wgumaa
May 22, 2023, 5:43pm
6911
But what do you get when press open your entity? I donāt get an āonā but a timestamp.
My garage is on an impulse. Press it opens; press it closes.
Neo1984
May 22, 2023, 5:48pm
6912
Hello everyone,
is there any way to combine a Mushroom Light Card together with the benefits (secondary) from the mushroom tamplate card? I want to have the style of my Mushroom Light Card with a Brightness Slider but as well i want to display the consumption of the device which i have done with a tamplate card - I want to have it as one
Hi, could you help me figure out where Iām going wrong? Thanks in advance
type: custom:mushroom-template-card
primary: Update HA
entity: null
icon: mdi:home-assistant
badge_icon: none
layout: vertical
hold_action:
action: toggle
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Update HA
content:
type: custom:auto-entities
card:
type: entities
filter:
include:
- type: custom:button-card
entity: null
show_icon: false
show_name: true
name: Update
styles:
card:
- border-radius: 15px
- border-left: 20px solid var(--state-icon-color)
- border-right: 20px solid var(--state-icon-color)
- height: 30px
name:
- font-size: 30px
- color: var(--state-icon-color)
tap_action:
action: navigate
navigation_path: /config/updates
haptic: heavy
- square: true
columns: 1
type: grid
cards:
- extra_styles: |
@keyframes fade {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
type: custom:button-card
entity: null
icon: mdi:home-assistant
show_entity_picture: false
aspect_ratio: 1/1
name: HomeAssistant
styles:
card:
- border-radius: 15%
- padding: 10%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i update" "n n" "ha ha" "super super" "os os"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 3px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- margin-top: '-5%'
- width: 85%
- color: >
[[[
if (states['update.home_assistant_core_update'].state
== "on")
return 'red'
else if
(states['update.home_assistant_supervisor_update'].state
==
"on")
return 'red'
else if
(states['update.home_assistant_operating_system_update'].state
== "on")
return 'red'
else
return 'var(--state-icon-color)'
]]]
- animation: >
[[[
if (states['update.home_assistant_core_update'].state
== "on")
return 'fade 3s infinite'
else if
(states['update.home_assistant_supervisor_update'].state
==
"on")
return 'fade 3s infinite'
else if
(states['update.home_assistant_operating_system_update'].state
== "on")
return 'fade 3s infinite'
else
return ''
]]]
custom_fields:
update:
- align-self: start
- justify-self: end
- font-size: 12px
ha:
- padding-bottom: 1px
- align-self: middle
- justify-self: start
- font-size: 9px
super:
- padding-bottom: 1px
- align-self: middle
- justify-self: start
- font-size: 9px
os:
- padding-bottom: 0px
- align-self: middle
- justify-self: start
- font-size: 9px
custom_fields:
update: >
[[[
if (states['update.home_assistant_core_update'].state ==
"on")
return `<span><span style="color: red;">Update</span>`
else if
(states['update.home_assistant_supervisor_update'].state
== "on")
return `<span><span style="color: red;">Update</span>`
else if
(states['update.home_assistant_operating_system_update'].state
==
"on")
return `<span><span style="color: red;">Update</span>`
else
return `<span><span style="color: lime;">Ok</span>`
]]]
ha: |
[[[
if (states['update.home_assistant_core_update'].state == "on")
return `Core: <span style="color: red;"><span>${states['update.home_assistant_core_update'].attributes.installed_version}</span> <span style="color: orange;"><span> -> </span><span style="color: lime;"><span>${states['update.home_assistant_core_update'].attributes.latest_version}</span></span>`
else
return `Core : <span style="color: deepskyblue;"><span>${states['update.home_assistant_core_update'].attributes.installed_version}</span>`
]]]
super: |
[[[
if (states['update.home_assistant_supervisor_update'].state == "on")
return `Supe: <span style="color: red;"><span>${states['update.home_assistant_supervisor_update'].attributes.installed_version}</span> <span style="color: orange;"><span> -> </span><span style="color: lime;"><span>${states['update.home_assistant_supervisor_update'].attributes.latest_version}</span></span>`
else
return `Supe : <span style="color: deepskyblue;"><span>${states['update.home_assistant_supervisor_update'].attributes.installed_version}</span>`
]]]
os: |
[[[
if (states['update.home_assistant_operating_system_update'].state == "on")
return `Os: <span style="color: red;"><span>${states['update.home_assistant_operating_system_update'].attributes.installed_version}</span> <span style="color: orange;"><span> -> </span><span style="color: lime;"><span>${states['update.home_assistant_operating_system_update'].attributes.latest_version}</span></span>`
else
return `Os : <span style="color: deepskyblue;"><span>${states['update.home_assistant_operating_system_update'].attributes.installed_version}</span>`
]]]
- extra_styles: |
@keyframes fade {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
type: custom:button-card
entity: sensor.hacs
icon: mdi:store
show_entity_picture: false
aspect_ratio: 1/1
name: Hacs
styles:
card:
- border-radius: 15%
- padding: 10%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i update" "n n" "install install"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 5px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == "0") return 'var(--state-icon-color)';
else return 'red';
]]]
- margin-top: '-10%'
- width: 80%
- animation: |
[[[
if (entity.state != "0") return 'fade 3s infinite';
else return '';
]]]
custom_fields:
update:
- align-self: start
- justify-self: end
install:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
new:
- align-self: middle
- justify-self: start
custom_fields:
update: |
[[[
if (entity.state == "0")
return `<span><span style="color: lime;">Ok</span>`
else
return `<span><span style="color: Red;">Update</span>`
]]]
install: |
[[[
if (entity.state == "0")
return `<span>Repo : <span style="color: deepskyblue;">Tutto Aggiornato</span>`
else
return `<span>Repo : <span style="color: red;"><span>${entity.state}</span></span>`
]]]
- extra_styles: |
@keyframes fade {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
type: custom:button-card
entity: update.dynu_dns_update
icon: mdi:network
show_entity_picture: false
aspect_ratio: 1/1
name: Dynu Ddns
styles:
card:
- border-radius: 15%
- padding: 10%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i update" "n n" "install install" "new new"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 5px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == "off") return 'var(--state-icon-color)';
else return 'red';
]]]
- margin-top: '-10%'
- width: 80%
- animation: |
[[[
if (entity.state == "on") return 'fade 3s infinite';
else return '';
]]]
custom_fields:
update:
- align-self: start
- justify-self: end
install:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
new:
- align-self: middle
- justify-self: start
custom_fields:
update: |
[[[
if (entity.state == "off")
return `<span><span style="color: lime;">Ok</span>`
else
return `<span><span style="color: Red;">Update</span>`
]]]
install: |
[[[
if (entity.state == "off")
return `<span>Installata : <span style="color: deepskyblue;"><span>${entity.attributes.installed_version}</span></span>`
else
return `<span>Installata : <span style="color: red;"><span>${entity.attributes.installed_version}</span></span>`
]]]
new: |
[[[
if (entity.state == "off")
return `<span>Ultima : <span style="color: deepskyblue;"><span>${entity.attributes.latest_version}</span></span>`
else
return `<span>Ultima : <span style="color: red;"><span>${entity.attributes.latest_version}</span></span>`
]]]
- extra_styles: |
@keyframes fade {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
type: custom:button-card
entity: update.terminal_ssh_update
icon: mdi:ssh
show_entity_picture: false
aspect_ratio: 1/1
name: Terminale & Ssh
styles:
card:
- border-radius: 15%
- padding: 10%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i update" "n n" "install install" "new new"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 5px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == "off") return 'var(--state-icon-color)';
else return 'red';
]]]
- margin-top: '-10%'
- width: 80%
- animation: |
[[[
if (entity.state == "on") return 'fade 3s infinite';
else return '';
]]]
custom_fields:
update:
- align-self: start
- justify-self: end
install:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
new:
- align-self: middle
- justify-self: start
custom_fields:
update: |
[[[
if (entity.state == "off")
return `<span><span style="color: lime;">Ok</span>`
else
return `<span><span style="color: Red;">Update</span>`
]]]
install: |
[[[
if (entity.state == "off")
return `<span>Installata : <span style="color: deepskyblue;"><span>${entity.attributes.installed_version}</span></span>`
else
return `<span>Installata : <span style="color: red;"><span>${entity.attributes.installed_version}</span></span>`
]]]
new: |
[[[
if (entity.state == "off")
return `<span>Ultima : <span style="color: deepskyblue;"><span>${entity.attributes.latest_version}</span></span>`
else
return `<span>Ultima : <span style="color: red;"><span>${entity.attributes.latest_version}</span></span>`
]]]
- extra_styles: |
@keyframes fade {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
type: custom:button-card
entity: update.file_editor_update
icon: mdi:file-cog
show_entity_picture: false
aspect_ratio: 1/1
name: File Editor
styles:
card:
- border-radius: 15%
- padding: 10%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i update" "n n" "install install" "new new"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 5px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == "off") return 'var(--state-icon-color)';
else return 'red';
]]]
- margin-top: '-10%'
- width: 80%
- animation: |
[[[
if (entity.state == "on") return 'fade 3s infinite';
else return '';
]]]
custom_fields:
update:
- align-self: start
- justify-self: end
install:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
new:
- align-self: middle
- justify-self: start
custom_fields:
update: |
[[[
if (entity.state == "off")
return `<span><span style="color: lime;">Ok</span>`
else
return `<span><span style="color: Red;">Update</span>`
]]]
install: |
[[[
if (entity.state == "off")
return `<span>Installata : <span style="color: deepskyblue;"><span>${entity.attributes.installed_version}</span></span>`
else
return `<span>Installata : <span style="color: red;"><span>${entity.attributes.installed_version}</span></span>`
]]]
new: |
[[[
if (entity.state == "off")
return `<span>Ultima : <span style="color: deepskyblue;"><span>${entity.attributes.latest_version}</span></span>`
else
return `<span>Ultima : <span style="color: red;"><span>${entity.attributes.latest_version}</span></span>`
]]]
- extra_styles: |
@keyframes fade {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
type: custom:button-card
entity: update.network_ups_tools_update
icon: mdi:network
show_entity_picture: false
aspect_ratio: 1/1
name: Network UPS
styles:
card:
- border-radius: 15%
- padding: 10%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i update" "n n" "install install" "new new"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 5px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == "off") return 'var(--state-icon-color)';
else return 'red';
]]]
- margin-top: '-10%'
- width: 80%
- animation: |
[[[
if (entity.state == "on") return 'fade 3s infinite';
else return '';
]]]
custom_fields:
update:
- align-self: start
- justify-self: end
install:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
new:
- align-self: middle
- justify-self: start
custom_fields:
update: |
[[[
if (entity.state == "off")
return `<span><span style="color: lime;">Ok</span>`
else
return `<span><span style="color: Red;">Update</span>`
]]]
install: |
[[[
if (entity.state == "off")
return `<span>Installata : <span style="color: deepskyblue;"><span>${entity.attributes.installed_version}</span></span>`
else
return `<span>Installata : <span style="color: red;"><span>${entity.attributes.installed_version}</span></span>`
]]]
new: |
[[[
if (entity.state == "off")
return `<span>Ultima : <span style="color: deepskyblue;"><span>${entity.attributes.latest_version}</span></span>`
else
return `<span>Ultima : <span style="color: red;"><span>${entity.attributes.latest_version}</span></span>`
]]]
- extra_styles: |
@keyframes fade {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
type: custom:button-card
entity: update.nginx_home_assistant_ssl_proxy_update
icon: mdi:all-inclusive
show_entity_picture: false
aspect_ratio: 1/1
name: Nginx
styles:
card:
- border-radius: 15%
- padding: 10%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i update" "n n" "install install" "new new"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 5px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == "off") return 'var(--state-icon-color)';
else return 'red';
]]]
- margin-top: '-10%'
- width: 80%
- animation: |
[[[
if (entity.state == "on") return 'fade 3s infinite';
else return '';
]]]
custom_fields:
update:
- align-self: start
- justify-self: end
install:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
new:
- align-self: middle
- justify-self: start
custom_fields:
update: |
[[[
if (entity.state == "off")
return `<span><span style="color: lime;">Ok</span>`
else
return `<span><span style="color: Red;">Update</span>`
]]]
install: |
[[[
if (entity.state == "off")
return `<span>Installata : <span style="color: deepskyblue;"><span>${entity.attributes.installed_version}</span></span>`
else
return `<span>Installata : <span style="color: red;"><span>${entity.attributes.installed_version}</span></span>`
]]]
new: |
[[[
if (entity.state == "off")
return `<span>Ultima : <span style="color: deepskyblue;"><span>${entity.attributes.latest_version}</span></span>`
else
return `<span>Ultima : <span style="color: red;"><span>${entity.attributes.latest_version}</span></span>`
]]]
give an example, attach some photos. Go to developer tools and see the attributes of the entity.
wgumaa
May 22, 2023, 7:20pm
6915
@Mattia2399
This is what I get. The switch is a toggle switch.
Dibbler
May 22, 2023, 7:24pm
6916
@wgumaa Nice work and thanks for sharing the code. I copied it to adapt it an my washing machine.
To learn some thing it try to rebuild things. Could you explain why there are two template cards? At first sight i expected a template card and a chips card.
wgumaa
May 22, 2023, 7:29pm
6917
The second template card is for the drum rotation and to have it a different colour. This was taken from the animated washing machine done by @rhysb
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: orange
primary: 'Washing Machine #2'
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: orange
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
1 Like
Dibbler
May 22, 2023, 7:35pm
6918
Tnaks for the explanation. Thats very clever to put stack two card. Thats why i try to rebuild thing - Leand something Thanks
1 Like
