mirror of
https://github.com/Matysh/houseplan-card
synced 2026-09-30 19:58:50 +00:00
Matysh
1dc03e1fb1
Owner 2026-08-04: «в редакторе подложки у линий писать длину, как при рисовании комнат в редакторе плана». The decor draft now feeds the SAME badge a wall gets while a plan is drawn — _fmtLen (segmentCm over the space's cell_cm), the HA unit system, the green .on45 highlight, the .measurelabel chrome. The only difference is where it sits: a wall badge follows the cursor because the cursor is the wall's free end, while a decor line is pulled out by both ends at once, so its badge rides the MIDDLE of the segment (owner: «плашка на середине линии»). Rectangles and ovals have no length but they do have a size, and the same two calls answer it: «W × H» of the bounding box. A draft that has not moved yet shows nothing — a «0» badge is noise, not a measurement. smoke_decor now draws a line and asserts the badge's exact text against the geometry (12 cells x cell_cm 5 = 0.60 m, 0°), its position at the midpoint, the 45° highlight, the oblique 3-4-5 case, the W x H box and that it is gone after the release.
117 lines
6.1 KiB
Markdown
117 lines
6.1 KiB
Markdown
# UX redesign: three modes (approved 2026-07-21)
|
||
|
||
> Approved design for reorganizing all card interactions into three tab-like modes.
|
||
> Driven by the owner's mandate and confirmed by real user feedback
|
||
> ([issue #3](https://github.com/Matysh/houseplan-card/issues/3): *"When moving the
|
||
> map around, I sometimes move the doors/sensors around"*). This document is the
|
||
> source of truth for the implementation iterations below. No code has been changed yet.
|
||
|
||
## Principle
|
||
|
||
A segmented control in the card header with three tabs; the active one is visually
|
||
highlighted, and edit modes add a colored frame around the stage so the mode is
|
||
obvious at a glance:
|
||
|
||
**[ 📐 Plan editor ] [ 🔧 Device editor ] [ ✏️ Background editor ]** — View has
|
||
NO tab (since v1.30.2). The Background editor (v1.33.0) manages a purely visual
|
||
decor layer (lines/rects/ovals/text in `space.decor`, drawn under the rooms,
|
||
inert everywhere outside its editor).
|
||
|
||
- **View** is the implicit default state: no editor tab is active. Since
|
||
v1.38.2 the last space AND editor mode are restored across reloads
|
||
(localStorage, admins only for edit modes) — closing and reopening the tab
|
||
lands you where you were (owner's decision, reversing the earlier
|
||
"never restore" rule).
|
||
- Activating an editor tab highlights it and opens that editor's bottom toolbar
|
||
(both editors have one since v1.30.2). The toolbar and the active tab each
|
||
carry an **X** that closes the editor back to View; re-clicking the active tab
|
||
does nothing; Plan↔Devices switches directly.
|
||
- **Plan editor** and **Device editor** are shown only to admins when
|
||
`admin_only` is on.
|
||
|
||
## View — display and device interaction only
|
||
|
||
Allowed: pan/zoom (wheel, pinch, buttons), switching spaces, device tap
|
||
(info / more-info / toggle per settings), long-press → info card, opening tap →
|
||
door/lock info card (with an explicit Unlock/Lock button when a lock is bound —
|
||
the only way to operate a lock from the card; plan-icon taps never toggle locks),
|
||
room-card link icon → HA area (room taps do nothing since v1.40.1), hover tooltips (name, temperature, signal).
|
||
|
||
Removed from this mode (they move, not die):
|
||
- icon dragging ("drag anywhere", v1.9 — consciously reversed),
|
||
- room-label dragging,
|
||
- opening dragging along walls and double-click properties (v1.23.1),
|
||
- every edit button in the header (+device, 👁 show-all, ↺ reset, ⬡ rules, ⚙ general,
|
||
per-space gear, markup toggle).
|
||
|
||
Header in View: space tabs, device count, zoom cluster. Nothing else.
|
||
|
||
## Plan — geometry and appearance of the space
|
||
|
||
- Toolbar tools: Outline room, Delete room, Merge, Split, Opening (place / drag along
|
||
walls / properties), Room labels (drag positions — labels are part of the plan).
|
||
- Space gear dialog (title, plan image / hand-drawn, scale, Display section, show_lqi),
|
||
add space, floors import, delete space.
|
||
- ⚙ General settings (fill palette) lives here — it is about the plan's appearance.
|
||
|
||
## Devices — placement and marker configuration
|
||
|
||
- Icon dragging (ONLY here). Click on a device opens the **edit dialog directly**
|
||
(binding, name, icon, size/angle, display badge/ripple + colors, tap override,
|
||
model/link/description/PDFs, room).
|
||
- + add device/entity/virtual, the "Hide device from plan" checkbox (since
|
||
v1.51.0 the one hiding mechanism, docs/FILTERING.md), ↺ reset layout,
|
||
👁 "Show hidden" (local editor tool; replaced the shared show-all toggle),
|
||
⬡ icon rules.
|
||
|
||
## Background — the decor underlay
|
||
|
||
- Toolbar tools: select / line / rect / oval / text / erase, plus colour, width
|
||
and fill. Shapes are drag-drawn with grid snap and a live preview.
|
||
- **Live size badge** (owner 2026-08-04): while a LINE is being dragged out, the
|
||
same `.measurelabel` the Plan editor puts on a wall shows «length · angle» —
|
||
`segmentCm` over the space's `cell_cm`, metres or feet per the HA unit system,
|
||
green on a 45° multiple. It rides the MIDDLE of the segment (a wall badge
|
||
follows the cursor because the cursor is the wall's free end; a decor line is
|
||
pulled out by both ends at once), updates on every move and disappears the
|
||
moment the shape is committed. Rectangles and ovals have no length, so they
|
||
show their bounding box «W × H» instead; a draft with no size shows nothing.
|
||
|
||
## Deprecations decided
|
||
|
||
1. "Drag anywhere" (v1.9) — reversed by this design.
|
||
2. Opening drag / dbl-click properties in view (v1.23.1) — moved into Plan.
|
||
3. The markup toggle button — replaced by the Plan tab.
|
||
4. Legacy localStorage mode (card without the integration) — candidate for removal
|
||
in the next major; adds branching for a half-working scenario.
|
||
|
||
## Approved follow-up features (from issue #3, by priority)
|
||
|
||
1. State-reflecting icons (open/closed door variants etc., like core HA).
|
||
2. `display: value` — show the measurement instead of an icon.
|
||
3. Light color in the icon/ripple (RGB lights). *(Shipped in v1.27.0;
|
||
superseded in v1.52.0: the colour lives in the glow spot and the ripple
|
||
fallback only, the icon tint was removed by the owner's rule.)*
|
||
4. Alarm visual (leak/smoke/doorbell): red pulse overlay.
|
||
5. Rooms as sub-areas without an HA area + manual device placement by room id.
|
||
6. Backlog (not planned): music notes for players, directional TV ripples.
|
||
|
||
## Implementation iterations
|
||
|
||
- **It.1 — mode shell:** the segmented control, mode state, View-mode gating of all
|
||
edit interactions/buttons (biggest UX win, smallest surface).
|
||
- **It.2 — Plan tab:** move markup tools + space dialogs + labels drag + openings
|
||
editing under Plan; colored frame indicator.
|
||
- **It.3 — Devices tab:** drag + direct-edit click + filtering tools under Devices.
|
||
- **It.4+:** follow-up features 1–5 above, each its own release.
|
||
|
||
|
||
## Kiosk mode (v1.41.0)
|
||
|
||
`kiosk: true` on the card is the fourth interaction surface: the full View
|
||
experience with the header removed and editors hard-blocked (even for
|
||
admins). Swipe switches spaces at 1:1 zoom only (zoomed gestures pan;
|
||
double tap resets zoom); `cycle: N` auto-advances spaces with a 60 s pause
|
||
after any touch; a 3 s long-press on empty plan opens the per-screen size
|
||
popover (localStorage). Nav persistence never restores an editor here.
|