feat v1.18.0: live segment ruler while drawing rooms + per-space scale

- Draw mode shows the current segment length near the cursor (metres or feet+inches
  per the HA unit system). New pure helpers segmentCm/formatLength (unit-tested).
- New per-space 'Scale (grid cell size)' field (space.cell_cm, default 5 cm) so each
  plan has its own real-world dimensions. i18n en/ru, .measurelabel style. +3 tests (61).

README.md

@@ -160,6 +160,9 @@ matches, the entity *device class* decides (thermometer for temperature sensors,
 
 ### Step 6. Adding your own devices manually
 
+You can also place a **single entity** (not just a whole device): start typing in the binding search and individual entities appear next to devices — handy when one device exposes several values (e.g. temperature and humidity) and you want each as its own icon.
+
+
 Not everything has to be left to the automation. With the **＋** button in the header you can place any device, group or a **virtual point** on the plan (for example, an "Inlet valve" that does not exist as a device). Set a name, icon, model, link, description and, if you wish, attach a **PDF manual**.
 
 ![Adding a device manually](docs/images/07-marker-dialog.png)

README.ru.md

@@ -164,6 +164,9 @@ title: План дома
 
 ### Шаг 6. Добавление своих устройств вручную
 
+Можно поставить и **отдельную сущность** (не только устройство целиком): начните печатать в поиске привязки — рядом с устройствами появятся отдельные сущности. Удобно, когда одно устройство отдаёт несколько значений (например, температуру и влажность), а вы хотите каждое своей иконкой.
+
+
 Не всё нужно оставлять на автоматику. Кнопкой **＋** в шапке можно поставить на план любое устройство, группу или **виртуальную точку** (например, «Вентиль на вводе», которого нет как устройства). Задайте имя, иконку, модель, ссылку, описание и при желании приложите **PDF-инструкцию**.
 
 ![Добавление устройства вручную](docs/images/07-marker-dialog.png)

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.16.2"
+VERSION = "1.18.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.16.2"
+  "version": "1.18.0"
 }

docs/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## v1.18.0 — 2026-07-14 (live measurements while drawing rooms + per-space scale)
+- **Ruler while drawing.** In room-markup "draw" mode, a badge follows the cursor showing the
+  length of the current segment (last placed vertex → cursor). Units come from the HA unit
+  system: metric → metres ("1.25 m"), imperial → feet+inches ("4′ 1″").
+- **Per-space scale.** New "Scale (grid cell size)" field in the space dialog — cm represented
+  by one grid cell (default **5 cm**, i.e. 240 cells ≈ 12 m). Stored as `space.cell_cm`; each
+  plan can have its own real-world size.
+- Pure helpers `segmentCm` / `formatLength` in logic.ts (unit-tested); `_fmtLen` +
+  `_renderMeasureLabel` in the card; `.measurelabel` style; i18n `space.scale_label`/`scale_unit`.
+  (+3 tests: 58 → 61 frontend.)
+
+## v1.17.2 — 2026-07-11 (humidity badge: gate on the sensor, not the icon)
+- Fix on top of v1.17.1: the humidity `%` badge is now shown whenever the marker's primary
+  entity is a humidity sensor (`device_class: humidity`), regardless of the resolved icon.
+  Previously it required the `mdi:water-percent` icon, so a humidity sensor whose name matched
+  another icon rule (e.g. a "Myheat Влажность …" sensor → boiler icon) showed no value.
+  Verified live (45.2 → 45%). (+1 test: 57 → 58.)
+
+## v1.17.1 — 2026-07-11 (humidity value next to the icon, like temperature)
+- **Humidity sensors now show their value (%) next to the icon**, mirroring the temperature
+  badge. Any marker resolved to the humidity icon (`mdi:water-percent`) — a humidity device or a
+  humidity entity placed on its own (v1.17.0) — gets an integer `%` badge and the value in its
+  tooltip. New `isHumEntity`/`humFor` (diagnostic entities excluded), `DevItem.hum`, `.hval`
+  badge, gated by the same "sensor values" option as temperature. (+2 tests: 55 → 57.)
+
+## v1.17.0 — 2026-07-11 (place individual entities, not just whole devices — issue #1)
+- **You can now put a single entity on the plan as its own icon** — e.g. a climate sensor
+  exposes temperature AND humidity; add the device (shows temperature) and separately add the
+  humidity entity as a second icon. In the "add device" dialog, start typing in the binding
+  search and individual entities now appear alongside devices/helpers (surfaced only while
+  searching, so the default list stays clean); the sub-label shows the domain and parent device.
+- Entity markers now get a **sensible auto icon** (name rules → `device_class` → chip) instead of
+  the generic shape, and a **temperature value** when the entity is a thermometer/air-monitor.
+  The `entity:<eid>` binding already existed (used by helpers/light groups); this exposes it for
+  any entity. (+1 test: 54 → 55.)
+
 ## v1.16.2 — 2026-07-11 (docs+log: correct card resource URL — fixes "Custom element doesn't exist")
 - **Support issue #2**: users adding a Lovelace resource that points at the on-disk path
   `/custom_components/houseplan/frontend/houseplan-card.js` get a `text/plain` MIME error and

docs/STATUS.md

@@ -13,14 +13,14 @@
 
 | Item | State |
 |---|---|
-| Version | **v1.16.2** everywhere (manifest, const.py, package.json, CARD_VERSION) |
+| Version | **v1.18.0** everywhere (manifest, const.py, package.json, CARD_VERSION) |
 | GitHub | https://github.com/Matysh/houseplan-card — branch `main`, releases v1.9.3…v1.11.2 |
 | 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 |
 | Brands | Ships **inside the integration**: `custom_components/houseplan/brand/{icon,icon@2x,logo,logo@2x}.png` (HA ≥2026.3 local-brands mechanism). home-assistant/brands PR #10700 was auto-closed — that repo no longer accepts custom integrations |
 | Home instance | ha.jbstudio.pro (SSH port 323, key `ha_jb`), deployed v1.11.2, installed *via HACS* (custom repo) — updates flow through HACS now |
 | Localization | UI en/ru (`src/i18n.ts`), auto by `hass.locale` + `language` card option; codebase and docs are English-first (`README.ru.md` is the Russian copy) |
-| Tests | 54 frontend (node:test, incl. a 12-test buildDevices suite on a fake hass) + 10 pure backend (anywhere) + 12 HA-harness backend (CI only, py3.13; skipped locally — sandbox has py3.10) |
+| Tests | 61 frontend (node:test, incl. a 12-test buildDevices suite on a fake hass) + 10 pure backend (anywhere) + 12 HA-harness backend (CI only, py3.13; skipped locally — sandbox has py3.10) |
 
 ## Recent milestones (details in CHANGELOG.md)
 

package.json

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

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 (item.primary && isHumEntity(h, item.primary)) 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 (item.primary && isHumEntity(h, item.primary)) item.hum = humFor(h, entIds);
+    if (item.primary && isHumEntity(h, item.primary)) item.hum = humFor(h, entIds);
       applyMarker(item, m);
       rest.push(item);
     } else if (kind === 'entity') {
@@ -261,18 +285,23 @@ export function buildDevices(ctx: BuildCtx): DevItem[] {
       const area = m.area || reg?.area_id || (reg?.device_id && h.devices[reg.device_id]?.area_id) || '';
       const space = (area && areaToSpace[area]) || m.space || firstSpaceId;
       const st = h.states[ref];
+      const nm = reg?.name || st?.attributes?.friendly_name || ref;
+      let icon = resolveIcon(h, nm, '', [ref], iconRules);
+      if (ref.startsWith('lock.')) icon = 'mdi:lock';
       const item: DevItem = {
         id: m.id,
-        name: reg?.name || st?.attributes?.friendly_name || ref,
+        name: nm,
         model: '',
         area,
         space,
-        icon: 'mdi:shape-outline',
+        icon,
         entities: [ref],
         primary: ref,
         bindingKind: 'entity',
         bindingRef: ref,
       };
+      if (icon === 'mdi:thermometer' || icon === 'mdi:air-filter') item.temp = tempFor(h, [ref]);
+      if (isHumEntity(h, ref)) item.hum = humFor(h, [ref]);
       applyMarker(item, m);
       rest.push(item);
     } else {

src/houseplan-card.ts

@@ -13,11 +13,12 @@ import {
 } from './rules';
 import {
   lqiColor, snapToGrid, segKey as segKeyOf, samePoint, pointInPolygon, markerIdForBinding,
+  segmentCm, formatLength,
   averageLqi, fitView, declump, safeUrl, resolveTapAction, floorsOf, type FloorInfo,
   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, isHumEntity, areaLights, areaTemp } from './devices';
 import type {
   RoomCfg, SpaceModel, PdfRef, Marker, ServerConfig, DevItem, CardConfig,
 } from './types';
@@ -26,7 +27,7 @@ import './space-card';
 import { cardStyles } from './styles';
 import { langOf, t, type I18nKey } from './i18n';
 
-const CARD_VERSION = '1.16.2';
+const CARD_VERSION = '1.18.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';
@@ -132,6 +133,7 @@ class HouseplanCard extends LitElement {
     fillMode: 'none' | 'lqi' | 'light' | 'temp';
     tempMin: number;
     tempMax: number;
+    cellCm: number;                // real-world cm represented by one grid cell
     busy: boolean;
   } | null = null;
   private _keyHandler = (e: KeyboardEvent) => this._onKey(e);
@@ -641,6 +643,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.primary || !isHumEntity(this.hass, d.primary)) return null;
+    return humFor(this.hass, d.entities);
+  }
+
   // ================= interaction =================
 
   private _openMoreInfo(entityId?: string): void {
@@ -938,6 +946,18 @@ class HouseplanCard extends LitElement {
     return NORM_W / GRID_N;
   }
 
+  /** cm represented by one grid cell for the current space (default 5). */
+  private get _cellCm(): number {
+    const v = Number(this._curSpaceCfg?.cell_cm);
+    return Number.isFinite(v) && v > 0 ? v : 5;
+  }
+
+  /** Human-readable length of a segment (render units) using the HA unit system. */
+  private _fmtLen(a: number[], b: number[]): string {
+    const cm = segmentCm(a, b, this._gridPitch, this._cellCm);
+    return formatLength(cm, this.hass?.config?.unit_system?.length === 'mi');
+  }
+
   private get _curSpaceCfg(): any {
     return this._serverCfg?.spaces.find((s: any) => s.id === this._space);
   }
@@ -1262,6 +1282,23 @@ class HouseplanCard extends LitElement {
         sub: eid.split('.')[0] + ' · ' + (reg.platform === 'group' ? this._t('marker.sub_group') : this._t('marker.sub_helper')),
       });
     }
+    // Individual entities — surfaced only while searching (avoids a huge default list); lets you
+    // place a single entity of a multi-entity device (e.g. the humidity of a climate sensor) as
+    // its own icon. Uses the same entity: binding as helpers/groups.
+    const q = (this._markerDialog?.bindingFilter || '').toLowerCase().trim();
+    if (q) {
+      const seen = new Set(list.map((o) => o.value));
+      for (const [eid, reg] of Object.entries<any>(h.entities)) {
+        const v = 'entity:' + eid;
+        if (taken.has(v) || seen.has(v) || reg.hidden) continue;
+        const stt = h.states[eid];
+        const label = reg.name || stt?.attributes?.friendly_name || eid;
+        const dev = reg.device_id ? h.devices[reg.device_id] : null;
+        const devName = dev ? (dev.name_by_user || dev.name || '') : '';
+        if (!(label + ' ' + eid + ' ' + devName).toLowerCase().includes(q)) continue;
+        list.push({ value: v, label, sub: eid.split('.')[0] + ' · ' + this._t('marker.sub_entity') + (devName ? ' · ' + devName : '') });
+      }
+    }
     const f = (this._markerDialog?.bindingFilter || '').toLowerCase().trim();
     const filtered = f
       ? list.filter((o) => (o.label + ' ' + o.sub + ' ' + o.value).toLowerCase().includes(f))
@@ -1486,6 +1523,7 @@ class HouseplanCard extends LitElement {
         showBorders: disp.showBorders, showNames: disp.showNames,
         roomColor: disp.color, roomOpacity: disp.opacity, fillMode: disp.fill,
         tempMin: disp.tempMin, tempMax: disp.tempMax,
+        cellCm: Number(sp.cell_cm) > 0 ? Number(sp.cell_cm) : 5,
         busy: false,
       };
     } else {
@@ -1495,6 +1533,7 @@ class HouseplanCard extends LitElement {
         showBorders: false, showNames: false,
         roomColor: DEFAULT_ROOM_COLOR, roomOpacity: DEFAULT_ROOM_OPACITY, fillMode: 'none',
         tempMin: DEFAULT_TEMP_MIN, tempMax: DEFAULT_TEMP_MAX,
+        cellCm: 5,
         busy: false,
       };
     }
@@ -1579,6 +1618,7 @@ class HouseplanCard extends LitElement {
         temp_min: Number.isFinite(d.tempMin) ? Math.min(d.tempMin, d.tempMax) : DEFAULT_TEMP_MIN,
         temp_max: Number.isFinite(d.tempMax) ? Math.max(d.tempMin, d.tempMax) : DEFAULT_TEMP_MAX,
       };
+      sp.cell_cm = Number.isFinite(d.cellCm) && d.cellCm > 0 ? d.cellCm : 5;
       await this._saveConfigNow();
       this._spaceDialog = null;
       if (d.mode === 'create') this._space = sp.id;
@@ -1667,6 +1707,7 @@ class HouseplanCard extends LitElement {
       showBorders: false, showNames: false,
       roomColor: DEFAULT_ROOM_COLOR, roomOpacity: DEFAULT_ROOM_OPACITY, fillMode: 'none',
       tempMin: DEFAULT_TEMP_MIN, tempMax: DEFAULT_TEMP_MAX,
+      cellCm: 5,
       busy: false,
     };
   }
@@ -1984,6 +2025,9 @@ class HouseplanCard extends LitElement {
             ${disp.showNames && !this._markup
               ? space.rooms.map((r) => this._renderRoomLabel(r, space, view, disp))
               : nothing}
+            ${this._markup && this._tool === 'draw' && this._path.length && this._cursorPt && !this._contourClosed
+              ? this._renderMeasureLabel(view)
+              : nothing}
           </div>
           </div>
           ${this._zoom > 1
@@ -2020,6 +2064,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' : ''}"
@@ -2027,7 +2072,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)}
@@ -2036,6 +2081,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>`;
   }
@@ -2103,6 +2149,15 @@ class HouseplanCard extends LitElement {
     >${r.name}</div>`;
   }
 
+  /** Length badge that follows the cursor while drawing the current segment. */
+  private _renderMeasureLabel(view: { x: number; y: number; w: number; h: number }): TemplateResult {
+    const a = this._path[this._path.length - 1];
+    const b = this._cursorPt!;
+    const left = ((b[0] - view.x) / view.w) * 100;
+    const top = ((b[1] - view.y) / view.h) * 100;
+    return html`<div class="measurelabel" style="left:${left}%;top:${top}%">${this._fmtLen(a, b)}</div>`;
+  }
+
   private _roomCenter(r: RoomCfg): number[] {
     if (r.poly) {
       const n = r.poly.length;
@@ -2377,6 +2432,16 @@ class HouseplanCard extends LitElement {
               </select>`
             : nothing}
 
+          <label>${this._t('space.scale_label')}</label>
+          <div class="colorrow">
+            <input class="namein tempin" type="number" min="0.1" step="0.1" .value=${String(d.cellCm)}
+              @input=${(e: Event) => {
+                const n = parseFloat((e.target as HTMLInputElement).value);
+                this._spaceDialog = { ...d, cellCm: Number.isFinite(n) && n > 0 ? n : d.cellCm };
+              }} />
+            <span class="opl">${this._t('space.scale_unit')}</span>
+          </div>
+
           <label class="dispsection">${this._t('space.display_section')}</label>
           <label class="srcrow">
             <input type="checkbox" .checked=${d.showBorders}

src/i18n/en.json

@@ -152,6 +152,8 @@
   "import.progress": "Floor {i} of {n}",
   "import.done": "Spaces created. Outline the rooms: click grid dots and close the contour.",
   "btn.skip": "Skip",
+  "space.scale_label": "Scale (grid cell size)",
+  "space.scale_unit": "cm per cell",
   "space.display_section": "Display",
   "space.show_borders": "Always show room borders",
   "space.show_names": "Show room names (drag to move)",
@@ -178,5 +180,6 @@
   "editor.show_button": "Show button",
   "editor.button_label": "Button label",
   "editor.button_target": "Target dashboard path",
-  "editor.aspect_ratio": "Aspect ratio (e.g. 16:9 or auto)"
+  "editor.aspect_ratio": "Aspect ratio (e.g. 16:9 or auto)",
+  "marker.sub_entity": "entity"
 }

src/i18n/ru.json

@@ -152,6 +152,8 @@
   "import.progress": "Этаж {i} из {n}",
   "import.done": "Пространства созданы. Обведите комнаты: кликайте по точкам сетки и замкните контур.",
   "btn.skip": "Пропустить",
+  "space.scale_label": "Масштаб (размер клетки сетки)",
+  "space.scale_unit": "см на клетку",
   "space.display_section": "Отображение",
   "space.show_borders": "Всегда отображать границы комнат",
   "space.show_names": "Отображать названия комнат (перетаскиваются)",
@@ -178,5 +180,6 @@
   "editor.show_button": "Показывать кнопку",
   "editor.button_label": "Текст кнопки",
   "editor.button_target": "Путь дашборда (куда вести)",
-  "editor.aspect_ratio": "Соотношение сторон (напр. 16:9 или auto)"
+  "editor.aspect_ratio": "Соотношение сторон (напр. 16:9 или auto)",
+  "marker.sub_entity": "сущность"
 }

src/logic.ts

@@ -13,6 +13,24 @@ export function snapToGrid(v: number, pitch: number): number {
   return Math.round(v / pitch) * pitch;
 }
 
+/** Real-world length (cm) of a segment given the grid pitch (render units per cell) and cm per cell. */
+export function segmentCm(a: number[], b: number[], gridPitch: number, cellCm: number): number {
+  const cells = Math.hypot(b[0] - a[0], b[1] - a[1]) / gridPitch;
+  return cells * cellCm;
+}
+
+/** Format a length (cm) for display: metric metres ("1.25 m") or imperial feet+inches ("4′ 1″"). */
+export function formatLength(cm: number, imperial: boolean): string {
+  if (imperial) {
+    const totalIn = cm / 2.54;
+    let ft = Math.floor(totalIn / 12);
+    let inch = Math.round(totalIn - ft * 12);
+    if (inch === 12) { ft += 1; inch = 0; }
+    return `${ft}′ ${inch}″`;
+  }
+  return `${(cm / 100).toFixed(2)} m`;
+}
+
 /** Canonical key of a segment (independent of direction). */
 export function segKey(a: number[], b: number[]): string {
   const [p, q] = a[0] < b[0] || (a[0] === b[0] && a[1] <= b[1]) ? [a, b] : [b, a];

src/styles.ts

@@ -236,6 +236,20 @@ export const cardStyles = css`
       z-index: 1;
     }
     .roomlabel:active { cursor: grabbing; }
+    .measurelabel {
+      position: absolute;
+      transform: translate(12px, -150%);
+      font-size: 12px;
+      font-weight: 600;
+      padding: 1px 6px;
+      border-radius: 6px;
+      background: rgba(0, 0, 0, 0.72);
+      color: #fff;
+      white-space: nowrap;
+      pointer-events: none;
+      user-select: none;
+      z-index: 3;
+    }
     .rlabel {
       fill: var(--hp-muted);
       font-size: 15px;
@@ -383,6 +397,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';

test/devices.test.mjs

@@ -1,6 +1,6 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
-import { buildDevices, lightGroups, primaryEntity, lqiFor, tempFor, areaLights, areaTemp } from '../test-build/devices.js';
+import { buildDevices, lightGroups, primaryEntity, lqiFor, tempFor, humFor, areaLights, areaTemp } from '../test-build/devices.js';
 import { compileIconRules } from '../test-build/rules.js';
 
 /** Minimal fake hass around the pieces buildDevices reads. */
@@ -224,3 +224,59 @@ test('isTempEntity: excludes chip temperature and diagnostic-category entities',
   // если в устройстве и чип, и настоящий — берётся настоящий
   assert.equal(tempFor(hass, ['sensor.plug_device_temperature', 'sensor.room_temperature']), 21);
 });
+
+test('buildDevices: entity marker gets an auto icon + temperature (split a multi-entity device)', () => {
+  const h = mkHass({
+    entities: {
+      'sensor.clim_temp': { entity_id: 'sensor.clim_temp', device_id: 'clim', platform: 'demo' },
+      'sensor.clim_hum': { entity_id: 'sensor.clim_hum', device_id: 'clim', platform: 'demo' },
+    },
+    states: {
+      'sensor.clim_temp': { state: '22.5', attributes: { device_class: 'temperature', friendly_name: 'Climate Temperature' } },
+      'sensor.clim_hum': { state: '55', attributes: { device_class: 'humidity', friendly_name: 'Climate Humidity' } },
+    },
+  });
+  const ctx = baseCtx(h, { markers: [
+    { id: 'e1', binding: 'entity:sensor.clim_temp' },
+    { id: 'e2', binding: 'entity:sensor.clim_hum' },
+  ] });
+  const devs = buildDevices(ctx);
+  const t = devs.find((d) => d.id === 'e1');
+  const hum = devs.find((d) => d.id === 'e2');
+  assert.equal(t.icon, 'mdi:thermometer');
+  assert.equal(t.temp, 22.5);
+  // humidity resolves to a real icon (device_class fallback), not the old generic shape
+  assert.ok(hum && hum.icon && hum.icon !== 'mdi:shape-outline');
+  assert.equal(hum.primary, 'sensor.clim_hum'); // more-info target
+});
+
+test('humFor: reads a humidity entity as an integer %, ignores non-humidity', () => {
+  const h = mkHass({ states: {
+    'sensor.h': { state: '54.7', attributes: { device_class: 'humidity' } },
+    'sensor.t': { state: '22', attributes: { device_class: 'temperature' } },
+  }});
+  assert.equal(humFor(h, ['sensor.t', 'sensor.h']), 55); // rounded
+  assert.equal(humFor(h, ['sensor.t']), null);
+});
+
+test('buildDevices: humidity entity marker shows a humidity badge (item.hum), water-percent icon', () => {
+  const h = mkHass({
+    entities: { 'sensor.clim_hum': { entity_id: 'sensor.clim_hum', device_id: 'clim', platform: 'demo' } },
+    states: { 'sensor.clim_hum': { state: '54.7', attributes: { device_class: 'humidity', friendly_name: 'Climate Humidity' } } },
+  });
+  const hum = buildDevices(baseCtx(h, { markers: [{ id: 'e2', binding: 'entity:sensor.clim_hum' }] })).find((d) => d.id === 'e2');
+  assert.equal(hum.icon, 'mdi:water-percent');
+  assert.equal(hum.hum, 55);
+  assert.equal(hum.temp, undefined);
+});
+
+test('buildDevices: humidity badge is gated on device_class, not the icon (name may force another icon)', () => {
+  const h = mkHass({
+    entities: { 'sensor.mh_hum': { entity_id: 'sensor.mh_hum', device_id: 'mh', platform: 'demo' } },
+    // name contains "myheat" → icon rule resolves to water-boiler, NOT water-percent…
+    states: { 'sensor.mh_hum': { state: '45.2', attributes: { device_class: 'humidity', friendly_name: 'Myheat Влажность 1 этаж' } } },
+  });
+  const d = buildDevices(baseCtx(h, { markers: [{ id: 'e', binding: 'entity:sensor.mh_hum' }] })).find((x) => x.id === 'e');
+  assert.notEqual(d.icon, 'mdi:water-percent'); // name rule won the icon
+  assert.equal(d.hum, 45); // …but the humidity value is still shown (gated on device_class)
+});

test/logic.test.mjs

@@ -3,6 +3,7 @@ import assert from 'node:assert/strict';
 import {
   lqiColor, snapToGrid, segKey, samePoint, pointInPolygon, markerIdForBinding, averageLqi,
   fitView, declump, safeUrl, resolveTapAction, floorsOf, subst, spaceDisplayOf, roomFillColor,
+  segmentCm, formatLength,
 } from '../test-build/logic.js';
 import {
   iconFor, compileIconRules, isValidPattern, iconFromDeviceClasses,
@@ -258,3 +259,20 @@ test('spaceDisplayOf: temp bounds default to 20..25 and accept overrides', () =>
   assert.equal(o.tempMin, 18.5);
   assert.equal(o.tempMax, 23);
 });
+
+test('segmentCm: cells scaled by cm-per-cell', () => {
+  assert.equal(segmentCm([0, 0], [30, 40], 10, 5), 25); // 50 units / pitch 10 = 5 cells * 5cm
+  assert.ok(Math.abs(segmentCm([0, 0], [240, 0], 1000 / 240, 5) - 288) < 1e-9);
+});
+
+test('formatLength: metric metres with 2 decimals', () => {
+  assert.equal(formatLength(25, false), '0.25 m');
+  assert.equal(formatLength(125, false), '1.25 m');
+  assert.equal(formatLength(0, false), '0.00 m');
+});
+
+test('formatLength: imperial feet + inches, with inch rollover', () => {
+  assert.equal(formatLength(124.46, true), '4′ 1″');
+  assert.equal(formatLength(30.48, true), '1′ 0″');
+  assert.equal(formatLength(29.464, true), '1′ 0″');
+});