Skip to content

Commit

Permalink
0.1.2
Browse files Browse the repository at this point in the history
* added `entities` config option, displays multiple bars based on entities list
* added `columns` config option
* title style can now still be defined when using inside title_position
  • Loading branch information
Gluwc committed Mar 17, 2019
1 parent 22007f2 commit 6e909e5
Show file tree
Hide file tree
Showing 4 changed files with 432 additions and 240 deletions.
89 changes: 83 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,18 @@
Bar Card is a customizable animated card for the Home Assistant Lovelace front-end.

### Features
- Customizable bar, text and animation.
- 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
| entities | array | none | A list of entities. Cards will share config.
| columns | number | none | Defines the number of columns when using entities list.
| attribute | string | none | Defines the attribute to be displayed.
| unit_of_measurement | string | none | Defines the unit of measurement to be displayed.
| title | string | none | Title displayed next to the bar.
Expand All @@ -28,6 +29,7 @@ Bar Card is a customizable animated card for the Home Assistant Lovelace front-e
| 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.
| padding | string | 4px | Sets padding amount around the card.
| min | number | 0 | The minimum entity value to be displayed. Accepts entity id as value.
| max | number | 100 | The maximum entity value to be displayed. Accepts entity id as value.
| target | number | none | Sets a target marker, must be a value between min and max value. Accepts entity id as value.
Expand All @@ -41,7 +43,9 @@ Bar Card is a customizable animated card for the Home Assistant Lovelace front-e
| indicator_style | object| none | A list of CSS 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
## Examples

### Default

![](images/default_increase.gif)

Expand All @@ -50,7 +54,7 @@ Bar Card is a customizable animated card for the Home Assistant Lovelace front-e
title: Default
entity: sensor.default
```
## Severity
### Severity
![](images/severity.gif)
Expand All @@ -66,7 +70,7 @@ Bar Card is a customizable animated card for the Home Assistant Lovelace front-e
- value: 100
hue: '120'
```
## Hue
### Hue
![](images/hue.gif)
Expand All @@ -76,7 +80,7 @@ Bar Card is a customizable animated card for the Home Assistant Lovelace front-e
entity: sensor.default
hue: 300
```
## Speed & Delay
### Speed & Delay
![](images/speed_delay.gif)
Expand All @@ -87,6 +91,79 @@ Bar Card is a customizable animated card for the Home Assistant Lovelace front-e
speed: 5000
delay: 10000
```
### Entities + [Auto Entities](https://github.com/thomasloven/lovelace-auto-entities)
![](images/entities_example.png)
```yaml
- type: custom:auto-entities
card:
type: custom:bar-card
severity:
- value: 50
hue: '0'
- value: 75
hue: '40'
- value: 100
hue: '120'
title_position: inside
columns: 3
padding: 2px
title_style:
text-align: left
font-size: 16px
bar_style:
align-items: flex-start
font-size: 8px
filter:
include:
- entity_id: "*_battery"

- type: custom:auto-entities
card:
type: custom:bar-card
attribute: battery
unit_of_measurement: "%"
severity:
- value: 50
hue: '0'
- value: 75
hue: '40'
- value: 100
hue: '120'
title_position: inside
padding: 2px
columns: 2
filter:
include:
- attributes:
battery: "<=100"
exclude:
- entity_id: "*_humidity"
- entity_id: "*_pressure"
- entity_id: "*_battery"

- type: custom:bar-card
attribute: temperature
unit_of_measurement: "°C"
title_position: inside
columns: 5
height: 200px
min: 15
max: 32
target: 22.5
width: 100%
padding: 2px
direction: up
entities:
- binary_sensor.motion_hallway
- binary_sensor.motion_living_room
- binary_sensor.motion_kitchen
- binary_sensor.motion_bathroom
- binary_sensor.motion_toilet
```
## Credits
Inspired by [Big Number Card](https://github.com/ciotlosm/custom-lovelace/tree/master/bignumber-card) by [ciotlosm](https://github.com/ciotlosm).
Expand Down
Loading

0 comments on commit 6e909e5

Please sign in to comment.