feat v1.17.1: show humidity value (%) next to the icon like temperature — isHumEntity/humFor, DevItem.hum, .hval badge + tooltip, for humidity devices and standalone humidity entities. +2 tests.

src/devices.ts

@@ -104,6 +104,27 @@ export function tempFor(hass: any, entIds: string[]): number | null {
   return null;
 }
 
+/** A humidity-measuring entity (device_class humidity or *_humidity), excluding diagnostics. */
+export function isHumEntity(hass: any, eid: string): boolean {
+  if (hass.entities?.[eid]?.entity_category) return false;
+  const st = hass.states[eid];
+  if (!st) return /_humidity$/.test(eid);
+  const a = st.attributes || {};
+  return a.device_class === 'humidity' || (a.unit_of_measurement === '%' && /_humidity$/.test(eid)) || /_humidity$/.test(eid);
+}
+
+/** First readable humidity value (integer %) among the entities, or null. */
+export function humFor(hass: any, entIds: string[]): number | null {
+  for (const eid of entIds) {
+    if (!isHumEntity(hass, eid)) continue;
+    const st = hass.states[eid];
+    if (!st) continue;
+    const v = parseFloat(st.state);
+    if (!isNaN(v)) return Math.round(v);
+  }
+  return null;
+}
+
 /** Group light entities: HA light-group (platform=group) and Z2M groups (device model=Group). */
 export function lightGroups(hass: any, enabled: boolean): { eid: string; name: string; area: string }[] {
   if (!enabled) return [];
@@ -206,6 +227,7 @@ export function buildDevices(ctx: BuildCtx): DevItem[] {
     };
     item.primary = primaryEntity(h, entIds, icon);
     if (icon === 'mdi:thermometer' || icon === 'mdi:air-filter') item.temp = tempFor(h, entIds);
+    if (icon === 'mdi:water-percent') item.hum = humFor(h, entIds);
     rest.push(item);
   }
 
@@ -254,6 +276,8 @@ export function buildDevices(ctx: BuildCtx): DevItem[] {
       };
       item.primary = primaryEntity(h, entIds, icon);
       if (icon === 'mdi:thermometer' || icon === 'mdi:air-filter') item.temp = tempFor(h, entIds);
+      if (icon === 'mdi:water-percent') item.hum = humFor(h, entIds);
+    if (icon === 'mdi:water-percent') item.hum = humFor(h, entIds);
       applyMarker(item, m);
       rest.push(item);
     } else if (kind === 'entity') {
@@ -277,6 +301,7 @@ export function buildDevices(ctx: BuildCtx): DevItem[] {
         bindingRef: ref,
       };
       if (icon === 'mdi:thermometer' || icon === 'mdi:air-filter') item.temp = tempFor(h, [ref]);
+      if (icon === 'mdi:water-percent') item.hum = humFor(h, [ref]);
       applyMarker(item, m);
       rest.push(item);
     } else {

src/houseplan-card.ts

@@ -17,7 +17,7 @@ import {
   spaceDisplayOf, roomFillColor, DEFAULT_ROOM_COLOR, DEFAULT_ROOM_OPACITY,
   DEFAULT_TEMP_MIN, DEFAULT_TEMP_MAX, type SpaceDisplay,
 } from './logic';
-import { buildDevices, lqiFor, tempFor, areaLights, areaTemp } from './devices';
+import { buildDevices, lqiFor, tempFor, humFor, areaLights, areaTemp } from './devices';
 import type {
   RoomCfg, SpaceModel, PdfRef, Marker, ServerConfig, DevItem, CardConfig,
 } from './types';
@@ -26,7 +26,7 @@ import './space-card';
 import { cardStyles } from './styles';
 import { langOf, t, type I18nKey } from './i18n';
 
-const CARD_VERSION = '1.17.0';
+const CARD_VERSION = '1.17.1';
 const LS_KEY = 'houseplan_card_layout_v1';
 const LS_CFG = 'houseplan_card_cfg_v1'; // cache of the server config+layout for instant rendering
 const LS_ZOOM = 'houseplan_card_zoom_v1';
@@ -641,6 +641,12 @@ class HouseplanCard extends LitElement {
     return tempFor(this.hass, d.entities);
   }
 
+  private _liveHum(d: DevItem): number | null {
+    if (!this._config?.show_temperature) return null; // same "sensor values" toggle as temperature
+    if (d.icon !== 'mdi:water-percent') return null;
+    return humFor(this.hass, d.entities);
+  }
+
   // ================= interaction =================
 
   private _openMoreInfo(entityId?: string): void {
@@ -2037,6 +2043,7 @@ class HouseplanCard extends LitElement {
     const top = ((p.y - view.y) / view.h) * 100;
     const cls = this._stateClass(d);
     const temp = this._liveTemp(d);
+    const hum = this._liveHum(d);
     const lqi = this._config?.show_signal && !d.virtual ? lqiFor(this.hass, d.entities) : null;
     return html`<div
       class="dev ${cls} ${this._selId === d.id ? 'sel' : ''} ${d.virtual ? 'virtual' : ''}"
@@ -2044,7 +2051,7 @@ class HouseplanCard extends LitElement {
       @click=${(e: MouseEvent) => this._clickDevice(e, d)}
       @mousemove=${(e: MouseEvent) =>
         this._showTip(e, d.name,
-          d.model + (temp != null ? ' · ' + temp + '°' : '') + (lqi != null ? ' · LQI ' + lqi : ''))}
+          d.model + (temp != null ? ' · ' + temp + '°' : '') + (hum != null ? ' · ' + hum + '%' : '') + (lqi != null ? ' · LQI ' + lqi : ''))}
       @mouseleave=${() => (this._tip = null)}
       @pointerdown=${(e: PointerEvent) => this._pointerDown(e, d)}
       @pointermove=${(e: PointerEvent) => this._pointerMove(e, d)}
@@ -2053,6 +2060,7 @@ class HouseplanCard extends LitElement {
     >
       <ha-icon icon="${d.icon}"></ha-icon>
       ${temp != null ? html`<span class="tval">${temp}°</span>` : nothing}
+      ${hum != null ? html`<span class="hval">${hum}%</span>` : nothing}
       ${lqi != null ? html`<span class="lqi" style="color:${lqiColor(lqi)}">${lqi}</span>` : nothing}
     </div>`;
   }

src/styles.ts

@@ -383,6 +383,23 @@ export const cardStyles = css`
       white-space: nowrap;
       pointer-events: none;
     }
+.dev .hval {
+      position: absolute;
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-left: calc(var(--icon-size, 2.5cqw) * 0.1);
+      background: var(--card-background-color, var(--hp-bg));
+      border: 1px solid #4fc3f7;
+      border-radius: calc(var(--icon-size, 2.5cqw) * 0.18);
+      padding: 0 calc(var(--icon-size, 2.5cqw) * 0.14);
+      font-size: calc(var(--icon-size, 2.5cqw) * 0.45);
+      font-weight: 700;
+      line-height: calc(var(--icon-size, 2.5cqw) * 0.68);
+      color: var(--hp-txt);
+      white-space: nowrap;
+      pointer-events: none;
+    }
     .dev .lqi {
       position: absolute;
       top: 100%;

src/types.ts

@@ -61,6 +61,7 @@ export interface DevItem {
   entities: string[];
   primary?: string;
   temp?: number | null;
+  hum?: number | null;
   virtual?: boolean;
   marker?: Marker; // linked config marker (metadata, overrides)
   bindingKind?: 'device' | 'entity' | 'virtual';