Weather Card: add icons instead of text (#7305)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/data/weather.ts

@@ -1,6 +1,14 @@
-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 "../components/ha-svg-icon";
 import type { HomeAssistant, WeatherEntity } from "../types";
 import { roundWithOneDecimal } from "../util/calculate";
 
@@ -25,6 +33,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<string>([
   "partlycloudy",
   "cloudy",
@@ -110,6 +127,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 +143,7 @@ export const getWeatherUnit = (
 export const getSecondaryWeatherAttribute = (
   hass: HomeAssistant,
   stateObj: WeatherEntity
-): string | undefined => {
+): TemplateResult | undefined => {
   const extrema = getWeatherExtrema(hass, stateObj);
 
   if (extrema) {
@@ -149,17 +167,22 @@ export const getSecondaryWeatherAttribute = (
     return undefined;
   }
 
-  return `
+  const weatherAttrIcon = weatherAttrIcons[attribute];
-    ${hass!.localize(
+
-      `ui.card.weather.attributes.${attribute}`
+  return html`
-    )} ${roundWithOneDecimal(value)} ${getWeatherUnit(hass!, attribute)}
+    ${weatherAttrIcon
+      ? html`
+          <ha-svg-icon class="attr-icon" .path=${weatherAttrIcon}></ha-svg-icon>
+        `
+      : 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 +212,18 @@ const getWeatherExtrema = (
 
   const unit = getWeatherUnit(hass!, "temperature");
 
-  return `
+  return html`
-    ${
+    ${tempHigh
-      tempHigh
+      ? `
-        ? `
             ${tempHigh} ${unit}
           `
-        : ""
+      : ""}
-    }
     ${tempLow && tempHigh ? " / " : ""}
-    ${
+    ${tempLow
-      tempLow
+      ? `
-        ? `
           ${tempLow} ${unit}
         `
-        : ""
+      : ""}
-    }
   `;
 };
 

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,19 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
               <div class="attribute">
                 ${this._config.secondary_info_attribute !== undefined
                   ? html`
-                      ${this.hass!.localize(
+                      ${this._config.secondary_info_attribute in
-                        `ui.card.weather.attributes.${this._config.secondary_info_attribute}`
+                      weatherAttrIcons
-                      )}
+                        ? html`
+                            <ha-svg-icon
+                              class="attr-icon"
+                              .path=${weatherAttrIcons[
+                                this._config.secondary_info_attribute
+                              ]}
+                            ></ha-svg-icon>
+                          `
+                        : this.hass!.localize(
+                            `ui.card.weather.attributes.${this._config.secondary_info_attribute}`
+                          )}
                       ${this._config.secondary_info_attribute === "wind_speed"
                         ? getWind(
                             this.hass,
@@ -479,6 +490,10 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
           --mdc-icon-size: 40px;
         }
 
+        .attr-icon {
+          --mdc-icon-size: 20px;
+        }
+
         .attribute,
         .templow,
         .daynight,