@rhysb Hi mate, ive been using this for a year now, recently it has stopped displaying the extra percentage state:
decluttering template:
salt_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
- severity_low: 20
- severity_medium: 40
- severity_high: 60
card:
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: '[[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]]'
positions:
icon: 'off'
indicator: 'off'
card_mod: null
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);
}
bar-card-value::before {
content: " {{ states.sensor.saltlevel_in_percent.state }} % / ";
}
card itself:
- title: Water Softener
cards:
- type: vertical-stack
card_mod:
class: hki
cards:
- type: custom:decluttering-card
template: salt_gauge
variables:
- entity: sensor.saltlevel_in_cm
- icon: cube-outline
- low_max: 2.9
- medium_min: 3
- medium_max: 6.9
- high_min: 7.0
- max: 35
Displays like this:
Used to be like so: