templateā¦ not entity.
my bad 
Would you have any idea how to convert the value from seconds to either minutes or ideally hours:minutes or do I need to create a custom sensor?
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.ups_battery_runtime
content: 'Runtime: {{ states(entity) }} seconds'
icon: mdi:weight-lifter
icon_color: null
tap_action: none
{{ ( states('sensor.ups_battery_runtime') | int / 24 ) | round(0) }} minutes
If the sensor data is in seconds then youāll need to divide by 60 for minutes. (in place of the 24 you have)
TouchĆ© but I canāt enter that code is the content section or at least I canāt determine the correct methodology.
HA:
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
margin: '-4px -4px -8px -4px'
padding: 0px
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px'
padding: 0px
cards:
- type: custom:mushroom-template-card
entity: sensor.ipv4_address_eth0
primary: Home Assistant
secondary: |
{{ states(entity) }}
icon: mdi:home-assistant
icon_color: >-
{{ 'orange' if not is_state('sensor.ipv4_address_eth0',
'unavailable') else 'disabled' }}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |
--popup-max-width: 600px;
--popup-min-width: 400px;
--popup-border-width: 1px;
--popup-border-radius: 12px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em) brightness(1.2);
content:
type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: auto
cards:
- type: custom:mushroom-entity-card
entity: sensor.uptime_2
name: Restart
icon: mdi:restart
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: >
--popup-max-width: 600px;
--popup-min-width: 400px;
--popup-border-width: 1px;
--popup-border-radius: 12px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em)
brightness(1.2);
content:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
primary: Are you wish to restart HA?
multiline_secondary: true
icon: mdi:comment-question
icon_color: yellow
hold_action:
action: none
tap_action:
action: none
double_tap_action:
action: none
right_button: 'Yes'
left_button: Cancel
right_button_action:
service: browser_mod.popup
data:
style: >
--popup-max-width: 600px;
--popup-min-width: 400px;
--popup-border-width: 1px;
--popup-border-radius: 12px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em)
brightness(1.2);
content:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
primary: Fine, HA will restart in 3s.
icon: mdi:information-outline
icon_color: yellow
hold_action:
action: none
tap_action:
action: none
double_tap_action:
action: none
dismissable: false
title: ''
timeout: 3000
timeout_action:
service: homeassistant.restart
right_button: Cancel
icon_color: yellow
card_mod:
style: |
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:mushroom-entity-card
entity: sensor.last_boot
name: Reboot
hold_action:
action: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: >
--popup-max-width: 600px;
--popup-min-width: 400px;
--popup-border-width: 1px;
--popup-border-radius: 12px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em)
brightness(1.2);
content:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
primary: Are you wish to reboot system?
icon: mdi:comment-question
icon_color: yellow
hold_action:
action: none
tap_action:
action: none
double_tap_action:
action: none
right_button: 'Yes'
left_button: Cancel
right_button_action:
service: browser_mod.popup
data:
style: >
--popup-max-width: 600px;
--popup-min-width: 400px;
--popup-border-width: 1px;
--popup-border-radius: 12px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em)
brightness(1.2);
content:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
primary: Fine, system will reboot in 3s.
icon: mdi:information-outline
icon_color: yellow
hold_action:
action: none
tap_action:
action: none
double_tap_action:
action: none
dismissable: false
title: ''
timeout: 3000
timeout_action:
service: hassio.host_reboot
right_button: Cancel
double_tap_action:
action: none
icon: mdi:power-cycle
layout: vertical
icon_color: yellow
card_mod:
style: |
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:mushroom-template-card
primary: Shutdown
secondary: '{{ states(''sensor.last_boot'').split(''T'')[0] }}'
icon: mdi:power
icon_color: red
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: >
--popup-max-width: 600px;
--popup-min-width: 400px;
--popup-border-width: 1px;
--popup-border-radius: 12px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em)
brightness(1.2);
content:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
primary: Are you wish to shutdown system?
icon: mdi:comment-question
icon_color: yellow
hold_action:
action: none
tap_action:
action: none
double_tap_action:
action: none
right_button: 'Yes'
left_button: Cancel
right_button_action:
service: browser_mod.popup
data:
style: >
--popup-max-width: 600px;
--popup-min-width: 400px;
--popup-border-width: 1px;
--popup-border-radius: 12px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em)
brightness(1.2);
content:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
primary: Fine, live in darkness.
icon: mdi:information-outline
icon_color: yellow
hold_action:
action: none
tap_action:
action: none
double_tap_action:
action: none
dismissable: false
title: ''
timeout: 6000
timeout_action:
service: hassio.host_shutdown
right_button: Cancel
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: power 1.5s infinite;
}
@keyframes power {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
}
.: |
:host {
--mush-icon-border-radius: 12px;
}
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: conditional
conditions:
- entity: sensor.ipv4_address_eth0
state_not: unavailable
card:
type: custom:mushroom-template-card
entity: input_boolean.ha_dropdown
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-down' if is_state(entity, 'off') else
'mdi:chevron-up' }}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.ha_dropdown
state: 'on'
- entity: sensor.ipv4_address_eth0
state_not: unavailable
card:
type: custom:layout-card
layout_type: grid
layout:
margin: 0 -4px 0 -4px
padding: 0px
cards:
- type: custom:stack-in-card
cards:
- type: custom:uptime-card
entity: binary_sensor.rpi_power_status
hours_to_show: 24
alias:
ok: ' '
ko: ' '
effect: fade
target: card
speed: 1
color:
ok: gray
ko: '#EF810E'
half: orange
none: black
show:
header: false
title: false
icon: false
status: true
timeline: true
footer: false
average: false
tooltip:
animation: true
hour24: true
clip: {}
blink: {}
tap_action: {}
init: {}
bar:
amount: 48
height: 16
round: 2
card_mod:
style: |
ha-card {
margin-top: -14px;
}
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr 2fr
grid-template-rows: auto
margin: '-4px -4px -8px -4px'
padding: 0px
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.processor_temperature
hold_action:
action: none
primary_info: name
secondary_info: state
name: CPU
card_mod:
style: |
ha-card {
margin-top: 0px;
margin-right: -10px;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.memory_use_percent
icon: mdi:memory
hold_action:
action: none
primary_info: name
secondary_info: state
name: RAM
card_mod:
style: |
ha-card {
margin-top: -12px;
margin-right: -10px;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.processor_use
icon: mdi:cpu-64-bit
hold_action:
action: none
primary_info: name
secondary_info: state
name: CPU
card_mod:
style: |
ha-card {
margin-top: -12px;
margin-right: -10px;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.disk_use_percent
icon: mdi:harddisk
hold_action:
action: none
primary_info: name
secondary_info: state
name: HDD
card_mod:
style: |
ha-card {
margin-top: -12px;
margin-right: -10px;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.argon_one_addon_fan_speed
icon: mdi:fan
hold_action:
action: none
primary_info: name
secondary_info: state
name: FAN
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if not is_state('sensor.argon_one_addon_fan_speed', '0') %}
--icon-animation: spin 1.2s linear infinite;
{% endif %}
}
.: |
ha-card {
margin-top: -12px;
margin-right: -10px;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0px;
}
- type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
experimental:
color_threshold: true
chart_type: radialBar
show:
loading: false
apex_config:
chart:
height: 258px
plotOptions:
radialBar:
offsetY: -19
startAngle: -116
endAngle: 116
hollow:
size: 46%
dataLabels:
name:
show: false
value:
show: false
legend:
show: false
stroke:
dashArray: 2
lineCap: flat
series:
- entity: sensor.processor_temperature
type: column
name: CPU Temp
color_threshold:
- value: 0
color: '#0084ff'
- value: 45
color: orange
- value: 60
color: red
- entity: sensor.memory_use_percent
type: column
name: RAM
color_threshold:
- value: 0
color: green
- value: 60
color: orange
- value: 85
color: red
- entity: sensor.processor_use
type: column
name: CPU
color_threshold:
- value: 0
color: green
- value: 60
color: orange
- value: 85
color: red
- entity: sensor.disk_use_percent
type: column
name: HDD
color_threshold:
- value: 0
color: green
- value: 60
color: orange
- value: 85
color: red
- entity: sensor.argon_one_addon_fan_speed
type: column
name: FAN
color_threshold:
- value: 0
color: green
- value: 60
color: orange
- value: 85
color: red
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
margin-bottom: 39px;
margin-top: 29px;
}
- type: custom:mushroom-template-card
entity: binary_sensor.rpi_power_status
primary: RPI
icon_color: orange
icon: mdi:raspberry-pi
layout: vertical
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
:host {
--mush-card-primary-font-size: 13px;
--mush-icon-border-radius: 50%;
--mush-icon-size: 60px;
}
ha-card {
background: transparent;
--ha-card-box-shadow: 0px;
margin-top: -132px;
width: 120px;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-template-card
primary: Last Backup
secondary: >-
{{state_attr('sensor.backup_state', 'last_backup').split
('T')[0]}}
icon: mdi:cloud-upload-outline
icon_color: blue
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
ha-card {
margin-top: -9px;
}
- type: custom:layout-card
layout_type: grid
layout:
margin: 4px -4px -8px -4px
padding: 0px
width: 100%
grid-template-columns: 1fr 1fr
cards:
- type: custom:mushroom-template-card
primary: HACS
secondary: |-
{% if states('sensor.hacs') == '0' %}
Up-to-date
{% elif states('sensor.hacs') == '1' %}
1 pending update
{% else %}
{{states('sensor.hacs')}} pending updates
{% endif %}
icon: hacs:hacs
icon_color: |-
{% if states('sensor.hacs') != '0' %}
orange
{% else %}
green
{% endif %}
tap_action:
action: navigate
navigation_path: /hacs
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
- type: custom:mushroom-template-card
primary: Database
secondary: '{{states(''sensor.home_assistant_v2_db_size'')}} MB'
icon: mdi:database
icon_color: blue
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
- type: custom:layout-card
layout_type: grid
layout:
margin: 4px -4px -16px -4px
padding: 0px
width: 100%
grid-template-columns: 1fr 1fr 1fr
cards:
- type: custom:mushroom-update-card
entity: update.home_assistant_operating_system_update
name: HA OS
show_buttons_control: true
collapsible_controls: true
layout: vertical
fill_container: true
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
- type: custom:mushroom-update-card
entity: update.home_assistant_core_update
show_buttons_control: true
collapsible_controls: true
name: HA Core
layout: vertical
fill_container: true
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
- type: custom:mushroom-update-card
entity: update.home_assistant_supervisor_update
name: HA Supervisor
show_buttons_control: true
collapsible_controls: true
layout: vertical
fill_container: true
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
2 Likes
The main part is in separate cards. You can combine them.
Header:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
card_mod:
style: |
ha-card {
--chip-padding: 0 0 0 0.30em;
}
- type: template
icon: mdi:home
tap_action:
action: navigate
navigation_path: home
- type: template
icon: mdi:lan
tap_action:
action: navigate
navigation_path: network
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-font-size: 0.3em;
--chip-height: 42px
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.epson_xp_760_series
state_not: unavailable
chip:
type: template
icon_color: disabled
icon: mdi:printer
card_mod:
style: |-
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
{% if is_state("sensor.epson_xp_760_series", "printing") %}
animation: blink 1s linear infinite;
{% endif %}
}
- type: conditional
conditions:
- entity: switch.desktop
state: 'on'
chip:
type: template
icon_color: >-
{% if not is_state("person.sylwester", "home") and not
is_state("person.jolanta", "home") %}
red
{% else %}
disabled
{% endif %}
icon: mdi:desktop-classic
card_mod:
style: |-
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
{% if not is_state("person.sylwester", "home") and not is_state("person.jolanta", "home") %}
animation: blink 1s linear infinite;
{% endif %}
}
- type: conditional
conditions:
- entity: sensor.glances_cpu_load
state_not: '0'
chip:
type: template
icon_color: disabled
icon: mdi:nas
- type: conditional
conditions:
- entity: binary_sensor.rpi_power_status
state: 'off'
chip:
type: template
icon_color: disabled
icon: mdi:home-assistant
- type: conditional
conditions:
- entity: switch.adguard_protection
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:shield-check
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-padding: 0.4em 0 0 0 ;
--chip-height: 30px
}
style: |
ha-card {
border-radius: 10px;
}
Router
type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.sky_adsl_router_external_ip
name: External IP
icon: mdi:web
- type: custom:mushroom-entity-card
entity: binary_sensor.sky_adsl_router_wan_status
icon_color: light-green
name: WAN
Speedtest
type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.speedtest_download
name: Download
icon: mdi:cloud-download
secondary_info: name
primary_info: state
layout: vertical
icon_color: light-green
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
- type: custom:mushroom-entity-card
entity: sensor.speedtest_upload
name: Upload
icon: mdi:cloud-upload
secondary_info: name
primary_info: state
layout: vertical
icon_color: light-green
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
- type: custom:mushroom-entity-card
entity: sensor.speedtest_ping
name: Ping
secondary_info: name
primary_info: state
layout: vertical
icon_color: light-green
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
Adguard
type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: switch.adguard_protection
icon_color: orange
layout: vertical
tap_action:
action: toggle
name: AdGuard
fill_container: true
card_mod:
style: |
:host {
--mush-icon-border-radius: 12px;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.adguard_dns_queries
name: DNS Queries
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
- type: custom:mushroom-entity-card
entity: sensor.adguard_dns_queries_blocked_ratio
name: Blocked Ratio
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
5 Likes
Hmm Iām trying it but not seeming to work.
hello very nice would you like the code or card forecast & temperature & thermostate ?
My Somfy RTS covers do not give back the state the cover is in (open or closed). For this I have installed door/window sensors. Would it be possible to link the state of the sensor back to the cover so I can use the mushroom cover card with the correct state?
Just pinging back here to say thank you very much for the help and the media card inspiration! Hereās my almost (a few more rooms to add) final result for my music dashboard 
23 Likes
Care to share your code?
1 Like
Did you ever figure this one out? I canāt seem to get it to work either and I donāt believe its the background. All of my other animated chips are workingā¦
Wow. bro! This is amazing! Will you share your code?
1 Like
Unfortunately, you canāt reference config. for the Chips, only when using card_mod on a Chip.
You can add that animation to a Chip like this:
card_mod:
style:
mushroom-template-chip:nth-child(3)$: |
ha-icon:before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
animation: refresh 300ms linear infinite;
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-primary-text-color), 0.3) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-primary-text-color), 0.3) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-primary-text-color), 0.3) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-primary-text-color), 0.3) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-primary-text-color), 0.3) 100%); }
}
Post your full card YAML
Have a look here:
Can you share your code please?