Card for showing Liquids (fluid-level-background-card)

I just wanted to share a card that isn’t talked about very much. If you need to visualize a liquid level you can use a bar card, but this looks so much nicer in my opinion. The developer is active and constantly making updates and even taking suggestions and adding them when possible. In the past week it was suggested to update the color to allow RGBA (basically allow opacity). It opens up the ability to make some even more amazing cards. Here is an example from my dashboard for my Aquarium so I can monitor the levels of the things I dose.


Recording2024-08-10175846-ezgif.com-video-to-gif-converter

The animation with the card is much smoother and…fluid ( :sunglasses: ) also it does not ‘reset’ like in the gif.

The basic fluid in a bar card is simple, but took me some times to get it lined up to the image. I’m sure there is a simpler way, but below is how I did it. Also, had to add callouts for the different resolutions to get them to line up for my phone, table, or PC.

Code for simple bar card style.
basic

type: custom:fluid-level-background-card
entity: sensor.doser1_container_percentage
card_mod:
  style: |
    ha-card {
      --ha-card-header-font-size: 12px;
      text-align: center;
    }
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    dismissable: true
    autoclose: false
    data:
      content:
        type: entities
        entities:
          - entity: input_number.reefdoser1_pump1_millilitres_total
            name: Refill Volume
            icon: mdi:hydraulic-oil-level
          - entity: script.doser1_refill
            name: Refill
            secondary_info: none
          - entity: sensor.doser1
            icon: kuf:time_graph
            name: Remaining
level_color:
  - 0
  - 0
  - 255
card:
  type: custom:bar-card
  title: Pump 1
  color: rgb(0,0,0,0)
  direction: up
  decimal: 0
  height: 70px
  positions:
    icon: 'off'
    name: 'off'
  entities:
    - entity: sensor.doser1_container_percentage
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          dismissable: true
          autoclose: false
          data:
            content:
              type: entities
              entities:
                - entity: input_number.reefdoser1_pump1_millilitres_total
                  name: Refill Volume
                  icon: mdi:hydraulic-oil-level
                - entity: script.doser1_refill
                  name: Refill
                  secondary_info: none
                - entity: sensor.doser1
                  icon: kuf:time_graph
                  name: Remaining

Code for the examples at the top are a lot more in depth. Especially for me since I can’t code, can read it for the most part, but not ‘speak’ it. I did use a lot of AI, which I realized is not as good as you would think. There were times I had to fix the code once it could get some what close enough. I’m sure there are better an easier ways to accomplish what I did below, but I’m just starting to try to learn JS in my free time.

Side note, just got this working, and still ironing out some of the alignment, so for my S9 FE Tab and PC(4K res) they line up. Still tweaking some stuff on my PC

type: picture-elements
image: /local/cylinder3.png
card_mod:
  style:
    hui-image $: |
      img {
        z-index: 1 !important;
        position: relative !important;
        right: 0px;
        top: 0px;
        width: 100% !important;
        opacity: 1
      }
elements:
  - type: custom:fluid-level-background-card
    entity: sensor.doser1_container_percentage
    style:
      z-index: 1
    card_mod:
      style: |
        ha-card {
          text-align: center;
          --ha-card-border-color: #ff000000 !important;
        }  
        #container, .container {
          width: 110px !important;
          height: 180px !important;
          position: relative !important;
          transform: translate(220%, -75%);
          opacity: 0.8;
        }
        @media (max-width: 600px) {
          #container, .container {
            width: 42px !important;
            height: 72px !important;
            transform: translate(225%, -74%);
          }
        }
        @media (min-width: 601px) and (max-width: 900px) {
          #container, .container {
            width: 85px !important;
            height: 150px !important;
            transform: translate(211%, -70%);
          }
        }
        @media (min-width: 901px) and (max-width: 1440px) {
          #container, .container {
            width: 52px !important;
            height: 82px !important;
            transform: translate(220%, -74%);
            }
        }
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        dismissable: true
        autoclose: false
        data:
          content:
            type: entities
            entities:
              - entity: input_number.reefdoser1_pump1_millilitres_total
                name: Refill Volume
                icon: mdi:hydraulic-oil-level
              - entity: script.doser1_refill
                name: Refill
                secondary_info: none
              - entity: sensor.doser1
                icon: kuf:time_graph
                name: Remaining
    level_color: rgba(0,0,255,1)
    card:
      type: custom:card-templater
      card:
        type: entities
        entity: sensor.doser1_container_percentage
        title_template: '{{states(''sensor.doser1_container_percentage'')|round(0)}}% '
        show_header_toggle: false
        show_name: true
        card:
          type: custom:bar-card
          color: rgba(0,0,0,1)
        position:
          value: 'off'
        card_mod:
          style: |
            ha-card {
             --ha-card-header-font-size: 11px;
               height: 225px !important;

            }
            .card-header {
             justify-content: center !important;
            }
            .name {
             overflow: unset !important;
            }

Any questions, I’ll attempt to help the best I can.

Here is the github for the card
https://github.com/swingerman/lovelace-fluid-level-background-card

Thanks to @swingerman for this awesome card.

3 Likes

Guess it would help to provide all the behind the scenes code too…

popup

Configuration.yaml…

input_number:
    reefdoser1_pump1_millilitres_total:
    name: Doser 1 Container Volume
    min: 0
    max: 5000
    step: 100
    mode: box
    unit_of_measurement: ml

Script for refill

alias: Doser1 Refill
sequence:
  - data: {}
    target:
      entity_id: sensor.doser1ml_noreset
    action: measureit.reset
  - metadata: {}
    data:
      message: Doser 1 Refilled
    action: browser_mod.notification
mode: single
icon: mdi:water-plus

Lastly, I use Measureit to create the sensor. I don’t think this integration is required, but during my trial and error I had used it for something else, and in the end I’ll just leave it. It could come in handy later on. This coming week I’ll be upgrading from an RPI4 4g to a mini-pc(n97 16gb, yada yada) as I plan to start working on full smart-home integration.

Oh, wow!!! I think people would appreciate having the jar image too.

Wow,
that is really cool.
I built and installed USW distance meter in order to measure level and calculate volume of heating fuel left in my tank.
This wll be nice visualisation.
Thanks a lot.

That’s an outstanding graphic and fantastic animation! I might use this for my humidifiers for water level.

Good point!

cylinder3

Appreciate any mentioning this great card.
I am following this repo for a few months, good job.

1 Like

I have saw your post on the Github as well. I have been using it for a few months, but now that I’m getting everything working, I’m trying to polish and tweak for greater functionality and eye candy. I know when I first found the card, there was not a lot of info on it here in the forums and it didn’t have it’s own discussion post like most cards do. So I wanted to highlight it and show off it’s capabilities from someone who struggles outside of YAML :rofl: The developer has definitely worked hard on it and is great about supporting it and it’s users.

Hoping this will help shine a line on it and more people start using it and people way smarter than me can really make it shine.

1 Like

I would be happy if you create a new thread in “Share your projects” dedicated to this card. And you may post your nice example card there. Shame that this great card does not have it’s dedicated thread yet.
If you create this thread - please post a link to it here.
Btw, developer lives in Odessa - and I can imagine how it is there now during the war.

Thanks, @Ftown1404, for using and sharing my card. I am amazed at what you did with it.

2 Likes

You made it all possible, so thank you! Would love for an official post from you showcasing your card. That way everyone can show off, ask for help, etc. like most other cards. This card definetly deserves for you to show off.

Oh I like this for my sump pump well.

As I said - YOU may create this thread, call it “xxxxx card”, add a link to GitHub to the 1st post, then your example as the 2nd post.

No, I got what you said. My reply was to swingerman, the creator.