diff --git a/README.md b/README.md index fbeb9b4..7a075c5 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,9 @@ Custom component for lovelace which can be used as a card or an element on a pic | color_stops | object | Sensor value to color mapping (see below) | none | gradient | boolean | Whether to smoothly transition between color stops | `false` | units | string | Custom units of measurement | none -| attribute | string | Attribute element of an entity to use instead of its state | none +| attribute | string | Attribute element of entity to use instead of its state | none +| attribute_max | string | Use attribute element of entity as max | none +| show_max | boolean | Display the max value | `false` ### Color stops A mapping from `value` to `color`. If `gradient` is set to true, mid-stop colors will be @@ -70,6 +72,8 @@ Add a custom card or custom element in your `ui-lovelace.yaml` using `type: cust gradient: true units: ' ' attribute: 'ambient' + attribute_max: 'feels_like' + show_max: true font_style: color: red font-size: 1.5em diff --git a/VERSION b/VERSION index 1cc5f65..867e524 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.1.0 \ No newline at end of file +1.2.0 \ No newline at end of file diff --git a/circle-sensor-card.js b/circle-sensor-card.js index 10ac578..b4319af 100644 --- a/circle-sensor-card.js +++ b/circle-sensor-card.js @@ -76,7 +76,9 @@ class CircleSensorCard extends LitElement { ${config.attribute ? state.attributes[config.attribute] : state.state} - ${config.units ? config.units : state.attributes.unit_of_measurement} + ${config.show_max + ? html` / ${config.attribute_max ? state.attributes[config.attribute_max] : config.max}` + : (config.units ? config.units : state.attributes.unit_of_measurement)} @@ -147,7 +149,9 @@ class CircleSensorCard extends LitElement { : this.state.state; const r = 200 * .45; const min = this.config.min || 0; - const max = this.config.max || 100; + const max = this.config.attribute_max + ? this.state.attributes[this.config.attribute_max] + : (this.config.max || 100); const val = this._calculateValueBetween(min, max, state); const score = val * 2 * Math.PI * r; const total = 10 * r;