Unfortunately no MQTT broker. The Shelly integration pulls the value. but no idea how to use it!
The video was for the setup of the water level setup (costs about $100 instead of the KNX ready ones that cost over $600).
I know how to control KNX via HA, but my weakness is with HA automations/scripts…
Thanks for your comments anyway 
Do you already have a sensor? You could use one that’s compatible with an knx analog input - I wouldn’t see why this would set you back 600€ (More like 90 + Sensor).
If you already have the sensor and the value represented as an HA entity you just need an automation with a numeric state trigger (set above, below accordingly)
The output (water level indicator) could write to a template or directly set a knx number
PS: You can run an MQTT broker as HA addon.
Thanks all for taking the time to contribute. seems the templates at this post are the first step to the solution. still need to do a lot of trial and error though.
Thanks again
Hi,
I tried the below in the template editor and it gives the data I need. but I honestly I don’t know how/where to put it in HA!!
I have 4 tanks and would love to have 1 card for each with the level representation described at the beginning of this post.
I would appreciate some guidance…
{% set pool_tank = {
"height": float(states('input_number.pool_tank_h')) | round (2),
"length": float(states('input_number.pool_tank_l')) | round (2),
"width": float(states('input_number.pool_tank_w')) | round (2),
"v_per_cm": (float(states('input_number.pool_tank_max_v')) /
float(states('input_number.pool_tank_h')) )| round(2),
"v_current": float(states('sensor.pool_tank_adc')),
"v_max": float(states('input_number.pool_tank_max_v')) | round (2),
"max_volume": (float(states('input_number.pool_tank_h')) *
float(states('input_number.pool_tank_w')) *
float(states('input_number.pool_tank_l'))) | round (2),
"current_volume": (float(states('sensor.pool_tank_adc')) /
float(states('input_number.pool_tank_max_v')) *
float(states('input_number.pool_tank_h')) *
float(states('input_number.pool_tank_l')) *
float(states('input_number.pool_tank_w'))) | round (2),
"level": (float(states('sensor.pool_tank_adc')) /
float(states('input_number.pool_tank_max_v')) *100) | round (0)
} %}
Pool tank info:
Max volt reading: {{ pool_tank.v_max }} v
Height: {{ pool_tank.height }} m
Length: {{ pool_tank.length }} m
Width: {{ pool_tank.width }} m
max volume: {{ pool_tank.height }}m * {{ pool_tank.length }}m * {{ pool_tank.width }}m = {{ pool_tank.max_volume }} m3
Current volume: {{ pool_tank.current_volume }} m3
Current Volt: {{ pool_tank.v_current }} v
Level %: {{ pool_tank.level }} %
Level #: {% if 90 <= pool_tank.level >= 100 %} 5
{% elif 70 <= pool_tank.level < 89 %} 4
{% elif 50 <= pool_tank.level < 69 %} 3
{% elif 20 <= pool_tank.level < 49 %} 2
{% else %} 1
{% endif %}
- platform: template
sensors:
tank_level:
unit_of_measurement: '%'
value_template: {{ pool_tank.level }}
- platform: template
sensors:
tank_level_category:
unit_of_measurement:
value_template: {% if 90 <= pool_tank.level >= 100 %} 5
{% elif 70 <= pool_tank.level < 89 %} 4
{% elif 50 <= pool_tank.level < 69 %} 3
{% elif 20 <= pool_tank.level < 49 %} 2
{% else %} 1
{% endif %}
Although somehow late, but below what have been achieved in regards to the Water / Tank Level matter since:
BIG THANKS TO:
DIY concept
Refer to the original post
Helpers required per Tank:
Sensors:
#-----------------------------------------
# Pool Tank Sensors
# -----------------------------------------
- name: "Pool Tank Capacity"
unit_of_measurement: "m³"
state: >
{% set pool_height = states('input_number.pool_tank_h') | float %}
{% set pool_width = states('input_number.pool_tank_w') | float %}
{% set pool_length = states('input_number.pool_tank_l') | float %}
{{ (pool_height * pool_width * pool_length) | round (2) }}
- name: "Pool Tank Current Volume"
unit_of_measurement: "m³"
state: >
{% if is_state('sensor.pool_tank_adc', 'unknown') or is_state('sensor.pool_tank_adc', 'unavailable') %}
{% set pool_adc = 0 | float %}
{% else %}
{% set pool_adc = states('sensor.pool_tank_adc') | float %}
{% endif %}
{% set pool_v_per_cm = states('input_number.pool_tank_volt_per_cm') | float %}
{% set pool_width = states('input_number.pool_tank_w') | float %}
{% set pool_length = states('input_number.pool_tank_l') | float %}
{{ ((pool_adc / pool_v_per_cm / 100) * pool_width * pool_length) | round (2) }}
- name: "Pool Tank Current Height"
unit_of_measurement: "m"
state: >
{% if is_state('sensor.pool_tank_adc', 'unknown') or is_state('sensor.pool_tank_adc', 'unavailable') %}
{% set pool_adc = 0 | float %}
{% else %}
{% set pool_adc = states('sensor.pool_tank_adc') | float %}
{% endif %}
{% set pool_v_per_cm = states('input_number.pool_tank_volt_per_cm') | float %}
{{ ((pool_adc / pool_v_per_cm / 100)) + 0.05 | round (2) }}
- name: "Pool Tank Level Percent"
unit_of_measurement: "%"
state: >
{% set pool_current = states('sensor.pool_tank_current_volume') | float %}
{% set pool_cap = states('sensor.pool_tank_capacity') | float %}
{{ (pool_current / pool_cap * 100) | round (2) }}
- name: "Pool Tank Level number"
unit_of_measurement: ""
state: >
{% set pool_level = states('sensor.pool_tank_level_percent') | float %}
{% if 90 <= pool_level %} {{ 5 }}
{% elif 70 <= pool_level < 90 %} {{ 4 }}
{% elif 50 <= pool_level < 70 %} {{ 3 }}
{% elif 20 <= pool_level < 50 %} {{ 2 }}
{% else %} {{ 1 }}
{% endif %}
# -----------------------------------------
# Irrigation Tank Sensors
# -----------------------------------------
- name: "Irrigation Tank Capacity"
unit_of_measurement: "m³"
state: >
{% set irrigation_height = states('input_number.irrigation_tank_h') | float %}
{% set irrigation_width = states('input_number.irrigation_tank_w') | float %}
{% set irrigation_length = states('input_number.irrigation_tank_l') | float %}
{{ (irrigation_height * irrigation_width * irrigation_length) | round (2) }}
- name: "Irrigation Tank Current Volume"
unit_of_measurement: "m³"
state: >
{% if is_state('sensor.irrigation_tank_adc', 'unknown') or is_state('sensor.irrigation_tank_adc', 'unavailable') %}
{% set irrigation_adc = 0 | float %}
{% else %}
{% set irrigation_adc = states('sensor.irrigation_tank_adc') | float %}
{% endif %}
{% set irrigation_v_per_cm = states('input_number.irrigation_tank_volt_per_cm') | float %}
{% set irrigation_width = states('input_number.irrigation_tank_w') | float %}
{% set irrigation_length = states('input_number.irrigation_tank_l') | float %}
{{ ((irrigation_adc / irrigation_v_per_cm / 100) * irrigation_width * irrigation_length) | round (2) }}
- name: "Irrigation Tank Current Height"
unit_of_measurement: "m"
state: >
{% if is_state('sensor.irrigation_tank_adc', 'unknown') or is_state('sensor.irrigation_tank_adc', 'unavailable') %}
{% set irrigation_adc = 0 | float %}
{% else %}
{% set irrigation_adc = states('sensor.irrigation_tank_adc') | float %}
{% endif %}
{% set irrigation_v_per_cm = states('input_number.irrigation_tank_volt_per_cm') | float %}
{{ (irrigation_adc / irrigation_v_per_cm / 100) | round (2) }}
- name: "Irrigation Tank Level Percent"
unit_of_measurement: "%"
state: >
{% set irrigation_current = states('sensor.irrigation_tank_current_volume') | float %}
{% set irrigation_cap = states('sensor.irrigation_tank_capacity') | float %}
{{ (irrigation_current / irrigation_cap * 100) | round (2) }}
- name: "Irrigation Tank Level number"
unit_of_measurement: ""
state: >
{% set irrigation_level = states('sensor.irrigation_tank_level_percent') | float %}
{% if 90 <= irrigation_level %} {{ 5 }}
{% elif 70 <= irrigation_level < 90 %} {{ 4 }}
{% elif 50 <= irrigation_level < 70 %} {{ 3 }}
{% elif 20 <= irrigation_level < 50 %} {{ 2 }}
{% else %} {{ 1 }}
{% endif %}
# -----------------------------------------
# Main Tank Sensors
# -----------------------------------------
- name: "Main Tank Capacity"
unit_of_measurement: "m³"
state: >
{% set main_height = states('input_number.main_tank_h') | float %}
{% set main_width = states('input_number.main_tank_w') | float %}
{% set main_length = states('input_number.main_tank_l') | float %}
{{ (main_height * main_width * main_length) | round (2) }}
- name: "Main Tank Current Volume"
unit_of_measurement: "m³"
state: >
{% if is_state('sensor.main_tank_adc', 'unknown') or is_state('sensor.main_tank_adc', 'unavailable') %}
{% set main_adc = 0 | float %}
{% else %}
{% set main_adc = states('sensor.main_tank_adc') | float %}
{% endif %}
{% set main_v_per_cm = states('input_number.main_tank_volt_per_cm') | float %}
{% set main_width = states('input_number.main_tank_w') | float %}
{% set main_length = states('input_number.main_tank_l') | float %}
{{ ((main_adc / main_v_per_cm / 100) * main_width * main_length) | round (2) }}
- name: "Main Tank Current Height"
unit_of_measurement: "m"
state: >
{% if is_state('sensor.main_tank_adc', 'unknown') or is_state('sensor.main_tank_adc', 'unavailable') %}
{% set main_adc = 0 | float %}
{% else %}
{% set main_adc = states('sensor.main_tank_adc') | float %}
{% endif %}
{% set main_v_per_cm = states('input_number.main_tank_volt_per_cm') | float %}
{{ (main_adc / main_v_per_cm / 100) | round (2) }}
- name: "Main Tank Level Percent"
unit_of_measurement: "%"
state: >
{% set main_current = states('sensor.main_tank_current_volume') | float %}
{% set main_cap = states('sensor.main_tank_capacity') | float %}
{{ (main_current / main_cap * 100) | round (2) }}
- name: "Main Tank Level number"
unit_of_measurement: ""
state: >
{% set main_level = states('sensor.main_tank_level_percent') | float %}
{% if 90 <= main_level %} {{ 5 }}
{% elif 70 <= main_level < 90 %} {{ 4 }}
{% elif 50 <= main_level < 70 %} {{ 3 }}
{% elif 20 <= main_level < 50 %} {{ 2 }}
{% else %} {{ 1 }}
{% endif %}
# -----------------------------------------
# Diesel Tank Sensors
# -----------------------------------------
- name: "Diesel Tank Capacity"
unit_of_measurement: "m³"
state: >
{% set diesel_height = states('input_number.diesel_tank_h') | float %}
{% set diesel_width = states('input_number.diesel_tank_w') | float %}
{% set diesel_length = states('input_number.diesel_tank_l') | float %}
{{ (diesel_height * diesel_width * diesel_length) | round (2) }}
- name: "Diesel Tank Current Volume"
unit_of_measurement: "m³"
state: >
{% if is_state('sensor.diesel_tank_adc', 'unknown') or is_state('sensor.diesel_tank_adc', 'unavailable') %}
{% set diesel_adc = 0 | float %}
{% else %}
{% set diesel_adc = states('sensor.diesel_tank_adc') | float + states('input_number.diesel_tank_adc_offset') | float %}
{% endif %}
{% set diesel_v_per_cm = states('input_number.diesel_tank_volt_per_cm') | float %}
{% set diesel_width = states('input_number.diesel_tank_w') | float %}
{% set diesel_length = states('input_number.diesel_tank_l') | float %}
{{ ((diesel_adc / diesel_v_per_cm / 100) * diesel_width * diesel_length) | round (2) }}
- name: "Diesel Tank Current Height"
unit_of_measurement: "m"
state: >
{% if is_state('sensor.diesel_tank_adc', 'unknown') or is_state('sensor.diesel_tank_adc', 'unavailable') %}
{% set diesel_adc = 0 | float %}
{% else %}
{% set diesel_adc = states('sensor.diesel_tank_adc') | float + states('input_number.diesel_tank_adc_offset') | float %}
{% endif %}
{% set diesel_v_per_cm = states('input_number.diesel_tank_volt_per_cm') | float %}
{{ (diesel_adc / diesel_v_per_cm / 100) | round (2) }}
- name: "Diesel Tank Level Percent"
unit_of_measurement: "%"
state: >
{% set diesel_current = states('sensor.diesel_tank_current_volume') | float %}
{% set diesel_cap = states('sensor.diesel_tank_capacity') | float %}
{{ (diesel_current / diesel_cap * 100) | round (2) }}
- name: "Diesel Tank Level number"
unit_of_measurement: ""
state: >
{% set diesel_level = states('sensor.diesel_tank_level_percent') | float %}
{% if 90 <= diesel_level %} {{ 5 }}
{% elif 70 <= diesel_level < 90 %} {{ 4 }}
{% elif 40 <= diesel_level < 70 %} {{ 3 }}
{% elif 10 <= diesel_level < 40 %} {{ 2 }}
{% else %} {{ 1 }}
{% endif %}
Continued in Part 2
Frontend (A) Need to apply the Alarm animation though
- theme: Backend-selected
title: Levels
path: levels
badges: []
cards:
- type: custom:button-card
template: main_nav
- type: custom:stack-in-card
keep:
background: true
border_radius: true
box_shadow: false
mode: vertical
cards:
- type: vertical-stack
cards:
- type: custom:button-card
name: Pool Tank
styles:
name:
- text-transform: uppercase
- letter-spacing: 0.5em
- font-familly: cursive
- justify-self: start
- padding: 0px 5px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.pool_tank_level_number
show_entity_picture: true
show_name: false
size: 25%
styles:
card:
- height: 150px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 5
operator: '=='
entity_picture: /local/my-icons/water 5.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- value: 4
operator: '=='
entity_picture: /local/my-icons/water 4.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(39, 127, 194)
- box-shadow: 0 0 0.95rem 0.2rem rgb(39, 127, 194)
- transition: all 2s ease
- value: 3
operator: '=='
entity_picture: /local/my-icons/water 3.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(85, 186, 71)
- box-shadow: 0 0 0.95rem 0.2rem rgb(85, 186, 71)
- transition: all 2s ease
- value: 2
operator: '=='
entity_picture: /local/my-icons/water 2.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(246,135,41)
- box-shadow: 0 0 0.95rem 0.2rem rgb(246,135,41)
- transition: all 2s ease
- value: 1
operator: '=='
entity_picture: /local/my-icons/water 1.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(237,28,35)
- box-shadow: 0 0 0.95rem 0.2rem rgb(237,28,35)
- transition: all 2s ease
- animation: blink 2s ease infinite
- type: custom:stack-in-card
keep:
background: true
border_radius: true
box_shadow: false
mode: vertical
cards:
- type: custom:button-card
entity: sensor.pool_tank_current_volume
name: current
icon: hass:percent
show_name: false
show_state: true
show_icon: false
styles:
state:
- font-size: 30px
- type: custom:button-card
entity: sensor.pool_tank_level_percent
name: current
icon: hass:percent
show_name: false
show_state: true
show_icon: false
styles:
state:
- font-size: 30px
- type: custom:button-card
entity: switch.pool_tank_valve
show_name: false
show_entity_picture: true
show_state: true
show_icon: false
- type: custom:button-card
entity: switch.pool_filter_pump
show_name: false
show_entity_picture: true
show_state: false
show_icon: false
size: 60%
styles:
card:
- height: 90px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 'on'
operator: '=='
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- border-radius: 5px
- type: custom:text-divider-row
text: Settings
- type: glance
show_icon: false
entities:
- entity: sensor.pool_tank_level_percent
name: percent
- entity: sensor.pool_tank_current_volume
name: Now
- entity: sensor.pool_tank_capacity
name: Capacity
- entity: sensor.pool_tank_level_number
name: Level
- type: glance
show_icon: false
entities:
- entity: sensor.pool_tank_adc
name: Now V
- entity: input_number.pool_tank_volt_per_cm
name: v/cm
- entity: input_number.pool_tank_max_v
name: max V
- entity: sensor.pool_tank_current_height
name: now H
- entity: input_number.pool_tank_h
name: height
- entity: input_number.pool_tank_w
name: width
- entity: input_number.pool_tank_l
name: length
- type: custom:stack-in-card
keep:
background: true
border_radius: true
box_shadow: false
mode: vertical
cards:
- type: vertical-stack
cards:
- type: custom:button-card
name: Irrigation Tank
styles:
name:
- text-transform: uppercase
- letter-spacing: 0.5em
- font-familly: cursive
- justify-self: start
- padding: 0px 5px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.irrigation_tank_level_number
show_entity_picture: true
show_name: false
size: 25%
styles:
card:
- height: 150px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 5
operator: '=='
entity_picture: /local/my-icons/water 5.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- value: 4
operator: '=='
entity_picture: /local/my-icons/water 4.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(39, 127, 194)
- box-shadow: 0 0 0.95rem 0.2rem rgb(39, 127, 194)
- transition: all 2s ease
- value: 3
operator: '=='
entity_picture: /local/my-icons/water 3.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(85, 186, 71)
- box-shadow: 0 0 0.95rem 0.2rem rgb(85, 186, 71)
- transition: all 2s ease
- value: 2
operator: '=='
entity_picture: /local/my-icons/water 2.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(246,135,41)
- box-shadow: 0 0 0.95rem 0.2rem rgb(246,135,41)
- transition: all 2s ease
- value: 1
operator: '=='
entity_picture: /local/my-icons/water 1.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(237,28,35)
- box-shadow: 0 0 0.95rem 0.2rem rgb(237,28,35)
- transition: all 2s ease
- animation: blink 2s ease infinite
- type: custom:button-card
entity: sensor.irrigation_tank_current_volume
name: current
icon: hass:percent
show_name: false
show_state: true
show_icon: false
styles:
state:
- font-size: 30px
- type: custom:button-card
entity: sensor.irrigation_tank_level_percent
name: current
icon: hass:percent
show_name: false
show_state: true
show_icon: false
styles:
state:
- font-size: 30px
- type: custom:text-divider-row
text: Settings
- type: glance
show_icon: false
entities:
- entity: sensor.irrigation_tank_level_percent
name: percent
- entity: sensor.irrigation_tank_current_volume
name: Now
- entity: sensor.irrigation_tank_capacity
name: Capacity
- entity: sensor.irrigation_tank_level_number
name: Level
- type: glance
show_icon: false
entities:
- entity: sensor.irrigation_tank_adc
name: Now V
- entity: input_number.irrigation_tank_volt_per_cm
name: v/cm
- entity: input_number.irrigation_tank_max_v
name: max V
- entity: sensor.irrigation_tank_current_height
name: now H
- entity: input_number.irrigation_tank_h
name: height
- entity: input_number.irrigation_tank_w
name: width
- entity: input_number.irrigation_tank_l
name: length
- type: custom:stack-in-card
keep:
background: true
border_radius: true
box_shadow: false
mode: vertical
cards:
- type: vertical-stack
cards:
- type: custom:button-card
name: Main Tank
styles:
name:
- text-transform: uppercase
- letter-spacing: 0.5em
- font-familly: cursive
- justify-self: start
- padding: 0px 5px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.main_tank_level_number
show_entity_picture: true
show_name: false
size: 25%
styles:
card:
- height: 150px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 5
operator: '=='
entity_picture: /local/my-icons/water 5.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- value: 4
operator: '=='
entity_picture: /local/my-icons/water 4.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(39, 127, 194)
- box-shadow: 0 0 0.95rem 0.2rem rgb(39, 127, 194)
- transition: all 2s ease
- value: 3
operator: '=='
entity_picture: /local/my-icons/water 3.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(85, 186, 71)
- box-shadow: 0 0 0.95rem 0.2rem rgb(85, 186, 71)
- transition: all 2s ease
- value: 2
operator: '=='
entity_picture: /local/my-icons/water 2.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(246,135,41)
- box-shadow: 0 0 0.95rem 0.2rem rgb(246,135,41)
- transition: all 2s ease
- value: 1
operator: '=='
entity_picture: /local/my-icons/water 1.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(237,28,35)
- box-shadow: 0 0 0.95rem 0.2rem rgb(237,28,35)
- transition: all 2s ease
- animation: blink 2s ease infinite
- type: custom:button-card
entity: sensor.main_tank_current_volume
name: current
icon: hass:percent
show_name: false
show_state: true
show_icon: false
styles:
state:
- font-size: 30px
- type: custom:button-card
entity: sensor.main_tank_level_percent
name: current
icon: hass:percent
show_name: false
show_state: true
show_icon: false
styles:
state:
- font-size: 30px
- type: custom:text-divider-row
text: Settings
- type: glance
show_icon: false
entities:
- entity: sensor.main_tank_level_percent
name: percent
- entity: sensor.main_tank_current_volume
name: Now
- entity: sensor.main_tank_capacity
name: Capacity
- entity: sensor.main_tank_level_number
name: Level
- type: glance
show_icon: false
entities:
- entity: sensor.main_tank_adc
name: Now V
- entity: input_number.main_tank_volt_per_cm
name: v/cm
- entity: input_number.main_tank_max_v
name: max V
- entity: sensor.main_tank_current_height
name: now H
- entity: input_number.main_tank_h
name: height
- entity: input_number.main_tank_w
name: width
- entity: input_number.main_tank_l
name: length
- type: custom:stack-in-card
keep:
background: true
border_radius: true
box_shadow: false
mode: vertical
cards:
- type: vertical-stack
cards:
- type: custom:button-card
name: Diesel Tank
styles:
name:
- text-transform: uppercase
- letter-spacing: 0.5em
- font-familly: cursive
- justify-self: start
- padding: 0px 5px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.diesel_tank_level_number
show_entity_picture: true
show_name: false
size: 25%
styles:
card:
- height: 150px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 5
operator: '=='
entity_picture: /local/my-icons/diesel 5.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- value: 4
operator: '=='
entity_picture: /local/my-icons/diesel 4.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(39, 127, 194)
- box-shadow: 0 0 0.95rem 0.2rem rgb(39, 127, 194)
- transition: all 2s ease
- value: 3
operator: '=='
entity_picture: /local/my-icons/diesel 3.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(85, 186, 71)
- box-shadow: 0 0 0.95rem 0.2rem rgb(85, 186, 71)
- transition: all 2s ease
- value: 2
operator: '=='
entity_picture: /local/my-icons/diesel 2.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(246,135,41)
- box-shadow: 0 0 0.95rem 0.2rem rgb(246,135,41)
- transition: all 2s ease
- value: 1
operator: '=='
entity_picture: /local/my-icons/diesel 1.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(237,28,35)
- box-shadow: 0 0 0.95rem 0.2rem rgb(237,28,35)
- transition: all 2s ease
- animation: blink 2s ease infinite
- type: custom:button-card
entity: sensor.diesel_tank_current_volume
name: current
icon: hass:percent
show_name: false
show_state: true
show_icon: false
styles:
state:
- font-size: 30px
- type: custom:button-card
entity: sensor.diesel_tank_level_percent
name: current
icon: hass:percent
show_name: false
show_state: true
show_icon: false
styles:
state:
- font-size: 30px
- type: custom:text-divider-row
text: Settings
- type: glance
show_icon: false
entities:
- entity: sensor.diesel_tank_level_percent
name: percent
- entity: sensor.diesel_tank_current_volume
name: Now
- entity: sensor.diesel_tank_capacity
name: Capacity
- entity: sensor.diesel_tank_level_number
name: Level
- type: glance
show_icon: false
entities:
- entity: sensor.diesel_tank_adc
name: Now V
- entity: input_number.diesel_tank_volt_per_cm
name: v/cm
- entity: input_number.diesel_tank_max_v
name: max V
- entity: sensor.diesel_tank_current_height
name: now H
- entity: input_number.diesel_tank_h
name: height
- entity: input_number.diesel_tank_w
name: width
- entity: input_number.diesel_tank_l
name: length
- entity: input_number.diesel_tank_adc_offset
name: ADC offset
Frontend (B) Need to apply the Alarm animation though
type: grid
square: false
columns: 1
cards:
- square: false
columns: 1
type: grid
cards:
- type: custom:mushroom-title-card
title: Tanks
- square: true
columns: 4
type: grid
cards:
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: Pool
icon: none
layout: vertical
entity: sensor.pool_tank_level_percent
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ''
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states(config.entity) | int %}
{% if water_level > 80 %}
background: url("/local/my-icons/water 5.png") no-repeat center;
{% elif water_level > 60 %}
background: url("/local/my-icons/water 4.png") no-repeat center;
{% elif water_level > 40 %}
background: url("/local/my-icons/water 3.png") no-repeat center;
{% elif water_level > 20 %}
background: url("/local/my-icons/water 2.png") no-repeat center;
{% else %}
background: url("/local/my-icons/water 1.png") no-repeat center;
{% endif %}
background-size: contain;
--shape-color: none;
}
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: Irrigation
icon: none
layout: vertical
entity: sensor.irrigation_tank_level_percent
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states(config.entity) | int %}
{% if water_level > 80 %}
background: url("/local/my-icons/water 5.png") no-repeat center;
{% elif water_level > 60 %}
background: url("/local/my-icons/water 4.png") no-repeat center;
{% elif water_level > 40 %}
background: url("/local/my-icons/water 3.png") no-repeat center;
{% elif water_level > 20 %}
background: url("/local/my-icons/water 2.png") no-repeat center;
{% else %}
background: url("/local/my-icons/water 1.png") no-repeat center;
{% endif %}
background-size: contain;
--shape-color: none;
}
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: Main
icon: none
layout: vertical
entity: sensor.main_tank_level_percent
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states(config.entity) | int %}
{% if water_level > 80 %}
background: url("/local/my-icons/water 5.png") no-repeat center;
{% elif water_level > 60 %}
background: url("/local/my-icons/water 4.png") no-repeat center;
{% elif water_level > 40 %}
background: url("/local/my-icons/water 3.png") no-repeat center;
{% elif water_level > 20 %}
background: url("/local/my-icons/water 2.png") no-repeat center;
{% else %}
background: url("/local/my-icons/water 1.png") no-repeat center;
{% endif %}
background-size: contain;
--shape-color: none;
}
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: Diesel
icon: none
layout: vertical
entity: sensor.diesel_tank_level_percent
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states(config.entity) | int %}
{% if water_level > 80 %}
background: url("/local/my-icons/diesel 5.png") no-repeat center;
{% elif water_level > 60 %}
background: url("/local/my-icons/diesel 4.png") no-repeat center;
{% elif water_level > 40 %}
background: url("/local/my-icons/diesel 3.png") no-repeat center;
{% elif water_level > 20 %}
background: url("/local/my-icons/diesel 2.png") no-repeat center;
{% else %}
background: url("/local/my-icons/diesel 1.png") no-repeat center;
{% endif %}
background-size: contain;
--shape-color: none;
}
Here are the PNG files
Diesel:
Water:
Begins at Part 1
Super implementation. Big question from my side what i don’t get: What is irrigation_tank_volt_per_cm? How did you measured that?
I assume you need to measure the voltage difference / cm? I have a 2.1x2x2 water tank. So i should get a voltage difference for 1 cm?
Any practical advice here?
or you just measure the max volume voltage and the minimum level voltage and divide by the height? That’s it? Is it that linear?
Check the Sensor link in the first post, it says it measure up to 2m (=200cm) at 5v so 5/200 = 0.025
The rest is self explanatory in the definition of the sensors.
I have added the PNG files
ahh got it, i missed that the pressure sensor is created for different ranges, perfect. Ordered one! Thank you for your work!
finally implemented your shelly uni and pressure sensor solution, so far so good. I can see thath Shelly Uni ADC voltage is a bit fluctuating like in a 0.05 volt range up and down, trying to smooth that with some filter sensor. Something like that:
platform: filter
name: "ciszterna_adc_moving_avg"
entity_id: sensor.ciszterna_nyomas_adc
filters:
- filter: outlier
window_size: 50
radius: 0.3
- filter: lowpass
time_constant: 10
- filter: time_simple_moving_average
window_size: "00:01"
precision: 2
However maybe somebody here in the topic has some nice solution for the pressure sensor voltage smoothing.
Glad to hear you did.
As for the voltage fluctuation, I do agree it needs to be smoothened (still on my TODO list), so if you or anyone here could share his thoughts about this this would be great. 
For the voltage fluctuations what I had in mind is to create an automation that updates a helper and use that helper in the templates instead of the actual ADC sensor.
Also you might find this helpful:
https://github.com/snarky-snark/home-assistant-variables
Thanks to @rhysb and others I am using the following now:
The card with information pop-up:
type: custom:mushroom-template-card
primary: '{{ states(''sensor.pool_tank_current_volume'') }}m³ / {{ states(entity) }}%'
secondary: Pool
icon: none
layout: vertical
entity: sensor.pool_tank_level_percent
icon_color: ''
badge_color: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: '--ha-card-background, var(--card-background-color, white)'
content:
type: grid
columns: 1
square: false
cards:
- type: custom:mushroom-title-card
title: Pool Tank
alignment: center
- type: grid
columns: 4
cards:
- type: custom:mushroom-template-card
entity: sensor.pool_tank_level_percent
primary: Percent
secondary: '{{states(config.entity)}} %'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.pool_tank_current_volume
primary: Now
secondary: '{{states(config.entity)}} mᶟ'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.pool_tank_capacity
primary: Capacity
secondary: '{{states(config.entity)}} mᶟ'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.pool_tank_level_number
primary: Level
secondary: '{{states(config.entity)}}'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: grid
columns: 4
cards:
- type: custom:mushroom-template-card
entity: sensor.pool_tank_adc
primary: Now V
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.pool_tank_volt_per_cm
primary: v/cm
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.pool_tank_max_v
primary: Max V
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.pool_tank_current_height
primary: Now H
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.pool_tank_h
primary: Height
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.pool_tank_w
primary: Width
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.pool_tank_l
primary: Length
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states('sensor.pool_tank_level_number') | int %}
{% if water_level == 5 %}
background: url("/local/my-icons/water 5.png") no-repeat center;
{% elif water_level == 4 %}
background: url("/local/my-icons/water 4.png") no-repeat center;
{% elif water_level == 3 %}
background: url("/local/my-icons/water 3.png") no-repeat center;
{% elif water_level == 2 %}
background: url("/local/my-icons/water 2.png") no-repeat center;
--shape-animation: low 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% else %}
background: url("/local/my-icons/water 1.png") no-repeat center;
--shape-animation: critical 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% endif %}
background-size: contain;
--shape-color: none;
}
@keyframes critical {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes low {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
The chip when opening the filling faucet (tap) using Tuya Smart WiFi Control Water Valve /Gas Valve:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: switch.pool_tank_valve
state: 'on'
chip:
type: template
entity: switch.pool_tank_valve
picture: /local/my-icons/water 5.png
icon: '{{ ''mdi:waves'' if is_state(entity, ''on'') else ''mdi:waves'' }}'
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
badge_icon: '{{ ''mdi:faucet'' if is_state(entity, ''on'') else ''none'' }}'
badge_color: '{{ ''blue'' if is_state(entity, ''on'') else ''none'' }}'
content_info: none
card_mod:
style: |
.avatar {
animation: clip 1.5s ease-out infinite; if is_state(config.entity, 'on');
object-fit: contain !important;
}
@keyframes clip {
0% {clip-path: inset(75% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
alignment: center
view_layout:
grid-area: chips
For voltage fluctuation this one works pretty well:
platform: filter
name: "ciszterna_adc_moving_avg_exp"
entity_id: sensor.ciszterna_nyomas_adc
filters:
- filter: time_throttle
window_size: "00:00:05"
- filter: outlier
window_size: 50
radius: 0.3
- filter: lowpass
time_constant: 10
- filter: time_simple_moving_average
window_size: "00:01"
precision: 2
Also advised to remove the shelly uni adc sensor from recorder as it is flooding the database:
exclude:
entities:
- sensor.ciszterna_nyomas_adc
and if you want to follow the raw sensor data use the throttle filter to sample the sensor value only once for a given period:
platform: filter
name: "ciszterna_adc_throttle"
entity_id: sensor.ciszterna_nyomas_adc
filters:
- filter: time_throttle
window_size: "00:00:10"
precision: 2
Hope somebody will find this helpfull!
This is really helpful… I am the first to benefit and remove a couple of points of my ‘Fine Tuning’ phase.
Thanks…
This looks to be just what I’m after. I have just a single tank to monitor but that’s fine.
I’m very new to HA and while I can understand some of what you have done, I have no idea where to create the individual files like ‘sensors’ , frontend or backend or how to add the smoothing for the shelly adc voltage.
Is this documented somewhere?
Thanks in advance.
This looks to be just what I’m after. I have just a single tank to monitor but that’s fine.
I’ve built the sensor, installed it, have the data in HA.
I have all the sensors working but I’d appreciate some help with the mushroom cards.
Thanks. I sorted it to a degree. Wanted to see if the .png images could be used as chips somehow. I might ask in another more relevant thread.
I have this dashboard for testing some cards. I hope it helps…
All triggered by an ‘input_boolean.testing’ helper that you have to create.
type: grid
columns: 1
square: false
cards:
- primary: '{{ states(entity) }}'
secondary: Testing
type: custom:mushroom-template-card
entity: input_boolean.testing
icon: none
layout: vertical
icon_color: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{'--icon-animation: spin 0.5s linear infinite reverse;' if is_state(config.entity, 'on') }}
border-radius: 50%;
{{'border: 8px dotted rgb(var(--rgb-red));' if is_state(config.entity, 'on') else 'border: 8px dotted rgb(var(--rgb-disabled));'}}
}
.shape {
{{'border: 4px dashed rgb(var(--rgb-green));' if is_state(config.entity, 'on') else 'border: 4px dashed rgb(var(--rgb-disabled));'}}
{{'--shape-animation: spin 2s linear infinite;' if is_state(config.entity, 'on') }}
--shape-color: none;
--icon-symbol-size: 5px;
--icon-size: 34px;
}
- type: custom:mushroom-template-card
primary: Card color changes according to value (i.e. temperature)
secondary: Test Number = {{ states(entity) }}°C
entity: input_number.test_number
icon: mdi:thermometer
layout: horizontal
tap_action:
action: more-info
icon_color: |
{% set battery_level = states(entity) %}
{% if battery_level < '17' %}
blue
{% elif battery_level < '18' %}
teal
{% elif battery_level < '19' %}
green
{% elif battery_level < '20' %}
light-green
{% elif battery_level < '21' %}
lime
{% elif battery_level < '22' %}
yellow
{% elif battery_level < '23' %}
amber
{% elif battery_level < '24' %}
orange
{% elif battery_level < '25' %}
deep-orange
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
{% set battery_level = states(config.entity) %}
{% if battery_level < '17' %}
--primary-text-color: rgb(var(--rgb-blue));
--secondary-text-color: rgba(var(--rgb-blue),0.5);
background: rgba(var(--rgb-blue),0.1);
{% elif battery_level < '18' %}
--primary-text-color: rgb(var(--rgb-teal));
--secondary-text-color: rgba(var(--rgb-teal),0.5);
background: rgba(var(--rgb-teal),0.1);
{% elif battery_level < '19' %}
--primary-text-color: rgb(var(--rgb-green));
--secondary-text-color: rgba(var(--rgb-green),0.5);
background: rgba(var(--rgb-green),0.1);
{% elif battery_level < '20' %}
--primary-text-color: rgb(var(--rgb-lime));
--secondary-text-color: rgba(var(--rgb-lime),0.5);
background: rgba(var(--rgb-lime),0.1);
{% elif battery_level < '21' %}
--primary-text-color: rgb(var(--rgb-yellow));
--secondary-text-color: rgba(var(--rgb-yellow),0.5);
background: rgba(var(--rgb-yellow),0.1);
{% elif battery_level < '22' %}
--primary-text-color: rgb(var(--rgb-amber));
--secondary-text-color: rgba(var(--rgb-amber),0.5);
background: rgba(var(--rgb-amber),0.1);
{% elif battery_level < '23' %}
--primary-text-color: rgb(var(--rgb-orange));
--secondary-text-color: rgba(var(--rgb-orange),0.5);
background: rgba(var(--rgb-orange),0.1);
{% elif battery_level < '24' %}
--primary-text-color: rgb(var(--rgb-deep-orange));
--secondary-text-color: rgba(var(--rgb-deep-orange),0.5);
background: rgba(var(--rgb-deep-orange),0.1);
{% else %}
--primary-text-color: rgb(var(--rgb-red));
--secondary-text-color: rgba(var(--rgb-red),0.5);
background: rgba(var(--rgb-red),0.1);
{% endif %}
}
- type: custom:mushroom-template-card
entity: input_boolean.testing
primary: Top Left
icon: mdi:mushroom
icon_color: red
badge_icon: mdi:snail
badge_color: teal
secondary: Mushroom
card_mod:
style: |
{% if is_state(config.entity, 'on') %}
mushroom-badge-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
- type: custom:mushroom-template-card
entity: input_boolean.testing
primary: Test
icon: mdi:radiator
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
layout: vertical
secondary: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: clip 1.5s ease-out infinite;' if is_state(config.entity, 'on') }}
}
@keyframes clip {
0% {clip-path: inset(50% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: Pool
icon: none
layout: vertical
entity: sensor.pool_tank_level_percent
icon_color: ''
badge_color: ''
picture: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states('input_number.test_number') | int %}
{% if water_level == 5 %}
background: url("/local/my-icons/water 5.png") no-repeat center;
{% elif water_level == 4 %}
background: url("/local/my-icons/water 4.png") no-repeat center;
{% elif water_level == 3 %}
background: url("/local/my-icons/water 3.png") no-repeat center;
{% elif water_level == 2 %}
background: url("/local/my-icons/water 2.png") no-repeat center;
--shape-animation: low 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% else %}
background: url("/local/my-icons/water 1.png") no-repeat center;
--shape-animation: critical 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% endif %}
background-size: contain;
--shape-color: none;
}
@keyframes critical {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes low {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}'
secondary: Test Number
icon: none
layout: vertical
entity: input_boolean.testing
icon_color: ''
picture: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: url("/local/my-icons/ufh-96.png") no-repeat center;
background-size: contain;
--shape-color: none;
--shape-animation: clip 1.5s ease-out infinite; if is_state(config.entity, 'on');
}
@keyframes clip {
0% {clip-path: inset(60% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_boolean.testing
icon: mdi:solar-power-variant
icon_color: amber
content: ''
tap_action:
action: navigate
navigation_path: energy
card_mod:
style: |
.content {
{{ 'animation: rays 2s infinite;' if is_state(config.entity, 'on') }}
}
@keyframes rays {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(100% 100%, 0% 100%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
}
- type: entity
entity: input_number.test_number
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: blue
tap_action:
action: navigate
navigation_path: home
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:home
- type: back
- type: menu
- type: action
tap_action:
action: navigate
navigation_path: home
icon: mdi:dots-vertical
icon_color: blue
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
icon: mdi:sprinkler
icon_color: light-blue
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
.content {
animation: sprinkle 2s linear infinite;
transform-origin: 29% 88%;
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
icon: '{{ ''mdi:waves'' if is_state(entity, ''on'') else ''mdi:faucet'' }}'
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
badge_icon: '{{ ''mdi:faucet'' if is_state(entity, ''on'') else ''none'' }}'
badge_color: '{{ ''blue'' if is_state(entity, ''on'') else ''none'' }}'
content_info: none
card_mod:
style: |
.content {
{{ 'animation: clip 2s ease-out infinite;' if is_state(config.entity, 'on') }}
}
@keyframes clip {
0% {clip-path: inset(75% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
content_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
picture: /local/my-icons/pool filter-96.png
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
icon: '{{ ''mdi:waterfall'' if is_state(entity, ''on'') else ''mdi:waterfall'' }}'
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
badge_icon: '{{ ''mdi:faucet'' if is_state(entity, ''on'') else ''none'' }}'
badge_color: '{{ ''blue'' if is_state(entity, ''on'') else ''none'' }}'
content_info: none
card_mod:
style: |
.content {
{{ 'animation: clip 1s ease-out infinite;' if is_state(config.entity, 'on') }}
}
@keyframes clip {
0% {clip-path: inset(0 0 80% 0); }
100% { clip-path: inset(0 0 0 0); }
}
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
picture: /local/my-icons/water 5.png
icon: '{{ ''mdi:waves'' if is_state(entity, ''on'') else ''mdi:waves'' }}'
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
badge_icon: '{{ ''mdi:faucet'' if is_state(entity, ''on'') else ''none'' }}'
badge_color: '{{ ''blue'' if is_state(entity, ''on'') else ''none'' }}'
content_info: none
card_mod:
style: |
.avatar {
animation: clip 1.5s ease-out infinite; if is_state(config.entity, 'on');
object-fit: contain !important;
}
@keyframes clip {
0% {clip-path: inset(75% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
- type: template
double_tap_action:
action: none
icon: mdi:calendar-clock
icon_color: green
tap_action:
action: navigate
navigation_path: /lovelace-home/schedule
hold_action:
action: none
content: >-
{%- set x = ['unavailable','unknown'] -%} {%- set d = ['switch'] -%}
{%- set skd = namespace(all=[],tags=[],on=[]) -%} {%- set entities =
states |rejectattr('state', 'in', x)
|selectattr('domain', 'in', d)
|map(attribute='entity_id')
|list -%}
{%- for en in entities |sort -%}
{%- if ("schedule" in states[en].entity_id) -%}
{%- set skd.all = skd.all + [en] -%}
{%- for tg in state_attr(en,'tags') |sort -%}
{%- set skd.tags = skd.tags + [tg] -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%} {%- set skd.tags = skd.tags |unique |list |sort -%} {#
https://community.home-assistant.io/t/counts-the-lights-on/105361/137#:~:text=if%20you%20made%20a%20light%20group%20you%20need%20to%20filter
#} {%- set skdONlist = expand(skd.all) |
selectattr('state','eq','on')
| map(attribute='entity_id')
| list -%}
{%- set skdOFFlist = expand(skd.all) | selectattr('state','eq','off')
| map(attribute='entity_id')
| list -%}
{{ skdONlist |count }} / {{ skd.all |count }}
entity: input_boolean.testing
square: false
columns: 4
type: grid
cards:
- type: custom:mushroom-template-card
primary: '{{ states(''sensor.pool_tank_current_volume'') }}m³ / {{ states(entity) }}%'
secondary: Pool
icon: none
layout: vertical
entity: sensor.pool_tank_level_percent
icon_color: ''
badge_color: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: '--ha-card-background, var(--card-background-color, white)'
content:
type: grid
columns: 1
square: false
cards:
- type: custom:mushroom-title-card
title: Pool Tank
alignment: center
- type: grid
columns: 4
cards:
- type: custom:mushroom-template-card
entity: sensor.pool_tank_level_percent
primary: Percent
secondary: '{{states(config.entity)}} %'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.pool_tank_current_volume
primary: Now
secondary: '{{states(config.entity)}} mᶟ'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.pool_tank_capacity
primary: Capacity
secondary: '{{states(config.entity)}} mᶟ'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.pool_tank_level_number
primary: Level
secondary: '{{states(config.entity)}}'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: grid
columns: 4
cards:
- type: custom:mushroom-template-card
entity: sensor.pool_tank_adc
primary: Now V
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.pool_tank_volt_per_cm
primary: v/cm
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.pool_tank_max_v
primary: Max V
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.pool_tank_current_height
primary: Now H
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.pool_tank_h
primary: Height
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.pool_tank_w
primary: Width
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.pool_tank_l
primary: Length
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states('sensor.pool_tank_level_number') | int %}
{% if water_level == 5 %}
background: url("/local/my-icons/water 5.png") no-repeat center;
{% elif water_level == 4 %}
background: url("/local/my-icons/water 4.png") no-repeat center;
{% elif water_level == 3 %}
background: url("/local/my-icons/water 3.png") no-repeat center;
{% elif water_level == 2 %}
background: url("/local/my-icons/water 2.png") no-repeat center;
--shape-animation: low 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% else %}
background: url("/local/my-icons/water 1.png") no-repeat center;
--shape-animation: critical 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% endif %}
background-size: contain;
--shape-color: none;
}
@keyframes critical {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes low {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
- type: custom:mushroom-template-card
primary: >-
{{ states('sensor.irrigation_tank_current_volume') }}m³ / {{
states(entity) }}%
secondary: Irrigation
icon: none
layout: vertical
entity: sensor.irrigation_tank_level_percent
icon_color: ''
badge_color: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: '--ha-card-background, var(--card-background-color, white)'
content:
type: grid
columns: 1
square: false
cards:
- type: custom:mushroom-title-card
title: Irrigation Tank
alignment: center
- type: grid
columns: 4
cards:
- type: custom:mushroom-template-card
entity: sensor.irrigation_tank_level_percent
primary: Percent
secondary: '{{states(config.entity)}} %'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.irrigation_tank_current_volume
primary: Now
secondary: '{{states(config.entity)}} mᶟ'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.irrigation_tank_capacity
primary: Capacity
secondary: '{{states(config.entity)}} mᶟ'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.irrigation_tank_level_number
primary: Level
secondary: '{{states(config.entity)}}'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: grid
columns: 4
cards:
- type: custom:mushroom-template-card
entity: sensor.irrigation_tank_adc
primary: Now V
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.irrigation_tank_volt_per_cm
primary: v/cm
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.irrigation_tank_max_v
primary: Max V
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.irrigation_tank_current_height
primary: Now H
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.irrigation_tank_h
primary: Height
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.irrigation_tank_w
primary: Width
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.irrigation_tank_l
primary: Length
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states('sensor.irrigation_tank_level_number') | int %}
{% if water_level == 5 %}
background: url("/local/my-icons/water 5.png") no-repeat center;
{% elif water_level == 4 %}
background: url("/local/my-icons/water 4.png") no-repeat center;
{% elif water_level == 3 %}
background: url("/local/my-icons/water 3.png") no-repeat center;
{% elif water_level == 2 %}
background: url("/local/my-icons/water 2.png") no-repeat center;
--shape-animation: low 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% else %}
background: url("/local/my-icons/water 1.png") no-repeat center;
--shape-animation: critical 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% endif %}
background-size: contain;
--shape-color: none;
}
@keyframes critical {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes low {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
- type: custom:mushroom-template-card
primary: '{{ states(''sensor.main_tank_current_volume'') }}m³ / {{ states(entity) }}%'
secondary: Main
icon: none
layout: vertical
entity: sensor.main_tank_level_percent
icon_color: ''
badge_color: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: '--ha-card-background, var(--card-background-color, white)'
content:
type: grid
columns: 1
square: false
cards:
- type: custom:mushroom-title-card
title: Main Tank
alignment: center
- type: grid
columns: 4
cards:
- type: custom:mushroom-template-card
entity: sensor.main_tank_level_percent
primary: Percent
secondary: '{{states(config.entity)}} %'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.main_tank_current_volume
primary: Now
secondary: '{{states(config.entity)}} mᶟ'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.main_tank_capacity
primary: Capacity
secondary: '{{states(config.entity)}} mᶟ'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.main_tank_level_number
primary: Level
secondary: '{{states(config.entity)}}'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: grid
columns: 4
cards:
- type: custom:mushroom-template-card
entity: sensor.main_tank_adc
primary: Now V
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.main_tank_volt_per_cm
primary: v/cm
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.main_tank_max_v
primary: Max V
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.main_tank_current_height
primary: Now H
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.main_tank_h
primary: Height
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.main_tank_w
primary: Width
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.main_tank_l
primary: Length
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states('sensor.main_tank_level_number') | int %}
{% if water_level == 5 %}
background: url("/local/my-icons/water 5.png") no-repeat center;
{% elif water_level == 4 %}
background: url("/local/my-icons/water 4.png") no-repeat center;
{% elif water_level == 3 %}
background: url("/local/my-icons/water 3.png") no-repeat center;
{% elif water_level == 2 %}
background: url("/local/my-icons/water 2.png") no-repeat center;
--shape-animation: low 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% else %}
background: url("/local/my-icons/water 1.png") no-repeat center;
--shape-animation: critical 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% endif %}
background-size: contain;
--shape-color: none;
}
@keyframes critical {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes low {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
- type: custom:mushroom-template-card
primary: >-
{{ states('sensor.diesel_tank_current_volume') }}m³ / {{ states(entity)
}}%
secondary: Diesel
icon: none
layout: vertical
entity: sensor.diesel_tank_level_percent
icon_color: ''
badge_color: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: '--ha-card-background, var(--card-background-color, white)'
content:
type: grid
columns: 1
square: false
cards:
- type: custom:mushroom-title-card
title: Diesel Tank
alignment: center
- type: grid
columns: 4
cards:
- type: custom:mushroom-template-card
entity: sensor.diesel_tank_level_percent
primary: Percent
secondary: '{{states(config.entity)}} %'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.diesel_tank_current_volume
primary: Now
secondary: '{{states(config.entity)}} mᶟ'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.diesel_tank_capacity
primary: Capacity
secondary: '{{states(config.entity)}} mᶟ'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.diesel_tank_level_number
primary: Level
secondary: '{{states(config.entity)}}'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: grid
columns: 4
cards:
- type: custom:mushroom-template-card
entity: sensor.diesel_tank_adc
primary: Now V
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.diesel_tank_volt_per_cm
primary: v/cm
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.diesel_tank_max_v
primary: Max V
secondary: '{{states(config.entity)}} v'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: sensor.diesel_tank_current_height
primary: Now H
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.diesel_tank_h
primary: Height
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.diesel_tank_w
primary: Width
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: input_number.diesel_tank_l
primary: Length
secondary: '{{states(config.entity)}} m'
layout: vertical
card_mod:
style: |
ha-card {
background-color: transparent;
}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states('sensor.diesel_tank_level_number') | int %}
{% if water_level == 5 %}
background: url("/local/my-icons/diesel 5.png") no-repeat center;
{% elif water_level == 4 %}
background: url("/local/my-icons/diesel 4.png") no-repeat center;
{% elif water_level == 3 %}
background: url("/local/my-icons/diesel 3.png") no-repeat center;
{% elif water_level == 2 %}
background: url("/local/my-icons/diesel 2.png") no-repeat center;
--shape-animation: low 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% else %}
background: url("/local/my-icons/diesel 1.png") no-repeat center;
--shape-animation: critical 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% endif %}
background-size: contain;
--shape-color: none;
}
@keyframes critical {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes low {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
view_layout:
grid-area: h2