i´m also using the “standard theme”. Mmm… does it only look “weird” in the app or also on the browser on a windows pc or mac?
I can conclude it is a Safari thing! The App’s on both iPhone and iPad use the same rendering engine as the Safari browser on the Mac, and on all of them I get the display error. In Chrome on the same Mac it looks perfect.
I don’t know if there is a Cardmod thing that can be added - I am not close to be a Frontend Developer.
me neither. Maybe someone else around here could offer some help with it!?
Thanks for the effort 
I hope someone else knows, or I will start googling
1 Like
Hi, here is my initial version that was posted here working in Auto Entities. Hopefully you can use mine to use their adaption too 
- type: custom:auto-entities
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
card_param: cards
filter:
template: >-
{% for state in states.light
|selectattr('entity_id', 'in',
area_entities('Lounge'))
|rejectattr('attributes.icon', 'eq',
'mdi:lightbulb-group') %}
{%- if state.state == 'on' or state.state == 'off' -%}
{{
{
'type': 'custom:mushroom-light-card',
'entity': state.entity_id,
'use_light_color': true,
'layout': 'horizontal',
'show_color_control': true,
'show_brightness_control': true,
'show_color_temp_control': true,
'collapsible_controls': true,
'name': state.attributes.friendly_name.split('Lounge ')[1],
'card_mod':
{
'style':
{
'mushroom-state-info$':
{
'.container':
".primary {
flex-shrink: 1;
flex-grow: 1;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--primary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--primary-text-color: #1a1a1a;
{% else %}
--primary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.secondary {
flex-shrink: 1;
flex-grow: 0;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--secondary-text-color: #3b3b3b;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--secondary-text-color: #3b3b3b;
{% else %}
--secondary-text-color: #c9c9c9;
{% endif %}
{% endif %}
}",
'.':
".container {
display: flex;
pointer-events: none;
{% if states(config.entity) == 'on' %}
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
{% else %}
{% endif %}
}",
},
'mushroom-button:nth-child(2)$':
":host {
z-index: 1;
{% if state_attr(config.entity, 'rgb_color') == none %}
--bg-color: rgba(var(--rgb-disabled),0.5) !important;
--icon-color: #1a1a1a !important;
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #1a1a1a !important;
{% else %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #dedede !important;
{% endif %}
{% endif %}
}",
'mushroom-button:nth-child(3)$':
":host {
z-index: 1;
{% if state_attr(config.entity, 'rgb_color') == none %}
--bg-color: rgba(var(--rgb-disabled),0.5) !important;
--icon-color: #1a1a1a !important;
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #1a1a1a !important;
{% else %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #dedede !important;
{% endif %}
{% endif %}
}",
'mushroom-light-brightness-control$':
{
'mushroom-slider$':
".container {
position: absolute;
flex-basis: max-content;
width: calc(100% - 80px);
left: 68px;
top: 18.2%
}",
},
'mushroom-light-color-control$':
{
'mushroom-slider$':
".container {
position: absolute;
flex-basis: max-content;
width: calc(100% - 80px);
left: 68px;
top: 18.2%
}",
},
'mushroom-light-color-temp-control$':
{
'mushroom-slider$':
".container {
position: absolute;
flex-basis: max-content;
width: calc(100% - 80px);
left: 68px;
top: 18.2%
}",
},
'.':
".actions {
display: flex;
flex-basis: min-content;
align-items: flex-end !important;
justify-content: flex-end !important;
flex-grow: 0;
flex-shrink: 0;
}
mushroom-state-info {
display: flex;
}
ha-card {
box-shadow: none !important;
border: none !important;
margin-bottom: -10px;
}
ha-state-icon {
{% if 'Lamp' in state_attr(config.entity,'friendly_name') %}
--card-mod-icon: mdi:lamp;
{% elif 'Desk' in state_attr(config.entity,'friendly_name') or 'Shelf' in state_attr(config.entity,'friendly_name') or 'TV' in state_attr(config.entity,'friendly_name') or 'Cabinet' in state_attr(config.entity,'friendly_name') or 'Wardrobe' in state_attr(config.entity,'friendly_name')%}
--card-mod-icon: mdi:led-strip-variant;
{% elif 'Main' in state_attr(config.entity,'friendly_name') %}
--card-mod-icon: mdi:ceiling-light;
{% elif 'Hallway' in state_attr(config.entity,'friendly_name') %}
--card-mod-icon: mdi:lightbulb-spot;
{% elif 'Down' in state_attr(config.entity,'friendly_name') %}
--card-mod-icon: mdi:light-recessed;
{% else %}
--card-mod-icon: mdi:lightbulb;
{% endif %}
}"
}
}
}
}},
{%- endif -%}
{% endfor %}
sort:
method: name
numeric: true
first: 0
count: 100
2 Likes
Great, working perfect and i found my misstakes to adapt mine.
Thank you.
1 Like
I guess it’s a question of personal preference but I do like the non overlapping slider.
however Dimitri updated his code due to some issues with non RGB/CT devices.
See reference here:
https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/8561
Would it be possible to amend your code to reflect the changes?
I am using a workaround by changing width to
width: calc(100% - 185px);
in the original code for all 3 sliders sections but it is not dynamic and requires the creation of 3 different templates/widths.
Kudos to Dimitri for the original code !
Thanks!
Hello,
Any idea what may be causing the value discrepancy between the header and the graph? They point to the same sensors in the code.
type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
entity: climate.my_ecobee
icon: |-
{% if is_state(entity, 'heat') %}
mdi:fire
{% elif is_state(entity, 'heat_cool') %}
mdi:sun-snowflake
{% elif is_state(entity, 'cool') %}
mdi:snowflake
{% elif is_state(entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:radiator-off
{% endif %}
icon_color: |-
{% if is_state_attr(entity,
'hvac_action', 'heating') %}
deep-orange
{% elif is_state_attr(entity,
'hvac_action', 'cooling') %}
var(--blue-color)
{% elif is_state_attr(entity,
'hvac_action', 'fan') %}
turquoise
{% else %}
disabled
{% endif %}
primary: |
{{ states('sensor.my_ecobee_current_temperature') | round(1) }}°F
secondary: |-
{% if is_state(entity, 'heat_cool') %}
Heat/Cool
{% elif is_state_attr(entity,
'hvac_action', 'heating') %}
Heating
{% elif is_state_attr(entity,
'hvac_action', 'cooling') %}
Cooling
{% elif is_state(entity, 'heat') %}
Heat
{% elif is_state(entity, 'cool') %}
Cool
{% elif is_state(entity, 'fan_only') %}
Fan
{% else %}
Off
{% endif %}
- type: custom:mushroom-template-card
entity: sensor.my_ecobee_current_humidity
primary: |
{{ states(entity) | round(1) }}%
secondary: Humidity
icon: mdi:water-percent
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.my_ecobee_current_temperature
name: Temperature
- entity: sensor.my_ecobee_current_humidity
name: Humidity
y_axis: secondary
hours_to_show: 12
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
.line--rect,
.fill--rect,
.line--points {
{% set state = states('climate.my_ecobee') %}
{% set states = {'heat_cool':'green',
'heat':'#FF5722',
'cool':'var(--blue-color)',
'dry':'orange',
'fan_only':'turqoise'} %}
{{states.get(state,'grey')}}
fill: {{COLOR}};
stroke: {{COLOR}};
}
.line--rect:last-of-type,
.fill--rect:nth-of-type(2),
.line--points:last-of-type {
fill: var(--blue-color);
stroke: var(--blue-color);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.my_ecobee
primary_info: none
secondary_info: none
icon_type: none
show_temperature_control: true
- type: custom:mushroom-climate-card
entity: climate.my_ecobee
primary_info: none
secondary_info: none
icon_type: none
hvac_modes:
- heat
- cool
- heat_cool
- fan_only
- 'off'
4 Likes
Mushroom-inspired Solar Energy Card + Home Consumption Card v2
I´ve reworked my cards to better fit my needs. The cards can display power (in W, actucal use) and energy (in kWh, daily use)-entities.
Made with Button-Card and ApexCharts-Card.
The cards shows
Solar Energy Card v2
- the energy produced by your pv in the left area with a pie-chart
- the produced energy that is used in the house
- the produced energy that is fed to grid
- the produced energy that is used to load the battery
Home Consumption Card v2
- the energy used in your house in the left area with a pie-chart
- the house-used power that is coming from the grid
- the house-used power that is coming from your solar panels
- the house-used power that is coming from your battery
The colors will automaticly match your energy-dashboard-colors.
You just to need to fill in your entities in the “variables:”-section.
Some sensors are directly from my integrations, some sensors are template-sensors.
YAML-Code Solar Energy Card v2
type: custom:button-card
variables:
from_solar_entity: sensor.senec_solar_generated_power
from_solar_label: Solar
to_grid_entity: sensor.senec_grid_exported_power
to_grid_label: ins Netz
to_battery_entity: sensor.senec_battery_charge_power
to_battery_label: in Speicher
to_house_entity: sensor.senec_solar_house_used_power
to_house_label: ins Haus
show_name: false
show_state: false
show_icon: false
styles:
card:
- padding: 0px
grid:
- grid-template-areas: '"karte"'
- grid-template-columns: 100%
- grid-template-rows: 100%
custom_fields:
karte:
- filter: opacity(100%)
- overflow: visible
custom_fields:
karte:
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
}
mode: vertical
keep:
background: false
border_radius: true
box_shadow: false
margin: false
outer_padding: false
cards:
- type: grid
columns: 4
square: false
cards:
- type: vertical-stack
cards:
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
background: none;
border: none;
box-shadow: none;
height: 80px;
padding: 0px;
}
stacked: true
chart_type: donut
header:
show: false
floating: true
apex_config:
plotOptions:
pie:
customScale: 1.8
chart:
height: 85px
offsetX: 0
offsetY: 18
animations:
enabled: false
legend:
show: false
series:
- entity: '[[[ return variables.to_house_entity ]]]'
name: Haus
color: grey
show:
datalabels: false
- entity: '[[[ return variables.to_grid_entity ]]]'
name: Netz
color: var(--energy-grid-return-color)
show:
datalabels: false
- entity: '[[[ return variables.to_battery_entity ]]]'
name: Speicher
color: var(--energy-battery-in-color)
show:
datalabels: false
- type: custom:button-card
entity: '[[[ return variables.from_solar_entity ]]]'
layout: vertical
show_name: false
show_state: true
show_icon: true
show_label: true
label: '[[[ return variables.from_solar_label ]]]'
styles:
grid:
- grid-template-areas: '"top" "i" "s" "l" "bottom"'
- grid-template-columns: 100%
- grid-template-rows: 1fr 3fr auto auto 1fr
card:
- height: 80px
- margin-top: '-80px'
- background: none
- border: none
- box-shadow: none
state:
- font-weight: bold
- font-size: 0.7rem
label:
- font-size: 0.7rem
icon:
- height: 1.5rem
- color: var(--energy-solar-color)
- type: custom:button-card
size: 100%
entity: '[[[ return variables.to_house_entity ]]]'
icon: mdi:home-import-outline
show_icon: true
show_name: true
show_state: true
show_label: false
name: >-
[[[ return variables.to_house_label + " (" +
Math.round(states[variables.to_house_entity].state /
states[variables.from_solar_entity].state * 100) + "%)" ]]]
styles:
grid:
- grid-template-areas: '"i" "s" "n"'
- grid-template-rows: 3rem 1fr 1fr
- grid-template-columns: auto
card:
- height: 80px
- box-shadow: none
- border: none
- padding: 0px 0px 0px 0px
icon:
- height: 2.5rem
- color: grey
state:
- font-weight: bold
- font-size: 1rem
- align-self: end
- color: grey
label:
- font-size: 0.7rem
- align-self: center
name:
- font-size: 0.7rem
- align-self: start
- type: custom:button-card
label: '[[[ return variables.to_grid_label ]]]'
size: 100%
entity: '[[[ return variables.to_grid_entity ]]]'
icon: mdi:transmission-tower-import
show_icon: true
show_name: true
show_state: true
show_label: false
name: >-
[[[ return variables.to_grid_label + " (" +
Math.round(states[variables.to_grid_entity].state /
states[variables.from_solar_entity].state * 100) + "%)" ]]]
styles:
grid:
- grid-template-areas: '"i" "s" "n"'
- grid-template-rows: 3rem 1fr 1fr
- grid-template-columns: auto
card:
- height: 80px
- box-shadow: none
- border: none
- padding: 0px 0px 0px 0px
icon:
- height: 2.5rem
- color: var(--energy-grid-return-color)
state:
- font-weight: bold
- font-size: 1rem
- align-self: end
- text-align: center
- color: var(--energy-grid-return-color)
label:
- font-size: 0.7rem
- align-self: center
name:
- font-size: 0.7rem
- align-self: start
- type: custom:button-card
size: 100%
entity: '[[[ return variables.to_battery_entity ]]]'
icon: mdi:home-battery
show_icon: true
show_name: true
show_state: true
show_label: false
name: >-
[[[ return variables.to_battery_label + " (" +
Math.round(states[variables.to_battery_entity].state /
states[variables.from_solar_entity].state * 100) + "%)" ]]]
styles:
grid:
- grid-template-areas: '"i" "s" "n"'
- grid-template-rows: 3rem 1fr 1fr
- grid-template-columns: auto
card:
- height: 80px
- box-shadow: none
- border: none
- padding: 0px 0px 0px 0px
icon:
- height: 2.5rem
- color: var(--energy-battery-in-color)
state:
- font-weight: bold
- font-size: 1rem
- align-self: end
- color: var(--energy-battery-in-color)
label:
- font-size: 0.7rem
- align-self: center
name:
- font-size: 0.7rem
- align-self: start
YAML-Code Home Consumption Card v2
type: custom:button-card
variables:
house_use_entity: sensor.senec_house_power
house_use_label: Haus
from_grid_entity: sensor.senec_grid_house_used_power
from_grid_label: aus Netz
from_solar_entity: sensor.senec_solar_house_used_power
from_solar_label: aus Solar
from_battery_entity: sensor.senec_battery_house_used_power
from_battery_label: aus Speicher
show_name: false
show_state: false
show_icon: false
styles:
card:
- padding: 0px
grid:
- grid-template-areas: '"karte"'
- grid-template-columns: 100%
- grid-template-rows: 100%
custom_fields:
karte:
- filter: opacity(100%)
- overflow: visible
custom_fields:
karte:
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
}
mode: vertical
keep:
background: false
border_radius: true
box_shadow: false
margin: false
outer_padding: false
cards:
- type: grid
columns: 4
square: false
cards:
- type: vertical-stack
cards:
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
background: none;
border: none;
box-shadow: none;
height: 80px;
padding: 0px;
}
stacked: true
chart_type: donut
header:
show: false
floating: true
apex_config:
plotOptions:
pie:
customScale: 1.8
chart:
height: 85px
offsetX: 0
offsetY: 18
animations:
enabled: false
legend:
show: false
series:
- entity: '[[[ return variables.from_solar_entity ]]]'
name: Solar
color: var(--energy-solar-color)
show:
datalabels: false
- entity: '[[[ return variables.from_grid_entity ]]]'
name: Netz
color: var(--energy-grid-consumption-color)
show:
datalabels: false
- entity: '[[[ return variables.from_battery_entity ]]]'
name: Speicher
color: var(--energy-battery-out-color)
show:
datalabels: false
- type: custom:button-card
entity: '[[[ return variables.house_use_entity ]]]'
layout: vertical
show_name: false
show_state: true
show_icon: true
show_label: true
label: '[[[ return variables.house_use_label ]]]'
styles:
grid:
- grid-template-areas: '"top" "i" "s" "l" "bottom"'
- grid-template-columns: 100%
- grid-template-rows: 1fr 3fr auto auto 1fr
card:
- height: 80px
- margin-top: '-80px'
- background: none
- border: none
- box-shadow: none
state:
- font-weight: bold
- font-size: 0.7rem
label:
- font-size: 0.7rem
icon:
- height: 1.5rem
- color: grey
- type: custom:button-card
label: '[[[ return variables.from_grid_label ]]]'
size: 100%
entity: '[[[ return variables.from_grid_entity ]]]'
icon: mdi:transmission-tower-export
show_icon: true
show_name: true
show_state: true
show_label: false
name: >-
[[[ return variables.from_grid_label + " (" +
Math.round(states[variables.from_grid_entity].state /
states[variables.house_use_entity].state * 100) + "%)" ]]]
styles:
grid:
- grid-template-areas: '"i" "s" "n"'
- grid-template-rows: 3rem 1fr 1fr
- grid-template-columns: auto
card:
- height: 80px
- box-shadow: none
- border: none
- padding: 0px 0px 0px 0px
icon:
- height: 2.5rem
- color: var(--energy-grid-consumption-color)
state:
- font-weight: bold
- font-size: 1rem
- align-self: end
- text-align: center
- color: var(--energy-grid-consumption-color)
label:
- font-size: 0.7rem
- align-self: center
name:
- font-size: 0.7rem
- align-self: start
- type: custom:button-card
size: 100%
entity: '[[[ return variables.from_solar_entity ]]]'
icon: mdi:solar-power-variant
show_icon: true
show_name: true
show_state: true
show_label: false
name: >-
[[[ return variables.from_solar_label + " (" +
Math.round(states[variables.from_solar_entity].state /
states[variables.house_use_entity].state * 100) + "%)" ]]]
styles:
grid:
- grid-template-areas: '"i" "s" "n"'
- grid-template-rows: 3rem 1fr 1fr
- grid-template-columns: auto
card:
- height: 80px
- box-shadow: none
- border: none
- padding: 0px 0px 0px 0px
icon:
- height: 2.5rem
- color: var(--energy-solar-color)
state:
- font-weight: bold
- font-size: 1rem
- align-self: end
- color: var(--energy-solar-color)
label:
- font-size: 0.7rem
- align-self: center
name:
- font-size: 0.7rem
- align-self: start
- type: custom:button-card
size: 100%
entity: '[[[ return variables.from_battery_entity ]]]'
icon: mdi:home-battery
show_icon: true
show_name: true
show_state: true
show_label: false
name: >-
[[[ return variables.from_battery_label + " (" +
Math.round(states[variables.from_battery_entity].state /
states[variables.house_use_entity].state * 100) + "%)" ]]]
styles:
grid:
- grid-template-areas: '"i" "s" "n"'
- grid-template-rows: 3rem 1fr 1fr
- grid-template-columns: auto
card:
- height: 80px
- box-shadow: none
- border: none
- padding: 0px 0px 0px 0px
icon:
- height: 2.5rem
- color: var(--energy-battery-out-color)
state:
- font-weight: bold
- font-size: 1rem
- align-self: end
- color: var(--energy-battery-out-color)
label:
- font-size: 0.7rem
- align-self: center
name:
- font-size: 0.7rem
- align-self: start
9 Likes
I’ve tried everything to set slider colors.
So far I can set the slider color:
- type: custom:mushroom-light-card
entity: light.wled_controller
show_brightness_control: true
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--slider-color: red;}
Or the slider background color:
- type: custom:mushroom-light-card
entity: light.wled_controller
show_brightness_control: true
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style:
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider-track-background {
background-color: blue !important;}
Bot not both - how do I combine these:
- type: custom:mushroom-light-card
entity: light.wled_controller
show_brightness_control: true
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--slider-color: red;}
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider-track-background {
background-color: blue !important;}
Thank you!
I believe I posted the updated card_mod section elsewhere, but not as a complete block. Here’s the full YAML, which should adjust based on the capabilities of the light.
type: custom:mushroom-light-card
entity: light.craft_room_wall_sconce
name: Wall Sconce
icon: mdi:wall-sconce
show_brightness_control: true
show_color_control: >-
{{ state_attr(config.entity, 'supported_color_modes')|contains('rgb') or
state_attr(config.entity, 'supported_color_modes')|contains('xy') }}
show_color_temp_control: >-
{{ state_attr(config.entity, 'supported_color_modes')|contains('color_temp')
}}
use_light_color: true
collapsible_controls: true
fill_container: true
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
layout: horizontal
card_mod:
style:
mushroom-state-info$:
.container: |
.primary {
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
flex-shrink: 0;
flex-grow: 0;
{% else %}
flex-shrink: 1;
flex-grow: 1;
{% endif %}
padding-left: 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
text-shadow: 0px 0px 7px orange;
--primary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--primary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
--primary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.secondary {
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
{% if states(config.entity) == 'on' %}
position: absolute;
right: 15px;
top: 23px;
{% else %}
{% endif %}
{% else %}
flex-shrink: 1;
{% endif %}
flex-grow: 0;
margin-right: 10px;
padding: 0 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
text-shadow: 0px 0px 7px orange;
--secondary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--secondary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
--secondary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.: |
.container {
display: flex;
{% if states(config.entity) == 'on' %}
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
{% else %}
{% endif %}
}
mushroom-light-brightness-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% set rgb = (state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy')) and config.show_color_control != false %}
{% set color_temp = state_attr(config.entity, 'supported_color_modes')|contains('color_temp') and config.show_color_temp_control != false %}
{% if (rgb == true and color_temp == true) %}
width: calc(100% - 190px);
{% elif (rgb == false and color_temp == true) %}
width: calc(100% - 136px);
{% elif (rgb == true and color_temp == false) %}
width: calc(100% - 136px);
{% else %}
width: calc(100% - 80px);
{% endif %}
left: 68px;
top: 18.2%;
}
.slider-track-background {
background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
}
mushroom-light-color-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if (state_attr(config.entity, 'supported_color_modes')|contains('color_temp') == true and config.show_color_temp_control != false) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
mushroom-light-color-temp-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if ((state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy') == true) and config.show_color_control != false) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
.: |
.actions {
display: flex;
flex-basis: min-content;
align-items: flex-end !important;
justify-content: flex-end !important;
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
flex-grow: 9;
flex-shrink: 1;
{% else %}
flex-grow: 0;
flex-shrink: 0;
{% endif %}
}
mushroom-state-info {
display: flex;
}
Or as a decluttering card:
light:
default:
- icon: lightbulb
- color_control: >-
{{ state_attr(config.entity, 'supported_color_modes')|contains('rgb')
or state_attr(config.entity, 'supported_color_modes')|contains('xy')
}}
- color_temp_control: >-
{{ state_attr(config.entity,
'supported_color_modes')|contains('color_temp') }}
card:
type: custom:mushroom-light-card
entity: light.[[entity]]
name: '[[name]]'
icon: mdi:[[icon]]
show_brightness_control: true
show_color_control: '[[color_control]]'
show_color_temp_control: '[[color_temp_control]]'
use_light_color: true
collapsible_controls: true
fill_container: true
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
layout: horizontal
card_mod:
style:
mushroom-state-info$:
.container: |
.primary {
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
flex-shrink: 0;
flex-grow: 0;
{% else %}
flex-shrink: 1;
flex-grow: 1;
{% endif %}
padding-left: 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
text-shadow: 0px 0px 7px orange;
--primary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--primary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
--primary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.secondary {
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
{% if states(config.entity) == 'on' %}
position: absolute;
right: 15px;
top: 23px;
{% else %}
{% endif %}
{% else %}
flex-shrink: 1;
{% endif %}
flex-grow: 0;
margin-right: 10px;
padding: 0 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
text-shadow: 0px 0px 7px orange;
--secondary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--secondary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
--secondary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.: |
.container {
display: flex;
{% if states(config.entity) == 'on' %}
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
{% else %}
{% endif %}
}
mushroom-light-brightness-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% set rgb = (state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy')) and config.show_color_control != false %}
{% set color_temp = state_attr(config.entity, 'supported_color_modes')|contains('color_temp') and config.show_color_temp_control != false %}
{% if (rgb == true and color_temp == true) %}
width: calc(100% - 190px);
{% elif (rgb == false and color_temp == true) %}
width: calc(100% - 136px);
{% elif (rgb == true and color_temp == false) %}
width: calc(100% - 136px);
{% else %}
width: calc(100% - 80px);
{% endif %}
left: 68px;
top: 18.2%;
}
.slider-track-background {
background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
}
mushroom-light-color-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if (state_attr(config.entity, 'supported_color_modes')|contains('color_temp') == true and config.show_color_temp_control != false) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
mushroom-light-color-temp-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if ((state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy') == true) and config.show_color_control != false) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
.: |
.actions {
display: flex;
flex-basis: min-content;
align-items: flex-end !important;
justify-content: flex-end !important;
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
flex-grow: 9;
flex-shrink: 1;
{% else %}
flex-grow: 0;
flex-shrink: 0;
{% endif %}
}
mushroom-state-info {
display: flex;
}
1 Like
Thank you!
however my RGBW lights have a different “color_modes” set so I would probably have to add a bunch of “or” in the code to cover “hs” but don’t want to mess with your code. If you have a chance to update it, great, otherwise I’ll give it a try later. Thank you!
min_color_temp_kelvin: 2000
max_color_temp_kelvin: 6535
min_mireds: 153
max_mireds: 500
effect_list:
- Solid
- Wake up
- Cycle up
- Cycle down
- Random
supported_color_modes:
- color_temp
- hs
color_mode: hs
brightness: 158
hs_color:
- 256
- 100
rgb_color:
- 67
- 0
- 255
xy_color:
- 0.16
- 0.051
effect: Solid
friendly_name: BULBRGBWW2
supported_features: 36
1 Like
Try this:
type: custom:mushroom-light-card
entity: light.bulbrgbww2
show_brightness_control: true
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style:
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider-track-background {
background-color: blue !important;}
.: |
mushroom-slider {
--slider-color: red;}
Also possible to just do:
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--slider-bg-color: red !important;
--slider-color: blue !important;
}
or even this:
card_mod:
style:
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider-track-background {
background-color: blue !important;
}
.slider-track-active {
background-color: red !important;
}
@zgadson but FYI. not the right place to ask questions or give answers. its specifically in the first post of the topic. if you want to ask questions regarding the mushroom cards go to the main mushroom thread or feel free to ask them in my guide where i can try and help you out
2 Likes
Hello,
I thought I’d share the 
Solar information in case anyone else needs it.
- Mushroom card 
- Apexcharts card 
- Card mod 
- Layout card
- Custom brand icons 
- More Inverter active power (W) - active and inactive status (pulses blue if active, gray if inverter does not detect sun and is not charging)
- PW Power summary for several inverters (W) – active and inactive status (orange if active, gray if not charging)
- Inverters with Daily yield display (kWh)
- Accumulator charge level
- Apexcharts - Return to Grid - Grid Consumption - Total Yield 24h. In the middle, current power is indicated with flow direction (the icon and text are green if there is an export and the icon and text are red if there is an import.
- Daily Grid Consumption (kWh)
- Return to grid (kWh)
- Daily Yield (kWh)
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr 1fr 1fr
cards:
- type: custom:mushroom-template-card
entity: sensor.sun2000_10ktl_active_power
primary: 10KTL Inverter
secondary: '{{(states(''sensor.sun2000_10ktl_active_power''))}} W'
layout: vertical
fill_container: false
icon: |
{% set state=states('sensor.sun2000_10ktl_device_status') %}
{% if state=='On-grid' %}
phu:huawei-solar-inverter
{% elif state!='Standby:no irradiation' %}
phu:huawei-solar-inverter
{% endif %}
icon_color: |
{% set state=states('sensor.sun2000_10ktl_device_status') %}
{% if state=='On-grid' %}
#41bdf5
{% elif state!='Standby:no irradiation' %}
disabled
{% endif %}
secondary_info: state
multiline_secondary: false
badge_icon: ''
badge_color: ''
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
{% if is_state('sensor.sun2000_10ktl_device_status', 'On-grid') %}
--shape-animation: blink 5s linear infinite;
{% endif %}
}
@keyframes blink {
30% {opacity: 0;}
}
.: |
ha-card {
margin-top: 10px;
--icon-size: 50px;
--icon-symbol-size: 30px;
--card-secondary-font-size: 10px;
--card-primary-font-size: 12px;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
- type: custom:mushroom-template-card
entity: sensor.sun2000_6ktl_active_power
primary: 6KTL Inverter
secondary: '{{(states(''sensor.sun2000_6ktl_active_power''))}} W'
layout: vertical
fill_container: false
icon: |
{% set state=states('sensor.sun2000_6ktl_device_status') %}
{% if state=='On-grid' %}
phu:huawei-solar-inverter
{% elif state!='Standby:no irradiation' %}
phu:huawei-solar-inverter
{% endif %}
icon_color: |
{% set state=states('sensor.sun2000_6ktl_device_status') %}
{% if state=='On-grid' %}
#41bdf5
{% elif state!='Standby:no irradiation' %}
disabled
{% endif %}
secondary_info: state
multiline_secondary: false
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
{% if is_state('sensor.sun2000_6ktl_device_status', 'On-grid') %}
--shape-animation: blink 5s linear infinite;
{% endif %}
}
@keyframes blink {
30% {opacity: 0;}
}
.: |
ha-card {
margin-top: 10px;
--icon-size: 50px;
--icon-symbol-size: 30px;
--card-secondary-font-size: 10px;
--card-primary-font-size: 12px;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
- type: custom:mushroom-template-card
entity: sensor.solar_inverter_daily_power
primary: PV Power
secondary: |-
{% set state=states('sensor.solar_inverter_daily_power') %}
{% if state | is_number and state | float > 0 %}
{{(states('sensor.solar_inverter_daily_power'))}} W
{% elif state | is_number and state | float < 0 %}
{{(states('sensor.solar_inverter_daily_power'))}} W
{% else %}
{{(states('sensor.solar_inverter_daily_power'))}} W
{% endif %}
layout: vertical
fill_container: false
icon: |-
{% set state=states('sensor.solar_inverter_daily_power') %}
{% if state | is_number and state | float > 5 %}
mdi:solar-panel-large
{% elif state | is_number and state | float < 0 %}
mdi:solar-panel-large
{% else %}
mdi:grid-off
{% endif %}
icon_color: |-
{% set state=states('sensor.solar_inverter_daily_power') %}
{% if state | is_number and state | float > 0 %}
#FFA500
{% elif state | is_number and state | float < 0 %}
#9ACD32
{% else %}
disabled
{% endif %}
secondary_info: state
multiline_secondary: true
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
.: |
ha-card {
margin-top: 10px;
--icon-size: 50px;
--icon-symbol-size: 30px;
--card-secondary-font-size: 10px;
--card-primary-font-size: 12px;
padding-top: 5px !important;
padding-bottom: 5px !important;
--secondary-text-color: {% set state=states('sensor.solar_inverter_daily_power') %} {% if state | is_number
and state | float > 100 %}
#9ACD32
{% elif state | is_number and state | float < 0 %}
#f77c7c
{% else %}
#A9A9A9
{% endif %};
}
}
card_mod:
style: |
ha-card {
height: 150px;
}
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr 2fr
grid-template-rows: auto
margin: 0px
padding: 0px
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.sun2000_10ktl_daily_yield
icon: mdi:solar-power-variant
icon_color: '#FFA500'
hold_action:
action: none
primary_info: name
secondary_info: state
name: 10KTL
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
ha-card {
margin-top: -10px;
margin-right: -8px;
}
- type: custom:mushroom-entity-card
entity: sensor.sun2000_6ktl_daily_yield
icon_color: '#FFA500'
icon: mdi:solar-power-variant
hold_action:
action: none
primary_info: name
secondary_info: state
name: 6KTL
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
ha-card {
margin-top: -10px;
margin-right: -8px;
}
- type: custom:mushroom-entity-card
entity: sensor.luna2000_battery_state_of_capacity
icon_color: '#9ACD32'
hold_action:
action: none
primary_info: name
secondary_info: state
name: Battery
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
ha-card {
margin-top: -10px;
margin-right: -8px;
}
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
experimental:
color_threshold: true
chart_type: radialBar
graph_span: 5day1s
span:
end: day
show:
loading: false
cache: true
update_interval: 10min
apex_config:
chart:
height: 250px
plotOptions:
radialBar:
offsetY: -20
startAngle: -135
endAngle: 135
hollow:
size: 45%
dataLabels:
name:
show: false
value:
show: false
legend:
show: false
stroke:
dashArray: 0
lineCap: flat
series:
- entity: sensor.p1_teljes_energia_visszataplalas
type: area
name: CPU
color_threshold:
- value: 0
color: rgb(183, 201, 145)
- value: 10
color: rgb(173, 199, 117)
- value: 30
color: rgb(154, 205, 50)
group_by:
func: diff
duration: 1d
- entity: sensor.p1_teljes_energia_vetelezes
type: area
name: RAM
color_threshold:
- value: 0
color: rgb(245, 201, 201)
- value: 25
color: rgb(245, 154, 154)
- value: 35
color: rgb(247, 124, 124)
group_by:
func: diff
duration: 1d
- entity: sensor.solar_panel_total_yield
type: area
name: SSD
color_threshold:
- value: 0
color: rgb(247, 210, 141)
- value: 15
color: rgb(247, 197, 104)
- value: 30
color: rgb(255, 165, 0)
group_by:
func: diff
duration: 1d
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: sensor.p1_aktiv_teljesitmeny
tap_action:
action: more-info
primary: |-
{% set state=states('sensor.p1_aktiv_teljesitmeny') %}
{% if state | is_number and state | float > 0 %}
- {{(states('sensor.p1_aktiv_teljesitmeny'))}} kWh
{% elif state | is_number and state | float < 0 %}
{{(states('sensor.p1_aktiv_teljesitmeny'))}} kWh
{% else %}
No data
{% endif %}
icon_color: |-
{% set state=states('sensor.p1_aktiv_teljesitmeny') %}
{% if state | is_number and state | float > 0 %}
#f77c7c
{% elif state | is_number and state | float < 0 %}
#9ACD32
{% else %}
disabled
{% endif %}
icon: |-
{% set state=states('sensor.p1_aktiv_teljesitmeny') %}
{% if state | is_number and state | float > 0 %}
mdi:transmission-tower-export
{% elif state | is_number and state | float < 0 %}
mdi:transmission-tower-import
{% else %}
mdi:transmission-tower-off
{% endif %}
layout: vertical
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-icon-border-radius: 50%;
--mush-icon-size: 72px;
--primary-text-color: {% set state=states('sensor.p1_aktiv_teljesitmeny') %} {% if state | is_number
and state | float > 0 %}
#f77c7c
{% elif state | is_number and state | float < 0 %}
#32CD32
{% else %}
black
{% endif %};
}
ha-card {
background: transparent;
margin-top: -112px;
width: 120px;
margin-left: auto;
margin-right: auto;
}
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: auto
margin: 0px
padding: 0px
cards:
- type: custom:mushroom-template-card
icon: mdi:transmission-tower-export
layout: vertical
primary: Grid Consumption
icon_color: '#f77c7c'
secondary: '{{(states(''sensor.energia_vetelezes_napi''))}} kWh'
entity: sensor.energia_vetelezes_napi
tap_action:
action: more-info
card_mod:
style: |
:host {
margin-top: -10px;
--mush-icon-size: 60px;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
badge_icon: ''
badge_color: ''
- type: custom:mushroom-template-card
icon: mdi:transmission-tower-import
layout: vertical
primary: Return to grid
icon_color: '#9ACD32'
tap_action:
action: more-info
secondary: '{{(states(''sensor.energia_visszataplalas_napi''))}} kWh'
entity: sensor.energia_visszataplalas_napi
card_mod:
style: |
:host {
margin-top: -10px;
--mush-icon-size: 60px;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
- type: custom:mushroom-template-card
icon: mdi:sun-wireless
layout: vertical
primary: Daily Yield
icon_color: '#FFA500'
tap_action:
action: more-info
secondary: '{{(states(''sensor.solar_panel_daily_yield''))}} kWh'
entity: sensor.solar_panel_daily_yield
card_mod:
style: |
:host {
margin-top: -10px;
--mush-icon-size: 60px;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
25 Likes
Mushroom-inspired Room Light Card
Made with Button-Card, Mushroom-Cards, Auto-Entities-Card and Timer Bar Card.
This is a light-card for a “Room” (which really is just a group of lights).
- Image You need to give it an path or url to an image to display. The image will be greyscale if all lights in the group are off an normal if one or more lights of the group are on
- Timer If you have set up an timer for an automation you can define your timer-entity in variables. If you do so, there will be a timer-icon. If you click on the Icon, the more-info-dialog of the timer-entity will be shown
- Automation If you have set up an automation to control your lights in this group (e.g. based on motion) you can define an automation-entity in the variables. The card will then show an automation on/off icon. If you click the icon, the automation will toggle between on and off
- Room Toggle The toggle on the upper right side toggle all the lights in the group (on / off).
- Light-Chips for each light-entity in the light-group there will be a chip-card with icon and name. Click on the chip to toggle the light-state. Long tap will leed to the more-info-dialog.
- Timer-Bar If you defined a timer-entity and the timer is running, it will display a small bar shrinking as the times goes down.
What you need to to:
- Copy the YAML-Code below
- Change the following things:
type: custom:button-card
entity: light.waschekeller_alle
variables:
automation_entity: none
timer_entity: none
picture: /local/img/wäschekeller.jpg
show_name: false
show_state: false
show_icon: false
styles:
card:
- padding: 0px
- background: |
[[[
if (entity.state === "on")
return "rgba(255,255,0,0.05)";
]]]
grid:
- grid-template-areas: '"karte"'
- grid-template-columns: 100%
- grid-template-rows: 100%
custom_fields:
mush:
- filter: opacity(100%)
- overflow: visible
custom_fields:
karte:
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: none;
}
mode: horizontal
keep:
background: true
border_radius: true
box_shadow: true
margin: true
outer_padding: false
cards:
- type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
show_name: false
styles:
card:
- width: 5rem
- padding: 0px
- border: none
- border-radius: 0px
- height: 10rem
entity_picture:
- width: 5rem
- height: 10rem
- object-fit: cover
- filter: |
[[[
if (entity.state === "off")
return "grayscale(100%)";
else
return "none";
]]]
entity_picture: '[[[ return variables.picture ]]]'
show_entity_picture: true
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
alignment: start
chips:
- type: template
entity: '[[[ return entity.entity_id ]]]'
tap_action:
action: none
hold_action:
action: more-info
double_tap_action:
action: none
icon: '{{ state_attr(entity,"icon") }}'
content: '{{ state_attr(entity,"friendly_name") }}'
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
background: none !important;
font-size: 3rem !important;
}
- type: custom:mushroom-chips-card
card_mod:
style: |
.chip-container {
--chip-spacing: -10px !important;
}
alignment: end
chips:
- type: conditional
conditions:
- condition: state
entity: '[[[ return variables.timer_entity ]]]'
state_not: unknown
chip:
type: template
entity: '[[[ return variables.timer_entity ]]]'
icon: '{{ state_attr(entity,"icon") }}'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
background: none !important;
font-size: 3rem !important;
}
.content {
padding: 0px !important;
}
- type: conditional
conditions:
- condition: state
entity: '[[[ return variables.automation_entity ]]]'
state_not: unknown
chip:
type: template
entity: '[[[ return variables.automation_entity ]]]'
icon: |-
{% if states(entity) == "on" %}
mdi:motion-sensor
{% elif states(entity) == "off" %}
mdi:motion-sensor-off
{% endif %}
icon_color: |-
{% if states(entity) == "on" %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
background: none !important;
font-size: 3rem !important;
}
- type: template
entity: '[[[ return entity.entity_id ]]]'
tap_action:
action: toggle
hold_action:
action: more-info
icon: |-
{% if states(entity) == "on" %}
mdi:toggle-switch
{% else %}
mdi:toggle-switch-off
{% endif %}
icon_color: |-
{% if states(entity) == "on" %}
orange
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
background: none !important;
font-size: 4rem !important;
}
- type: custom:button-card
show_name: false
show_state: false
show_icon: false
show_label: false
styles:
card:
- height: 5px
- box-shadow: none
- border-bottom: 1px solid rgb(50,50,50,0.2)
- border-radius: 0px
- padding: 0px
- margin-top: '-0.5rem'
- background: none
- type: custom:auto-entities
show_empty: true
sort:
method: name
card:
type: custom:mushroom-chips-card
alignment: center
card_param: chips
filter:
include:
- group: '[[[ return entity.entity_id ]]]'
options:
type: template
content: '{{ state_attr(entity,"friendly_name") }}'
icon: '{{ state_attr(entity,"icon") }}'
icon_color: |-
{% if states(entity) == "on" %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
background: var(--secondary-background-color) !important;
}
- type: conditional
conditions:
- condition: state
entity: '[[[ return variables.timer_entity ]]]'
state: active
card:
type: custom:timer-bar-card
entity: '[[[ return variables.timer_entity ]]]'
invert: true
bar_direction: ltr
name: aus in
bar_foreground: darkorange
bar_background: none
bar_height: 0.1rem
layout: full_row
text_width: 0px
10 Likes
Any idea what may be causing the value discrepancy between the header and the graph? They point to the same sensors in the code.
The top temperature is pulled from sensor.my_ecobee_current_temperature and rounded to 1 digit. What you’re seeing on the bottom are the controls for climate.my_ecobee. It looks like you have it in auto mode, and while I’m not familiar with the ecobee I’m assuming when you have it in auto mode there are separate targets for heating and cooling and what you are seeing there are those target temps.
Thank you for the response. I knew what the footer area values were, my question was the descrepency between the graph values and the header values for temp and humidity when they are supposed to represent the same sensors. I now see that it is just a rounding difference. Also, why do both graph lines show the temp value on the left and humidity on the right? I would think the left end of the orange line would show starting temp value for the timeframe and the right end of the orange line would show current temp value. Same for the blue line but for humidity. My graph seems to switch values from left to right.
3 Likes
