Super dumm question!
How can I change the state when I have numbers for states.
The entity:
select.heater_jose_temperature_level
can have states 1 or 2.
I need to make a simple card like so:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: select.heater_jose_temperature_level
content_info: state
tap_action:
action: toggle
The state attributes are:
options:
- '1'
- '2'
icon: mdi:thermometer-lines
friendly_name: Heater Jose Temperature Level
Thanks!!!
Thanks for this. I finally got it working after several weeks. Also learnt a lot more on how to navigate the DOM. There is one final thing though - I’d also like to define a few style variable in the same block of code, but it doesn’t like it:
card_mod:
style:
div:
mushroom-conditional-chip:nth-child(7):
mushroom-entity-chip:
$:
mushroom-chip: |
ha-icon {
animation: rotation 3s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
Configuration errors detected:
128 | }
If I remove the ha-card { … } block it works fine. I think I’m missing the syntax to properly define the ha-card block separately from the main ‘div’ block. Thanks in advance.
Have you gone to Developer Tools → States to look for your climate entity and see what the main state is, and what attributes are available? One of those should give you the ‘status’ you’re looking for.
Posreg
June 13, 2022, 9:55pm
1339
your fan card look awesome!
mhoogenbosch
June 13, 2022, 9:57pm
1340
Yes I have seen those but that isn’t there.
hvac_modes:
- heat_cool
- heat
- dry
- fan_only
- cool
- 'off'
min_temp: 18
max_temp: 30
target_temp_step: 1
fan_modes:
- quiet
- low
- medium
- high
swing_modes:
- 'off'
- vertical
current_temperature: 24
temperature: null
fan_mode: quiet
swing _mode: vertical
outdoor_temp: 14
icon: mdi:air-conditioner
friendly_name: Kantoor - Airco
supported_features: 41
rhysb
June 13, 2022, 10:03pm
1341
Like this
card_mod:
style:
mushroom-template-chip:nth-child(7)$: |
ha-icon {
animation: rotation 3s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
3 Likes
rhysb
June 13, 2022, 10:41pm
1343
Have a look at this example here
Is there a css file for Mushroom cards? I’d like to peek at it
rhysb
June 13, 2022, 10:46pm
1345
I’m not sure I understand what you mean?
You can view all of piitaya’s source code on his GitHub https://github.com/piitaya/lovelace-mushroom
Somewhere someone posted all the css tags and I can’t find it…ugh… I wanted to see it again
I have tried various ways I have seen posted here to remove the shadow behind the pinwheel and I have had no success.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: Daniels
secondary: |
Currently: {{ state_attr('climate.daniel_s', 'hvac_action') }}
icon: |-
{% set mode = states('climate.daniel_s') %}
{% if mode == 'off' %}
mdi:fan-off
{% elif mode == 'cool' %}
mdi:pinwheel
{% elif mode == 'heat' %}
mdi:fire
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set status = state_attr('climate.daniel_s','hvac_action') %}
{% if status == 'idle' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon
{
{%- set status = state_attr('climate.daniel_s','hvac_action') %}
{%- if status == 'cooling' or status == 'heating' %}
--icon-animation: rotation 1s linear infinite;
{%- endif %}
--shape-color: none !important;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
padding-bottom: 14px !important;
}
entity: climate.daniel_s
tap_action:
action: more-info
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
entity: climate.daniel_s
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, ''current_temperature'')}} °F'
entity: climate.daniel_s
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
style: |
ha-card {
margin-left: 6px;
}
- type: template
entity: climate.daniel_s
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: green
tap_action: none
- type: template
tap_action:
action: more-info
content: >
{{ states('input_boolean.daniels_humidifier_status') |
replace('off','Off') | replace('on','On') }}
entity: input_boolean.daniels_humidifier_status
icon: mdi:air-humidifier
icon_color: blue
hold_action:
action: none
- type: template
double_tap_action:
action: none
content: '{{ states(entity) | round(0) }}% Humidity'
entity: sensor.daniels_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
--ha-card-background: transparent
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: Daniels
secondary: |
Currently: {{ state_attr('climate.daniel_s', 'hvac_action') }}
icon: |-
{% set mode = states('climate.daniel_s') %}
{% if mode == 'off' %}
mdi:fan-off
{% elif mode == 'cool' %}
mdi:pinwheel
{% elif mode == 'heat' %}
mdi:fire
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set status = state_attr('climate.daniel_s','hvac_action') %}
{% if status == 'idle' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon
{
{%- set status = state_attr('climate.daniel_s','hvac_action') %}
{%- if status == 'cooling' or status == 'heating' %}
--icon-animation: rotation 1s linear infinite;
{%- endif %}
--shape-color: none !important;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
padding-bottom: 14px !important;
}
entity: climate.daniel_s
tap_action:
action: more-info
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
entity: climate.daniel_s
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, ''current_temperature'')}} °F'
entity: climate.daniel_s
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
style: |
ha-card {
margin-left: 6px;
}
- type: template
entity: climate.daniel_s
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: green
tap_action: none
- type: template
tap_action:
action: more-info
content: >
{{ states('input_boolean.daniels_humidifier_status') |
replace('off','Off') | replace('on','On') }}
entity: input_boolean.daniels_humidifier_status
icon: mdi:air-humidifier
icon_color: blue
hold_action:
action: none
- type: template
double_tap_action:
action: none
content: '{{ states(entity) | round(0) }}% Humidity'
entity: sensor.daniels_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
--ha-card-background: transparent
4 Likes
mhoogenbosch
June 14, 2022, 6:42am
1350
Sure:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 1px !important;
}
primary: Airco Kantoor
secondary: |
Currently: {{ states('climate.kantoor') }}
icon: |-
{% set mode = states('climate.kantoor') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% elif mode == 'heat_cool' %}
mdi:autorenew
{% elif mode == 'fan_only' %}
mdi:fan
{% elif mode == 'dry' %}
mdi:water-percent
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set mode = states('climate.kantoor') %}
{% if mode == 'off' %}
grey
{% elif mode == 'cool' %}
blue
{% elif mode == 'heat' %}
red
{% elif mode == 'heat_cool' %}
orange
{% else %}
grey
{% endif %}
tap_action: none
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 12px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #9e9e9e;
}
entity: climate.kantoor
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
dry: false
fan_only: false
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
alignment: justify
chips:
- type: template
entity: climate.kantoor
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: green
tap_action: none
- type: template
content: '{{state_attr(entity, ''current_temperature'')}} °C'
entity: climate.kantoor
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% elif state=='heat_cool' %}
orange
{% else %}
grey
{% endif %}
- type: weather
entity: weather.asterstraat
show_conditions: true
show_temperature: true
- type: template
double_tap_action:
action: none
content: '{{ states(entity) }}% Humidity'
entity: sensor.kantoor_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: #262626;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active.heat_cool {
background: #493516;
color: #ff9800;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.kantoor
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
cool:
name: Cool
heat_cool:
name: Auto
dry:
name: Dry
fan_only:
name: Fan only
- type: grid
square: false
columns: 2
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.3px;
--st-mode-background: #262626;
margin-right: 5px;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 5px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.kantoor
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
dry: false
fan_only: false
fan:
quiet:
name: Quiet
icon: mdi:fan
low:
name: Low
icon: mdi:fan-speed-1
medium:
name: Medium
icon: mdi:fan-speed-2
high:
name: High
icon: mdi:fan-speed-3
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.3px;
--st-mode-background: #262626;
margin-right: 12px;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.kantoor
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
swing:
vertical:
name: Quiet
icon: mdi:swap-vertical-variant
- type: custom:mushroom-entity-card
entity: sensor.gemiddeldetempkantoor
primary_info: state
secondary_info: name
name: Inside
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.presence_vr
primary_info: state
secondary_info: name
name: Outside
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.gemiddeldetempkantoor
name: Inside Temperature
color: '#4caf50'
- entity: sensor.presence_vr
name: Outside Temperature
color: '#2196f3'
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
Credits aren’t for me, I just altered some attributes. I still have to fiddle a bit around with the aligning of the boxes.
Hi, in the card light I would like to show only the temperature control slider. Also, even when the light is off, I would like the slider to color instead of gray. Is it possible to do such a thing?
demolud2
June 14, 2022, 7:23am
1352
Hi, #metoo trying to spin icon. Went through above examples, seems not to be smart enough to make it work.
Here’s my code:
type: custom:mushroom-template-card
primary: '{{ states(''sensor.bathroom_mid_temp_humidity'') }} %'
secondary: ''
icon: |-
{% if is_state('switch.bathroom_mid_fan','on') %}
mdi:fan
{% else %}
mdi:fan-off
{% endif %}
layout: vertical
fill_container: true
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
entity: switch.bathroom_mid_fan
icon_color: |-
{% if is_state('switch.bathroom_mid_fan','on') %}
yellow
{% else %}
white
{% endif %}
card_mod:
style: |
mushroom-shape-icon:
$: |
.shape ha-icon {
{% set state = states('switch.bathroom_mid_fan') %}
{% if state == 'on' %}
--icon-animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--icon-size: 64px;
}
Any idea what is wrong?
Regards,
Maciek
seanmccabe
June 14, 2022, 8:03am
1353
I made a thing.
The two kids bedrooms are completed, with the main banner images changing colour based on the lights in the room which is my most favourite thing of the whole thing.
14 Likes
Love the work, images for the rooms are fun. Would you be happy to share the image sources and the code of one of the completed kids bedrooms. Thanks.
I tried this with no luck.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: Daniels
secondary: >
Currently: {{ state_attr('climate.daniel_s', 'hvac_action') | replace
('cooling','Cooling') | replace ('heating','Heating') }}
icon: |-
{% set mode = states('climate.daniel_s') %}
{% if mode == 'off' %}
mdi:fan-off
{% elif mode == 'cool' %}
mdi:pinwheel
{% elif mode == 'heat' %}
mdi:fire
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set status = state_attr('climate.daniel_s','hvac_action') %}
{% if status == 'idle' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon
{
{%- set status = state_attr('climate.daniel_s','hvac_action') %}
{%- if status == 'cooling' or status == 'heating' %}
--icon-animation: rotation 1s linear infinite;
{%- endif %}
--shape-color: none !important;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
padding-bottom: 14px !important;
}
entity: climate.daniel_s
tap_action:
action: more-info
3 Likes
Looks great!
Have you just dimmed the picture like did above? Or did you alter the pictures itselves to have only the lights and screens shine?
That be my next step, similar as the floor plan cards but for every room.
1 Like
