diff --git a/README.md b/README.md index 533eeb2..5360b8d 100644 --- 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 index c01d0fe..f580044 100644 --- 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,14 +914,11 @@ 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() } @@ -921,6 +926,7 @@ class BarCard extends HTMLElement { 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 new file mode 100644 index 0000000..1c9394e Binary files /dev/null and b/images/bar_examples.gif differ