Hi there,
is there a easy way for custom:mushroom-chips-cardt o change the color of an icon depending on the temperature range?
e.g.
< 2°C , dark blue;
2°C to 10°C, light blue
10°C to 25°C orange;
>25°C red
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: entity
entity: sensor.1w_ds2438t
icon_color: orange
- type: entity
entity: sensor.1w_ds2438h
icon_color: indigo
.......
Hi there,
I’ve seen a similar example to the YAML below, but mine does not appear to be working. Anyone have any idea? I have a Blink camera system and trying to use the Mushroom alarm card to arm/disarm based on current state.
Nothing happens when I tap.
- type: horizontal-stack
cards:
- type: custom:mushroom-alarm-control-panel-card
name: Blink
entity: alarm_control_panel.blink_home
tap_action:
action: call-serivce
service: >
[[[
if (alarm_control_panel.blink_home == 'disarmed')
return 'alarm_control_panel.alarm_arm_away';
else
return 'alarm_control_palnel.alarm_disarm';
]]]
service_data:
entity_id: alarm_control_panel.blink_home
you would need to use a template chip
Something like this might provide you enough info to go in the right direction. Notice it’s a template card:
- type: custom:mushroom-chips-card
chips:
- type: template
content: >-
{{ states(entity) | float }} {{ state_attr(entity,
"unit_of_measurement") }}
entity: sensor.house_main_temperature
icon: mdi:thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity)|float(0) %}
{% if state >= 75 %}
red
{% elif state >= 69 %}
orange
{% elif state < 69 %}
blue
{% else %}
grey
{% endif %}Can this be done with the slider being just to the right instead of below?
e.g. how the light card layout can be set in horizontal?
Yes, like this:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: input_number.rhys_pc_volume
icon: |
{% set vol_level = states(entity) | float %}
{% if vol_level == 0 %}
mdi:volume-mute
{% elif vol_level > 0.66 %}
mdi:volume-high
{% elif vol_level < 0.33 %}
mdi:volume-low
{% else %}
mdi:volume-medium
{% endif %}
icon_color: indigo
primary: Volume
secondary: |
{{ ( states(entity) | float * 100 ) | round | int }}%
- type: custom:my-slider
entity: input_number.rhys_pc_volume
radius: 12px
height: 42px
mainSliderColor: rgb(var(--mush-rgb-indigo))
secondarySliderColor: rgba(var(--mush-rgb-indigo), 0.2)
mainSliderColorOff: rgb(var(--mush-rgb-disabled))
secondarySliderColorOff: rgba(var(--mush-rgb-disabled), 0.2)
thumbHorizontalPadding: 0px
thumbVerticalPadding: 0px
thumbWidth: 0px
card_mod:
style: |
ha-card {
padding: 12px 12px 12px 6px;
#--mush-rgb-disabled: 189,189,189;
#--mush-rgb-indigo: 63, 81, 181;
}
Looks like the mushroom-alarm-control-panel-card does not support the templating. Just wrote a script instead.
lias: Arm or Disarm Blink
sequence:
- condition: state
entity_id: alarm_control_panel.blink_home
state: disarmed
- service: alarm_control_panel.alarm_arm_away
data: {}
target:
entity_id: alarm_control_panel.blink_home
mode: single
icon: mdi:camera
any chance of the code?
Yer check the replies I’ve posted it in there.
can you share your code
Hi all,
thanks for the very good exampe, that helps me!
Hi,
does anyone has an idea, how to setup an input card for times? I need it to change start- and endtime for the automatic illumination. Is there anywhere an example?
Hello,
I would like to color an icon by state.
In three different states
but somehow nothing happens here. Maybe someone has a hint for me.
type: custom:mushroom-entity-card
entity: sensor.pollen_graeser_81
name: grasses
icon_color: |-
{% set state = states('sensor.pollen_graeser_81')%}
{% if state >= 3 %}
red
{% elif state >= 1.5 %}
orange
{% else %}
green
{% endif %}
Hi,
off course, the code :
square: false
columns: 2
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: Rooms
card_mod: null
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: null
card_mod: null
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0);
}
- type: custom:swipe-card
slideToClickedSlide: false
parameters:
roundLengths: false
effect: slide
speed: 35
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
autoHeight: true
allowSlidePrev: true
preventClicks: true
spaceBetween: 8
scrollbar: null
hide: false
snapOnRelease: false
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Quarto
picture: /local/bed.png
layout: vertical
icon_color: yellow
tap_action:
action: navigate
navigation_path: /lovelace/quarto
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
picture: /local/temp.png
icon_color: yellow
content: '{{ states(''your entity here for temp'')}}°C'
- type: template
picture: /local/humidity.png
icon_color: blue
content: '{{ states('''your entity here for humidity'')}}%'
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
position: center;
margin: 0px 0px 0px 0px;
left: 35px;
top: calc(25% - px);
}
.chip-container {
flex-flow: column !important;
}
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: your entity here for light
picture: /local/groupbulb.png
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% if is_state('your entity here for light', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: template
entity: your entity here for switch
picture: /local/socket.png
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% if is_state('your entity here for switch', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
margin: 0px 0px 0px 0px;
position: absolute;
right: 4px;
top: calc(25% - 0px);
}
.chip-container {
flex-flow: column !important;
}
}
card_mod: null
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.4);
}
mushroom-card {
background-size: 55px 40px;
}
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Lights
picture: /local/groupbulb.png
layout: vertical
icon_color: green
tap_action:
action: navigate
navigation_path: /lovelace/quarto
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
picture: /local/ceiling-lamp.png
icon_color: yellow
content: 'Luz Teto: {{ states(''your entity here for light'')}}'
tap_action:
action: toggle
- type: template
picture: /local/table-lamp.png
icon_color: yellow
content: 'Candeeiro: {{ states(''your entity here for light'')}}'
tap_action:
action: toggle
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
position: center;
margin: 0px 0px 0px 0px;
left: 30px;
top: calc(25% - px);
}
.chip-container {
flex-flow: column !important;
}
}
card_mod: null
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.4);
}
mushroom-card {
background-size: 55px 40px;
}
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Sockets
picture: /local/socket.png
layout: vertical
icon_color: green
tap_action:
action: navigate
navigation_path: /lovelace/quarto
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
picture: /local/socket.png
icon_color: yellow
content: 'Tomada: {{ states(''your entity here for switch'')}}'
tap_action:
action: toggle
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
position: center;
margin: 0px 0px 0px 0px;
left: 20px;
top: calc(25% - px);
}
.chip-container {
flex-flow: column !important;
}
}
card_mod: null
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.4);
}
mushroom-card {
background-size: 55px 40px;
}
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Multimedia
picture: /local/tv.png
layout: vertical
icon_color: green
tap_action:
action: navigate
navigation_path: /lovelace/quarto
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
picture: /local/clock.png
icon_color: yellow
content: >-
Coluna Quarto: {{
states('your entity here for media')}}
- type: template
picture: /local/box.png
icon_color: yellow
content: >-
Coluna Quarto: {{
states('your entity here for media')}}
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
position: center;
margin: 0px 0px 0px 0px;
left: 20px;
top: calc(25% - px);
}
.chip-container {
flex-flow: column !important;
}
}
card_mod: null
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.4);
}
mushroom-card {
background-size: 55px 40px;
}
In that code you have one principal card with the chips for temp, humidity, group lights, group sockets and can be added the camera, and 3 additional swipe cards for lights, sockets and multimedia.
If you want more just keep adding the same code as many times you want.
Probably the code have some errors and for sure a bunch of lines doing nothing but it´s meant to be because i want to have the possibility to add that feature without to write the whole line just changing the end to enable.
I found the answer in HA docs. You have to choose an action first, then call a service…
If anyone interested, here’s the code to call an action when clicking on the title:
type: custom:mushroom-title-card
title: Etage
title_tap_action:
action: call-service
service: light.toggle
data:
entity_id: light.etage
thank you for your help
i have this error
i have this error
Configuration errors detected:
bad indentation of a mapping entry (68:44)
65 | ... - type: template
66 | ... picture: /local/humidity.png
67 | ... icon_color: blue
68 | ... content: '{{ states('''your entity here for humidity'' ...
-----------------------------------------^
69 | ... alignment: center
70 | ... card_mod:
Where it says “your entity here for humidity” you have to replace that for your device entity.
oh i understand thank you
I had exact same question earlier. You have to use a template card in order to use template code even for the icon color