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
Ah yes, I just scrolled up to see the same! I had to tweak the maths a little to get the % output work for me as the salt never reaches the ‘top’ for the sensor. It’s been rock solid though - have had it running for probably 2yrs or so now.
No that is very true, I’ll have to do the same. I switched out the ultrasonic for another and im getting a reading… but now have the build up the whole sensor again and resolder
Thanks for all that you’ve shared already! Your examples have given me and I’m sure others a nice base and some cool things to chase after. I can say that I’m guilty of peeking back from time to time to see whether you’re at a place where you’ve shared your code as there are plenty of sticking points, but thanks for considering it anyway and sharing your progress.
As a specific example, do you mind to share a snippet or two as to your implementation of the sidebar card for your tablet/expanded view?
1 Like
Aussie broadband too 
Replaced the Ultrasonic for another and working now, Can you share your calls with me? my salt bin max is actually around 37cm but the sensor is 43cm from the bottom.
Does custom stack-in card still work? I can’t get it to show Up after installing it woth HACS, restarting and clearing cache.
Need to make a vertical stack without seeing the borders so it looks like one card.
