📊 Piotras Value Bar

Share your Projects! Dashboards & Frontend
, , ,
1

:bar_chart: Piotras Value Bar

Clean and modern sensor value bars with color gradients, scale labels, and alarm indicators.
Designed for readability and flexibility — supports 3 bar orientations and 3 name/value layout modes.

a1
a11485×256 98.8 KB

a2
a21499×255 97.7 KB

a3
a31486×368 70.4 KB

a4
a41483×314 135 KB

3 bar orientations (layout):

  • Horizontal stepped — sharp color zones, ideal for battery levels and percentages
  • Horizontal smooth — gradual color transition, ideal for temperature and continuous metrics
  • Vertical — side-by-side columns with a shared scale, great for comparing multiple sensors at a glance

3 name/value placement modes (card_layout):

  • Classic row — device name on the left, bar in the center, value on the right
  • Name + value above bar — compact layout ideal for narrow columns
  • Value inside bar — value rendered directly on the bar, works best with a taller bar

Key features:

  • Fully customizable color gradient — up to 13 colors per bar, stepped or smooth
  • Independent min/max range per device — mix units freely (%, °C, W, kWh)
  • Scale labels below each bar (horizontal) or on a shared left column (vertical)
  • Alarm indicators — animated arrows appear when a value crosses alarm_min or alarm_max
  • White pin marker shows current value position, or switch to progress fill mode
  • Click any row to open the entity detail in Home Assistant
  • Responsive — automatically adapts to card width
  • Horizontal Scroll Navigation

Visual Editor: Full GUI editor — add devices, set color gradients, adjust fonts and layout without touching YAML.

:gear: Installation

Method 1: Via HACS (Recommended)

  1. Click the button below to automatically add the repository to your HACS:
Open your Home Assistant instance
  1. Click Add in the pop-up window.
  2. Once the repository page opens, click Download.
  3. After downloading, do a Hard reload of your browser.

Method 2: Manual Installation

  1. Download this repository as a ZIP file and extract it.
  2. Inside your Home Assistant config/www/ directory, create a new folder named piotras-value-bar.
  3. Copy the compiled files (from dist/ folder) into config/www/piotras-value-bar/.
  4. Go to Settings → Dashboards → Resources.
  5. Click Add Resource and enter:
/local/piotras-value-bar/piotras-value-bar-loader.js?v=1.1.0
  • Resource type: JavaScript Module
  1. Hard reload your browser (Ctrl+Shift+R).
7 Likes
2

Release v1.2.0

New Features:

  • max field now accepts a Home Assistant entity ID in addition to a fixed number — the bar scale updates dynamically from the entity’s current state
  • Fallback to 100 when entity does not exist or returns an invalid value

Editor fixes:

  • max field in device editor changed from number-only input to text field — accepts both numbers and entity IDs
  • Added tip explaining dynamic max usage directly in the editor
  • Fixed show_shadow and alarm_on toggles showing incorrect default state in the editor
  • Fixed label_font_size default value in editor (was 9, now correctly 0)
  • Fixed Divisions (label_mode) selector now shown for Layout 2 as well as Layout 3

:zap: Dynamic max — Entity as Scale Reference

Zrzut ekranu (1256)a
Zrzut ekranu (1256)a1068×473 123 KB

type: custom:piotras-value-bar
header: "POWER — REAL TIME"
layout: 2
card_layout: 1
bar_height: 14
show_indicator: true
show_label: true
label_font_size: 9
devices:
  - entity: sensor.power_total
    name: "Total"
    min: 0
    max: 5500
    unit: "W"
    colors: "1,2,3,4,5,5"
  - entity: sensor.power_office
    name: "Office PC"
    min: 0
    max: sensor.power_total
    unit: "W"
    colors: "1,2,3,4,5,5"
  - entity: sensor.power_tv
    name: "TV"
    min: 0
    max: sensor.power_total
    unit: "W"
    colors: "1,2,3,4,5,5"
  - entity: sensor.power_fridge
    name: "Fridge"
    min: 0
    max: sensor.power_total
    unit: "W"
    colors: "1,2,3,4,5,5"

Zrzut ekranu (1258)
Zrzut ekranu (1258)1071×482 122 KB

type: custom:piotras-value-bar
header: "ENERGY — TODAY kWh"
layout: 2
card_layout: 1
bar_height: 14
show_indicator: true
show_label: true
label_font_size: 9
devices:
  - entity: sensor.energy_total_today_kwh
    name: "Total"
    min: 0
    max: sensor.energy_total_today_kwh
    unit: "kWh"
    precision: 2
    colors: "1,2,3,4,5,5"
  - entity: sensor.energy_office_today_kwh
    name: "Office PC"
    min: 0
    max: sensor.energy_total_today_kwh
    unit: "kWh"
    precision: 2
    colors: "1,2,3,4,5,5"
  - entity: sensor.energy_fridge_today_kwh
    name: "Fridge"
    min: 0
    max: sensor.energy_total_today_kwh
    unit: "kWh"
    precision: 2
    colors: "1,2,3,4,5,5"