Card to visualize water level

I’m looking for some way to include a water level indicator in home assistant. My use case is for a moisture level in my plants but it could be used for anything relating to water level. My thought was to have a circular icon that has a horizontal blue water line that goes from 100% (filled to the top) to 0% not filled at all. I’ve been searching and haven’t found anything like this. Basically it’s the gauge card but styled differently.

I’m hoping someone might have seen something like this or have some idea on how I can create it myself. I’ve created a visual example below.

Thanks!

1 Like

You can use a template to change the icon depending on the % of the sensor. You’d just need to find an icon to match each state. You can use different icons too not just one that are in the same series as pictured. Then use a button card with just the entity and it will give you large icon in lovelace.

Screenshot 2021-03-20 045454

https://pictogrammers.github.io/@mdi/font/5.5.55/

Thanks @Mikefila, I’ll play around with this and see how it turns out.

Here is an example of what @Mikefila is elluding to. My battery sensor changes the icon based on the percentage and also switches between normal and charging statuses (maybe you want to show your tank is filling).

    home_assistant_server_battery_status:
      friendly_name: "Home Assistant Server Battery Status"
      device_class: battery
      value_template: >-
        {{ state_attr('sensor.home_assistant_server_battery', 'status') }}
      icon_template: >-
        {% set state = states('sensor.home_assistant_server_battery') | int %}
        {% set charging = "-charging" if states('sensor.home_assistant_server_battery_status') == "Charging" else "" %}
        {% set suffix = (state // 10) * 10 %}
        {# empty #}
        {% if suffix == 0 %}
          mdi:battery{{ charging }}-outline
        {# full #}
        {% elif suffix == 100 %}
          {# choose the right full battery #}
          {% if charging != "" %}
            mdi:battery-charging-100
          {% else %}
            mdi:battery
          {% endif %}
        {# everything in between #}
        {% else %}
          mdi:battery{{ charging }}-{{ suffix }}
        {% endif %}

When you display this in Lovelace you can use card-mod to colour the icons based on the state (say red for low).

I can’t give you a quick example or recall one but I guess you’ll be able to do something with the powerful custom button card and some CSS trickery if you want something more visual and colourful.

4 Likes

Water hardware do you use for the water level?

@PW43575 Right now I’m using Ecowitt WH51 sensors, they communicate on 433hz, I have 10 at the moment and just purchased 10 more to cover sections of my front/back yard and indoor plants.

I’m working on a dashboard for my wife that shows watering/species/light info for the indoor plants. The sensor data will also be used to automate part of my sprinkler system when my home is finished being built.

The cold reality though is i’m $200-$300 deep into sensors for my plants, it’s an addiction :joy: .

The Ecowitt sensors are for Moisture or “Humidity” in home assistant, so they aren’t actually monitoring water level.

I would like to find something that does monitor water level though, it would be great for a pool water level checker, dog/cat water dish etc…

1 Like

Old post I know, but for anyone else this is what I did.

I have a water level sensor ‘sensor.watertank_adc’ measuring 0V (empty) to 6.5V (full) and any voltage in between.

Created a Helper template sensor ‘sensor.watertankvolume’ with YAML as follows:

{{ ((states('sensor.watertank_adc') | int / 6.5 ) * 100) | round }}

Installed the ‘Bar Card’ frontend via HACS. Then used a bar graph to visualise the water tank volume

type: custom:bar-card
direction: up
width: 140px
height: 200px
positions:
  icon: 'off'
  name: outside
  indicator: 'off'
entities:
  - entity: sensor.watertankvolume
entity_row: true

Looks as close to a water in a tank as I’ll get :slight_smile:

image

You can get even closer if you really want: GitHub - swingerman/lovelace-fluid-level-background-card: This card wraps any other cards and renders a fluid background behind them.

A post with an example using that card:

1 Like

oooh, that’s cool cheers!

doesnt appear to support width though?

image