mirror of
https://github.com/Matysh/houseplan-card
synced 2026-10-03 21:28:59 +00:00
Owner, 2026-08-04: «цвет фона не меняется сам с течением времени суток, только
после обновления страницы».
WHAT IS NOT THE BUG. The model layer was already live: `_stageBg` and the
`planDim` filter are read straight out of `hass.states['sun.sun']` on every
render, `hass` is a plain reactive property, and a bare `card.hass = {...}` in
the demo rig does move the style attribute — smoke_sun.mjs has asserted exactly
that since v1.56.0 and it has always passed.
WHAT IS. The sky is DELIVERED by a 45 s CSS transition, and a CSS transition
only advances while the element is being painted. Every second of a background
tab, another dashboard view, an editor session or a sleeping wall tablet is a
second the sun keeps moving and the sky does not; when the card comes back, the
transition restarts from the stale colour and crawls, 45 s at a time, toward a
target that has meanwhile moved again. A page reload, by contrast, paints the
right colour outright — a freshly mounted element has nothing to transition
FROM. That is the owner's sentence, word for word.
THE FIX. Measure the gap and decide. HA refreshes `sun.sun` every ~4 minutes by
day (verified on the home instance: 08:58:56, 09:02:56, 09:06:56, …), i.e. ≤1°
of elevation per update, so anything from SKY_SNAP_DEG = 3° up can only mean
"we were not watching". Such a step is painted with `transition: none` for a
single frame (`.stage.daynight.skysnap`, released on the next
requestAnimationFrame, so the very next change glides again); everything
smaller keeps the 45 s breathing untouched. `visibilitychange → visible` clears
the marker outright, so a tab that comes back is right immediately.
The elevation the sky is computed from is now rounded to 0.1° (`skyElevation`,
shared by the stage background and the plan dimming) — invisible across a 45 s
glide and it keeps lit from re-committing the style attribute on every hass
tick. The ray GEOMETRY memo is deliberately untouched and keeps its own,
coarser key: the sky is cheap, polygon clipping is not.
Tests: unit — skyNeedsSnap (null/NaN, a real 4-minute step glides, 3° in either
direction jumps), skyElevation. Smoke — demo/smoke_sun_live_bg.mjs, which
asserts the COMPUTED background of the stage (not the style attribute) after a
plain `hass` assignment with no reload and no requestUpdate, plus planDim and
the 3° ray threshold both ways. It fails on the previous tip with
dayComputedWhite, nightComputedDark, backToDayComputed, smallStepMovesSky and
returnFromHiddenSnaps, and it also pins that a REAL sun step still glides
rather than jumps.
261 lines
13 KiB
Markdown
261 lines
13 KiB
Markdown
# Sun on the plan — the spec (source of truth)
|
||
|
||
Status: approved by the owner 2026-08-03. Shipped in v1.56.0.
|
||
Scope decisions final: the compass lives in the GENERAL settings with a
|
||
per-space override, the feature is silent until `north_deg` is set
|
||
anywhere, wedges ship for the FULL card only in v1, and mutual shading
|
||
of the building's wings is explicitly NOT computed.
|
||
|
||
## Principle
|
||
|
||
The plan learns where north is, and from that single number plus HA's
|
||
own `sun.sun` the card knows where the sun stands relative to every
|
||
wall. Two visuals follow: the stage background can breathe with the
|
||
day (day → golden hour → dusk → night), and windows on exterior walls
|
||
cast soft wedges of light into their rooms. Everything is display
|
||
only — no entities are created, no services are called.
|
||
|
||
## Data
|
||
|
||
- Source: the `sun.sun` entity (`attributes.azimuth` 0–360, 0 = north,
|
||
clockwise; `attributes.elevation` in degrees, negative below the
|
||
horizon). No `sun.sun` in the install → the whole feature stays
|
||
silent and the settings dialog says why.
|
||
- Sun attributes update rarely (~30–120 s). Sun geometry is recomputed
|
||
ONLY when (azimuth, elevation) or the config change — never on every
|
||
`hass` tick. The wedge layer memoises on
|
||
`(azimuth, elevation, config rev, space id, weather state)`.
|
||
- Angle on the plan: `plan_angle = azimuth − north_deg` (normalised to
|
||
0–360). With `north_deg = 0` the top of the canvas is north; the
|
||
direction TOWARD the sun on the canvas is
|
||
`(sin(plan_angle), −cos(plan_angle))` (y grows downward).
|
||
|
||
## Compass — `settings.north_deg`
|
||
|
||
- Integer 0–359, degrees clockwise from "up on the canvas" to true
|
||
north. Lives in the GENERAL settings (⚙) as a circular dial: drag
|
||
the «N» arrow around the ring, 1° steps, 15° with Shift held; a
|
||
plain number input sits next to it for accessibility and precision.
|
||
- Per-space override in the space settings (empty = inherit), the same
|
||
pattern as `show_lqi` / `fill_mode`.
|
||
- While `north_deg` is null at BOTH levels the whole sun feature is
|
||
inert: static background, no wedges, nothing computed. The settings
|
||
dialogs show a hint.
|
||
- Backend validation: integer in 0–359 at both levels.
|
||
|
||
## Plan background — `settings.bg_mode: 'static' | 'daynight'`
|
||
|
||
- Global default in the general settings, per-space override (null =
|
||
inherit). Default `'static'`.
|
||
- `'static'` — the existing `bg_color` behaviour, color picker and
|
||
all. Nothing changes for existing installs.
|
||
- `'daynight'` — the stage background follows the sun's elevation:
|
||
WHITE at full day (the brightest moment of the day is white — owner,
|
||
2026-08-03), a warm bright shift in the golden hour (elevation below
|
||
~10°), cooling through dusk, deep darkening at night. The scale
|
||
(piecewise-linear between stops, `BG_STOPS` in `src/sun.ts`):
|
||
|
||
| elevation | color | phase |
|
||
| --- | --- | --- |
|
||
| −90°…−12° | `#070c14` | deep night |
|
||
| −4° | `#131a28` | dusk cools down |
|
||
| 0° | `#4a3527` | warm band right at the horizon |
|
||
| +10° | `#e8ddcf` | morning light — warm and bright |
|
||
| +30°…+90° | `#ffffff` | plain day, white |
|
||
The PLAN
|
||
itself dims only ~10% at night (`filter: brightness(.9)`), so the
|
||
daytime room fills stay readable. Transitions are a CSS
|
||
background/filter transition tens of seconds long;
|
||
`prefers-reduced-motion` gets the current colors statically.
|
||
- **Glide, but never lag behind reality** (owner 2026-08-04: «цвет фона
|
||
не меняется сам с течением времени суток, только после
|
||
обновления страницы»). The sky colour and the plan dimming are
|
||
delivered by a 45 s CSS transition, and a CSS transition only advances
|
||
while the card is being PAINTED. A card that was not painting — a
|
||
background tab, another dashboard view, a sleeping wall tablet, an
|
||
editor session — comes back holding a stale sky and then crawls toward
|
||
the truth 45 s at a time; a page reload, by contrast, paints the right
|
||
colour outright, because a freshly mounted element has nothing to
|
||
transition FROM. So the card measures the gap: HA refreshes `sun.sun`
|
||
every ~4 minutes by day, i.e. ≤1° per update, and anything from
|
||
`SKY_SNAP_DEG` = 3° up therefore means "we were not watching". Such a
|
||
step is applied with `transition: none` for a single frame
|
||
(`.stage.daynight.skysnap`, released on the next
|
||
`requestAnimationFrame`); everything smaller keeps the 45 s breathing.
|
||
`visibilitychange → visible` arms the catch-up outright.
|
||
- The elevation the sky is computed from is rounded to 0.1°
|
||
(`skyElevation()`) — finer than the eye can tell across a 45 s glide,
|
||
and it keeps `dayPhase` (and the style attribute lit has to commit)
|
||
from churning on every `hass` tick. The wedge GEOMETRY keeps its own,
|
||
coarser memo: the two have deliberately different granularity — the
|
||
sky is cheap, the polygon clipping is not.
|
||
- The UI is a two-option selector; the color picker shows only for
|
||
`'static'`.
|
||
- Backend validation: `In(['static', 'daynight'])` at both levels.
|
||
- `'daynight'` follows the general gate: without `north_deg` (or
|
||
without `sun.sun`) it behaves as `'static'`.
|
||
- **The scene background never bleeds through the plan** (owner,
|
||
2026-08-03). In BOTH modes the background — `bg_color` or the
|
||
daynight sky — is visible only AROUND the plan: opaque `.hp-paper`
|
||
shapes sit under everything the plan draws. An image plan papers the
|
||
backdrop image rect (the canvas IS the paper); a hand-drawn plan
|
||
papers the ROOM CONTOURS — one shape per room in exactly the room's
|
||
own geometry (fill only, no stroke), never their bounding box, so
|
||
the background reaches the exterior walls of an L-shaped house and
|
||
fills the gaps between detached buildings (an empty drawn space has
|
||
no paper). Open (virtual) boundaries do not affect the paper; a live
|
||
resize preview moves it together with the rooms. Its colour is the
|
||
pre-bg_color canvas — white for hand-drawn plans, the theme card
|
||
background under an image. The night dimming above is the
|
||
`brightness` filter on the zoomwrap ONLY; the paper's alpha never
|
||
changes. Applies to view/kiosk/editors and the static space-card
|
||
alike (smoke_bg_color).
|
||
|
||
## Window light wedges — `settings.sun_rays`
|
||
|
||
Boolean, global + per-space (null = inherit), default OFF.
|
||
|
||
For every opening of type «window» sitting on an EXTERIOR wall — a
|
||
wall stretch with no other room on its outer side, decided by probing
|
||
the existing room geometry just off both sides of the window; windows
|
||
on interior walls do not participate, and open (virtual) boundaries
|
||
never qualify because both sides are rooms — the card draws a wedge
|
||
when BOTH hold:
|
||
|
||
- the sun is above the horizon (`elevation > 0`), and
|
||
- the dot product of the wall's outward normal with the direction
|
||
toward the sun is positive (the sun actually faces this window).
|
||
|
||
The wedge is a quadrilateral cast from the window's span along the
|
||
direction AWAY from the sun (light falls inward), clipped by the
|
||
room's polygon (`polyclip` intersection, the same dependency
|
||
`src/resize.ts` already uses). Its length is `k(elevation)` in window
|
||
lengths: ~1.75 at sunrise/sunset tapering to ~0.56 at the zenith
|
||
(`0.56 + 1.19·(1 − elevation/90)^1.6` — the v1.56 curve
|
||
`0.8 + 1.7·(1 − elevation/90)^1.6` times `RAY_LENGTH_K` = 0.7, owner
|
||
2026-08-04: «лучи от солнца сделать короче на 30%»; scaling the whole
|
||
curve keeps the "a low sun reaches much further" shape intact). The
|
||
color is warm orange while `elevation < 10°` and neutral by day; peak
|
||
opacity is `RAY_MAX_ALPHA` = 0.30 (owner 2026-08-03: «лучи поярче,
|
||
иногда плохо видны» — raised from 0.18; two overlapping wedges
|
||
still stay under a readable ceiling on white paper and on the dark glow
|
||
canvas alike).
|
||
|
||
### Dissolving — never a kerb (owner 2026-08-04)
|
||
|
||
«Проверить, чтобы они всегда плавно рассеивались (сейчас есть
|
||
ощущение, что они упираются во что-то невидимое)». A wedge is a
|
||
polygon, and until v1.56 nothing hid that:
|
||
|
||
- the gradient's iso-alpha lines run PERPENDICULAR to the sun, while
|
||
the wedge's far edge is parallel to the WALL. For any sun that does
|
||
not hit the glass head-on the two are not the same line, so half of
|
||
that far edge was cut while it still carried colour — a straight
|
||
bright kerb hanging in the middle of the floor;
|
||
- the wedge's two SIDES had no falloff at all — two razor lines running
|
||
from the window into the room;
|
||
- where the room outline clips the wedge (the opposite wall, the inner
|
||
corner of an L, and above all an OPEN boundary, which has no wall
|
||
drawn at all) the shaft was chopped at whatever alpha it still had.
|
||
|
||
The contract now:
|
||
|
||
- the gradient still spans the FULL wedge length (`x1,y1` at the glass,
|
||
`x2,y2` exactly `len` away), so geometry and gradient always describe
|
||
the same shaft — but its stops (`rayStops()`) ease out to **zero at
|
||
`RAY_FADE_END` = 85 %** of that length: `1 → .86 → .60 → .32 → .10
|
||
→ 0`. The last 15 % of every wedge is guaranteed empty, so a shaft
|
||
that ends in mid-air has nothing left to draw an edge with;
|
||
- each wedge is drawn inside `<g filter="…" clip-path="…">`. SVG applies
|
||
the filter FIRST and the clip SECOND, so a small Gaussian blur
|
||
(`raySoftness(len)` = 7 % of the length, clamped to 3…18 render units)
|
||
feathers the sides and the tip, and the room outline then cuts the
|
||
feather off — light still never crosses a wall, but where the shaft
|
||
does reach one the kerb is a soft ramp that reads as light landing ON
|
||
the wall instead of a cut-out shape.
|
||
|
||
Clipping by the room stays exactly as before; only its visible edge
|
||
changed.
|
||
|
||
### The 3° threshold and the 2-second fade
|
||
|
||
Wedge opacity does NOT depend on elevation any more — the old ramp-in
|
||
over the first ~2° is gone. The contract (owner 2026-08-03) is a hard
|
||
threshold:
|
||
|
||
- `elevation < 3°` → NO rays at all;
|
||
- `elevation ≥ 3°` → rays at full strength (`rayPeakAlpha`, cloud cover
|
||
being the only multiplier).
|
||
|
||
Crossing the threshold is animated, but on the LAYER, never on the
|
||
geometry: the `<g class="sunlayer">` fades in with `hp-sunfade-in` and
|
||
out with `hp-sunfade-out`, both exactly 2 s (`RAY_FADE_MS` in
|
||
`src/sun.ts` must stay in sync with `styles.ts`). To let the fade-out
|
||
play at all, the card keeps the layer mounted with `.out` for those two
|
||
seconds and only then drops it. `prefers-reduced-motion: reduce` skips
|
||
the animation entirely — the rays are simply there or simply gone.
|
||
|
||
Everything else that removes wedges — leaving view mode, switching the
|
||
feature off, night (`elevation ≤ 0`), rain — is instant: those are not
|
||
threshold crossings, and a wedge lingering while you enter the editor
|
||
would just be a bug.
|
||
|
||
Layer order: ABOVE room fills (and the glow layer), BELOW devices and
|
||
labels (those live in the HTML `devlayer` anyway). Night
|
||
(`elevation ≤ 0`) → no wedges. Wedges work under BOTH `bg_mode`s.
|
||
|
||
## Cloud cover — `settings.weather_entity` (optional)
|
||
|
||
String entity id or null; GLOBAL settings only. When set and the
|
||
entity's state reads overcast, the wedges fade by an opacity
|
||
multiplier — ~0.25 fully overcast, 0 (gone) in rain/snow:
|
||
|
||
| states | factor |
|
||
| --- | --- |
|
||
| clear, sunny, clear-night, windy, exceptional, unset entity | 1.0 |
|
||
| partlycloudy, windy-variant | 0.7 |
|
||
| cloudy | 0.4 |
|
||
| overcast, fog | 0.25 |
|
||
| rainy, pouring, snowy, snowy-rainy, hail, lightning, lightning-rainy | 0.0 |
|
||
| unknown, unavailable | 1.0 (a dead sensor must not kill the sun) |
|
||
|
||
Backend validation: string or null.
|
||
|
||
## Edge cases and limits
|
||
|
||
- No `sun.sun` → silent feature + a hint in the settings dialog.
|
||
- `north_deg` unset everywhere → silent feature + a hint.
|
||
- `prefers-reduced-motion` → no transitions; colors and wedges render
|
||
statically for the current sun position.
|
||
- Kiosk mode → works (same view path).
|
||
- Static `houseplan-space-card` → the background honours the effective
|
||
`bg_mode`/color; wedges are v1 FULL-CARD ONLY (documented limit).
|
||
- Editors (plan/devices/decor) → no wedges and no day/night: the
|
||
editor canvases render exactly as before.
|
||
- Mutual shading of the building's own wings (an L-shaped house
|
||
shadowing its inner corner) is NOT computed — a lit window casts its
|
||
wedge even when another wing geometrically blocks the sun. Accepted
|
||
v1 limit.
|
||
- Wedges of windows on all four wall orientations are unit-tested,
|
||
including the 359→0 azimuth wrap.
|
||
|
||
## Files
|
||
|
||
- `src/sun.ts` — pure logic (angles, day phase, exterior walls, wedge
|
||
quads + clipping, cloud factor, settings inheritance); unit-tested
|
||
in `test/sun.test.mjs`.
|
||
- `src/houseplan-card.ts` — the memoised wedge layer, the day/night
|
||
stage background, both settings dialogs (compass dial included).
|
||
- `src/space-render.ts` — the static card's background only.
|
||
- `custom_components/houseplan/validation.py` — the four settings at
|
||
both levels; tests in `tests_backend/test_validation.py`.
|
||
- `demo/smoke_sun.mjs` — end-to-end behaviour against the demo rig.
|
||
- `demo/smoke_sun_soft.mjs` — the −30 % reach and the "always
|
||
dissolves" contract (the gradient spans the wedge and dies at 85 %,
|
||
the feather filter, the room clip).
|
||
- `demo/smoke_sun_live_bg.mjs` — the sky follows `sun.sun` on a plain
|
||
`hass` tick with no reload, asserted on the COMPUTED background of the
|
||
stage; small steps still glide, big ones catch up at once.
|
||
- `demo/shot_sun_short.mjs` — before/after stills at a low and a high
|
||
sun.
|