From 0fab2ee21200c6d4f3be6aa4e7f87b15d6b4a63a Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Sat, 10 Oct 2020 22:08:25 -0500 Subject: [PATCH 1/4] add icons instead of text --- src/data/weather.ts | 56 ++++++++++++------- .../cards/hui-weather-forecast-card.ts | 26 +++++++-- 2 files changed, 57 insertions(+), 25 deletions(-) diff --git a/src/data/weather.ts b/src/data/weather.ts index 658343a2b785..840cb593cd06 100644 --- a/src/data/weather.ts +++ b/src/data/weather.ts @@ -1,6 +1,13 @@ -import { SVGTemplateResult, svg, html, TemplateResult, css } from "lit-element"; +import { + mdiGauge, + mdiWaterPercent, + mdiWeatherFog, + mdiWeatherRainy, + mdiWeatherWindy, +} from "@mdi/js"; +import { css, html, svg, SVGTemplateResult, TemplateResult } from "lit-element"; import { styleMap } from "lit-html/directives/style-map"; - +import "../components/ha-icon"; import type { HomeAssistant, WeatherEntity } from "../types"; import { roundWithOneDecimal } from "../util/calculate"; @@ -25,6 +32,15 @@ export const weatherIcons = { exceptional: "hass:alert-circle-outline", }; +export const weatherAttrIcons = { + humidity: mdiWaterPercent, + wind_bearing: mdiWeatherWindy, + wind_speed: mdiWeatherWindy, + pressure: mdiGauge, + visibility: mdiWeatherFog, + precipitation: mdiWeatherRainy, +}; + const cloudyStates = new Set([ "partlycloudy", "cloudy", @@ -110,6 +126,7 @@ export const getWeatherUnit = ( return lengthUnit === "km" ? "hPa" : "inHg"; case "wind_speed": return `${lengthUnit}/h`; + case "visibility": case "length": return lengthUnit; case "precipitation": @@ -125,7 +142,7 @@ export const getWeatherUnit = ( export const getSecondaryWeatherAttribute = ( hass: HomeAssistant, stateObj: WeatherEntity -): string | undefined => { +): TemplateResult | undefined => { const extrema = getWeatherExtrema(hass, stateObj); if (extrema) { @@ -149,17 +166,22 @@ export const getSecondaryWeatherAttribute = ( return undefined; } - return ` - ${hass!.localize( - `ui.card.weather.attributes.${attribute}` - )} ${roundWithOneDecimal(value)} ${getWeatherUnit(hass!, attribute)} + const weatherAttrIcon = weatherAttrIcons[attribute]; + + return html` + ${weatherAttrIcon + ? html` + + ` + : hass!.localize(`ui.card.weather.attributes.${attribute}`)} + ${roundWithOneDecimal(value)} ${getWeatherUnit(hass!, attribute)} `; }; const getWeatherExtrema = ( hass: HomeAssistant, stateObj: WeatherEntity -): string | undefined => { +): TemplateResult | undefined => { if (!stateObj.attributes.forecast?.length) { return undefined; } @@ -189,22 +211,18 @@ const getWeatherExtrema = ( const unit = getWeatherUnit(hass!, "temperature"); - return ` - ${ - tempHigh - ? ` + return html` + ${tempHigh + ? ` ${tempHigh} ${unit} ` - : "" - } + : ""} ${tempLow && tempHigh ? " / " : ""} - ${ - tempLow - ? ` + ${tempLow + ? ` ${tempLow} ${unit} ` - : "" - } + : ""} `; }; diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index 82ee9b96f648..fbe150fed274 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -3,9 +3,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -21,19 +21,20 @@ import "../../../components/ha-icon"; import { UNAVAILABLE } from "../../../data/entity"; import { getSecondaryWeatherAttribute, - getWeatherUnit, getWeatherStateIcon, + getWeatherUnit, getWind, + weatherAttrIcons, weatherSVGStyles, } from "../../../data/weather"; import type { HomeAssistant, WeatherEntity } from "../../../types"; import { actionHandler } from "../common/directives/action-handler-directive"; import { findEntities } from "../common/find-entites"; import { hasConfigOrEntityChanged } from "../common/has-changed"; +import { installResizeObserver } from "../common/install-resize-observer"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import type { LovelaceCard, LovelaceCardEditor } from "../types"; import type { WeatherForecastCardConfig } from "./types"; -import { installResizeObserver } from "../common/install-resize-observer"; const DAY_IN_MILLISECONDS = 86400000; @@ -222,9 +223,18 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
${this._config.secondary_info_attribute !== undefined ? html` - ${this.hass!.localize( - `ui.card.weather.attributes.${this._config.secondary_info_attribute}` - )} + ${weatherAttrIcons[this._config.secondary_info_attribute] + ? html` + + ` + : this.hass!.localize( + `ui.card.weather.attributes.${this._config.secondary_info_attribute}` + )} ${this._config.secondary_info_attribute === "wind_speed" ? getWind( this.hass, @@ -479,6 +489,10 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { --mdc-icon-size: 40px; } + .attr-icon { + --mdc-icon-size: 20px; + } + .attribute, .templow, .daynight, From 1fd3403d79c4199e4ce4b128be025d9d9b3bda12 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Sat, 10 Oct 2020 22:12:13 -0500 Subject: [PATCH 2/4] add import --- src/data/weather.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/data/weather.ts b/src/data/weather.ts index 840cb593cd06..16333d2d1ef8 100644 --- a/src/data/weather.ts +++ b/src/data/weather.ts @@ -8,6 +8,7 @@ import { import { css, html, svg, SVGTemplateResult, TemplateResult } from "lit-element"; import { styleMap } from "lit-html/directives/style-map"; import "../components/ha-icon"; +import "../components/ha-svg-icon"; import type { HomeAssistant, WeatherEntity } from "../types"; import { roundWithOneDecimal } from "../util/calculate"; From 5a06e8475042961b5a165d00197ddb916e72cfe0 Mon Sep 17 00:00:00 2001 From: Zack Barett Date: Mon, 12 Oct 2020 10:32:36 -0500 Subject: [PATCH 3/4] Update src/panels/lovelace/cards/hui-weather-forecast-card.ts Co-authored-by: Bram Kragten --- src/panels/lovelace/cards/hui-weather-forecast-card.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index fbe150fed274..a7e81ab08a2e 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -223,7 +223,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
${this._config.secondary_info_attribute !== undefined ? html` - ${weatherAttrIcons[this._config.secondary_info_attribute] + ${this._config.secondary_info_attribute in weatherAttrIcons ? html` Date: Mon, 12 Oct 2020 10:34:26 -0500 Subject: [PATCH 4/4] prettier --- src/panels/lovelace/cards/hui-weather-forecast-card.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index a7e81ab08a2e..90a563ea1e7b 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -223,7 +223,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
${this._config.secondary_info_attribute !== undefined ? html` - ${this._config.secondary_info_attribute in weatherAttrIcons + ${this._config.secondary_info_attribute in + weatherAttrIcons ? html`