feat v1.26.0: state-reflecting icons + 'value instead of an icon' display (issue #3)

- stateIcon(): door/window/garage open-closed, lock locked-unlocked, bulb on;
  custom icons and unavailable/unknown never morph; gated by live_states
- marker display 'value': the measurement (with unit) is the marker body,
  corner badges hidden; numeric fallback chain temp - hum - primary state
- TESTING.md rows, smoke_state_value.mjs, +1 unit test

custom_components/houseplan/const.py

@@ -11,7 +11,7 @@ PLANS_DIR = "houseplan/plans"  # relative to the HA configuration directory
 FILES_URL = "/houseplan_files/files"
 FILES_DIR = "houseplan/files"
 CONF_ADMIN_ONLY = "admin_only"
-VERSION = "1.25.0"
+VERSION = "1.26.0"
 
 DEFAULT_CONFIG: dict = {
     "spaces": [],

custom_components/houseplan/manifest.json

@@ -16,5 +16,5 @@
   "issue_tracker": "https://github.com/Matysh/houseplan-card/issues",
   "requirements": [],
   "single_config_entry": true,
-  "version": "1.25.0"
+  "version": "1.26.0"
 }

demo/smoke_state_value.mjs

@@ -0,0 +1,34 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const c = window.__card;
+  const sr = () => c.shadowRoot || c.renderRoot;
+  const devIcon = (id) => {
+    const idx = c._devices.filter((x) => x.space === c._space).findIndex((x) => x.id === id);
+    const el = sr().querySelectorAll('.dev')[idx];
+    return el?.querySelector('ha-icon')?.getAttribute('icon');
+  };
+  // 1) state-иконки: замок locked → mdi:lock; unlocked → lock-open-variant
+  out.lockLocked = devIcon('d_lock');
+  c.hass = { ...c.hass, states: { ...c.hass.states, 'lock.front_door': { ...c.hass.states['lock.front_door'], state: 'unlocked' } } };
+  await c.updateComplete;
+  out.lockUnlocked = devIcon('d_lock');
+  // окно: on → window-open
+  out.windowOpen = devIcon('d_window');
+  c.hass = { ...c.hass, states: { ...c.hass.states, 'binary_sensor.window': { ...c.hass.states['binary_sensor.window'], state: 'off' } } };
+  await c.updateComplete;
+  out.windowClosed = devIcon('d_window');
+  // лампа on → lightbulb-on
+  out.bulbOn = devIcon('d_light1');
+  // 2) display:value у термометра
+  c._serverCfg = { ...c._serverCfg, markers: [{ id: 'd_temp', binding: 'device:d_temp', display: 'value' }] };
+  c._regSignature = ''; c._maybeRebuildDevices(); c.requestUpdate(); await c.updateComplete;
+  const vd = [...sr().querySelectorAll('.dev.valonly')];
+  out.valonly = vd.length;
+  out.valText = vd[0]?.querySelector('.valtext')?.textContent.trim();
+  out.noSmallBadge = !vd[0]?.querySelector('.tval');
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();

docs/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## v1.26.0 — 2026-07-21 (state-reflecting icons + value display; issue #3)
+- **Auto icons now reflect live state**, like core HA: door/window/garage sensors
+  swap open↔closed variants, locks show locked/unlocked, a bulb lights up as
+  `lightbulb-on`. Conservative by design: only well-known pairs, never when the
+  user picked a custom icon, and `unavailable`/`unknown` keep the base icon.
+  Gated by the existing "live states" card option. (Pure `stateIcon`, unit-tested.)
+- **New marker display mode "Value instead of an icon"**: the measurement itself
+  (temperature °, humidity %, or any numeric state with its unit) becomes the
+  marker body — the small corner badges disappear for such markers. Direct
+  request from issue #3. Non-numeric entities fall back to the icon.
+
 ## v1.25.0 — 2026-07-21 (three interaction modes: View / Plan / Devices)
 The approved UX redesign (docs/UX-MODES.md), confirmed by user feedback (#3):
 

docs/STATUS.md

@@ -13,7 +13,7 @@
 
 | Item | State |
 |---|---|
-| Version | **v1.25.0** everywhere (manifest, const.py, package.json, CARD_VERSION) |
+| Version | **v1.26.0** everywhere (manifest, const.py, package.json, CARD_VERSION) |
 | GitHub | https://github.com/Matysh/houseplan-card — branch `main`, releases v1.9.3…**v1.23.1** (latest published 2026-07-17, bundle auto-attached by release.yml) |
 | CI | `.github/workflows/validate.yml` (hacs + hassfest + frontend + backend) — **fully green** since v1.11.1; `release.yml` auto-attaches the card bundle (needs `permissions: contents: write`, fixed) |
 | HACS | Works as custom repository (id 1290210112 on the home instance). **Inclusion PR: https://github.com/hacs/default/pull/9004** (queue ≈2 months as of 2026-07). Lesson: #8995 was auto-closed by hacs-bot — the PR body MUST be their exact template with every checkbox ticked and all 3 links (release, HACS action run, hassfest run); a custom body gets closed without discussion |

docs/TESTING.md

@@ -124,6 +124,10 @@ Run the *core flows* (marked ★ below) in each environment at least once per mi
 - [ ] ↺ reset restores auto layout after confirm
 - [ ] Temperature badge on thermometers; LQI value under zigbee icons with red→green color
 - [ ] Live states: light on = yellow, open cover/lock/door = orange, unavailable = faded
+- [ ] State icons (v1.26.0): auto icons morph with state — door/window/garage open↔closed,
+      lock locked↔unlocked, bulb on; custom icons and unavailable states never morph [auto]
+- [ ] display "Value instead of an icon": the marker shows the measurement (°/%/unit)
+      as its body, small badges hidden; non-numeric fallback keeps the icon [auto]
 - [ ] No devices at all in HA (fresh instance) → plan renders, "0 dev.", no console errors [auto]
 
 ## Device dialog (markers) ★

package.json

@@ -1,6 +1,6 @@
 {
   "name": "houseplan-card",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "Interactive house plan Lovelace card for Home Assistant",
   "license": "MIT",
   "type": "module",

src/houseplan-card.ts

@@ -17,6 +17,7 @@ import {
   pointOnBoundary, mergeRooms, splitRoom, polygonArea, closestPointOnBoundary,
   snapToWall, openingAmount,
   averageLqi, fitView, declump, safeUrl, resolveTapAction, floorsOf, type FloorInfo,
+  stateIcon,
   spaceDisplayOf, roomFillStyle, fillColorsOf, DEFAULT_FILL_COLORS, type FillColors,
   isActiveState, DEFAULT_ROOM_COLOR, DEFAULT_ROOM_OPACITY,
   DEFAULT_TEMP_MIN, DEFAULT_TEMP_MAX, type SpaceDisplay,
@@ -31,7 +32,7 @@ import './space-card';
 import { cardStyles } from './styles';
 import { langOf, t, type I18nKey } from './i18n';
 
-const CARD_VERSION = '1.25.0';
+const CARD_VERSION = '1.26.0';
 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';
@@ -145,7 +146,7 @@ class HouseplanCard extends LitElement {
     binding: string;     // 'device:<id>' | 'entity:<eid>' | 'virtual'
     bindingFilter: string;
     icon: string;        // '' = auto
-    display: 'badge' | 'ripple' | 'icon_ripple';
+    display: 'badge' | 'ripple' | 'icon_ripple' | 'value';
     rippleColor: string; // '' = accent
     rippleSize: number;  // in icon diameters
     size: number;        // icon size multiplier
@@ -2526,6 +2527,20 @@ class HouseplanCard extends LitElement {
     const m = d.marker;
     const disp = m?.display || 'badge';
     const ripple = disp === 'ripple' || disp === 'icon_ripple';
+    // value-only display: the measurement IS the marker
+    const primarySt = d.primary ? this.hass.states[d.primary] : undefined;
+    const valText = disp === 'value'
+      ? (temp != null ? temp + '°'
+        : hum != null ? hum + '%'
+        : primarySt && !isNaN(parseFloat(primarySt.state))
+          ? parseFloat(primarySt.state) + (primarySt.attributes?.unit_of_measurement ? ' ' + primarySt.attributes.unit_of_measurement : '')
+          : null)
+      : null;
+    // live state variants of the auto icon (doors, locks, bulbs), like core HA
+    const icon = this._config?.live_states
+      ? stateIcon(d.icon, d.primary ? d.primary.split('.')[0] : null,
+          primarySt?.attributes?.device_class, primarySt?.state, !!m?.icon)
+      : d.icon;
     const active = ripple && !!d.primary && isActiveState(this.hass.states[d.primary]?.state);
     const scale = Number(m?.size) > 0 ? Number(m!.size) : 1;
     const angle = Number(m?.angle) || 0;
@@ -2537,7 +2552,7 @@ class HouseplanCard extends LitElement {
       if (m?.ripple_color) st.push(`--ripple-color:${m.ripple_color}`);
     }
     return html`<div
-      class="dev ${cls} ${this._selId === d.id ? 'sel' : ''} ${d.virtual ? 'virtual' : ''} ${disp === 'ripple' ? 'noicon' : ''}"
+      class="dev ${cls} ${this._selId === d.id ? 'sel' : ''} ${d.virtual ? 'virtual' : ''} ${disp === 'ripple' ? 'noicon' : ''} ${valText != null ? 'valonly' : ''}"
       style="${st.join(';')}"
       @click=${(e: MouseEvent) => this._clickDevice(e, d)}
       @mousemove=${(e: MouseEvent) =>
@@ -2552,11 +2567,13 @@ class HouseplanCard extends LitElement {
       ${ripple
         ? html`<span class="ripple ${active ? 'active' : ''}"><i></i><i></i><i></i></span>`
         : nothing}
-      ${disp !== 'ripple'
-        ? html`<ha-icon icon="${d.icon}" style=${angle ? `transform:rotate(${angle}deg)` : nothing}></ha-icon>`
+      ${valText != null
+        ? html`<span class="valtext">${valText}</span>`
+        : disp !== 'ripple'
+          ? html`<ha-icon icon="${icon}" style=${angle ? `transform:rotate(${angle}deg)` : nothing}></ha-icon>`
           : nothing}
-      ${temp != null ? html`<span class="tval">${temp}°</span>` : nothing}
-      ${hum != null ? html`<span class="hval">${hum}%</span>` : nothing}
+      ${temp != null && valText == null ? html`<span class="tval">${temp}°</span>` : nothing}
+      ${hum != null && valText == null ? html`<span class="hval">${hum}%</span>` : nothing}
       ${lqi != null ? html`<span class="lqi" style="color:${lqiColor(lqi)}">${lqi}</span>` : nothing}
     </div>`;
   }
@@ -3036,11 +3053,11 @@ class HouseplanCard extends LitElement {
           <label>${this._t('marker.display_label')}</label>
           <select class="areasel"
             @change=${(e: Event) => (this._markerDialog = { ...d, display: (e.target as HTMLSelectElement).value as any })}>
-            ${[['badge', 'display.badge'], ['ripple', 'display.ripple'], ['icon_ripple', 'display.icon_ripple']].map(
+            ${[['badge', 'display.badge'], ['ripple', 'display.ripple'], ['icon_ripple', 'display.icon_ripple'], ['value', 'display.value']].map(
               ([v, k]) => html`<option value=${v} ?selected=${d.display === v}>${this._t(k as any)}</option>`,
             )}
           </select>
-          ${d.display !== 'badge'
+          ${d.display === 'ripple' || d.display === 'icon_ripple'
             ? html`<div class="colorrow">
                 <input type="color" .value=${d.rippleColor || '#3ea6ff'}
                   @input=${(e: Event) => (this._markerDialog = { ...d, rippleColor: (e.target as HTMLInputElement).value })} />

src/i18n/en.json

@@ -242,5 +242,6 @@
   "gs.light_none": "No light sources",
   "mode.view": "View",
   "mode.plan": "Plan",
-  "mode.devices": "Devices"
+  "mode.devices": "Devices",
+  "display.value": "Value instead of an icon"
 }

src/i18n/ru.json

@@ -242,5 +242,6 @@
   "gs.light_none": "Нет источников света",
   "mode.view": "Просмотр",
   "mode.plan": "План",
-  "mode.devices": "Устройства"
+  "mode.devices": "Устройства",
+  "display.value": "Значение вместо иконки"
 }

src/logic.ts

@@ -649,3 +649,28 @@ export function roomFillColor(
   }
   return null;
 }
+
+// ---------------- state-reflecting icons ----------------
+
+/**
+ * Swap the auto icon for a state variant (open door, unlocked lock…), like core
+ * HA does. Conservative: only well-known pairs, only when the user has NOT set
+ * a custom icon, and unknown/unavailable states keep the base icon.
+ */
+export function stateIcon(
+  base: string,
+  domain: string | null | undefined,
+  deviceClass: string | null | undefined,
+  state: string | null | undefined,
+  hasCustomIcon: boolean,
+): string {
+  if (hasCustomIcon || !state || state === 'unavailable' || state === 'unknown') return base;
+  if (domain === 'binary_sensor') {
+    if (deviceClass === 'door') return state === 'on' ? 'mdi:door-open' : 'mdi:door-closed';
+    if (deviceClass === 'window') return state === 'on' ? 'mdi:window-open' : 'mdi:window-closed';
+    if (deviceClass === 'garage_door') return state === 'on' ? 'mdi:garage-open-variant' : 'mdi:garage-variant';
+  }
+  if (domain === 'lock') return state === 'locked' ? 'mdi:lock' : 'mdi:lock-open-variant';
+  if (domain === 'light' && base === 'mdi:lightbulb') return state === 'on' ? 'mdi:lightbulb-on' : base;
+  return base;
+}

src/styles.ts

@@ -485,6 +485,16 @@ export const cardStyles = css`
     .namein {
       width: 130px;
     }
+    .dev.valonly {
+      width: auto;
+      min-width: var(--dev-size, var(--icon-size, 2.5cqw));
+      padding: 0 calc(var(--icon-size, 2.5cqw) * 0.16);
+    }
+    .dev.valonly .valtext {
+      font-size: calc(var(--icon-size, 2.5cqw) * 0.45);
+      font-weight: 700;
+      white-space: nowrap;
+    }
     .devlayer {
       position: absolute;
       inset: 0;

src/types.ts

@@ -38,7 +38,7 @@ export interface Marker {
   description?: string | null;
   pdfs?: PdfRef[];
   tap_action?: string | null; // per-device override: 'info' | 'more-info' | 'toggle'
-  display?: 'badge' | 'ripple' | 'icon_ripple' | null; // how the device is drawn
+  display?: 'badge' | 'ripple' | 'icon_ripple' | 'value' | null; // how the device is drawn
   ripple_color?: string | null;
   ripple_size?: number | null; // max ring diameter, in icon diameters (default 3)
   size?: number | null;        // icon size multiplier (default 1)

test/logic.test.mjs

@@ -4,7 +4,7 @@ import {
   lqiColor, snapToGrid, segKey, samePoint, pointInPolygon, markerIdForBinding, averageLqi,
   fitView, declump, safeUrl, resolveTapAction, floorsOf, subst, spaceDisplayOf, roomFillColor,
   segmentCm, formatLength, roomEdges, roomPoly, pointOnBoundary, pointStrictlyInside, roomsOverlap,
-  mergeRooms, splitRoom, polygonArea, closestPointOnBoundary, isActiveState, snapToWall, openingAmount, fillColorsOf, lerpColor, roomFillStyle,
+  mergeRooms, splitRoom, polygonArea, closestPointOnBoundary, isActiveState, snapToWall, openingAmount, fillColorsOf, lerpColor, roomFillStyle, stateIcon,
 } from '../test-build/logic.js';
 import {
   iconFor, compileIconRules, isValidPattern, iconFromDeviceClasses,
@@ -483,3 +483,16 @@ test('roomFillStyle light_none: alpha 0 keeps no-fill; a custom color fills ligh
   const c = fillColorsOf({ fill_colors: { light_none: { c: '#123456', a: 0.2 } } });
   assert.deepEqual(roomFillStyle('light', null, 'none', null, 20, 25, c), { c: '#123456', a: 0.2 });
 });
+
+test('stateIcon: doors/locks/bulbs reflect state; custom icons and outages never morph', () => {
+  assert.equal(stateIcon('mdi:door', 'binary_sensor', 'door', 'on', false), 'mdi:door-open');
+  assert.equal(stateIcon('mdi:door', 'binary_sensor', 'door', 'off', false), 'mdi:door-closed');
+  assert.equal(stateIcon('mdi:window-closed', 'binary_sensor', 'window', 'on', false), 'mdi:window-open');
+  assert.equal(stateIcon('mdi:garage-variant', 'binary_sensor', 'garage_door', 'on', false), 'mdi:garage-open-variant');
+  assert.equal(stateIcon('mdi:lock', 'lock', undefined, 'unlocked', false), 'mdi:lock-open-variant');
+  assert.equal(stateIcon('mdi:lightbulb', 'light', undefined, 'on', false), 'mdi:lightbulb-on');
+  assert.equal(stateIcon('mdi:lightbulb', 'light', undefined, 'off', false), 'mdi:lightbulb');
+  assert.equal(stateIcon('mdi:door', 'binary_sensor', 'door', 'unavailable', false), 'mdi:door');
+  assert.equal(stateIcon('mdi:custom', 'lock', undefined, 'unlocked', true), 'mdi:custom'); // user icon wins
+  assert.equal(stateIcon('mdi:cctv', 'camera', undefined, 'recording', false), 'mdi:cctv'); // unknown pair
+});