0.1.3

* removed `bar_style` config option * removed `indicator_style` config option * added `icon_style` config option * added `value_style` config option * fix for min/max value indicator update
custom-cards · Mar 25, 2019 · 2250bb1 · 2250bb1
1 parent 50a16cd
commit 2250bb1
Show file tree

Hide file tree

Showing 3 changed files with 195 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # bar-card
 
-![](images/examples.gif)
+![](images/bar_examples.gif)
 
 ## Description
 
@@ -41,58 +41,203 @@ Bar Card is a customizable animated card for the Home Assistant Lovelace front-e
 | direction | string | right | Direction of the bar. `left`,`right`,`up`,`down`
 | 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.
+| 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.
-| indicator_style | object| none | A list of CSS styles applied to the indicator.
+| 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`
 
 ## Examples
 
 ### Default
-
-![](images/default_increase.gif)
-
 ```yaml
 - type: custom:bar-card
   title: Default
-  entity: sensor.default
+  entity: sensor.example
 ```
-### Severity
-
-![](images/severity.gif)
 
+### Severity
 ```yaml
 - type: custom:bar-card
   title: Severity
-  entity: sensor.default
+  entity: sensor.example
   severity:
-  - value: 25
+  - value: 33
     hue: '0'
-  - value: 50
+  - value: 66
     hue: '40'
   - value: 100
     hue: '120'
 ```
-### Hue
 
-![](images/hue.gif)
+### Target
+```yaml
+- type: custom:bar-card
+  entity: sensor.example
+  title: Target
+  target: 50
+```
 
+### Icon
 ```yaml
 - type: custom:bar-card
-  title: Default
-  entity: sensor.default
-  hue: 300
+  entity: sensor.example
+  title: Icon
+  show_icon: true
+  icon: mdi:eye
 ```
-### Speed & Delay
 
-![](images/speed_delay.gif)
+### Title Inside
+```yaml
+- type: custom:bar-card
+  entity: sensor.example
+  title: Inside
+  title_position: inside
+```
 
+### Icon no Title
 ```yaml
 - type: custom:bar-card
-  title: Default
-  entity: sensor.default
-  speed: 5000
-  delay: 10000
+  entity: sensor.example
+  title_position: 'off'
+  show_icon: true
+  align: split
+  icon: mdi:eye
+```
+
+### Align Left
+```yaml
+- type: custom:bar-card
+  entity: sensor.example
+  title: Align Left
+  title_position: inside
+  align: left
+```
+
+### Align Right
+```yaml
+- type: custom:bar-card
+  entity: sensor.example
+  title: Align Right
+  title_position: inside
+  align: right
+```
+
+### Align Split
+```yaml
+- type: custom:bar-card
+  entity: sensor.example
+  title: Align Split
+  title_position: inside
+  align: split
+```
+
+### Align Split + Icon
+```yaml
+- type: custom:bar-card
+  entity: sensor.example
+  title: Align Split + Icon
+  title_position: inside
+  show_icon: true
+  icon: mdi:eye
+  align: split
+```
+
+### Align Top Split
+```yaml
+- type: custom:bar-card
+  entity: sensor.example
+  title: Top Split
+  title_position: inside
+  align: top-split
+```
+
+### Align Bottom Split
+```yaml
+- type: custom:bar-card
+  entity: sensor.example
+  title: Bottom Split
+  title_position: inside
+  align: bottom-split
+```
+
+### Direction Up
+```yaml
+- type: custom:bar-card
+  height: 160px
+  width: 100px
+  direction: up
+  title: Up
+  title_position: bottom
+  indicator: auto-vertical
+  entity: sensor.example
+```
+
+### Up Icon no Title
+```yaml
+- type: custom:bar-card
+  entity: sensor.example
+  height: 200px
+  width: 100px
+  direction: up
+  show_icon: true
+  icon: mdi:eye
+  title_position: 'off'
+```
+
+### Up Left Split
+```yaml
+- type: custom:bar-card
+  entity: sensor.example
+  height: 200px
+  width: 100px
+  direction: up
+  align: left-split
+  title: Left Split
+  title_position: inside
+```
+
+### Up Center Split
+```yaml
+- type: custom:bar-card
+  entity: sensor.example
+  height: 200px
+  width: 100px
+  direction: up
+  show_icon: true
+  icon: mdi:eye
+  align: center-split
+  title: Center Split + Icon
+  title_position: inside
+```
+
+### CSS Styles
+```yaml
+- type: custom:bar-card
+  entity: sensor.example
+  title: CSS Styles
+  title_position: inside
+  show_icon: true
+  icon: mdi:eye
+  hue: 240
+  saturation: 75%
+  align: split
+  rounding: 10px
+  card_style:
+    background: "#AA00AA"
+    border-radius: 10px
+  icon_style:
+    height: 60px
+    width: 60px
+    color: '#FF0000'
+  title_style:
+    color: '#00FF00'
+    font-size: 10px
+    text-transform: uppercase
+    text-decoration: underline
+    text-shadow: "0 0 10px #FF0000"
+  value_style:
+    color: '#FFFF00'
+    font-size: 22px
 ```
 
 ### Entities + [Auto Entities](https://github.com/thomasloven/lovelace-auto-entities)

diff --git a/bar-card.js b/bar-card.js
@@ -106,14 +106,23 @@ class BarCard extends HTMLElement {
     backgroundBar.id = 'backgroundBar_'+id
     const bar = document.createElement('div')
     bar.id = 'bar_'+id
-    const value = document.createElement('div')
-    value.id = 'value_'+id
 
     // Check if icon is enabled
     if (config.show_icon == true) {
       var icon = document.createElement('ha-icon')
       icon.id = 'icon_'+id
     }     
+
+    // Check if title is not inside
+    if (config.title !== "inside"){
+      var title = document.createElement('div')
+      title.id = 'title_'+id
+      var titleBar = document.createElement('div')
+      titleBar.id = 'titleBar_'+id
+    }
+
+    const value = document.createElement('div')
+    value.id = 'value_'+id
 
     // Check if animation is enabled
     if (config.animation !== "off") {
@@ -144,14 +153,6 @@ class BarCard extends HTMLElement {
       var indicatorColor = document.createElement('div')
       indicatorColor.id = 'indicatorColor_'+id
     }
-
-    // Check if title is not inside
-    if (config.title !== "inside"){
-      var title = document.createElement('div')
-      title.id = 'title_'+id
-      var titleBar = document.createElement('div')
-      titleBar.id = 'titleBar_'+id
-    }
 
     // Start building card
     background.appendChild(backgroundBar)
@@ -205,7 +206,6 @@ class BarCard extends HTMLElement {
     background.appendChild(value)
     card.appendChild(container)
     card.appendChild(this._styleElements(config, id))
-
     card.addEventListener('click', event => {
       this._showAttributes('hass-more-info', { entityId: entity })
     })
@@ -216,9 +216,9 @@ class BarCard extends HTMLElement {
   // Create style elements
   _styleElements(config, id) {
     const style = document.createElement('style');
-    if (config.bar_style) var barStyle = this._customStyle(config.bar_style)
+    if (config.value_style) var valueStyle = this._customStyle(config.value_style)
     if (config.title_style) var titleStyle = this._customStyle(config.title_style)
-    if (config.indicator_style) var indicatorStyle = this._customStyle(config.indicator_style)
+    if (config.icon_style) var iconStyle = this._customStyle(config.icon_style)
     if (config.card_style) var cardStyle = this._customStyle(config.card_style)
 
     // Sets position of the titleBar
@@ -439,7 +439,6 @@ class BarCard extends HTMLElement {
         justify-content: ${justifyContent};
         width: ${config.width};
         height: ${config.height};
-        ${barStyle}
       }
       #bar_${id}, #backgroundBar_${id}, #targetBar_${id}, #targetBarColor_${id}, #valueBar_${id}, #chargeBar_${id}, #chargeBarColor_${id}, #valueBar_${id}, #indicatorBar_${id} {
         position: absolute;
@@ -474,6 +473,7 @@ class BarCard extends HTMLElement {
         font-weight: bold;
         color: #FFF;
         text-shadow: 1px 1px #000;
+        ${iconStyle}
       }
       #title_${id} {
         ${positionTitleStyle}
@@ -491,6 +491,7 @@ class BarCard extends HTMLElement {
         color: #FFF;
         text-shadow: 1px 1px #000;
         white-space: nowrap;
+        ${valueStyle}
       }
       #titleBar_${id} {
         position: relative;
@@ -514,14 +515,12 @@ class BarCard extends HTMLElement {
         color: #7F7F7F;
         opacity: 0.75;
         text-shadow: 0px 0px;
-        ${indicatorStyle}
       }
       #indicatorColor_${id} {
         margin-left: -25px;
         color: var(--bar-fill-color);
         mix-blend-mode: color;
         opacity: 1;
-        ${indicatorStyle}
       }
       #indicatorContainer_${id} {
         display: flex;
@@ -776,6 +775,15 @@ class BarCard extends HTMLElement {
           root.getElementById('indicator_'+id).textContent = '▼'
           root.getElementById('indicatorColor_'+id).textContent = '▼'
           break
+        case 'off':
+          if (config.title_position !== 'inside' && config.title_position !== 'off') titleElement.style.removeProperty('--padding-left')
+          valueElement.style.removeProperty('--padding-left')
+          if (config.show_icon == true) iconElement.style.removeProperty('--padding-left')
+          if (config.title_position !== 'inside' && config.title_position !== 'off') titleElement.style.removeProperty('--padding-right')
+          valueElement.style.removeProperty('--padding-right')
+          if (config.show_icon == true) iconElement.style.removeProperty('--padding-right')
+          root.getElementById('indicator_'+id).textContent = ''
+          root.getElementById('indicatorColor_'+id).textContent = ''
       }
     }
   }
@@ -906,21 +914,19 @@ class BarCard extends HTMLElement {
         this._currentAnimation[id] = this._updateAnimation(entityState, 'reverse', config.delay, hue, false, id)
       }
       if (entityState == configMax || entityState == configMin) {
-        if (config.indicator != 'off') {
-          root.getElementById('indicator_'+id).textContent = ''
-          root.getElementById('indicatorColor_'+id).textContent = ''
-        }
         if (entityState == configMax) {
           root.getElementById('bar_'+id).style.setProperty('--bar-percent', '100%')
           root.getElementById('bar_'+id).style.setProperty('--bar-fill-color', barColor)
           root.getElementById('bar_'+id).style.setProperty('--bar-charge-percent', '100%')
+          this._updateIndicator(config.indicator, 'off', id)
           if (this._currentAnimation[id]) {
             this._currentAnimation[id].pause()
           }
         }
         if (entityState == configMin) {
           root.getElementById('bar_'+id).style.setProperty('--bar-percent', '0%')
           root.getElementById('bar_'+id).style.setProperty('--bar-charge-percent', '0%')
+          this._updateIndicator(config.indicator, 'off', id)
           if (this._currentAnimation[id]) {
             this._currentAnimation[id].pause()
           }

diff --git a/images/bar_examples.gif b/images/bar_examples.gif