Custom "tank-card" for testing

The Tank-Card I developed was originally designed for my heating oil tank (since I couldn’t find anything like it before), but it can also be easily adapted for other liquids such as diesel, water, or other media. It uses a consumption sensor to display the current fill level and consumption in a clear manner. The card is customizable in terms of colors and layout, providing a quick overview at any time.

I would appreciate any feedback!

Greetz Jinx

Link:

Screenshot in readme file

3 Likes

Tank Card – Tank Fill Visualization - UPDATE

add visual Editor and more!

Version: 0.3.0 - What is NEW in this version → Changelog


Description: A Home Assistant custom card to visualize tank fill levels, total capacity, and consumption using either consumption sensors or fill level sensors.
Ideal for heating oil, water, diesel, gas, pellets, wood chips, or other bulk materials.

Note:
Fill levels are calculated consistently based on the configured sensor mode:

  • Consumption sensor: initial_fill - consumption
  • Fill level sensor (L / kg / m³): absolute value
  • Fill level sensor (%): percentage of initial_fill

Units and display behavior are fully configurable.

What does this card do?

Depending on configuration, this custom card displays:

  • One or multiple tanks with individual names
  • Current fill level per tank
  • System-wide fill level in absolute values and percent
  • Total capacity and calculated consumption
  • Support for liquids and bulk materials (e.g. pellets, wood chips)
  • Color- and pattern-based fill visualization by material type
  • Responsive layout for desktop and mobile dashboards

Tank Visualization

  • Visual representation of one or more tanks
  • Fill level displayed per tank and system-wide
  • Material-specific colors and patterns

Supported Materials

  • Heating oil
  • Water
  • Diesel
  • Gas
  • Pellets (<-NEW)
  • Wood chips (<-NEW)
  • Custom colors

Units

  • Liters (L)
  • Kilograms (kg)
  • Cubic meters ()

Sensor Support

  • Consumption sensor
  • Fill level sensor (absolute value)
  • Fill level sensor (percentage)
  • Sensor mode selectable via visual editor or YAML

Visual Editor

  • Integrated Home Assistant visual editor
  • Dynamic schema based on selected sensor mode

Layout & Display Options

  • Adjustable tank shapes (rectangle, capsule, pool)
  • Show or hide values per tank
  • Configurable background and styling
  • Responsive layout

Manual Installation

  1. Copy tank-card.js to /config/www/
  2. In Home Assistant:
  • Settings
  • Dashboards
  • Three-dot menu
  • Resources
  • Add Resource
  • URL: /local/tank-card.js
    Type: JavaScript Module
  1. Reload the browser (CTRL + F5)

The card is now available in the card picker.

Screenshot: