Can be even shorter:
{% if is_state(entity, 'on') %} purple {% endif %}
or
{{ 'purple' if is_state(entity, 'on') }}
Or in @cloudbr34k 's case:
{{ 'mdi:garage-variant-lock' if states(entity) == 'closed' else 'mdi:garage-open-variant' }}
Can be even shorter:
{% if is_state(entity, 'on') %} purple {% endif %}
or
{{ 'purple' if is_state(entity, 'on') }}
Or in @cloudbr34k 's case:
{{ 'mdi:garage-variant-lock' if states(entity) == 'closed' else 'mdi:garage-open-variant' }}
Thank you to Paul for his fantastic work - it has given my HA setup a new lease of life.
I’ve found this thread very helpful so I thought I’d share my own version of the dashboard in case others get inspiration. The room cards are using chips above (for lights) & below (for heating) with a template card in the middle and card-mod hiding the boarders.
Looking forward to seeing how the Mushroom cards evolve - I’d really love a thermostat card as the stock option doesn’t fit the style at all.
As I’m still tinkering around with my dashboard I also want to share my current state and maybe inspire some of you.
Behind the person cards and for my car a different other cards for instance changing riger mode and stuff or opening/closing card doors and windows.
Behind every room card is a navigation to set room with lights and meda players and different other stuff.
Icon of HWR (utility room) changes by what appliance is running and secondary info shows “washing”, “drying” or both.
Wohnzimmer has the secondary to show state of my Harmony hub and Kammer would show the state of my vacuum if it’s running.
I’m far from finished but everything works for every day use.
Awesome stuf!!
Would you miind sharing the code for one example “room” ? Like kitchen for example
I’d like an example as well.
Sure, no problem. Here’s the Kitchen room card.
You need to install “card-mod” and “Stack In Card” from HACS first.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.dining_lamp_2
content_info: none
icon: mdi:table-chair
use_light_color: true
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
- type: light
entity: light.couch_lamp
content_info: none
icon: mdi:sofa
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
use_light_color: true
- type: light
entity: light.kitchen_biglight
content_info: none
use_light_color: true
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
- type: light
entity: light.kitchen_spots
content_info: none
icon: mdi:lightbulb-spot
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
use_light_color: true
alignment: center
- type: custom:mushroom-template-card
primary: Kitchen
secondary: null
icon: mdi:knife
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: kitchen
hold_action:
action: more-info
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.kitchen
icon: mdi:thermometer
icon_color: |-
{% if states.sensor.kitchen_heating_on.state == "True" %}
red
{% endif %}
content: |-
{{ state_attr('climate.kitchen', 'current_temperature') }} °C
{% if states.sensor.kitchen_heating_on.state == 'True' %}
| {{ state_attr('climate.kitchen', 'temperature') }} °C
{% endif %}
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: center
Nice dashboard!
Can you share how you managed to get the card show the birthdays? Have been looking for a good guide but in this case my ‘search’ skills are off! I’m reading this " * the birthday is a conditional card only shown if one of my google contacts has it’s birthday and is only shown to me based on state-switch" but somehow it isn’t landing.
A hint in the right direction would also be great.
Is there anyway to remove the circle?
Thank you! That motivates.
Of course I can share the code:
type: custom:state-switch
entity: user
default: default
states:
<YOUR USERNAME HERE>:
type: conditional
conditions:
- entity: <YOUR GOOGLE BIRTHDAY CALENDAR HERE>
state: 'on'
card:
type: custom:mushroom-template-card
layout: horizontal
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:cake
primary: '{{ state_attr(''<YOUR GOOGLE BIRTHDAY CALENDAR HERE>'', ''message'') }} <ADDITIONELL TEXT HERE>'
For the conditional showing display of the card only to me - my user and not my wife’s - have a look at lovelace-state-switch and the part that describes user.
To implement your Google calendars look for the official explanation or my some youtube videos you stumble while browsing in addition.
Note: You have to use the android/google function for contacts and put their birthdays in there.
As I’m German the state attribute of my friends birthdays is always " hat Geburtstag" so I added some text to say " hat Geburtstag heute!"
Hope this helps.
Thank You !
very handy / much easier
ill second that as well. If Dwain and mushroom combined this is what i should look like.
What’s the best way to display a dropdown? At the moment I am using the default entities card with an input selector and its ‘meh’. I couldnt get the same one to display in a mushroom entity card.
Is there a possibility to use this customization
also in the standard cards like “Light card” (i.e. without using the template card)?
Nope, not possible.
This is only possible indirectly via the context menu (more-info)
Another question: Is it possible to complete disable showing an icon in the standard cards?
Wow this looks amazing, could you share the code of this wonderful UI?
Beautiful, would you mind sharing this code with me? I’ll get you a beer!
In the light card no, in the entity card yes and of course in the template card.
Maybe send a pull request to Paul on Github for the light card. But you probably will change to a template card anyways because of every other advantage.
The hide options (hide icon, hide state, hide name) will be available for all card in a future release for consistency I just need to find how to refactor shared options between card because it’s a lot of duplicate code