0.1.9

* removed `charge` config option from `animation` config, is now based on `charge_entity`
* added `background_style` config option

README.md

@@ -28,7 +28,7 @@ Bar Card is a customizable animated card for the Home Assistant Lovelace front-e
 | show_icon | boolean | false | Defines if icon should be shown.
 | icon | string | icon | Defines icon to be displayed. If no icon is defined entity icon attribute will be used. 
 | align | string | center | Defines the alignment of text and icon inside the bar. `left`,`right`,`top`,`bottom`,`split`,`center-split`,`left-split`,`right-split`,`top-split`,`bottom-split`
-| animation | string | auto | Defines the mode of animation `auto`, `charge`, `off`.
+| animation | string | on | Defines the mode of animation `auto`, `off`.
 | indicator | string | auto | Defines position off the indicator `auto`,`auto-vertical`,`left`,`right`,`top`,`bottom`,`off`
 | height | string | 40px | Scales the height of the bar.
 | width | string | 70% | Scales the width of the bar.
@@ -40,11 +40,13 @@ Bar Card is a customizable animated card for the Home Assistant Lovelace front-e
 | delay | number| 7500 | The amout of time between the bar animation loop in milliseconds.
 | direction | string | right | Direction of the bar. `left`,`right`,`up`,`down`,`left-reverse`,`right-reverse`,`up-reverse`,`down-reverse`
 | severity | object | none | A list of severity values.
+| charge_entity | string | none | Defines entity to be used as animation trigger, animation will be based on this entity's state. Entity states can be `on`/`off`, `true`/`false`, `charging`/`discharging`
 | card_style | object | none | A list of CSS styles applied to the card background.
 | icon_style | object| none | A list of CSS styles applied to the icon.
 | title_style | object | none | A list of CSS styles applied to the title.
 | value_style | object | none | A list of CSS styles applied to the entity value.
-| charge_entity | string | none | Charge enitity, **required** when using charge animation mode. States can be `on`/`off`, `true`/`false`, `charging`/`discharging`
+| background_style | object | none | A list of CSS styles applied to the bar background.
+
 
 ## Installation
 

bar-card.js

@@ -29,6 +29,7 @@ class BarCard extends HTMLElement {
     if (!config.icon_style) config.icon_style = false
     if (!config.title_style) config.title_style = false
     if (!config.value_style) config.value_style = false
+    if (!config.background_style) config.background_style = false
 
     // Check entity types
     let updateArray
@@ -246,6 +247,7 @@ class BarCard extends HTMLElement {
     if (config.value_style !== false) var valueStyle = this._customStyle(config.value_style)
     if (config.title_style !== false) var titleStyle = this._customStyle(config.title_style)
     if (config.icon_style !== false) var iconStyle = this._customStyle(config.icon_style)
+    if (config.background_style !== false) var backgroundStyle = this._customStyle(config.background_style)
 
     // Sets position of the titleBar
     let titleAlign
@@ -473,6 +475,7 @@ class BarCard extends HTMLElement {
         background: var(--bar-color);
         filter: brightness(0.5);
         opacity: 0.25;
+        ${backgroundStyle}
       }
       #bar_${id} {
         background: linear-gradient(to ${barFrom}, var(--bar-color) var(--bar-percent), #0000 var(--bar-percent), #0000 var(--bar-percent));
@@ -958,7 +961,7 @@ class BarCard extends HTMLElement {
     } 
 
     // Animation is charge
-    if (config.animation == 'charge') {
+    if (config.charge_entity !== false) {
       if (!this._currentChargeState) this._currentChargeState = {}
       if (this._currentChargeState[id] !== chargeEntityState || entityState !== this._entityState[id]) {
         const barColor = this._calculateBarColor(config, entityState)