humidifier card: add on-off button (#13443)

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

src/panels/lovelace/cards/hui-humidifier-card.ts

@@ -11,6 +11,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -98,6 +99,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
       ? html` <round-slider disabled="true"></round-slider> `
       : html`
           <round-slider
+            class=${classMap({ "round-slider_off": stateObj.state === "off" })}
             .value=${targetHumidity}
             .min=${stateObj.attributes.min_humidity}
             .max=${stateObj.attributes.max_humidity}
@@ -108,18 +110,10 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
           ></round-slider>
         `;
 
-    const setValues = svg`
+    const setValues = html`
-      <svg viewBox="0 0 40 20">
+      <svg viewBox="0 0 24 20">
-        <text
+        <text x="50%" dx="1" y="73%" text-anchor="middle" id="set-values">
-          x="50%"
+          ${UNAVAILABLE_STATES.includes(stateObj.state) ||
-          dx="1"
-          y="60%"
-          text-anchor="middle"
-          style="font-size: 13px;"
-          class="set-value"
-        >
-          ${
-            UNAVAILABLE_STATES.includes(stateObj.state) ||
           this._setHum === undefined ||
           this._setHum === null
             ? ""
@@ -128,20 +122,15 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
                     <tspan dx="-3" dy="-6.5" style="font-size: 4px;">
                       %
                     </tspan>
-                    `
+                    `}
-          }
         </text>
       </svg>
-      <svg id="set-values">
+    `;
-        <g>
+    const currentMode = html`
-          <text
+      <svg viewBox="0 0 40 10" id="humidity">
-            dy="22"
+        <text x="50%" y="50%" text-anchor="middle" id="set-mode">
-            text-anchor="middle"
-            id="set-mode"
-          >
           ${this.hass!.localize(`state.default.${stateObj.state}`)}
-            ${
+          ${stateObj.attributes.mode &&
-              stateObj.attributes.mode &&
           !UNAVAILABLE_STATES.includes(stateObj.state)
             ? html`
                 -
@@ -149,10 +138,8 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
                   `state_attributes.humidifier.mode.${stateObj.attributes.mode}`
                 ) || stateObj.attributes.mode}
               `
-                : ""
+            : ""}
-            }
         </text>
-        </g>
       </svg>
     `;
 
@@ -170,7 +157,15 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
             <div id="slider">
               ${slider}
               <div id="slider-center">
-                <div id="humidity">${setValues}</div>
+                <ha-icon-button
+                  class="toggle-button"
+                  .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
+                  @click=${this._toggle}
+                  tabindex="0"
+                >
+                  ${setValues}
+                </ha-icon-button>
+                ${currentMode}
               </div>
             </div>
           </div>
@@ -208,15 +203,6 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
     ) {
       applyThemesOnElement(this, this.hass.themes, this._config.theme);
     }
-
-    const stateObj = this.hass.states[this._config.entity];
-    if (!stateObj) {
-      return;
-    }
-
-    if (!oldHass || oldHass.states[this._config.entity] !== stateObj) {
-      this._rescale_svg();
-    }
   }
 
   public willUpdate(changedProps: PropertyValues) {
@@ -236,28 +222,6 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
     }
   }
 
-  private _rescale_svg() {
-    // Set the viewbox of the SVG containing the set humidity to perfectly
-    // fit the text
-    // That way it will auto-scale correctly
-    // This is not done to the SVG containing the current humidity, because
-    // it should not be centered on the text, but only on the value
-    if (this.shadowRoot && this.shadowRoot.querySelector("ha-card")) {
-      (
-        this.shadowRoot.querySelector("ha-card") as LitElement
-      ).updateComplete.then(() => {
-        const svgRoot = this.shadowRoot!.querySelector("#set-values");
-        const box = svgRoot!.querySelector("g")!.getBBox();
-        svgRoot!.setAttribute(
-          "viewBox",
-          `${box!.x} ${box!.y} ${box!.width} ${box!.height}`
-        );
-        svgRoot!.setAttribute("width", `${box!.width}`);
-        svgRoot!.setAttribute("height", `${box!.height}`);
-      });
-    }
-  }
-
   private _getSetHum(stateObj: HassEntity): undefined | number {
     if (UNAVAILABLE_STATES.includes(stateObj.state)) {
       return undefined;
@@ -277,6 +241,12 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
     });
   }
 
+  private _toggle(): void {
+    this.hass!.callService("humidifier", "toggle", {
+      entity_id: this._config!.entity,
+    });
+  }
+
   private _handleMoreInfo() {
     fireEvent(this, "hass-more-info", {
       entityId: this._config!.entity,
@@ -339,6 +309,12 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
         padding-bottom: 10%;
       }
 
+      .round-slider_off {
+        --round-slider-path-color: var(--slider-track-color);
+        --round-slider-bar-color: var(--disabled-text-color);
+        padding-bottom: 10%;
+      }
+
       #slider-center {
         position: absolute;
         width: calc(100% - 40px);
@@ -349,28 +325,37 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
         top: 20px;
         text-align: center;
         overflow-wrap: break-word;
-        pointer-events: none;
       }
 
       #humidity {
-        position: absolute;
+        max-width: 80%;
-        transform: translate(-50%, -50%);
+        transform: translate(0, 350%);
-        width: 100%;
-        height: 50%;
-        top: 45%;
-        left: 50%;
-        direction: ltr;
       }
 
       #set-values {
-        max-width: 80%;
+        font-size: 13px;
-        transform: translate(0, -50%);
+        font-family: var(--paper-font-body1_-_font-family);
-        font-size: 20px;
+        font-weight: var(--paper-font-body1_-_font-weight);
       }
 
       #set-mode {
         fill: var(--secondary-text-color);
-        font-size: 16px;
+        font-size: 4px;
+      }
+
+      .toggle-button {
+        color: var(--primary-text-color);
+        width: 60%;
+        height: auto;
+        position: absolute;
+        max-width: calc(100% - 40px);
+        box-sizing: border-box;
+        border-radius: 100%;
+        top: 39%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        --mdc-icon-button-size: 100%;
+        --mdc-icon-size: 100%;
       }
 
       #info {