Rework the dashboard into two looks over one behaviour
A dashboard is a wall panel somebody hangs in their own hallway, so it now wears what they choose: a look, and a palette of their own colours. Two complete component sets live under `Dashboard/ui/` — `glass` (translucent panes over a slowly moving ground) and `material` (Material 3 tonal cards) — behind one prop contract. Every control's state, keyboard and `aria-` live in `ui/core` and are shared, so the two sets are the same dashboard drawn twice rather than two products: a set only decides what a control looks like while doing it. Four settings join the channel, each drivable by a flow like any other: `look`, `palette`, `background` and `touch`. A palette is an ordered list of hex colours — background, surface, primary, accent, text, then more chart colours — pasted from a coolors.co link or typed, written onto the canvas as the token variables everything already reads. Trailing roles are derived, so three colours are a whole dashboard, and derived text is held to AA rather than trusted (`theme.check.ts` measures it). A palette also decides light or dark, since its first colour is the ground. Widgets are measured against their own tile with container queries rather than against the viewport, animate through `motion`, and can be drawn without their title. The three reworks: - a bar draws a row per reading, up to eight, each in the dashboard's own data colours and each able to carry its own scale — replacing readings nested in one fill, which could only ever share one colour and stop at three. Documents written the old way are read as rows. - a chart's range picker moved to a column down its right-hand edge, which gives the plot back a whole row of a short tile. - the colour wheel became a disc: hue is the angle and saturation the distance from the middle, so a colour is one gesture rather than three, with brightness on a slider beside it. `index.css` and `lib/motion.ts` are untouched — the dashboard overrides token *values* on its canvas, never the blocks the two repos share.
This commit is contained in:
+25
-34
@@ -10,46 +10,37 @@ Deferring because out of scope is fine, but don't mention deferring than.
|
||||
|
||||
## Open
|
||||
|
||||
### Dashboard UI rework (dedicated session)
|
||||
|
||||
Rework the dashboard UI to make it more flexible in terms of the look and feel.
|
||||
The dasboard is allowed to break out of the design guidelines.
|
||||
I consider following design options a) overall appearance: material look or liquid glass (einUI https://github.com/einui/einui) b) color palette (https://colorhunt.co).
|
||||
Based on a) and b) it should be possible to derive almost endles combinations of looks.
|
||||
The color palette should affect affect the overall theming of all widgets
|
||||
The EinUI components should be used as a reference for the different components needed, the general layout/style of components and essentially the foundation for the liquid glass option.
|
||||
Based on this, a set of material ui components should be derived, following https://mui.com/ .
|
||||
Both variants of the components should be completely custom designed and fully owned (no new dependency).
|
||||
The apperance should be strictly separated from the functionality (which both sets of components should share; i.e. choosing one or the other component set should not change the features of the dashboard).
|
||||
All widgets (and the sidebar rail) should follow the appearance and should be reworked to receive animations through the motion library.
|
||||
It should be possible to set a background in the dashboard (input, controllable externally via a node. In v1 this can be just an url to an image).
|
||||
It should be possible to disable the title of a widget.
|
||||
The dashboard setting should contain a "Touch" toggle, which, when activated, makes all widgets more touch friendly.
|
||||
All components should react responsive to the size of the widget.
|
||||
Components and animations should be carefully designed and adhere to high-quality design standards and taste.
|
||||
A minimal research on dashboard/ component design should be conducted.
|
||||
|
||||
Specific changes
|
||||
- the nested bar should be changed in a multi-row bar with N inputs (and therefore n bars), color separated as the chart widget
|
||||
- the range picker should go to the right (vertical) of the chart widget to allow for more vertical space of the chart
|
||||
- the color picker should be changed to a circular color picker (disk with colors, saturation changes towards the center) and a vertical slider for the brightness
|
||||
|
||||
### To be sorted
|
||||
|
||||
- FEAT/UI: we promise testing, but currently don't provide an UI for testing e.g. mock values or probing edge cases of a flow. This should be resolved (in a dedicated session); I'm thinking of a "Labs" page, which allows simulating an installation with all the flows (using their draft states) and which allows injecting values or mocking values based on events in the past
|
||||
- FEAT/UI: check if PWA (https://whatpwacando.today/) notifications could be used to have a panel sending notifications to the device event bus (or generally using PWA to retrieve e.g. location etc). We could introduce a general concept of having a panel (a device, like a wall panel or a phone where the pwa (dashboard) runs) being effectively a node with various outputs. Then various inputs could trigger actions like authentification (i.e. you get home and get a notification which allows you to authenticate the door unlock), get notified on alarms (native alarm connector) or to query geolocation (check where the user is before turning of all lights) etc
|
||||
- BUG/UI sync the theme state between panels and installations
|
||||
- BUG/UI some dashboard widgets (like the color picker) are scrollable; we should make sure that no widgets (except for text widgets or list-related widgets) are scrollable
|
||||
- CHORE/UI: a dashboard forced to one theme inside a shell on the other still
|
||||
matches `dark:` utilities, because the variant is `&:is(.dark *)` and the
|
||||
shell is an ancestor. The dashboard's own components no longer use those
|
||||
utilities — both looks read the tokens and their own `[data-look]` rules — so
|
||||
what is left is the shadcn pieces still drawn inside a tile (tooltip,
|
||||
skeleton). A real fix is `.theme-light` / `.theme-dark` namespacing, which is
|
||||
a change to both repos' byte-identical token blocks.
|
||||
- CHORE/UI: a stacked dashboard on a phone gets no ground — no blobs, no
|
||||
background image, just the palette's own colour. The canvas is what carries
|
||||
it, and a stacked panel is not drawn on one.
|
||||
- CHORE/UI: the Glass look's ground is three compositor-animated gradients. If
|
||||
a low-end wall panel stutters, drop one or set `LOOK.glass.drift` to 0.
|
||||
- CHORE/UI: the app still has three copies of the segmented pill
|
||||
(`ui/segmented.tsx`, `Common/RangePicker.tsx`, and the flow screens). The
|
||||
dashboard no longer shares them — it has its own, one per look — so
|
||||
unifying the remaining three is now purely an app-side job.
|
||||
- CHORE/UI: the house panels are laid out for 1280x800 — twelve columns, twelve
|
||||
rows. A chart's fixed chrome is now its title line and legend: the range picker
|
||||
moved up onto the title and gave back its row, so the budget is nearer forty
|
||||
pixels than eighty and a third chart may now fit — worth measuring against the
|
||||
panel before adding one. The temperature history was the one dropped;
|
||||
`history.climate_*` still answers, so it is a tile away.
|
||||
- FEAT/UI: a bar's nested reading is captioned by its port name, which is
|
||||
chosen for the graph rather than for somebody reading it across a room.
|
||||
`Segment` now takes an optional `label`; the house dashboard sets one
|
||||
(`Solar`), and it shows on the next frontend build.
|
||||
rows. A chart's fixed chrome is now its legend alone: the range picker moved
|
||||
to a column down the right-hand edge and gave its row back, so a third chart
|
||||
may now fit — worth measuring against the panel before adding one. The
|
||||
temperature history was the one dropped; `history.climate_*` still answers,
|
||||
so it is a tile away.
|
||||
- FEAT/UI: a bar row is captioned by its port name, which is chosen for the
|
||||
graph rather than for somebody reading it across a room. A row takes an
|
||||
optional `label`; the house dashboard sets one, and it shows on the next
|
||||
frontend build.
|
||||
|
||||
- BUG/NODE: **an MQTT client can hang forever on the way out.** `MqttNode` builds
|
||||
`aiomqtt.Client` without a `timeout`, so `Client.__aexit__` waits for the broker's
|
||||
|
||||
Reference in New Issue
Block a user