Water Tank Level - Dynamic Icons

[RASBR (Rami)]

Hi,
I read another topic (here) for the same need with different implementation.

Main System: KNX
Home Assistant: Supervised running on Docker on Synology NAS
Sensor: Water pressure sensor connected to Shelly Uni
HA integration setup: Shelly Uni as described in this video

Need to:
Read and store Main tank ADC voltage in a variable to be able to:
1- Send value to KNX
2- Show the appropriate icon and hide the rest to display the correct level
3- Be able to trigger notifications and automations based on the level
4- Open and close the Tuya Valve to fill in the tank as needed

I can’t figure where to start (script, helper, trigger) and how to store the value.

I really appreciate some directions and assistance. Thanks in advance

[GlennHA (Glenn)]

I think a simple way (if you already have a MQTT broker) would be have the Shelly utilize MQTT and then your value is stored.

The Shelly Integration might also pull this info in also.
There is also a KNX integration into HA this might be better for your needs. I have no experience with KNX so can’t help you there.
I didn’t see any HA in the video.

[RASBR (Rami)]

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

[farmio (Matthias Alphart)]

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)

Automation Trigger

The output (water level indicator) could write to a template or directly set a knx number

KNX

PS: You can run an MQTT broker as HA addon.

[RASBR (Rami)]

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

[RASBR (Rami)]

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 %}

[RASBR (Rami)]

Although somehow late, but below what have been achieved in regards to the Water / Tank Level matter since:

BIG THANKS TO:

• All members of this community for sharing their thoughts, code and ideas.
• @xenophobentx for the Filter code IMPORTANT for DB size control

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

[RASBR (Rami)]

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

[xenophobentx]

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?

[xenophobentx]

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?

[RASBR (Rami)]

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

[xenophobentx]

ahh got it, i missed that the pressure sensor is created for different ranges, perfect. Ordered one! Thank you for your work!

[xenophobentx]

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.

[RASBR (Rami)]

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

[xenophobentx]

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!

[RASBR (Rami)]

This is really helpful… I am the first to benefit and remove a couple of points of my ‘Fine Tuning’ phase.

Thanks…

[GregEdge]

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.

[GregEdge]

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.

[RASBR (Rami)]

Hi,
Check this post

[GregEdge]

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.