Customizable Animated Bar card for Home Assistant Lovelace
Branch: master
Clone or download
Gluwc 0.0.5
added indicator option
Latest commit 3798bfa Jan 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images Create speed_delay.gif Dec 28, 2018
.gitattributes Initial commit Dec 28, 2018
README.md 0.0.5 Jan 25, 2019
bar-card.js 0.0.5 Jan 25, 2019

README.md

bar-card

Description

Bar Card is a customizable animated card for the Home Assistant Lovelace front-end.

Features

  • Automatic animation mode. Starts animating based on value increase or decrease.
  • Charge based animation mode. Will show increase based on custom entity state.
  • Customizable animation speed and delay.

Options

Name Type Default Description
type string Required custom:bar-card
entity string Required Entity State
title string none Title displayed next to the bar.
title_position string left Position of the title. left,right, inside
animation string auto Sets the mode of animation auto, charge, off.
indicator string auto Sets position off the indicator auto,left,right,off
hue number 220 Changed the color hue of the bar 0-360.
saturation string 50% Scales saturation of the bar.
height string 40px Scales the height of the bar.
width string 70% Scales the width of the bar.
min number 0 The minimum entity value to be displayed.
max number 100 The maximum entity value to be displayed.
speed number 2500 The speed of the bar animation in milliseconds.
delay number 7500 The amout of time between the bar animation loop in milliseconds.
from string left Direction of the bar. left,right
severity object none A list of severity values.
card_style object none A list of CSS styles applied to the card background.
bar_style object none A list of CSS styles applied to the bar.
title_style object none A list of CCS styles applied to the title.
indicator_style object none A list of CCS styles applied to the indicator.
charge_entity string none Charge enitity, required when using charge animation mode. States can be on/off, true/false, charging/discharging

Default

- type: custom:bar-card
  title: Default
  entity: sensor.default

Severity

- type: custom:bar-card
  title: Severity
  entity: sensor.default
  severity:
  - value: 25
    hue: '0'
  - value: 50
    hue: '40'
  - value: 100
    hue: '120'

Hue

- type: custom:bar-card
  title: Default
  entity: sensor.default
  hue: 300

Speed & Delay

- type: custom:bar-card
  title: Default
  entity: sensor.default
  speed: 5000
  delay: 10000

Credits

Based on Big Number Card by ciotlosm.

Links

Home Assistant Community Topic