Posreg
September 7, 2022, 7:08am
2785
sure
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: sensor.srednia_temperatura
tap_action:
action: more-info
icon: mdi:home-thermometer-outline
icon_color: |2-
{% set temp = states('sensor.srednia_temperatura') | int %}
{% if temp < 20 %} #80eb34
{% elif temp < 22 %} #dfeb34
{% elif temp < 25 %} #ebae34
{% elif temp < 27 %} #eb4034
{% elif temp < 30 %} #a10374
{% else %} grey
{% endif %}
content: '{{ states(''sensor.srednia_temperatura'') | round(1, default=0) }} Ā°C'
- type: weather
entity: weather.openweathermap
show_conditions: true
show_temperature: true
tap_action:
action: navigate
navigation_path: pogoda
- type: template
entity: sensor.dom_caqi
icon: mdi:air-filter
icon_color: |2-
{% set caqi = states('sensor.dom_caqi') | int %}
{% if caqi < 10 %} #15e84d
{% elif caqi < 20 %} #3bd464
{% elif caqi < 40 %} #d6e010
{% elif caqi < 50 %} #e6d55e
{% elif caqi < 60 %} #e3b971
{% elif caqi < 70 %} #e69c77
{% elif caqi < 80 %} #eb9063
{% elif caqi < 90 %} #cf4c0c
{% elif caqi < 100 %} #cf0c0c
{% elif caqi < 120 %} #cf0c3d
{% elif caqi < 140 %} #a60a31
{% elif caqi < 160 %} #700c25
{% else %} grey
{% endif %}
content: '{{ states(''sensor.dom_caqi'') }}'
tap_action:
action: navigate
navigation_path: /mushroom-m/powietrze
- type: template
icon: mdi:clock-end
content: |2-
{% set last = states('sensor.vacuum_days_since_last_run') | int %}
{% if last < 1 %} dziÅ
{% elif last < 2 %} wczoraj
{% else %} Od {{ states('sensor.vacuum_days_since_last_run') }} dni
{% endif %}
icon_color: |2-
{% set last = states('sensor.vacuum_days_since_last_run') | int %}
{% if last < 2 %} #80eb34
{% elif last < 4 %} #dfeb34
{% elif last < 7 %} #ebae34
{% elif last < 15 %} #eb4034
{% elif last < 30 %} #a10374
{% else %} grey
{% endif %}
tap_action: none
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-spacing: -5px;
}
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: sensor.rpi_cpu_temp
icon: mdi:thermometer-lines
icon_color: |2-
{% set temp = states('sensor.rpi_cpu_temp') | int %}
{% if temp < 40 %} #80eb34
{% elif temp < 45 %} #dfeb34
{% elif temp < 50 %} #ebae34
{% elif temp < 55 %} #eb4034
{% elif temp < 60 %} #a10374
{% else %} grey
{% endif %}
content: '{{ states(''sensor.rpi_cpu_temp'') }} Ā°C'
tap_action:
action: more-info
- type: entity
entity: sensor.uptime
name: HA Uptime
icon: mdi:arrow-up-bold-box
icon_color: cyan
- type: template
icon: |
{% if is_state('sensor.total_lights_on', '0') %}
mdi:lightbulb-multiple-off
{% else %}
mdi:lightbulb-multiple
{% endif %}
icon_color: |
{% if is_state('sensor.total_lights_on', '0') %}
grey
{% else %}
amber
{% endif %}
entity: sensor.total_lights_on
content: '{{ states(''sensor.total_lights_on'') }} ,'
card_mod: null
tap_action:
action: call-service
service: browser_mod.popup
data:
title: WÅÄ
czone
card:
type: custom:auto-entities
filter:
include:
- domain: light
state: 'on'
exclude:
- domain: light
attributes:
type: browser_mod
- entity_id: '*gu10*'
card:
type: entities
show_header_toggle: false
target: {}
- type: template
icon: |
{% if is_state('sensor.total_fans_on', '1') %}
mdi:fan-speed-1
{% elif is_state('sensor.total_fans_on', '2') %}
mdi:fan-speed-2
{% elif is_state('sensor.total_fans_on', '3') %}
mdi:fan-speed-3
{% else %}
mdi:fan-off
{% endif %}
icon_color: |
{% if is_state('sensor.total_fans_on', '0') %}
grey
{% else %}
green
{% endif %}
entity: sensor.total_fans_on
content: null
tap_action:
action: call-service
service: browser_mod.popup
data:
title: WÅÄ
czone
card:
type: custom:auto-entities
filter:
include:
- domain: fan
state: 'on'
card:
type: entities
show_header_toggle: false
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
{% if is_state('sensor.total_fans_on', '1') %}
animation-duration: 2s;
{% elif is_state('sensor.total_fans_on', '2') %}
animation-duration: 2s;
{% elif is_state('sensor.total_fans_on', '3') %}
animation-duration: 2s;
{% endif %}
}
- type: template
icon: |
{% if is_state('sensor.total_plugs_on', '1') %}
mdi:numeric-1-circle
{% elif is_state('sensor.total_plugs_on', '2') %}
mdi:numeric-2-circle
{% elif is_state('sensor.total_plugs_on', '3') %}
mdi:numeric-3-circle
{% elif is_state('sensor.total_plugs_on', '4') %}
mdi:numeric-4-circle
{% elif is_state('sensor.total_plugs_on', '5') %}
mdi:numeric-5-circle
{% elif is_state('sensor.total_plugs_on', '6') %}
mdi:numeric-6-circle
{% elif is_state('sensor.total_plugs_on', '7') %}
mdi:numeric-7-circle
{% elif is_state('sensor.total_plugs_on', '8') %}
mdi:numeric-8-circle
{% elif is_state('sensor.total_plugs_on', '9') %}
mdi:numeric-9-circle
{% else %}
mdi:numeric-0-circle
{% endif %}
icon_color: |
{% if is_state('sensor.total_plugs_on', '0') %}
grey
{% else %}
red
{% endif %}
entity: sensor.total_plugs_on
content: null
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: WÅÄ
czone
content:
type: custom:auto-entities
filter:
include:
- domain: switch
state: 'on'
exclude:
- entity_id: '*0x*'
- entity_id: '*gtz*'
- entity_id: '*plugs*'
- integration: xiaomi_miio
card:
type: entities
show_header_toggle: false
- type: template
icon: mdi:flower
icon_color: |
{% if is_state('plant.flower1', 'ok') %}
green
{% else %}
red
{% endif %}
entity: plant.flower1
content: null
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: WÅÄ
czone
content:
type: custom:flower-card
entity: plant.flower1
show_bars:
- moisture
- conductivity
- temperature
- illuminance
- dli
- humidity
- type: template
icon: |
{% if is_state('binary_sensor.ping_8_8_8_8', 'on') %}
mdi:access-point-network
{% else %}
mdi:access-point-network-off
{% endif %}
icon_color: |
{% if is_state('binary_sensor.ping_8_8_8_8', 'on') %}
green
{% else %}
red
{% endif %}
entity: binary_sensor.ping_8_8_8_8
content: null
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-spacing: -3px;
}
you can share how your dashboard looks like
4 Likes
buche11
September 7, 2022, 10:09am
2786
Hi, i use for my āroom cardsā a header line which includes always the same design and templates (e.g. if ādoor openā then āicon door openā else āicon door closedā and only the affected entity is changed. I wonder if there is a possibility to define such templates āglobalā in the main lovelace configuration (do not found a topic in this thread). I used that for ācustom button cardsā where you define the template once and then reference in the different cards to the āmain templateā in lovelace. So i do not have to repeat the same yaml code in every mushroom card. Is there a way/trick to make a āglobal templateā or to avoid the repetition of the same yaml code?
@atomicpapa Thanks for those, I added the scores and epl news, neither work though in the postcard, I added the Liverpool although not my team to test and that works. I tried to get some bbc RSS feed for Norwich (my team) no use either.
atomicpapa
September 8, 2022, 12:48am
2788
@Tim_Knowlden I just did a lot of Googling and testing until I found streams that worked for me. You may also need to do a little digging in the JSON to pull out the correct tag for the image.
type: custom:list-card
entity: sensor.forest
title: News
row_limit: 10
feed_attribute: entries
columns:
- title: ''
type: image
add_link: link
field: media_thumbnail
- title: Title
field: title
- title: Description
field: summary
esr2
September 8, 2022, 1:47am
2789
I think youāre looking for the decluttering card (https://github.com/custom-cards/decluttering-card ).
atomicpapa
September 8, 2022, 2:33am
2790
18 Likes
pbohannon
September 8, 2022, 4:32am
2791
@rhysb - not sure why it didnāt quote you.
Hey there, sorry about the delay and thanks for being willing to take a look.
So I can make Jinja work for each individual chip card, but what Iād like to do is apply the logic to all chips in a chip card. Hereās an example of what does work [feel free to point out if thereās a better way :)]:
- type: template
entity: binary_sensor.upstairs_garage_door_interior
content: Kitchen Garage Door
icon: |
{% if is_state(entity, 'off') %}
mdi:motion-sensor-off
{% else %}
mdi:motion-sensor
{% endif %}
icon_color: |
{% if is_state(entity, 'off') %}
disabled
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
--chip-box-shadow: {{ "0px 0px 20px red" if is_state('binary_sensor.garage_sensors', 'on') }};
--text-color: {{ "gray" if is_state('binary_sensor.garage_sensors', 'off') }};
}
- type: template
entity: binary_sensor.kitchen_motion_sensor_1
content: Kitchen
icon: |
{% if is_state(entity, 'off') %}
mdi:motion-sensor-off
{% else %}
mdi:motion-sensor
{% endif %}
icon_color: |
{% if is_state(entity, 'off') %}
disabled
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
--chip-box-shadow: {{ "0px 0px 20px red" if is_state('binary_sensor.kitchen_motion_sensor_1', 'on') }};
--text-color: {{ "gray" if is_state('binary_sensor.kitchen_motion_sensor_1', 'off') }};
}
This yields:
Which is exactly what I want. But Iād like to replicate this about 30-50 times for various sensors. I was hoping to bring the card_mod/style statements into the top-level card and apply the two if statements you see in the card_mod examples to every card. But how would I reference each card with a generic variable? Using the entity keyword works in defintions like icon, icon_color, etc. as you can see, but I canāt yet reason through how I would do such a thing for the styling examples Iām discussing. I still need to play around with decluttering-template to see if I can use it for a sub-card, like the individual chips ā if that works, this becomes easy.
1 Like
buche11
September 8, 2022, 8:45am
2792
Hi, thank you. I take a look at decluttering card. Seems not to be maintained since over 2 years (deprecated?). Tried to use āyaml anchorsā but seems not running with mushroom cards (or i am to inexpirienced). Any other ideas/solutions to avoid ārepeatingā the code with mushroom cards?
swifty
September 8, 2022, 11:00am
2793
Does anyone have any good chip animations ? - My dashboard is basically complete and iām looking to liven it up by adding animations to the device icons when the entity is active.
Speaker;
card_mod:
style: |
ha-card {
{% if is_state('[[speaker-entity]]', 'playing') %}
animation: elastic 1.2s linear infinite;
{% endif %}
}
@keyframes elastic{
0%{ transform: scale(1.1) }
20%{ transform: scale(1.2) }
35%{ transform: scale(1.1)}
50%{ transform: scale(1.15) }
70%{ transform: scale(1.2) }
100%{ transform: scale(1.1) }
}
Washing Machine / Tumble Dryer;
card_mod:
style: |
ha-card {
{% if is_state('[[washing-machine-entity]]', 'Running') %}
animation: shake 0.4s linear infinite;
{% endif %}
}
@keyframes shake {
0% { transform: rotate(0deg); }
20% { transform: rotate(3deg); }
50% { transform: rotate(-3deg); }
100% { transform: rotate(0deg); }
}
Iām not super happy with the washing machine one as it looks a little lame, so interested to know if anyone has anything better, and anything to represent a TV.
Would also love to hear if anyone has a good idea for animating āmdi:scentā - We have a bunch of plug in diffusers around, and it would be nice to animate that when they are on too.
1 Like
tempus2016
September 8, 2022, 12:18pm
2795
Do you mind sharing your room card?
1 Like
brewston
September 8, 2022, 1:06pm
2796
I did this with mushroom person card :
type: custom:mushroom-person-card
entity: person.tim
use_entity_picture: true
hide_name: true
hide_state: true
card_mod:
style: |
mushroom-shape-avatar {
{{ 'filter: grayscale(100%);' if is_state('person.tim', 'not_home') }}
}
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
1 Like
Noah
September 8, 2022, 1:18pm
2798
Can I also adjust the transparency of the circle extra? In dark mode the semi-transparent icons are difficult to see, so I would like to reduce the transparency.
BTW: you can now set a navigation path to the media browser, for example, to jump directly to the Spotify playlists, which was still possible recently.
4 Likes
tfmeier
September 8, 2022, 1:26pm
2799
Oh nice - Spotify playlists
Noah
September 8, 2022, 1:33pm
2800
Thatās the build in media player of home assisstant
Olti
September 8, 2022, 2:03pm
2801
Hello folks,
I need some help on card configuration using combination of custom:fold-entity-row with custom:mushroom-cover-card.
My idea is to have inside of fold-entity-row 3 mushrom cover cards, one to control group of covers and two other cards to control separately shutters.
My current configuration is showing unfolded card behind of Thermostat and existing light control buttons.
- type: custom:mod-card
style: |
ha-card {
--ha-card-background: teal;
background-color: rgba(255, 80, 84);
width: 350px;
margin: auto;
position: absolute;
left: 0;
right: 0;
height: 55px;
border-radius: 10px;
box-shadow: none;
}
view_layout:
column: 1
card:
square: false
columns: 1
type: grid
cards:
- type: entities
entities:
- type: custom:fold-entity-row
head:
type: section
label: ā Roller shutters
entities:
- type: custom:mushroom-cover-card
entity: cover.sonoff_1xxxxx
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.sonoff_1xxxxx
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.sonoff_1xxxxx
show_position_control: true
show_buttons_control: true
1 Like
tfmeier
September 8, 2022, 2:29pm
2802
The regular media player or the mushroom media player? When you edit the card you can go to the code editor at the bottom to see the actual code. Donāt really follow it from the .gif what youāre calling
The images seem to be the stumbling block as I can remove that column on some of the list-card tables and the feed shows.
Can you share the code for your score page?
Posreg
September 8, 2022, 5:56pm
2804
sure, here you are
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Salon
secondary: >-
{{ states('sensor.ble_temperature_salon') }} Ā°C | {{
states('sensor.ble_humidity_salon') | int(0) }} %
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: salon
icon_color: '#a37208'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.05);
--mush-icon-size: 50px;
height: 66px;
margin-left: -8px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |
{% if is_state('media_player.sony_bravia_tv', 'off') %}
mdi:television-classic-off
{% else %}
mdi:television-classic
{% endif %}
icon_color: |
{% if is_state('media_player.sony_bravia_tv', 'off') %}
grey
{% else %}
indigo
{% endif %}
content_info: |-
none
b
tap_action:
action: more-info
- type: template
icon: |
{% if is_state('llight.yeelight_white', 'on') %}
mdi:floor-lamp
{% else %}
mdi:floor-lamp-outline
{% endif %}
icon_color: |
{% if is_state('light.yeelight_white', 'on') %}
yellow
{% else %}
grey
{% endif %}
entity: light.yeelight_white
content_info: none
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: more-info
- type: template
icon: |
{% if is_state('light.kitchen_led', 'on') %}
mdi:lightbulb-spot
{% else %}
mdi:lightbulb-spot-off
{% endif %}
icon_color: |
{% if is_state('light.kitchen_led', 'on') %}
yellow
{% else %}
grey
{% endif %}
entity: light.kitchen_led
content_info: none
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: more-info
- type: template
entity: climate.saswell_gtz03
icon: |
{% if is_state('climate.saswell_gtz03', 'off') %}
mdi:radiator-off
{% elif is_state('climate.saswell_gtz03', 'auto') %}
mdi:radiator-disabled
{% else %}
mdi:radiator
{% endif %}
icon_color: |
{% if is_state('climate.saswell_gtz03', 'off') %}
grey
{% elif is_state('climate.saswell_gtz03', 'auto') %}
orange
{% else %}
red
{% endif %}
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
icon: >
{% if is_state('binary_sensor.sonoff_door_sensor_contact',
'on') %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
icon_color: >
{% if is_state('binary_sensor.sonoff_door_sensor_contact',
'on') %}
light-green
{% else %}
grey
{% endif %}
entity: binary_sensor.sonoff_door_sensor_contact
content_info: none
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: more-info
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-size: 15px;
--chip-spacing: -8px;
}
card_mod:
style: |
ha-card {
height: 102px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Åazienka
secondary: >-
{{ states('sensor.ble_temperature_lazienka') }} Ā°C | {{
states('sensor.ble_humidity_lazienka') | int(0) }} %
icon: mdi:bathtub-outline
icon_color: '#e0d3ad'
tap_action:
action: none
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.05);
--mush-icon-size: 50px;
height: 66px;
margin-left: -8px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
}
card_mod:
style: |
ha-card {
margin-top: -20px;
margin-bottom: -10px;
}
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Sypialnia
secondary: >-
{{ states('sensor.ble_temperature_sypialnia') }} Ā°C | {{
states('sensor.ble_humidity_sypialnia') | int(0) }} %
icon: mdi:bed-king
icon_color: '#ce95de'
tap_action:
action: noone
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.05);
--mush-icon-size: 50px;
height: 66px;
margin-left: -8px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |
{% if is_state('light.xiaomi_mi_desk_lamp', 'on') %}
mdi:desk-lamp
{% else %}
mdi:desk-lamp
{% endif %}
icon_color: |
{% if is_state('light.xiaomi_mi_desk_lamp', 'on') %}
yellow
{% else %}
grey
{% endif %}
entity: light.xiaomi_mi_desk_lamp
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Dawid
secondary: >-
{{ states('sensor.cgd1_alarm_clock_temperature') }} Ā°C | {{
states('sensor.cgd1_alarm_clock_humidity') | int(0) }} %
icon: mdi:human-child
icon_color: '#e8af10'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.05);
--mush-icon-size: 50px;
height: 66px;
margin-left: -8px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |
{% if is_state('light.yeelight_edison_style', 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |
{% if is_state('light.yeelight_edison_style', 'on') %}
yellow
{% else %}
grey
{% endif %}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
}
1 Like
image969
September 8, 2022, 6:08pm
2805
Is there a way to resize the box that pops up when you press more info, or in my case Iām using a popup card. It always opens full screen on my iPhone and I would like it to just be the size of the card like it defaults to on a desktop browser
