If you donāt care for dark mode, you can change the 2nd to last line to
background: rgb(255, 255, 255);
Can someone explain to me how the primary_info and secondary_info works on Entity cards?
For instance I have a card that has a motion sensor on itā¦ Iād like the battery % to show up on the card also. Iāve tried a couple things but just get errorsā¦
I see you can use āstateā on either but can I or should I also specify an entity for that?
Iām getting errors and ui wonāt load when I try thisā¦ perhaps Iām just not understanding how itās supposed to work.
Thank you!
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: binary_sensor.front_room_motion_occupancy
icon: mdi:account
name: Motion Sensor
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
I had no doubt that you come up with a solution! Thank you that much!
1 Like
No, you canāt customize an entity-card like you plan. You have to use a template card and then you can put a template in the secondary line.
Aunt Edith says: No, my code wasnāt right.
1 Like
this can not be rightā¦
Youāre right, had this in a non-functional test card.
Backgroung fan icon is moving with fan. It looks weird.
Iām going to have to do this. Makes more sense to light up the card rather than showing a bulb when a light is on like I currently do. Nice work!
11 Likes
I like this alot, even better if the smaller icons like the motion etc could be pushed up higher to be along side the room/temperature. Great work however!
Thank you so much for your code - I did get it to work with a lightbulb, but I could not get it to work with my door lock.
For background info my Schlage lock is connected via my ring alarm(via zwave) using the ring-mqtt add-on, Iām not sure if that makes any difference here. But I did get this all to work - look at my reply to Boostin4HP - I put my code there as well.
It might help if you come across the same issue of it not working when you receive your hub.
This worked perfectly for me - Thank you Boostin4HP - this will add about 10lbs of boost to your ride for good will 
For everyone else here is the code for my Mushroom template card to get the door lock icon changing color based on state as well as icon and the wording to change based on state as well.
type: custom:mushroom-template-card
primary: Front Door Lock
secondary: |-
{% set state=states(entity) %}
{% if state=='locked' %}
Locked
{% elif state=='unlocked' %}
Unlocked
{% else %}
Error
{% endif %}
icon: |-
{% set state=states(entity) %}
{% if state=='locked' %}
mdi:lock
{% elif state=='unlocked' %}
mdi:lock-open-alert
{% else %}
mdi:alert
{% endif %}
layout: vertical
entity: lock.front_door_lock
tap_action:
action: toggle
icon_color: |-
{% set state=states(entity) %}
{% if state=='locked' %}
green
{% elif state=='unlocked' %}
red
{% else %}
grey
{% endif %}
Thank you both image969 (James) and Boostin4HP for the help here, it is greatly appreciated and have these items working perfectly.
Actually used the same method for my Garage door connected via MyQ as well:
type: custom:mushroom-template-card
primary: Garage Door
secondary: |-
{% set state=states(entity) %}
{% if state=='closed' %}
Closed
{% elif state=='open' %}
Open
{% else %}
Error
{% endif %}
icon: |-
{% set state=states(entity) %}
{% if state=='closed' %}
mdi:garage-variant
{% elif state=='open' %}
mdi:garage-open-variant-alert
{% else %}
mdi:alert
{% endif %}
layout: vertical
entity: cover.garage_door
icon_color: |-
{% set state=states(entity) %}
{% if state=='closed' %}
green
{% elif state=='open' %}
red
{% else %}
grey
{% endif %}
tap_action:
action: toggle
Hope this helps others as well.
5 Likes
Just wanted to share what I have right now.
I parted ways with conditional chips so the chips beneath the room cards will stay at there position and are only visible ifā¦
ā¦windows are open.
ā¦shades are open.
ā¦appliances are running.
ā¦fan is running.
ā¦vacuum is cleaning.
ā¦music or tv is playing.
And yes, washing machine and dryer are wobbling.
I have several testing cards that need to be integrated somewhere and I believe this will be a neverending story.
7 Likes
Thatās sexy is it possible to use the wobling also in a Chips card ? Can you please share the wobling part ?
That is a chips card.
type: custom:mushroom-chips-card
chips:
- type: template
entity: input_select.washing_machine_state
icon: |-
{% if is_state('input_select.washing_machine_state', 'washing') %}
hue:room-laundry
{% else %}
{% endif %}
icon_color: green
card_mod: null
style: |
@keyframes wobbling {
0% {
transform: rotate(-5deg);
}
100% {
transform: rotate(5deg);
}
}
ha-card {
--chip-box-shadow: 0px 0px;
animation: wobbling 1s linear infinite alternate;
{% if states('input_select.washing_machine_state') == 'washing' %}
animation-duration: 0.1s;
{%- else -%}
{%- endif %}
}
alignment: center
6 Likes
Would you mind sharing the code for your room buttons. I like that they show what is active in a room in 1 overview. Thnx
your cams all have the same resolution?
Of course. Hereās the one for my bedroom as is has a temperature sensor, 3 windows, shades and a media player.
The icon and content template are a bit complicated but I wanted to show which windows are open because it gets damn hot in there if I donāt close the right windows at the wright time.
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: BEDROOM
secondary: ''
icon: |-
{% if is_state('light.BEDROOM', 'on') %}
mdi:bed-king
{% elif is_state('light.BEDROOM', 'off') %}
mdi:bed-king
{% elif is_state('light.BEDROOM', 'unavailable') %}
mdi:lightbulb-question
{% else %}
mdi:lightbulb-question
{% endif %}
entity: light.BEDROOM
icon_color: |-
{% if is_state('light.BEDROOM', 'on') %}
amber
{% elif is_state('light.BEDROOM', 'off') %}
disabled
{% elif is_state('light.BEDROOM', 'unavailable') %}
disabled
{% else %}
{% endif %}
fill_container: false
multiline_secondary: true
tap_action:
action: navigate
navigation_path: /lovelace-mobile/BEDROOM
hold_action:
action: toggle
double_tap_action:
action: none
- square: false
columns: 4
type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: null
double_tap_action:
action: none
content: '{{ states(''sensor.temperature_BEDROOM'') | float }}Ā°C'
entity: sensor.temperature_BEDROOM
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
entity: null
icon: >-
{% if is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
is_state('binary_sensor.fenster_r_BEDROOM', 'on') and
is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
phu:panel-glass-door-open
{% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
is_state('binary_sensor.fenster_r_BEDROOM', 'on') %}
phu:panel-glass-door-open
{% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
phu:panel-glass-door-open
{% elif is_state('binary_sensor.fenster_r_BEDROOM', 'on') and
is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
phu:panel-glass-door-open
{% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') %}
phu:panel-glass-door-open
{% elif is_state('binary_sensor.fenster_r_BEDROOM', 'on') %}
phu:panel-glass-door-open
{% elif is_state('binary_sensor.fenster_S_BEDROOM', 'on') %}
phu:panel-glass-door-open
{% else %}
none
{% endif %}
icon_color: red
tap_action:
action: none
hold_action:
action: none
content: >-
{% if is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
is_state('binary_sensor.fenster_r_BEDROOM', 'on') and
is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
all
{% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
is_state('binary_sensor.fenster_r_BEDROOM', 'on') %}
LR
{% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
LS
{% elif is_state('binary_sensor.fenster_r_BEDROOM', 'on') and
is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
RS
{% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') %}
L
{% elif is_state('binary_sensor.fenster_r_BEDROOM', 'on') %}
R
{% elif is_state('binary_sensor.fenster_S_BEDROOM', 'on') %}
S
{% else %}
{% endif %}
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
entity: cover.sonnenschutz_BEDROOM
icon: >-
{%- set jalousie = state_attr('cover.sonnenschutz_BEDROOM',
'current_position') | int %} {% if jalousie >= 2 %}
mdi:blinds-open
{% else %}
{% endif %}
icon_color: yellow
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
entity: media_player.BEDROOM
icon: |-
{% if is_state('media_player.BEDROOM', 'playing') %}
mdi:music
{% else %}
{% endif %}
icon_color: |-
{% if is_state('media_player.BEDROOM', 'playing') %}
#d8a159
{% else %}
{% endif %}
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
5 Likes
At this rate you may as well put your entire lovelace.yaml on github and just point people there. LOL
2 Likes
No, I just changed the aspect ratio on some.
1 Like
Is there a reason why I canāt toggle two switches with one click?
type: custom:mushroom-entity-card
entities:
- entity: switch.privacy_mode_g3_vardagsrummet
- entity: switch.privacy_mode_g3_hallen
name: Privat
tap_action:
action: toggle
With one entity it works fine? Am I doing it wrong or is it a limitation in Mushroom?