Post your complete chip code and we can have a look.
- 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: |-
{% set mode = state_attr(entity,'fan_mode') %}
{% if mode == 'Auto low' %}
mdi:fan-off
{% elif mode == 'Low' %}
fas:fan
{% endif %}
icon_color: |-
{% set status = state_attr(entity,'fan_mode') %}
{% if status == 'Auto low' %}
grey
{% elif status == 'Low' and states(entity) == 'cool' %}
blue
{% elif status == 'Low' and states(entity) == 'heat' %}
red
{% else %}
grey
{% endif %}
tap_action: none
card_mod:
style:
div:
mushroom-template-chip:nth-child(2):
$:
mushroom-chip: |
ha-icon {
{% set status = state_attr('climate.daniel_s','fan_mode') %}
{% if status == 'Low' %}
animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
- type: template
tap_action:
action: more-info
content: >
{{ states('sensor.daniels_humidifier_status') | replace('off','Off') |
replace('on','On') }}
entity: sensor.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
The card_mod for Chip animation needs to be moved to the left to align with the mushroom-chip-card not the Chip.
Got it to work thank you.
1 Like
You need to keep the input_boolean. It is used to hide/show the dropdown.
Manually assigned lights would be like this:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 42px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-light-card
entity: group.master_bedroom_lights
layout: horizontal
icon: mdi:lightbulb-group
show_brightness_control: true
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.bedroom_lights_dropdown
primary: ''
secondary: ''
icon: mdi:chevron-down
icon_color: disabled
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
transition: transform 0.14s !important;
{{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
}
.: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.bedroom_lights_dropdown
state: 'on'
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.bedroom_light
use_light_color: false
show_brightness_control: true
layout: horizontal
card_mod:
style: |
ha-card {
padding: 8px 24px !important;
}
- type: custom:mushroom-light-card
entity: light.rhys_bedside_light
use_light_color: true
show_brightness_control: true
layout: horizontal
card_mod:
style: |
ha-card {
padding: 8px 24px !important;
}
- type: custom:mushroom-light-card
entity: light.sarahs_bedside_light
use_light_color: true
show_brightness_control: true
layout: horizontal
card_mod:
style: |
ha-card {
padding: 8px 24px 12px !important;
}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
P.S. I’ve added a nice little animation on the dropdown chevron 
.
11 Likes
Yes, you can have it dynamically adjusting the color of the Mushroom Bar Card like this:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 42px auto
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: sensor.cpu_temperature
icon: mdi:thermometer
icon_color: |
{% set cpu_temp = states(entity) | int %}
{% if cpu_temp > 80 %}
red
{% elif cpu_temp > 60 %}
orange
{% else %}
green
{% endif %}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
entity: sensor.cpu_temperature
height: 42px
min: '0'
max: '90'
entity_row: true
severity:
- color: rgb(var(--mush-rgb-green))
from: 0
to: 60
- color: rgb(var(--mush-rgb-orange))
from: 61
to: 80
- color: rgb(var(--mush-rgb-red))
from: 81
to: 90
positions:
icon: 'off'
indicator: 'off'
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 12px;
--bar-card-border-radius: 12px;
--mush-rgb-red: 244, 67, 54;
--mush-rgb-pink: 233, 30, 99;
--mush-rgb-purple: 156, 39, 176;
--mush-rgb-deep-purple: 103, 58, 183;
--mush-rgb-indigo: 63, 81, 181;
--mush-rgb-blue: 33, 150, 243;
--mush-rgb-light-blue: 3, 169, 244;
--mush-rgb-cyan: 0, 188, 212;
--mush-rgb-teal: 0, 150, 136;
--mush-rgb-green: 76, 175, 80;
--mush-rgb-light-green: 139, 195, 74;
--mush-rgb-lime: 205, 220, 57;
--mush-rgb-yellow: 255, 235, 59;
--mush-rgb-amber: 255, 193, 7;
--mush-rgb-orange: 255, 152, 0;
--mush-rgb-deep-orange: 255, 87, 34;
--mush-rgb-brown: 121, 85, 72;
--mush-rgb-grey: 158, 158, 158;
--mush-rgb-blue-grey: 96, 125, 139;
--mush-rgb-black: 0, 0, 0;
--mush-rgb-white: 255, 255, 255;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-name {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
You only need to include the --mush-rgb-[color] variables if they are not defined in your theme. You only need to include the ones you will be using.
9 Likes
Thank you for your help.
1 Like
Be interested in seeing how this works. What type of softener do you have, how big is the salt store?
Well I attempted to flash the d1mini that i had used to make the sensor and it wouldnt boot to enable me to flash it, so ive used another one now with this code (tweaked to use my default esp template) and now going to build the sensor back up.
### DEFAULT DEVICE SETTINGS - Change Friendly Name, IP & Board Type ###
substitutions:
friendly_name: "salt-level"
esphome:
name: "$friendly_name"
platform: ESP8266
board: d1_mini
wifi:
ssid: !secret wifi_ssid
password: !secret wifi_pass
manual_ip:
static_ip: 192.168.1.62
gateway: 192.168.1.254
subnet: 255.255.255.0
### Set this to devices CURRENT IP if to be changed ###
# use_address: 192.168.1.X
# Enable fallback hotspot (captive portal) in case wifi connection fails
ap:
ssid: "$friendly_name Hotspot"
password: !secret fall_pass
captive_portal:
# Enable logging
logger:
# Enable Home Assistant API
api:
password: !secret api_pass
ota:
password: !secret ota_pass
# Exposed Attirbutes/Sensors
switch:
- platform: restart
name: "$friendly_name Restart"
text_sensor:
- platform: version
name: "$friendly_name ESPHome Version"
- platform: wifi_info
ip_address:
name: "$friendly_name IP"
ssid:
name: "$friendly_name SSID"
bssid:
name: "$friendly_name BSSID"
sensor:
- platform: wifi_signal
name: $friendly_name WiFi Strength
update_interval: 60s
- platform: uptime
name: "$friendly_name Uptime"
### DEFAULT END - Change Friendly Name ###
- platform: ultrasonic
trigger_pin: D1
echo_pin: D2
name: "Saltlevel in percent"
### update_interval: 12h
update_interval: 5s
filters:
# Calculates in %
# Replace 0.43 by the height of your container. From the sensor to the bottom.
# I used this website to know how I should multiply my values :https://www.skillsyouneed.com/num/percent-change.html
- lambda: return (0.43-x)*(100/0.43);
unit_of_measurement: "%"
- platform: ultrasonic
trigger_pin: D1
echo_pin: D2
name: "Saltlevel in cm"
### update_interval: 12h
update_interval: 5s
filters:
# Replace the 0.43 by the height of your container. From the sensor to the bottom.
# I multiplied by 100 in order to get CM since the sensor works in meters
- lambda: return (0.43-x)*100;
unit_of_measurement: "cm"
My Softener is a BWT Water Genie 15, the bin is 43cm from sensor to base.
Does anyone know if i can have these icons represent their state_color when they’re on?
For some reason the bar doesnt show up here, however i’ve installed all HACS for this.
If i use this the bar doesnt show up. unless i change
- color: rgb(var(--mush-rgb-green))
from: 0
to: 60
to
severity:
- color: green
from: 0
to: 60
If you want to match the Mushroom colors, add these variables to your theme:
mush-rgb-red: 244, 67, 54
mush-rgb-pink: 233, 30, 99
mush-rgb-purple: 156, 39, 176
mush-rgb-deep-purple: 103, 58, 183
mush-rgb-indigo: 63, 81, 181
mush-rgb-blue: 33, 150, 243
mush-rgb-light-blue: 3, 169, 244
mush-rgb-cyan: 0, 188, 212
mush-rgb-teal: 0, 150, 136
mush-rgb-green: 76, 175, 80
mush-rgb-light-green: 139, 195, 74
mush-rgb-lime: 205, 220, 57
mush-rgb-yellow: 255, 235, 59
mush-rgb-amber: 255, 193, 7
mush-rgb-orange: 255, 152, 0
mush-rgb-deep-orange: 255, 87, 34
mush-rgb-brown: 121, 85, 72
mush-rgb-grey: 158, 158, 158
mush-rgb-blue-grey: 96, 125, 139
mush-rgb-black: 0, 0, 0
mush-rgb-white: 255, 255, 255
Alternatively you can declare them in card_mod. I’ll add it to the example.
4 Likes
Not sure if this is what you want?
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 44px auto
cards:
- type: custom:layout-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
card_mod:
style: |
:host([dark-mode]) {
#width: 50px;
}
:host {
#background: #1a1a1a;
#margin-top: 15px;
}
ha-card {
#background: #1a1a1a;
margin-top: 18px;
#margin-left: 0px;
--chip-icon-size: 36px;
}
- type: custom:banner-card
entities: null
heading:
- Bedroom
link:
- window.history.back()
card_mod:
style: |
ha-card {
#background: #1a1a1a;
#margin-top: 0px;
#margin-left: -180px;
#background: none;
align-items: flex-start !important;
}
ha-card .heading {
font-size: 3.5em;
margin: 30px;
#color: black;
font-family: 'Amatic SC', cursive;
}
ha-card .overlay-strip {
font-size: 1em;
font-family: 'Roboto';
font-weight: 900;
background: none;
}
card_mod:
style: |
ha-card {
--ha-card-box-shadow: none;
}
Still working on adding the back function.
Brilliant thanks, created a decluttering template out of this now but im struggling with trying to colour icon based on a set severity
icon_color: |
{% set icon_colour = states(entity) | int %}
{% if icon_colour < 20 %}
red
{% elif icon_colour < 60 %}
orange
{% else %}
green
{% endif %}
from here:
bar_gauge:
default:
- entity: null
- min: 0
- max: 100
- high: green
- medium: orange
- low: red
- high_max: 100
- high_min: 61
- medium_max: 60
- medium_min: 21
- low_max: 20
- low_min: 0
This does not work:
icon_color: |
{% set icon_colour = states(entity) | int %}
{% if icon_colour < [[low_max]] %}
red
{% elif icon_colour < [[medium_max]] 60 %}
orange
{% else %}
green
{% endif %}
Hey all, was wondering if someone could help me by adding in the styling to remove the boarders for the below please
type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: |-
{{ states('sensor.average_kitchen_humidity') | round(0) }}% | {{
states('sensor.average_kitchen_temperature') | round(0) }}°C
icon: mdi:pot-steam
entity: light.area_kitchen_lights_group
icon_color: '''{{ ''''white'''' if is_state(entity, ''''on'''') else ''''white'''' }}'''
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
fill_container: true
layout: vertical
card_mod:
style: |
:host {
--mush-icon-size: 79px;
height: 150px;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.area_kitchen_lights_group', 'on') else 'grey' }}), 0.3) !important;
}
- square: false
columns: 7
type: grid
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('light.kitchen_light_switch') %}
{% if state=='on' %}
hue:bulb-group-ceiling-round
{% elif state=='off' %}
hue:bulb-group-ceiling-round
{% endif %}
entity: light.kitchen_light_switch
icon_color: |-
{% set state=states('light.kitchen_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% endif %}
layout: vertical
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('light.kitchen_pendant_light_switch') %}
{% if state=='on' %}
mdi:vanity-light
{% elif state=='off' %}
mdi:vanity-light
{% endif %}
entity: light.kitchen_pendant_light_switch
icon_color: |-
{% set state=states('light.kitchen_pendant_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% endif %}
layout: vertical
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('light.kitchen_strip_light_switch') %}
{% if state=='on' %}
hue:lightstrip
{% elif state=='off' %}
hue:lightstrip
{% endif %}
entity: light.kitchen_strip_light_switch
icon_color: |-
{% set state=states('light.kitchen_strip_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% endif %}
tap_action:
action: more-info
hold_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('cover.ducted_ac_kitchen_zone') %}
{% if state=='open' %}
mdi:air-conditioner
{% elif state=='closed' %}
mdi:air-conditioner
{% endif %}
entity: cover.ducted_ac_kitchen_zone
icon_color: |-
{% set state=states('climate.ducted_ac_controls_interface') %}
{% if state=='off' %}
disabled
{% elif state=='cool' %}
blue
{% elif state=='heat' %}
orange
{% elif state=='fan_only' %}
brown
{% elif state=='dry' %}
green
{% endif %}
layout: vertical
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: >-
{% set state=states('binary_sensor.kitchen_motion_sensor') %} {%
if
state=='on' %} mdi:motion-sensor {% elif state=='off' %}
mdi:motion-sensor-off {% endif %}
entity: binary_sensor.kitchen_motion_sensor
icon_color: >-
{% set state=states('binary_sensor.kitchen_motion_sensor') %} {%
if
state=='on' %} blue {% elif state=='off' %} disabled {% endif %}
layout: vertical
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: >-
{% set state=states('binary_sensor.kitchen_sink_leak_sensor') %}
{% if
state=='on' %} mdi:pipe-leak {% elif state=='off' %} mdi:pipe-leak
{%
endif %}
entity: binary_sensor.kitchen_sink_leak_sensor
icon_color: >-
{% set state=states('binary_sensor.kitchen_sink_leak_sensor') %}
{%
if state=='on' %} orange {% elif state=='off' %} disabled {%
elif
state=='unavailable' %} red {% endif %}
layout: vertical
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('sensor.electrolux_fridge_appliance_state') %}
{% if state=='False' %}
mdi:fridge
{% elif state=='True' %}
mdi:fridge-alert
{% endif %}
entity: sensor.electrolux_fridge_appliance_state
icon_color: |-
{% set state=states('sensor.electrolux_fridge_appliance_state') %}
{% if state=='False' %}
green
{% elif state=='True' %}
red
{% endif %}
layout: vertical
tap_action:
action: more-info
3 Likes
Solved like this:
- type: custom:mushroom-template-card
entity: '[[entity]]'
icon: mdi:[[icon]]
icon_color: |
{% set colour = states(entity) | int %}
{% if colour <= [[low_max]] %}
[[low]]
{% elif colour <= [[medium_max]] %}
[[medium]]
{% else %}
[[high]]
{% endif %}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
entity: '[[entity]]'
height: 42px
min: '[[min]]'
max: '[[max]]'
entity_row: true
severity:
- color: rgb(var(--mush-rgb-[[high]]))
to: '[[high_max]]'
from: '[[high_min]]'
- color: rgb(var(--mush-rgb-[[medium]]))
to: '[[medium_max]]'
from: '[[medium_min]]'
- color: rgb(var(--mush-rgb-[[low]]))
to: '[[low_max]]'
from: '[[low_min]]'
Next question though… is there a variable that can auto set an icon based on the entity?
- type: custom:decluttering-card
template: bar_gauge
variables:
- entity: sensor.openweathermap_temperature
- icon: cloud
- min: -10
- max: 45
- low: indigo
- medium: deep-orange
- high: red
- low_min: -10
- low_max: 10
- medium_min: 11
- medium_max: 25
- high_min: 26
- high_max: 45
If i remove the icon here or remove it from the decluttering template then the icon just isnt there.
1 Like
Can mushroom slider have number values? Anothwords, if I want to adjust my fan from low to medium or high. Can I drag the slider, and when it gets a third of the way it will be medium
And then 2/3 of the way it goes to high?
Or would I have to use separate up and down buttons?
I use an ESP to monitor my water softener salt - works like a charm. Project from here: Salt level sensor for water softener in Home Assistant with ESPHome – ADONNO
That’s the guide I used and adapted to suit my needs. Getting no reading though currently just ‘Nan’ so need to see if the ultrasonic is getting power