@piitaya do you accept pull requests for new type of cards?
Hi there - hope this doesnāt pull your reply off topic too far, but Iām having trouble replicating a use-case pretty close to the code you provided. Iām trying to make a combination ādoor and lockā card using a mushroom-template-card, wherein Iāll use the state of the door (binary_sensor) and lock to choose the icon and badge (yay!). The problem Iām having is more around trying to show the time since the last status change. Iāve enabled multiline secondary, and used the code below which does work correctly inside the template editor. It also appears to mirror the style you provided in the āsecondaryā information you provided above. Iām getting the plaintext representation of the Jinja code in the secondary field instead of the expressions actually being evaluated. Stripped down version of code belowā¦ ignore poor variable names and implementation, I just mocked it up for posting. Could it be that Iām using the UI editor instead of editing a YAML directly? If so, any nudges on how I could use an intermediate script or something to evaluate the expressions and return the result? Thanks very much for any help!
- type: custom:mushroom-template-card
entity: binary_sensor.back_door_entry
primary: Back Door
secondary: >-
{% set frontchanged = as_timestamp(states.binary_sensor.back_door_entry.last_changed) %}
{% set diff2 = now - frontchanged | int %}
{% if diff2 <= 59 %}
{{diff2 | round(0) }} seconds
{% elif diff2 <= 3599 %}
{{ (diff2 / 60) | round(0) }} minutes
{% elif diff2 <= 86399 %}
{{(diff2/ 3600) | round(0) }} hours
{% elif diff2 >= 86400 %}
{{(diff2/86400) | round(0) }} days
{% else %} Unknown
{% endif %}
For completeness, I hand-modified the spacing and it now resembles what itād look like in the Developer template editor; however, the card configuration itself is of the format in your original reply.
1 Like
Perhaps like this:
type: custom:mushroom-template-card
entity: binary_sensor.back_door_entry
primary: Back Door
secondary: >-
{% set frontchanged =
as_timestamp(states.binary_sensor.back_door_entry.last_changed) %}
{% set diff2 = as_timestamp(now()) - frontchanged %}
{% if diff2 <= 59 %}
{{diff2 | round(0) }} seconds
{% elif diff2 <= 3599 %}
{{ (diff2 / 60) | round(0) }} minutes
{% elif diff2 <= 86399 %}
{{(diff2/ 3600) | round(0) }} hours
{% elif diff2 >= 86400 %}
{{(diff2/86400) | round(0) }} days
{% else %}
Unknown
{% endif %}
3 Likes
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
entity: person.jeff
use_entity_picture: true
hide_name: false
layout: default
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Jeff
card:
type: custom:mod-card
style: |
ha-card {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 15px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.jeff_west_s_iphone_geocoded_location
primary_info: none
icon: mdi:map-marker
icon_color: yellow
- type: horizontal-stack
cards:
- type: map
entities:
- entity: device_tracker.jeff_iphone
aspect_ratio: '2'
use_entity_picture: true
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: none;
--chip-height: 33px
}
chips:
- type: template
icon_color: |2-
{% set state=states('sensor.jeff_iphone_battery_state') %}
{% if state=='Charging' %}
green
{% elif state=='Not Charging' %}
#6f6f6f
{% endif %}
entity: sensor.jeff_iphone_battery_state
content: '{{ states(entity) }}'
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.jeff_iphone_battery_level
content: '{{ states(entity) }} %'
icon: |2
{% set bl = states('sensor.jeff_iphone_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.jeff_iphone_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
- type: template
- type: entity
icon_color: yellow
entity: sensor.jeff_iphone_steps
- type: entity
icon_color: yellow
entity: sensor.jeff_iphone_distance
alignment: left
6 Likes
Wow, thanks for the fast reply and even more, perfect solution. Really appreciate it.
1 Like
Hi 
It depends of the card 
There is some rules that I need to write in the developer documentation :
- the card must be simple to configure (almost all options optionals except entity option)
- the card must support one of the official HA entity with official features: Entity | Home Assistant Developer Docs. No custom integration support.
Donāt hesitate to look at pull requests and issues to see if something is already in dev
What card do you want to add ?
@piitaya It is for a custom integration 
Itās for a ducted AC system where you have one AC device and multiple ducts controlled by dampers - you open more the damper then you get more airflow in that zone so more cooling (or heating).
The card is for a damper entity - practically itās a fan entity (0-100). The tricky bit is an optional temp sensor in a zone, with which the damper can be controlled by the AC automatically to maintain a target temp. So the āzoneā can have both a fan and a climate entity, but only one at a time that can be modified. The integration does this by having a fan with presets, the āautomaticā preset making the fan % read only.
(EDIT)
So the card is easy to configure - only fan entity is needed, with optional climate entity (temp sensor is optional). Both entities are HA entities with official features. I have the card now based on light card, with the color temp button switching from fan slider to climate target temp slider.
I believe this would be acceptable. ^^^
Although it would make it easier (but not sure you would accept) to use the icon long press to switch instead of the color temp button (and leave the slider longer; card will have fixed actions and not customizable, tap for more-info and hold for switch main entity).
I am also considering the blinds card as a base because I found the slider a hit and miss on the iphone (sometimes it loses the touch event and moves to a random place). Buttons would work betterā¦
P.S. is there an easy way to have text instead of icon? e.g. like the temp in a circle icon, mdi-numeric stops at 10
this hepls alot! thanks!
1 Like
Hello all.
Is there a way to hide this orange question mark when the entity is undetected. For this screen shot itās a light that is controlled by a regular light switch much more than itās controlled by HA app. And it just bothers me seeing that icon. Makes it look like somethings wrong even though thereās not.
I suggest you to use 2 cards for that : one for fan, one for temperature. I do not prefer to create multiple entities cards because itās impossible to fit all use-cases. If I authorized this modification I will have another PRs to add an optional battery, an optional motion sensor, etcā¦ And most of user will have lot of options that they donāt use. I understand this decision can be difficult to hear but I think itās a thing to do to keep this collection of card simple.
For example, I have a spa that expose multiple entities. I used a grid card with multiple card. Itās not compact but it separates things by feature.
Also for badge, it was designed to show small indicator (motion, battery, availability, etcā¦). Itās not designed to add text or number because of the round shape.
2 Likes
Itās a good suggestion, but:
- there is not thermostat card yet
- there would still be a need for a button to āswitchā control between fan and thermostat entities; they are not complementing but they are replacing each-other partiallyā¦
- oh the number of cards
- youād have 1 thermostat card for the actual AC, plus 1 fan card and 1 thermostat card for each room, plus 1 card with the switch - a bit of messiness - e.g. the on/off state is shared, turning off the fan would turn off the corresponding thermostat; pressing the switch would change the other 2 cards with the fan and thermostatā¦ - the templating logic to connect them is also trickyā¦
Can the fan icon be moved up? To be level with the 20 Ā°C but still aligned to the right?
Firstly, I would like to say Thank you ā¦ I love this card!
I have started to create a new dashboard, and I have a question. I am using the template chip-card with no content, and using css to change the icon colour and animation based on the state of an entity. however, the icon is not centered on the card. Is there anyway to center it?
What does your code look like? its probably getting whitespace from somewhere
@piitaya thank you for your great work and everyone else extending his work!
Iāve gathered some bits and pieces from others on this post and created this ābreaker switchā card:
breaker card.yaml
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
entity: switch.shelly_pro_4pm_switch_0
primary: breaker switch
secondary: |
16A
icon: mdi:power-socket
icon_color: |-
{% set status = states('switch.shelly_pro_4pm_switch_0') %}
{% if status == 'on' %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
style: |
ha-card {
padding-bottom: 1px !important;
}
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: automation.breaker_a
icon: mdi:refresh-auto
icon_color: >-
{% set status = states('automation.breaker_a {% if status == 'on'
%} orange
{% else %} grey
{% endif %}
- type: template
entity: binary_sensor.server_a
icon: mdi:ip-network
icon_color: |-
{% set status = states('binary_sensor.server_a') %}
{% if status == 'on' %} orange
{% else %} grey
{% endif %}
- type: template
entity: sensor.server_a
icon: mdi:cloud-check
icon_color: |-
{% set status = state_attr('sensor.server_a', 'status') %}
{% if status == 'valid' %} orange
{% else %} grey
{% endif %}
- type: template
entity: sensor.shelly_pro_4pm_switch_0_current
content: '{{states(''sensor.shelly_pro_4pm_switch_0_current'')}}A'
icon: mdi:current-ac
icon_color: |-
{% set a = states('sensor.shelly_pro_4pm_switch_0_current') | int %}
{% if a >= 15 %} red
{% elif a < 15 %} orange
{% else %} grey
{% endif %}
- type: template
entity: sensor.shelly_pro_4pm_switch_0_voltage
content: '{{states(''sensor.shelly_pro_4pm_switch_0_voltage'') | round}}V'
icon: mdi:sine-wave
icon_color: |-
{% set v = states('sensor.shelly_pro_4pm_switch_0_voltage') | int %}
{% if v >= 238 %} red
{% elif v < 238 %} orange
{% else %} grey
{% endif %}
- type: template
entity: sensor.shelly_pro_4pm_switch_0_power
content: >-
{{(states('sensor.shelly_pro_4pm_switch_0_power')|float *
1/1000)|round(1)}}KW
icon: mdi:flash
icon_color: orange
- type: template
entity: sensor.shelly_pro_4pm_switch_0_energy
content: >-
{{(states('sensor.shelly_pro_4pm_switch_0_energy')|float *
1/1000)|round(1)}}KWh
icon: mdi:lightning-bolt
icon_color: orange
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
The card is using the Shelly Pro 4PM switch with Shelly integration and the purpose of this card is to monitor and control a load (server / NAS / IT equipment) which is sensitive to over-voltage, or over-current consumption.
I get many voltage fluctuations in the area I am living, so I would like to place a final ātouchā on my card.
I want some help on getting the text in red to follow what Iāve done already for the icon:
icon_color: |-
{% set v = states('sensor.shelly_pro_4pm_switch_0_voltage') | int %}
{% if v >= 238 %} red
{% elif v < 238 %} orange
{% else %} grey
{% endif %}
thanks
4 Likes
You can remove the 0.15em being added to the right margin like this:
card_mod:
style:
mushroom-template-chip:nth-child(3)$: |
ha-icon {
animation: rotation 1s linear infinite;
margin-right: 0px;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
Yes, you can position the chips with ātopā like this:
square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Bathroom
secondary: '{{ states(''sensor.bathroom_sensor_temperature'') | round(0) }} Ā°C'
icon: mdi:shower
entity: group.bathroom_lights
tap_action:
action: navigate
navigation_path: bathroom
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.bathroom_leak_water_leak
state: 'on'
chip:
type: template
icon_color: light-blue
icon: mdi:water-alert
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.bathroom_motion_occupancy
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: fan.bathroom_fan
state: 'off'
chip:
type: template
icon_color: disabled
icon: mdi:fan
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation 2s linear infinite;
}
- type: conditional
conditions:
- entity: group.bathroom_windows
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% if is_state('group.bathroom_lights', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Bathroom
secondary: '{{ states(''sensor.bathroom_sensor_temperature'') | round(0) }} Ā°C'
icon: mdi:shower
entity: group.bathroom_lights
tap_action:
action: navigate
navigation_path: bathroom
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host {
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.bathroom_leak_water_leak
state: 'on'
chip:
type: template
icon_color: light-blue
icon: mdi:water-alert
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.bathroom_motion_occupancy
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: fan.bathroom_fan
state: 'off'
chip:
type: template
icon_color: disabled
icon: mdi:fan
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation 2s linear infinite;
}
- type: conditional
conditions:
- entity: group.bathroom_windows
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% if is_state('group.bathroom_lights', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
16 Likes
You can remove the badge like this:
type: custom:mushroom-entity-card
entity: binary_sensor.unavailable_device
card_mod:
style: |
ha-card {
--badge-size: 0px;
}
3 Likes
Perfect ā¦ that worked a treat!!! Thank you.
1 Like
Here is a simple battery card if anybody needs one:
Without charging indicator:
type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
icon: |+
{% set battery_level = (states(entity) | int / 10) | round(0) | int * 10 %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
layout: horizontal
tap_action:
action: none
entity: sensor.pet_flap_back_door_flap_battery_level
With charging indicator:
type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
icon: |+
{% set battery_level = (states(entity) | int / 10) | round(0) | int * 10 %}
{% if is_state('binary_sensor.rhys_phone_is_charging', 'on' ) %}
{% if battery_level > 0 %}
mdi:battery-charging-{{ battery_level }}
{% else %}
mdi:battery-charging-outline
{% endif %}
{% else %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
layout: horizontal
tap_action:
action: none
entity: sensor.rhys_phone_battery_level
38 Likes