Think its appropriate to post this here too 
12 Likes
Here’s my mushroom-style Home Summary Page. Still very much a work in progress (as always), but I’m very happy with how it’s looking.
(Special thanks to @rhysb and @dimitri.landerloos for putting the work into making the animated icons with card_mod!)
Weather Warnings: 4 separate conditional cards pulling data from my weather integration (Environment Canada) that only show when there is an active weather alert.
type: vertical-stack
cards:
- type: conditional
conditions:
- entity: sensor.thermal_comfort_frost_risk
state: high
card:
type: custom:mushroom-template-card
primary: Frost Alert
secondary: >-
Frost likely to occur when tempearature reaches {{
states('sensor.thermal_comfort_frost_point') | round(1) }}°C
icon: mdi:snowflake-alert
entity: sensor.thermal_comfort_frost_risk
icon_color: red
tap_action:
action: more-info
- type: conditional
conditions:
- entity: sensor.WEATHERENTITY_statements
state: '1'
card:
type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.WEATHERENTITY_statements'', ''alert_1'') }}'
secondary: >-
{{ state_attr('sensor.WEATHERENTITY_statements', 'alert_time_1')
}}
icon: mdi:alert-circle
entity: sensor.WEATHERENTITY_statements
icon_color: blue
tap_action:
action: url
url_path: ## YOUR URL PATH HERE
badge_icon: ''
fill_container: false
- type: conditional
conditions:
- entity: sensor.WEATHERENTITY_advisory
state: '1'
card:
type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.WEATHERENTITY_advisory'', ''alert_1'') }}'
secondary: '{{ state_attr(''sensor.WEATHERENTITY_advisory'', ''alert_time_1'') }}'
icon: mdi:alert
entity: sensor.WEATHERENTITY_advisory
icon_color: amber
tap_action:
action: url
url_path: ## YOUR URL PATH HERE
fill_container: false
- type: conditional
conditions:
- entity: sensor.WEATHERENTITY_watches
state: '1'
card:
type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.WEATHERENTITY_watches'', ''alert_1'') }}'
secondary: '{{ state_attr(''sensor.WEATHERENTITY_watches'', ''alert_time_1'') }}'
icon: mdi:alert
entity: sensor.WEATHERENTITY_watches
icon_color: orange
tap_action:
action: url
url_path: ## YOUR URL PATH HERE
fill_container: false
- type: conditional
conditions:
- entity: sensor.WEATHERENTITY_warnings
state: '1'
card:
type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.WEATHERENTITY_warnings'', ''alert_1'') }}'
secondary: '{{ state_attr(''sensor.WEATHERENTITY_warnings'', ''alert_time_1'') }}'
icon: mdi:alert
entity: sensor.WEATHERENTITY_warnings
icon_color: red
tap_action:
action: url
url_path: ## YOUR URL PATH HERE
fill_container: false
card_mod:
style: |
ha-state-icon {
animation: pulse 3s ease-in-out infinite;;
}
@keyframes pulse {
100% {opacity: 0;}
}
- type: conditional
conditions:
- condition: state
entity: sensor.WEATHERENTITY_endings
state: '1'
card:
type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.WEATHERENTITY_endings'', ''alert_1'') }}'
secondary: '{{ state_attr(''sensor.WEATHERENTITY_endings'', ''alert_time_1'') }}'
icon: mdi:clock-check
entity: sensor.WEATHERENTITY_endings
icon_color: grey
tap_action:
action: url
url_path: ## YOUR URL PATH HERE
fill_container: false
Garbage Collection: template card using custom schedule sensors
type: custom:mushroom-template-card
primary: Garbage Collection
secondary: |-
{% if states('sensor.garbage_collection') == '0' %}
Today between 8-9AM
{% elif states('sensor.garbage_collection') == '1' %}
Tomorrow between 8-9AM
{% else %}
in {{ states('sensor.garbage_collection') }} days
{% endif %}
icon: |-
{% if states('sensor.garbage_collection') == '0' %}
mdi:trash-can
{% else %}
mdi:trash-can-outline
{% endif %}
entity: sensor.garbage_collection
icon_color: |-
{% if states('sensor.garbage_collection') == '0' %}
green
{% elif states('sensor.garbage_collection') == '1' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: more-info
hold_action:
action: more-info
visibility:
- condition: numeric_state
entity: sensor.garbage_collection
below: 2
Weather Summary: The actual summary is provided by my weather integration (Environment Canada), but I imagine you could create something similar with a template.
For this card, I also created 2 separate template sensors: "sensor.weather_icon_colour" which provides a colour value for the card icon based on the weather condition, and "sensor.weather_condition_easy" which makes the current condition more “grammatically correct” for the card (see the primary text on the card). The icons are also animated (check the forum for more animation options), and there’s several conditional chips for different information (the chips will also scroll horizontally when they won’t fit in the card width).
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: >-
Its currently {{ states('sensor.WEATHERENTITY_temperature') | round(0)
}}°C outside and {{ states('sensor.weather_condition_easy') }}.
secondary: '{{ states(''sensor.WEATHERENTITY_summary'') }}'
icon: |-
{% if is_state('weather.WEATHERENTITY_forecast', 'clear-night') %}
mdi:weather-night
{% elif is_state('weather.WEATHERENTITY_forecast', 'partlycloudy') %}
{% if is_state('sun.sun', 'below_horizon') %}
mdi:weather-night-partly-cloudy
{% else %}
mdi:weather-partly-cloudy
{% endif %}
{% else %}
mdi:weather-{{ states('weather.WEATHERENTITY_forecast') }}
{% endif %}
multiline_secondary: true
tap_action:
action: navigate
navigation_path: /mu-main/weather
icon_color: '{{ states(''sensor.weather_icon_colour'') }}'
card_mod:
style: |
{% set weather_code = states('weather.WEATHERENTITY_forecast') %}
{% if weather_code == 'clear-night' %}
ha-state-icon {
animation: moon 10s linear infinite, stars 5s linear infinite;
}
@keyframes moon {
0%, 100% { transform: rotate(12deg); }
30% { transform: rotate(-6deg); }
45% { transform: rotate(8deg); }
75% { transform: rotate(-10deg); }
}
@keyframes stars {
0%, 3.1%, 14.1% { clip-path: inset(0 0 0 0); }
3% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 99% 62%, 68% 62%, 62% 44%, 76% 34%, 100% 34%, 99% 0%); }
14% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 100% 25%, 51% 45%, 38% 34%, 36% 0); }
}
{% elif weather_code == 'partlycloudy' %}
ha-state-icon {
animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
{% elif weather_code == 'cloudy' %}
ha-state-icon {
animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
{% elif weather_code == 'pouring' %}
ha-state-icon {
animation: cloudy 10s ease-in-out infinite, rain 1s infinite;
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes rain {
0%, 50%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 83%, 54% 83%, 62% 47%, 47% 46%, 38% 83%, 0 83%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 70%, 80% 48%, 63% 48%, 54% 94%, 32% 94%, 46% 46%, 30% 46%, 23% 72%, 0 72%); }
}
{% elif weather_code == 'rainy' %}
ha-state-icon {
animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite;
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes rain {
50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
}
{% elif weather_code == 'snowy' %}
ha-state-icon {
animation: cloudy 10s ease-in-out infinite, snow 4s infinite;
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes snow {
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 100%, 76% 73%, 57% 49%, 34% 56%, 26% 79%, 37% 100%, 0 100%); }
51% { clip-path: inset(0 0 0 0); }
}
{% elif weather_code == 'fog' %}
ha-state-icon {
animation: cloudy 10s ease-in-out infinite, fog 4s infinite;
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes fog {
0%, 26%, 76%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 59%, 60% 59%, 60% 74%, 100% 74%, 100% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 26% 76%, 0 76%); }
}
{% elif weather_code == 'windy' %}
ha-state-icon {
animation: cloudy 10s ease-in-out infinite;
transform-origin: 15% 50%
}
@keyframes cloudy {
0%, 100% { transform: scaleX(1.2); }
30% { transform: scaleX(0.9); }
45% { transform: scaleX(1.1); }
75% { transform: scaleX(0.8); }
}
{% elif weather_code == 'sunny' %}
ha-state-icon {
animation: spin 6s ease-in-out infinite alternate;
}
{% elif weather_code == 'lightning' %}
ha-state-icon {
animation: cloudy 10s ease-in-out infinite, lightning 4s infinite;
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes lightning {
10%, 15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 69% 55%, 66% 40%, 48% 39%, 24% 100%, 0 100%); transform: scale(1.1); }
10.1%, 15.1% { clip-path: inset(0 0 0 0); transform: scale(1); }
}
{% else %}
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: sun.sun
state: below_horizon
chip:
type: entity
entity: sensor.sun_next_rising
icon: mdi:weather-sunset-up
icon_color: orange
use_entity_picture: false
- type: conditional
conditions:
- condition: state
entity: sun.sun
state: above_horizon
chip:
type: entity
entity: sensor.sun_next_setting
icon: mdi:weather-sunset-down
icon_color: deep-orange
- type: entity
entity: sensor.WEATHERENTITY_humidity
icon_color: cyan
icon: mdi:water-opacity
- type: conditional
conditions:
- condition: state
entity: sensor.WEATHERENTITY_chance_of_precipitation
state_not: unknown
chip:
type: entity
entity: sensor.WEATHERENTITY_chance_of_precipitation
tap_action:
action: more-info
hold_action:
action: more-info
icon: mdi:weather-rainy
icon_color: light-blue
- type: conditional
conditions:
- condition: state
entity: sensor.WEATHERENTITY_wind_chill
state_not: unknown
chip:
type: template
entity: sensor.WEATHERENTITY_wind_chill
icon: mdi:weather-windy-variant
icon_color: cyan
content: '{{ states(''sensor.WEATHERENTITY_wind_chill'') }}°C Wind Chill'
- type: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: sensor.thermal_comfort_frost_risk
state: high
- condition: state
entity: sensor.thermal_comfort_frost_risk
state: probable
chip:
type: template
entity: sensor.thermal_comfort_frost_risk
icon: mdi:snowflake-alert
icon_color: blue
content: Frost Risk
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.WEATHERENTITY_wind_speed
above: 0
chip:
type: template
entity: sensor.WEATHERENTITY_wind_speed
icon: mdi:weather-windy
icon_color: grey
content: >-
{{ states('sensor.WEATHERENTITY_wind_speed') }}km/h {{
states('sensor.WEATHERENTITY_wind_direction') }}
tap_action:
action: more-info
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.WEATHERENTITY_aqhi
above: 4
chip:
type: template
entity: sensor.WEATHERENTITY_aqhi
icon: mdi:air-filter
icon_color: |-
{% set aqhi = states('sensor.WEATHERENTITY_aqhi') | int %}
{% if aqhi >= 8 %}
red
{% elif aqhi >= 6 %}
orange
{% elif aqhi > 3 %}
amber
{% else %}
green
{% endif %}
content: |-
{% set aqhi = states('sensor.WEATHERENTITY_aqhi') | int %}
{% if aqhi >= 8 %}
AQHI Very High
{% elif aqhi >= 6 %}
AQHI High
{% elif aqhi > 3 %}
AQHI Moderate
{% else %}
AQHI Low
{% endif %}
({{ states('sensor.WEATHERENTITY_aqhi') }})
- type: conditional
conditions:
- condition: state
entity: sun.sun
state: above_horizon
- condition: numeric_state
entity: sensor.WEATHERENTITY_uv_index
above: 4
chip:
type: template
entity: sensor.WEATHERENTITY_uv_index
icon: mdi:sun-wireless
icon_color: |-
{% set uv_index = states('sensor.WEATHERENTITY_uv_index') | int %}
{% if uv_index >= 8 %}
red
{% elif uv_index > 6 %}
orange
{% elif uv_index > 3 %}
amber
{% else %}
green
{% endif %}
content: |-
{% set uv_index = states('sensor.WEATHERENTITY_uv_index') | int %}
{% if uv_index >= 8 %}
UV Very High
{% elif uv_index > 6 %}
UV High
{% elif uv_index > 3 %}
UV Moderate
{% else %}
UV Low
{% endif %}
({{ states('sensor.WEATHERENTITY_uv_index') }})
alignment: left
card_mod:
style: |
ha-card {
margin: -10px 12px 10px;
--chip-border-width: 0;
--chip-box-shadow: 0;
--chip-background: #9E9E9E20;
}
ha-card > .chip-container {
flex-wrap: nowrap;
overflow-x: scroll;
}
ha-card > .chip-container > * {
flex-shrink: 0;
}
Climate Summary: First, I made a “HVAC Action” template sensor to record the current action of the thermostat (I think this is redundant, but I was planning on using it for other things and wanted it to be readily available):
{{ state_attr('climate.nest_thermostat_name', 'hvac_action') }}
Then, I made the following Historical Stats sensors in my configuration.yaml (can’t make these in the UI yet):
##History Stats
- platform: history_stats
name: Climate Heat Today
entity_id: sensor.hvac_action
state: "heating"
type: time
start: "{{ now().replace(hour=0, minute=0, second=0) }}"
end: "{{ now() }}"
- platform: history_stats
name: Climate Cool Today
entity_id: sensor.hvac_action
state: "cooling"
type: time
start: "{{ now().replace(hour=0, minute=0, second=0) }}"
end: "{{ now() }}"
- platform: history_stats
name: Climate Heat Yesterday
entity_id: sensor.hvac_action
state: "heating"
type: time
start: "{{ now().replace(hour=0, minute=0, second=0) - timedelta(days=1) }}"
end: "{{ now().replace(hour=0, minute=0, second=0) }}"
- platform: history_stats
name: Climate Cool Yesterday
entity_id: sensor.hvac_action
state: "cooling"
type: time
start: "{{ now().replace(hour=0, minute=0, second=0) - timedelta(days=1) }}"
end: "{{ now().replace(hour=0, minute=0, second=0) }}"
With the 4 sensors created, I made 2 conditional template cards (one for Cooling and one for Heating) as below which will display “Heated (or Cooled) for __ hours and __ minutes” as the primary and “__hours and __ minutes more/less than yesterday” - if the heating/cooling time is less than yesterday, it will display a badge with a leaf otherwise it will display an up arrow:
(The conditional cards are set to only show the cards if the heating/cooling time is above “0”):
type: vertical-stack
cards:
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.climate_heat_today
above: 0
card:
type: custom:mushroom-template-card
primary: '{{ states(''sensor.climate_heat_time_summary'') }}'
secondary: '{{ states(''sensor.climate_heat_yesterday_summary'') }}'
icon: mdi:home-thermometer-outline
entity: sensor.climate_heat_today
icon_color: red
tap_action:
action: more-info
badge_icon: >-
{% set total_minutes_today = states('sensor.climate_heat_today') | float
* 60 %}
{% set total_minutes_yesterday = states('sensor.climate_heat_yesterday')
| float * 60 %}
{% if total_minutes_today < total_minutes_yesterday %}
mdi:leaf
{% else %}
mdi:chevron-up
{% endif %}
badge_color: >-
{% set total_minutes_today = states('sensor.climate_heat_today') | float
* 60 %}
{% set total_minutes_yesterday = states('sensor.climate_heat_yesterday')
| float * 60 %}
{% if total_minutes_today < total_minutes_yesterday %}
green
{% else %}
red
{% endif %}
multiline_secondary: true
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.climate_cool_today
above: 0
card:
type: custom:mushroom-template-card
primary: '{{ states(''sensor.climate_cool_time_summary'') }}'
secondary: '{{ states(''sensor.climate_cool_yesterday_summary'') }}'
icon: mdi:home-thermometer-outline
entity: sensor.climate_cool_today
icon_color: blue
tap_action:
action: more-info
badge_icon: >-
{% set total_minutes_today = states('sensor.climate_cool_today') | float
* 60 %}
{% set total_minutes_yesterday = states('sensor.climate_cool_yesterday')
| float * 60 %}
{% if total_minutes_today < total_minutes_yesterday %}
mdi:leaf
{% else %}
mdi:chevron-down
{% endif %}
badge_color: >-
{% set total_minutes_today = states('sensor.climate_cool_today') | float
* 60 %}
{% set total_minutes_yesterday = states('sensor.climate_cool_yesterday')
| float * 60 %}
{% if total_minutes_today < total_minutes_yesterday %}
green
{% else %}
red
{% endif %}
multiline_secondary: true
Calendar: Weekly Planner Card by FamousWolf (GitHub - FamousWolf/week-planner-card: Custom Home Assistant card displaying a responsive overview or multiple days with events from one of multiple calendars)
(NOT SHOWN) Vacation Mode and Guest Mode Cards: Conditional Template cards that indicate if Vacation/Guest Mode is on and what it means for certain schedules or routines (this is for the day my household inevitably decides to use Home Assistant… some day lol).
I would love to know your thoughts and feedback!!
12 Likes
I have now updated this card to the new look of the mushroom cards. I am also using colors more faithfull to the original mushroom colors
follow the directions in the original post to make this work for you.
As last time code is too large to post in 1 post, so i will split it into 2 and you can just add the code in the same card right below eachother.
1st Half of Code
type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:auto-entities
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding-top: 0px;
padding-bottom: 0px;
padding-right: 30px;
width: 200%;
background: transparent !important;
box-shadow: none;
border: none !important;
}
card_param: cards
filter:
template: >-
{%- for state in states.sensor |
selectattr('entity_id','search','battery_plus') |
selectattr('entity_id','search','lounge') |
rejectattr('entity_id','search','type') |
rejectattr('entity_id','search','last_replaced') -%}
{{
{
'type': 'custom:bar-card',
'entity': state.entity_id,
'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Lounge')[1],
'card_mod':
{
'style': 'bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px !important;
height: 36px !important;
margin-top: -7px !important;
width: calc(100% + 56px);
left: -4%;
}
ha-icon {
position: relative;
padding: 8px;
border-radius: 50%;
--mdc-icon-size: 21px;
margin-top: -19px;
right: 8px;
}
bar-card-name {
display: relative;
font-weight: bold;
width: fit-content;
bottom: 8px;
right: 8px;
}
bar-card-name:after {
content: "{{states(config.entity)}} %";
display: flex;
position: relative;
font-size: 11px;
font-weight: light;
bottom: 2px;
left: 0px;
}
{% if states(config.entity) | int(default=unknown) == unknown %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #0033ff !important;
/* Icon */
--card-mod-icon: mdi:bug;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 10 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(244, 67, 54) !important;
/* Icon */
--card-mod-icon: mdi:battery-10 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 20 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(255, 111, 0) !important;
/* Icon */
--card-mod-icon: mdi:battery-20 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 30 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(255, 152, 0) !important;
/* Icon */
--card-mod-icon: mdi:battery-30 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 40 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(255, 193, 7) !important;
/* Icon */
--card-mod-icon: mdi:battery-40 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 50 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(255, 235, 59) !important;
/* Icon */
--card-mod-icon: mdi:battery-50 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 60 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(205, 220, 57) !important;
/* Icon */
--card-mod-icon: mdi:battery-60 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 70 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(139, 195, 74) !important;
/* Icon */
--card-mod-icon: mdi:battery-70 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 80 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(139, 195, 74) !important;
/* Icon */
--card-mod-icon: mdi:battery-80 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 90 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(76, 175, 80) !important;
/* Icon */
--card-mod-icon: mdi:battery-90 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 100 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(76, 175, 80) !important;
/* Icon */
--card-mod-icon: mdi:battery !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% endif %}
bar-card-row, ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
bar-card-indicator {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
top: -8px;
}
bar-card-value {
color: transparent !important;
}
ha-card {
margin: 0px 0px 0px 0px !important;
height: 54px;
}'
}
}
}},
{%- endfor %}
sort:
method: state
numeric: true
count: 1
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if states(entity) == 'on' %}
mdi:chevron-up
{% else %}
mdi:chevron-down
{% endif %}
entity: input_boolean.lounge_battery_dropdown
card_mod:
style: |
ha-card {
top: 10px;
right: 11px;
--chip-icon-size: 23px;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
alignment: end
3 Likes
2nd Half of Code
- type: custom:auto-entities
visibility:
- conditon: state
entity: input_boolean.lounge_battery_dropdown
state: 'on'
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding-top: 0px;
padding-bottom: 18px;
margin: -18px 0px 0px 0px;
background: transparent;
box-shadow: none;
border: none;
}
card_param: cards
filter:
template: >-
{%- for state in states.sensor |
selectattr('entity_id','search','battery_plus') |
selectattr('entity_id','search','lounge') |
rejectattr('entity_id','search','type') |
rejectattr('entity_id','search','last_replaced') -%}
{{
{
'type': 'custom:bar-card',
'entity': state.entity_id,
'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Lounge')[1],
'card_mod':
{
'style': 'bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px !important;
height: 36px !important;
margin-top: -8px !important;
width: calc(100% + 18px);
left: -3.5%;
}
ha-icon {
position: relative;
padding: 8px;
border-radius: 50%;
--mdc-icon-size: 21px;
margin-top: -19px;
right: 8px;
}
bar-card-name {
display: relative;
font-weight: bold;
width: fit-content;
bottom: 8px;
right: 8px;
}
bar-card-name:after {
content: "{{states(config.entity)}} %";
display: flex;
position: relative;
font-size: 11px;
font-weight: light;
bottom: 2px;
left: 0px;
}
{% if states(config.entity) | int(default=unknown) == unknown %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #0033ff !important;
/* Icon */
--card-mod-icon: mdi:bug;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 10 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(244, 67, 54) !important;
/* Icon */
--card-mod-icon: mdi:battery-10 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 20 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(255, 111, 0) !important;
/* Icon */
--card-mod-icon: mdi:battery-20 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 30 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(255, 152, 0) !important;
/* Icon */
--card-mod-icon: mdi:battery-30 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 40 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(255, 193, 7) !important;
/* Icon */
--card-mod-icon: mdi:battery-40 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 50 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(255, 235, 59) !important;
/* Icon */
--card-mod-icon: mdi:battery-50 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 60 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(205, 220, 57) !important;
/* Icon */
--card-mod-icon: mdi:battery-60 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 70 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(139, 195, 74) !important;
/* Icon */
--card-mod-icon: mdi:battery-70 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 80 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(139, 195, 74) !important;
/* Icon */
--card-mod-icon: mdi:battery-80 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 90 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(76, 175, 80) !important;
/* Icon */
--card-mod-icon: mdi:battery-90 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 100 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: rgb(76, 175, 80) !important;
/* Icon */
--card-mod-icon: mdi:battery !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
filter: invert(1);
}
bar-card-name:after {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--card-primary-color) !important;
}
bar-card-name:after {
color: #3b3b3b !important;
}
}
{% endif %}
bar-card-row, ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
bar-card-indicator {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
top: -8px;
}
bar-card-value {
color: transparent !important;
}
ha-card {
margin: 0px 0px -18px 0px !important;
height: 54px;
}'
}
}
}}, {%- endfor %}
sort:
method: state
numeric: true
first: 1
count: 100
2 Likes
Is this still working friend?
Im trying to replicate here but the sticky bar is not “stickyng” hahaha
you have to use fixed instead. sticky is no more working since a few updates. Here is an example of my menu css.
card_mod:
style: |
:host {
z-index: 4;
position: fixed;
width: 100%;
bottom: 0;
padding-right: 8px;
margin: 0px 8px 0px -8px;
border-top: 1px solid rgba(0,0,0,0.1);
}
ha-card {
background: var(--cstm-rgb-bottom-nav);
box-shadow: none;
padding-bottom: 15px;
border-radius: 0px;
}
5 Likes
Thanks!!!
it worked.
1 Like
Holy s*** -30 outdoor?
You are freezing hahaha
thanks, nice card btw!!
Hi just trying some of your nice cards,
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 5.5px groove green;
--shape-color: orange !important;
}
.: |
ha-card {
background-color: #fff000;
border: 2.0px outset white;
height: 200px !important;
width: 200px;
box-shadow: 0px 2px 4px 0px rgba(1,0,1,0.66);
border-radius: 20px !important;
animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7);}
70% {box-shadow: 20px 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
does not work for me, if I remove
mushroom-shape-icon$: |
.shape {
border: 5.5px groove green;
--shape-color: orange !important;
}
and let the code as this
card_mod:
style: |
ha-card {
background-color: #fff000;
border: 2.0px outset white;
height: 200px !important;
width: 200px;
box-shadow: 0px 2px 4px 0px rgba(1,0,1,0.66);
border-radius: 20px !important;
animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7);}
70% {box-shadow: 20px 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
then it works fine
I cant understnad the $ and | thing
could you please explain for novices?
This is fantastic and I’ve just added it to my dashboard. However for some reason I can’t get the Wifi icon to show for the guest Wifi:
The entity does have an icon set… Any idea?
Nice, with filling. can you please share the code?
I updated my setup to use tile-card (incl. custom features (HACS)) instead of button-card. The new card looks like this
Code:
type: tile
layout_options:
grid_columns: full
card_mod:
style: |
ha-card {
box-shadow: none !important;
}
color: blue
entity: sensor.ecosys_m5521cdn
features:
- type: custom:service-call
entries:
- type: button
entity_id: sensor.ecosys_m5521cdn_black_tk_5230k
icon: mdi:water
label: "{{ states(config.entity)}} %"
styles: |-
:host {
--color: grey;
--icon-color: grey;
}
tap_action:
action: more-info
data:
entity_id: sensor.ecosys_m5521cdn_black_tk_5230k
- type: button
entity_id: sensor.ecosys_m5521cdn_cyan_tk_5230cs
icon: mdi:water
label: "{{ states(config.entity)}} %"
styles: |-
:host {
--color: darkcyan;
--icon-color: darkcyan;
}
tap_action:
action: more-info
data:
entity_id: sensor.ecosys_m5521cdn_cyan_tk_5230cs
- type: button
entity_id: sensor.ecosys_m5521cdn_magenta_tk_5230m
icon: mdi:water
label: "{{ states(config.entity)}} %"
styles: |-
:host {
--color: darkmagenta;
--icon-color: darkmagenta;
}
tap_action:
action: more-info
data:
entity_id: sensor.ecosys_m5521cdn_magenta_tk_5230m
- type: button
entity_id: sensor.ecosys_m5521cdn_yellow_tk_5230y_2
icon: mdi:water
label: "{{ states(config.entity)}} %"
styles: |-
:host {
--color: orange;
--icon-color: orange;
}
tap_action:
action: more-info
data:
entity_id: sensor.ecosys_m5521cdn_yellow_tk_5230y_2
8 Likes
Also updated the Internet-state-card to use tile instead of button-card:
Code:
type: tile
color: green
entity: binary_sensor.fb_keller_connection
features:
- type: custom:service-call
entries:
- type: button
entity_id: switch.fb_keller_wi_fi_guestwifi
icon: "{{state_attr(config.entity,\"icon\")}}"
label: "{{state_attr(config.entity,\"friendly_name\")}}"
styles: |-
:host {
{% if is_state(config.entity, "on") %}
--color: var(--green-color);
--icon-color: var(--green-color);
--label-color: var(--green-color);
{% endif %}
}
tap_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.fb_keller_wi_fi_guestwifi
hold_action:
action: more-info
data:
entity_id: switch.fb_keller_wi_fi_guestwifi
- type: button
entity_id: sensor.speedtest_download
icon: "{{state_attr(config.entity,\"icon\")}}"
label: "{{ states(config.entity) | int }} Mbit/s"
styles: |-
:host {
{% if states(config.entity) > 350 %}
--color: var(--green-color);
--icon-color: var(--green-color);
--label-color: var(--green-color);
{% elif states(config.entity) < 100 %}
--color: var(--red-color);
--icon-color: var(--red-color);
--label-color: var(--red-color);
{% else %}
--color: var(--orange-color);
--icon-color: var(--orange-color);
--label-color: var(--orange-color);
{% endif %}
}
tap_action:
action: more-info
data:
entity_id: sensor.speedtest_download
- type: button
entity_id: sensor.speedtest_upload
icon: "{{state_attr(config.entity,\"icon\")}}"
label: "{{ states(config.entity) | int }} Mbit/s"
styles: |-
:host {
{% if states(config.entity) > 150 %}
--color: var(--green-color);
--icon-color: var(--green-color);
--label-color: var(--green-color);
{% elif states(config.entity) < 50 %}
--color: var(--red-color);
--icon-color: var(--red-color);
--label-color: var(--red-color);
{% else %}
--color: var(--orange-color);
--icon-color: var(--orange-color);
--label-color: var(--orange-color);
{% endif %}
}
tap_action:
action: more-info
data:
entity_id: sensor.speedtest_upload
- type: button
entity_id: sensor.speedtest_ping
icon: "{{state_attr(config.entity,\"icon\")}}"
label: "{{ states(config.entity) | int }} ms"
styles: |-
:host {
{% if states(config.entity) < 20 %}
--color: var(--green-color);
--icon-color: var(--green-color);
--label-color: var(--green-color);
{% elif states(config.entity) > 50 %}
--color: var(--red-color);
--icon-color: var(--red-color);
--label-color: var(--red-color);
{% else %}
--color: var(--orange-color);
--icon-color: var(--orange-color);
--label-color: var(--orange-color);
{% endif %}
}
tap_action:
action: more-info
data:
entity_id: sensor.speedtest_ping
layout_options:
grid_columns: 4
grid_rows: 2
5 Likes
…and also my desk-card (button-card → tile-card)
Code:
type: tile
color: blue
entity: cover.desk
state_content: current_position
features:
- type: cover-open-close
- type: custom:service-call
entries:
- type: button
entity_id: button.sit
icon: "{{ state_attr(config.entity,\"icon\")}}"
label: "{{ state_attr(config.entity,\"friendly_name\")}}"
tap_action:
action: perform-action
perform_action: button.press
target:
entity_id: button.sit
hold_action:
action: more-info
target:
entity_id: button.sit
- type: button
entity_id: button.stand
icon: "{{ state_attr(config.entity,\"icon\")}}"
label: "{{ state_attr(config.entity,\"friendly_name\")}}"
tap_action:
action: perform-action
perform_action: button.press
target:
entity_id: button.stand
hold_action:
action: more-info
target:
entity_id: button.stand
card_mod:
style:
ha-tile-info$: |
.secondary:after {
visibility: visible;
content: " - {{ states('sensor.desk_height', with_unit=true) | string }} ";
}
layout_options:
grid_columns: 4
grid_rows: 3
2 Likes
did you see this:
My effort to delete `custom: bar-card`
type: custom:auto-entities
card:
title: Battery Status
type: entities
card_mod:
class: class-header-margin
style:
hui-sensor-entity-row:
$: |
hui-generic-entity-row {
height: 25px;
padding: 0px 16px;
border-radius: var(--ha-card-border-radius);
border: 1px groove var(--primary-color);
}
.: |
ha-card {
color: vcar(--primary-color);
/*--mdc-icon-size: 40px;*/
font-weight: 400;
}
.card-content {
max-height: {{states('input_number.max_scroll_hoogte')}}px;
overflow-y: scroll;
}
state_color: false
show_header_toggle: false
filter:
exclude:
- integration: battery_notes
- entity_id: sensor.*battery_state
include:
- entity_id: sensor.*_battery*
options:
type: custom:template-entity-row
state: >
{{states(config.entity,with_unit=True)}}
secondary: >
Batterij: {{states(config.entity ~'_type')}},
sinds: {{states(config.entity ~'_last_replaced')|as_timestamp(default=none)|timestamp_custom('%d-%m-%y %X',True,'Nog niet geactiveerd')}}
card_mod:
style:
div#wrapper:
.: |
.state {
color:
{% set perc = states(config.entity)|float(0) %}
{% if perc <= 10 %} red
{% elif perc <= 20 %} darkred
{% elif perc <= 30 %} darkorange
{% elif perc <= 40 %} orange
{% elif perc <= 50 %} yellow
{% elif perc <= 60 %} yellowgreen
{% elif perc <= 70 %} lightgreen
{% elif perc <= 80 %} limegreen
{% elif perc <= 90 %} green
{% else %} darkgreen
{% endif %};
}
.info {
color: black;
border: 2px solid var(--ha-color);
background:
{% set perc = states(config.entity)|float(0) %}
/*{% set rest = 100 - perc %}*/
{% if perc <= 10 %} {% set bar = '255,0,0' %}
{% elif perc <= 20 %} {% set bar = '128,0,0' %}
{% elif perc <= 30 %} {% set bar = '255,140,0' %}
{% elif perc <= 40 %} {% set bar = '255,165,0' %}
{% elif perc <= 50 %} {% set bar = '255,255,0' %}
{% elif perc <= 60 %} {% set bar = '154,205,5' %}
{% elif perc <= 70 %} {% set bar = '144,238,144' %}
{% elif perc <= 80 %} {% set bar = '50,205,50' %}
{% elif perc <= 90 %} {% set bar = '0,128,0' %}
{% else %} {% set bar = '0,100,0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%,
rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%);
}
.info .secondary {
color: white;
}
.: |
:host {
--card-mod-icon-color:
{% set perc = states(config.entity)|float(0) %}
{% if perc <= 10 %} red
{% elif perc <= 20 %} darkred
{% elif perc <= 30 %} darkorange
{% elif perc <= 40 %} orange
{% elif perc <= 50 %} yellow
{% elif perc <= 60 %} yellowgreen
{% elif perc <= 70 %} lightgreen
{% elif perc <= 80 %} limegreen
{% elif perc <= 90 %} green
{% else %} darkgreen
{% endif %};
}
sort:
method: state
numeric: true
reverse: false
show_empty: false
seems so much shorter, and gives an identical look and feel. well, sort of 
its admittedly a bit clunky depending on the displaying device (all n frontend).
Gas-Stations-Card
A vertical-stack of tile-cards with custom-feature-buttons sorted by gas-price (low → high) with auto-entities-card.
needed components:
Code:
type: vertical-stack
cards:
- type: custom:auto-entities
card:
square: false
columns: 1
type: grid
card_param: cards
sort:
method: state
numeric: true
filter:
include:
- attributes:
fuel_type: e5
not:
state: unavailable
not 2:
state: unknown
options:
type: tile
show_entity_picture: true
state_content:
- street
- house_number
- city
features:
- type: custom:service-call
entries:
- type: button
entity_id: this.entity_id
icon: mdi:door-open
label: geöffnet
tap_action:
action: more-info
target:
entity_id: this.entity_id
- type: button
entity_id: this.entity_id
icon: mdi:water
label: >-
{{
state_attr(config.entity,"fuel_type").replace("e5","Super
E5").replace("diesel","Diesel") }}
tap_action:
action: more-info
- type: button
entity_id: this.entity_id
icon: mdi:currency-eur
label: >-
{{ states(config.entity) | float(default=0) | round(2) }}
€
tap_action:
action: more-info
target:
entity_id: this.entity_id
3 Likes
Thats pretty good! I would definitely want to make some changes for it to fit in with mushroom more, but it certainly loads better, at least for me.
1 Like
Energie Autarky-Card (Mushroom-Template-Card)
This Card displays the grade of autarky and a text to discripe how much power your house currently needs und where this power comes from (in order from high to low values).
The color and icon will match the primary source of power (solar = orange + mdi:solar-power, home-battery = green + mdi:home-battery-outline and grid = red + mdi:transmission-tower-export). The same goes for the badge, but for your secondary source of power.
For this you will need the following sensors:
- a sensor representing the current power your house uses (see “hausverbrauch” in code below)
- a sensor representing the current power directly from your solar-panels that is used in hour house (see “solarenergie” in code below)
- a sensor representing the current power from your home-battery that is used in hour house (see “speicherentladung” in code below)
- a sensor representing the current power from grid that is used in hour house (see “netzbezug” in code below)
Just change the “sensor.[…]” values in the following code to use your entities.
type: custom:mushroom-template-card
primary: >-
Autarkie von {% set hausverbrauch = states('sensor.senec_house_power') |
int(default=0) %}
{% set netzbezug = states('sensor.senec_grid_house_used_power') |
int(default=0) %}
{% set speicherentladung = states("sensor.senec_battery_house_used_power") |
int(default=0) %}
{% set solarenergie = states("sensor.senec_solar_house_used_power") |
int(default=0) %}
{{((solarenergie + speicherentladung) / hausverbrauch * 100) |
int(default=0)}}%
multiline_secondary: true
secondary: >-
{% set hausverbrauch = states('sensor.senec_house_power') | int(default=0) %}
{% set netzbezug = states('sensor.senec_grid_house_used_power') |
int(default=0) %}
{% set speicherentladung = states("sensor.senec_battery_house_used_power") |
int(default=0) %}
{% set solarenergie = states("sensor.senec_solar_house_used_power") |
int(default=0) %}
{% if speicherentladung == 0 and solarenergie == 0 and netzbezug > 0 %}
Der Hausverbrauch von {{ hausverbrauch }} W wird vollständig aus dem Netz gedeckt.
{% elif speicherentladung > 0 and solarenergie == 0 and netzbezug == 0 %}
Der Hausverbrauch von {{ hausverbrauch }} W wird vollständig aus dem Speicher gedeckt.
{% elif speicherentladung == 0 and solarenergie > 0 and netzbezug == 0 %}
Der Hausverbrauch von {{ hausverbrauch }} W wird vollständig aus Solarenergie gedeckt.
{% elif speicherentladung > 0 and solarenergie > 0 and netzbezug == 0 %}
Der Hausverbrauch von {{ hausverbrauch }} W wird mit {{ iif(speicherentladung > solarenergie, speicherentladung, solarenergie) }} W aus {{ iif(speicherentladung > solarenergie, "dem Speicher", "Solarenergie") }} und mit {{ iif(speicherentladung > solarenergie, solarenergie, speicherentladung) }} W aus {{ iif(speicherentladung > solarenergie, "Solarenergie", "dem Speicher") }} gedeckt.
{% elif speicherentladung == 0 and solarenergie > 0 and netzbezug > 0 %}
Der Hausverbrauch von {{ hausverbrauch }} W wird mit {{ iif(netzbezug > solarenergie, netzbezug, solarenergie) }} W aus {{ iif(netzbezug > solarenergie, "dem Netz", "Solarenergie") }} und mit {{ iif(netzbezug > solarenergie, solarenergie, netzbezug) }} W aus {{ iif(netzbezug > solarenergie, "Solarenergie", "dem Netz") }} gedeckt.
{% elif speicherentladung > 0 and solarenergie == 0 and netzbezug > 0 %}
Der Hausverbrauch von {{ hausverbrauch }} W wird mit {{ iif(netzbezug > speicherentladung, netzbezug, speicherentladung) }} W aus {{ iif(netzbezug > speicherentladung, "dem Netz", "dem Speicher") }} und mit {{ iif(netzbezug > speicherentladung, speicherentladung, netzbezug) }} W aus {{ iif(netzbezug > speicherentladung, "dem Speicher", "dem Netz") }} gedeckt.
{% elif speicherentladung > 0 and solarenergie > 0 and netzbezug > 0 %}
{% if netzbezug > solarenergie and netzbezug > speicherentladung %}
Der Hausverbrauch von {{ hausverbrauch }} W wird mit {{ netzbezug }} W aus dem Netz, mit {{ iif(solarenergie > speicherentladung, solarenergie, speicherentladung) }} W aus {{ iif(solarenergie > speicherentladung, "Solarenergie", "dem Speicher") }} und mit {{ iif(solarenergie > speicherentladung, speicherentladung, solarenergie) }} W aus {{ iif(solarenergie > speicherentladung, "dem Speicher", "Solarenergie") }} gedeckt.
{% elif solarenergie > netzbezug and solarenergie > speicherentladung %}
Der Hausverbrauch von {{ hausverbrauch }} W wird mit {{ solarenergie }} W aus Solarenergie, mit {{ iif(netzbezug > speicherentladung, netzbezug, speicherentladung) }} W aus {{ iif(solarenergie > speicherentladung, "dem Netz", "dem Speicher") }} und mit {{ iif(netzbezug > speicherentladung, speicherentladung, netzbezug) }} W aus {{ iif(solarenergie > speicherentladung, "dem Speicher", "dem Netz") }} gedeckt.
{% elif speicherentladung > netzbezug and speicherentladung > solarenergie %}
Der Hausverbrauch von {{ hausverbrauch }} W wird mit {{ speicherentladung }} W aus dem Speicher, mit {{ iif(solarenergie > netzbezug, solarenergie, netzbezug) }} W aus {{ iif(solarenergie > netzbezug, "Solarenergie", "dem Netz") }} und mit {{ iif(solarenergie > netzbezug, netzbezug, solarenergie) }} W aus {{ iif(solarenergie > netzbezug, "dem Netz", "Solarenergie") }} gedeckt.
{% else %}
Fehler
{% endif %}
{% endif %}
icon: >-
{% set hausverbrauch = states('sensor.senec_house_power') | int(default=0) %}
{% set netzbezug = states('sensor.senec_grid_house_used_power') |
int(default=0) %}
{% set speicherentladung = states("sensor.senec_battery_house_used_power") |
int(default=0) %}
{% set solarenergie = states("sensor.senec_solar_house_used_power") |
int(default=0) %}
{% if speicherentladung == 0 and solarenergie == 0 and netzbezug > 0 %}
mdi:transmission-tower-export
{% elif speicherentladung > 0 and solarenergie == 0 and netzbezug == 0 %}
mdi:home-battery-outline
{% elif speicherentladung == 0 and solarenergie > 0 and netzbezug == 0 %}
mdi:solar-power
{% elif speicherentladung > 0 and solarenergie > 0 and netzbezug == 0 %}
{{ iif(speicherentladung > solarenergie,"mdi:home-battery-outline","mdi:solar-power") }}
{% elif speicherentladung == 0 and solarenergie > 0 and netzbezug > 0 %}
{{ iif(netzbezug > solarenergie,"mdi:transmission-tower-export","mdi:solar-power") }}
{% elif speicherentladung > 0 and solarenergie == 0 and netzbezug > 0 %}
{{ iif(speicherentladung > netzbezug,"mdi:home-battery-outline","mdi:transmissions-tower-export") }}
{% elif speicherentladung > 0 and solarenergie > 0 and netzbezug > 0 %}
{% if netzbezug > solarenergie and netzbezug > speicherentladung %}
mdi:transmission-tower-export
{% elif solarenergie > netzbezug and solarenergie > speicherentladung %}
mdi:solar-power
{% elif speicherentladung > netzbezug and speicherentladung > solarenergie %}
mdi:home-battery-outline
{% else %}
mdi:home-import-outline
{% endif %}
{% endif %}
icon_color: >-
{% set hausverbrauch = states('sensor.senec_house_power') | int(default=0) %}
{% set netzbezug = states('sensor.senec_grid_house_used_power') |
int(default=0) %}
{% set speicherentladung = states("sensor.senec_battery_house_used_power") |
int(default=0) %}
{% set solarenergie = states("sensor.senec_solar_house_used_power") |
int(default=0) %}
{% if speicherentladung == 0 and solarenergie == 0 and netzbezug > 0 %}
red
{% elif speicherentladung > 0 and solarenergie == 0 and netzbezug == 0 %}
green
{% elif speicherentladung == 0 and solarenergie > 0 and netzbezug == 0 %}
orange
{% elif speicherentladung > 0 and solarenergie > 0 and netzbezug == 0 %}
{{ iif(speicherentladung > solarenergie,"green","orange") }}
{% elif speicherentladung == 0 and solarenergie > 0 and netzbezug > 0 %}
{{ iif(netzbezug > solarenergie,"red","orange") }}
{% elif speicherentladung > 0 and solarenergie == 0 and netzbezug > 0 %}
{{ iif(speicherentladung > netzbezug,"green","red") }}
{% elif speicherentladung > 0 and solarenergie > 0 and netzbezug > 0 %}
{% if netzbezug > solarenergie and netzbezug > speicherentladung %}
red
{% elif solarenergie > netzbezug and solarenergie > speicherentladung %}
orange
{% elif speicherentladung > netzbezug and speicherentladung > solarenergie %}
green
{% else %}
blue
{% endif %}
{% endif %}
layout_options:
grid_columns: full
tap_action:
action: none
visibility:
- condition: state
entity: input_boolean.energie_aktuell_anzeigen
state: "on"
- condition: state
entity: input_select.stromwassergas
state: Strom
badge_icon: >-
{% set hausverbrauch = states('sensor.senec_house_power') | int(default=0) %}
{% set netzbezug = states('sensor.senec_grid_house_used_power') |
int(default=0) %}
{% set speicherentladung = states("sensor.senec_battery_house_used_power") |
int(default=0) %}
{% set solarenergie = states("sensor.senec_solar_house_used_power") |
int(default=0) %}
{% if speicherentladung == 0 and solarenergie == 0 and netzbezug > 0 %}
none
{% elif speicherentladung > 0 and solarenergie == 0 and netzbezug == 0 %}
none
{% elif speicherentladung == 0 and solarenergie > 0 and netzbezug == 0 %}
none
{% elif speicherentladung > 0 and solarenergie > 0 and netzbezug == 0 %}
{{ iif(speicherentladung > solarenergie,"mdi:solar-power","mdi:home-battery-outline") }}
{% elif speicherentladung == 0 and solarenergie > 0 and netzbezug > 0 %}
{{ iif(netzbezug > solarenergie,"mdi:solar-power","mdi:transmission-tower-export") }}
{% elif speicherentladung > 0 and solarenergie == 0 and netzbezug > 0 %}
{{ iif(speicherentladung > netzbezug,"mdi:transmissions-tower-export","mdi:home-battery-outline") }}
{% elif speicherentladung > 0 and solarenergie > 0 and netzbezug > 0 %}
{% if netzbezug > solarenergie and netzbezug > speicherentladung %}
{{ iif(solarenergie > speicherentladung,"mdi:solar-power","mdi:home-battery-outline") }}
{% elif solarenergie > netzbezug and solarenergie > speicherentladung %}
{{ iif(netzbezug > speicherentladung,"mdi:transmission-tower-export","mdi:home-battery-outline") }}
{% elif speicherentladung > netzbezug and speicherentladung > solarenergie %}
{{ iif(netzbezug > solarenergie,"mdi:transmission-tower-export","mdi:solar-power") }}
{% else %}
mdi:home-import-outline
{% endif %}
{% endif %}
badge_color: >-
{% set hausverbrauch = states('sensor.senec_house_power') | int(default=0) %}
{% set netzbezug = states('sensor.senec_grid_house_used_power') |
int(default=0) %}
{% set speicherentladung = states("sensor.senec_battery_house_used_power") |
int(default=0) %}
{% set solarenergie = states("sensor.senec_solar_house_used_power") |
int(default=0) %}
{% if speicherentladung == 0 and solarenergie == 0 and netzbezug > 0 %}
none
{% elif speicherentladung > 0 and solarenergie == 0 and netzbezug == 0 %}
none
{% elif speicherentladung == 0 and solarenergie > 0 and netzbezug == 0 %}
none
{% elif speicherentladung > 0 and solarenergie > 0 and netzbezug == 0 %}
{{ iif(speicherentladung > solarenergie,"orange","green") }}
{% elif speicherentladung == 0 and solarenergie > 0 and netzbezug > 0 %}
{{ iif(netzbezug > solarenergie,"orange","red") }}
{% elif speicherentladung > 0 and solarenergie == 0 and netzbezug > 0 %}
{{ iif(speicherentladung > netzbezug,"red","green") }}
{% elif speicherentladung > 0 and solarenergie > 0 and netzbezug > 0 %}
{% if netzbezug > solarenergie and netzbezug > speicherentladung %}
{{ iif(solarenergie > speicherentladung,"orange","green") }}
{% elif solarenergie > netzbezug and solarenergie > speicherentladung %}
{{ iif(netzbezug > speicherentladung,"red","green") }}
{% elif speicherentladung > netzbezug and speicherentladung > solarenergie %}
{{ iif(netzbezug > solarenergie,"red","orange") }}
{% else %}
mdi:home-import-outline
{% endif %}
{% endif %}
7 Likes
I’m using this and really like the design; thanks for the work. There is one thing that I’d prefer: when a light is off, pressing the slider bar toggles to last brightness. I’d prefer it turn it on to wherever along the bar the press was made. Doable?