From 884c9469173c69b74793ee4f8fbc71bb80f1b6c8 Mon Sep 17 00:00:00 2001 From: Luuk3333 Date: Sat, 5 Dec 2020 22:25:23 +0100 Subject: [PATCH 1/3] Center content vertically --- tempometer-gauge-card.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tempometer-gauge-card.js b/tempometer-gauge-card.js index 34248dc..b7970e7 100644 --- a/tempometer-gauge-card.js +++ b/tempometer-gauge-card.js @@ -43,7 +43,7 @@ class TempometerGaugeCard extends HTMLElement { width: calc(var(--base-unit) * 4); height: calc(var(--base-unit) * 2.44); position: absolute; - top: calc(var(--base-unit)*2); + top: calc(var(--base-unit)*2.1); left: 50%; overflow: hidden; text-align: center; @@ -106,6 +106,7 @@ class TempometerGaugeCard extends HTMLElement { height: calc(var(--base-unit) * 2.5); text-align: center; margin: 0 auto; + padding-top: calc(var(--base-unit)*0.15); } .icon1{ width: 18px; From d882e2967f68ed29673fbd96088487fef5191cd2 Mon Sep 17 00:00:00 2001 From: Luuk3333 Date: Sat, 5 Dec 2020 23:17:05 +0100 Subject: [PATCH 2/3] Add decimal precision option --- readme.md | 2 ++ tempometer-gauge-card.js | 11 ++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index e9c6c5e..7cb1224 100644 --- a/readme.md +++ b/readme.md @@ -25,6 +25,7 @@ Add it as a custom card to your lovelace : `'custom:tempometer-gauge-card'`. - `icon2` : *(Optional) Icon on center in custom style. - `icon3` : *(Optional) Icon on right side in custom style. - `severity` : *(Optional)* Severity map to change the gauge color. See above. +- `decimals` : *(Optional)* Decimal precision of entity value. ```yaml severity: @@ -45,6 +46,7 @@ max: 1050 entity_min: sensor.barometer_min_this_week entity_max: sensor.barometer_max_this_week title: Barometer +decimals: 0 severity: green: 1020 yellow: 1000 diff --git a/tempometer-gauge-card.js b/tempometer-gauge-card.js index b7970e7..752dfbb 100644 --- a/tempometer-gauge-card.js +++ b/tempometer-gauge-card.js @@ -319,7 +319,7 @@ class TempometerGaugeCard extends HTMLElement { set hass(hass) { const root = this.shadowRoot; const config = this._config; - const entityState = this._getEntityStateValue(hass.states[config.entity], config.attribute); + var entityState = this._getEntityStateValue(hass.states[config.entity], config.attribute); var maxEntityState = null; var minEntityState = null; if (config.entity_max !== undefined) { @@ -342,6 +342,15 @@ class TempometerGaugeCard extends HTMLElement { root.getElementById("minval").innerHTML = config.min; root.getElementById("maxval").innerHTML = config.max; + // Set decimal precision + if (config.decimals !== undefined) { + // Only allow positive numbers + if (config.decimals >= 0) { + entityState = Math.round(parseFloat(entityState) * (10 ** config.decimals)) / (10 ** config.decimals) // Round (https://stackoverflow.com/a/11832950) + entityState = entityState.toFixed(config.decimals) // Add trailing zeroes if applicable + } + } + if (entityState !== this._entityState) { root.getElementById("percent").textContent = `${entityState} ${measurement}`; root.getElementById("title").textContent = config.title; From 6fa5c027f6f9d6814f83f57c64ed288f8ebff66d Mon Sep 17 00:00:00 2001 From: Luuk3333 Date: Sat, 5 Dec 2020 23:36:03 +0100 Subject: [PATCH 3/3] Move options to tables in readme --- readme.md | 35 +++++++++++++++++++++++------------ 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/readme.md b/readme.md index 7cb1224..2e5604a 100644 --- a/readme.md +++ b/readme.md @@ -14,19 +14,30 @@ Add this custom card to your home assistant instance. Reference it into your lov Add it as a custom card to your lovelace : `'custom:tempometer-gauge-card'`. ## Options -- `entity` : *(Required)* The barometer entity to track. -- `min` : *(Required)* The gauge's minimum value -- `max` : *(Required)* The gauge's maximum value -- `entity_min` : *(Optional)* The entity that define the minimum pressure/temperature reached (you have to create this entity, the card will not compute it !) -- `entity_max` : *(Optional)* The entity that define the maximum pressure/temerature reached (you have to create this entity, the card will not compute it !) -- `title` : *(Optional)* Card title to show. -- `style` : *(Optional)* Set this to `thermometer`, `humidity` or `custom` to change icons. (Default will be barometer theme, custom will need icon1, icon2, icon3 !) -- `icon1` : *(Optional) Icon on left side in custom style. -- `icon2` : *(Optional) Icon on center in custom style. -- `icon3` : *(Optional) Icon on right side in custom style. -- `severity` : *(Optional)* Severity map to change the gauge color. See above. -- `decimals` : *(Optional)* Decimal precision of entity value. +### Card options +| **Option** | **Type** | **Description** | +|-|:-:|-| +| `entity` ***(required)*** | string | The barometer entity to track. | +| `min` ***(required)*** | number | The gauge's minimum value | +| `max` ***(required)*** | number | The gauge's maximum value | +| `entity_min` | string | The entity that define the minimum pressure/temperature reached (you have to create this entity, the card will not compute it !) | +| `entity_max` | string | The entity that define the maximum pressure/temerature reached (you have to create this entity, the card will not compute it !) | +| `title` | string | Card title to show. | +| `style` | string | Set this to `thermometer`, `humidity` or `custom` to change icons. (Default will be barometer theme, custom will need icon1, icon2, icon3 !) | +| `icon1` | string | Icon on left side in custom style. | +| `icon2` | string | Icon on center in custom style. | +| `icon3` | string | Icon on right side in custom style. | +| `severity` | [severity object](#severity-object) | Severity map to change the gauge color. | +| `decimals` | number | Decimal precision of entity value. | +#### Severity object +| **Option** | **Type** | **Description** | +|-|:-:|-| +| green ***(required)*** | number | Value for the color green. +| yellow ***(required)*** | number | Value for the color yellow. +| red ***(required)*** | number | Value for the color red. + +Example: ```yaml severity: green: 1020