How to graphically represent gas bottle contents

[ashscott (Ash)]

I have this graphic on my front end that shows the contents of LPG gas bottles and which bank is in use.

I was using six images to show content based on rough consumption calculations.

I now have a 0-100% sensor, the value of which I’d like to use to show the bottles emptying over time.

Essentially, I suppose this amounts to a custom gauge with a coloured rectangle that increases in height with the sensor value. I can mask the rectangle to get the shape.

I can handle the graphics, but I need help creating the gauge without resorting to 100 images.

Is it possible to create such a thing?

Where can I start?

[LiQuid_cOOled (Not really a...)]

Did you give up on this thread?

Solutions for LPG tank monitoring

So, just switched from hot water tank to GAS heating using LPG bottles, and am now looking for a reliable solution for measuring the bottle levels. As I understand, the best solution for this will be using “scales” and weighing the bottles? Has anyone done this and are there any other methods to doing this? I am looking at getting 8 of these 50kg Load Cells, Load Cell Weighing Sensor | ePartners NZ Just not sure if this will actually be a reliable solution based on the price of these load ce…

[ashscott (Ash)]

Quite the opposite. It’s having this in place that’s made the sensor available for me to develop the graphic.

Previously, I was calculating the contents from the manufacturer’s consumption figure, generator load and run time to estimate bottle contents.

Now, with weighing, I accurately know the contents.

[LiQuid_cOOled (Not really a...)]

Its definitely doable without having to use of any images. The iif statements( updates made iif obsolete) in the code need updated, but that’s an easy change.

Propane Tank monitoring

I use the Mopeka monitoring system with their WiFi bridge and found it to be a solid addition to my HA. I built a custom:button-card where the color and gas level are reflected in the icon. [chrome-capture-2024-4-14 (1)] Card code type: custom:button-card entity: sensor.propane_2 show_state: false show_name: false size: 4em custom_fields: pct: card: type: custom:button-card entity: sensor.propane_2 name: Grill Propane tap_action: none show_state: true …

Another method that could be applied…

Dynamic colour mask on picture element

Hi All, Currently working on a EV charging/vehicle dashboard and i’m a bit stuck trying to create a visual that shows the amount of charge the car has remaining. Ideally I would like it similar to that of the native car app as it looks clean and does a good job of showing how much charge is left at a glance. In a nutshell, the native app has a transparent image of the vehicle, then for each percentage of charge, it shades the car in with green. So for 10% charge left, 10 percent of the vehicle…

Can you share your current card code?

[Ildar_Gabdullin]

Also this great card:

Fluid Level (Animated) Background Card [original]

Tired of boring, static backgrounds in your Home Assistant Lovelace UI? Want to add a touch of dynamism and visual interest? Introducing the lovelace-fluid-level-background-card, a custom card that renders a mesmerizing animated fluid level behind any other card in your Lovelace UI. This card is perfect for: Visualizing sensor data in a captivating way, like water tank levels or battery gauges. Creating unique and eye-catching dashboards. Adding a touch of personality to your Home Assistant…

[ashscott (Ash)]

Here’s the current card, as requested.

type: vertical-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: input_boolean.right_bottle_test
        name: Right
        tap_action:
          action: toggle
        content_info: name
      - type: entity
        entity: input_boolean.left_bottle_test
        tap_action:
          action: toggle
        content_info: name
        name: Left
      - type: entity
        entity: input_boolean.lpg_valve_status_test
        name: Valve
        tap_action:
          action: toggle
        content_info: name
    alignment: center
  - type: picture-elements
    image: /local/images/lpg_bottles/background-dark.png
    elements:
      - type: image
        entity: sensor.lpg_bottle_in_use_level
        style:
          left: 50%
          top: 50%
          width: 100%
        state_image:
          Bothfull: /local/images/lpg_bottles/4_full.png
          Right75: /local/images/lpg_bottles/right-75.png
          Right50: /local/images/lpg_bottles/right-50.png
          Right25: /local/images/lpg_bottles/right-25.png
          Rightempty: /local/images/lpg_bottles/left-full.png
          Leftfull: /local/images/lpg_bottles/left-full.png
          Left75: /local/images/lpg_bottles/left-75.png
          Left50: /local/images/lpg_bottles/left-50.png
          Left25: /local/images/lpg_bottles/left-25.png
          Leftempty: /local/images/lpg_bottles/right-full.png
      - type: image
        entity: sensor.lpg_bottle_in_use
        style:
          left: 50%
          top: 50%
          width: 100%
        state_image:
          Right: /local/images/lpg_bottles/right_in_use.png?v=2
          Left: /local/images/lpg_bottles/left_in_use.png?v=2
          Both: /local/images/lpg_bottles/both_in_use.png
      - type: image
        entity: sensor.lpg_valve_changeover_sensor
        style:
          left: 50%
          top: 50%
          width: 100%
        state_image:
          rightempty: /local/images/lpg_bottles/right_arrow.png
          leftempty: /local/images/lpg_bottles/left_arrow.png
          bothfull: /local/images/lpg_bottles/bothfull.png
      - type: image
        entity: input_select.generator_engine_state
        style:
          left: 50%
          top: 50%
          width: 100%
        state_image:
          Running: /local/images/lpg_bottles/feed-arrow.png
          Ready: /local/images/lpg_bottles/nofeed-arrow.png
          Exercising: /local/images/lpg_bottles/nofeed-arrow.png
          Cranking: /local/images/lpg_bottles/nofeed-arrow.png
      - type: state-label
        entity: sensor.available_run_days_based_on_last_outage_consumption
        title: Days remaining
        prefix: "Days remaining: "
        hold_action:
          action: more-info
        style:
          top: 97%
          left: 52%
          font-size: 15px
  - type: entities
    entities:
      - entity: sensor.left_lpg_bottle_level
      - entity: sensor.right_lpg_bottle_level
      - entity: sensor.lpg_bottle_in_use
      - entity: sensor.combined_lpg_bottle_levels
      - entity: sensor.lpg_bottle_in_use_level
      - entity: sensor.lpg_valve_changeover_sensor
      - entity: sensor.generator_estimated_fuel_in_tank

[ashscott (Ash)]

This is excellent. I’ll have a goat adapting it. Thank you.