release: 1.33.0

Author: Fohdeesha

CHANGELOG.md

@@ -6,6 +6,31 @@ Anything not listed here yet is on `main` and ships with the next release.
 
 ## Unreleased
 
+## 1.33.0
+
+- Value and Stat are one widget now, with a Style setting. Stored stat tiles keep their look and
+  everything they had set.
+- Six new looks for it: sparkline, split, bar, segment, pill and hero.
+- Every value tile can now take a trend arrow, colour stops, a caption, a badge and a second
+  reading. Those were stat-only before.
+- And every stat tile can take per-state icons, which were value-only.
+- The Settings page reads a lot shorter. Every explanation on it was rewritten to say the same thing
+  in a line or two.
+- The Widget gallery section is gone. Its five widgets are example templates, so they now sit in
+  Custom widgets as a "Start from an example" row, which is where a copy of one ends up anyway.
+- A widget you have not picked an item for yet says so, instead of drawing a slider at 0 or a dial
+  at empty as though the device were off.
+- A long item name no longer spills out of a small tile on the "not on this server" message.
+- The palette has a search box. It also matches what a widget does, so "graph" finds the chart.
+- Dialogs use the height of the screen on a desktop, so fewer widgets sit below the fold.
+- The dashboard generator shows both layout choices without scrolling. One of them was hidden under
+  the buttons on a laptop, and both were on a phone.
+- A stepper shows the value the item actually holds. An item at 3.6 read "4" when the step was 1.
+- An upload that fails because the file is the wrong kind no longer tells you to sign in.
+- "No matching icons" no longer renders one icon wide.
+- The HABPanel report says where a dashboard's web address comes from. It said names became
+  addresses, when they come from HABPanel's own dashboard ids.
+
 ## 1.32.0
 
 - A timeline widget with nothing to draw covered the whole dashboard with an invisible box and

README.md

@@ -8,7 +8,7 @@
 A dashboard UI for [openHAB](https://www.openhab.org/). Touch-friendly dashboards for phones,
 tablets and wall panels, built and configured entirely in the browser. No file editing.
 
-**Status:** in daily use, latest release **1.32.0**. A community project, not an official openHAB UI.
+**Status:** in daily use, latest release **1.33.0**. A community project, not an official openHAB UI.
 
 ## Requirements
 
@@ -59,9 +59,9 @@ to show for it. Open tabs offer to reload themselves.
 ## Widgets
 
 Buttons and switches, sliders, dials, steppers, colour pickers, selections, rollershutters,
-thermostats and media players. Value and stat readouts, compasses, batteries, clocks, weather and
-plain labels. Charts, timelines, floor plans with live light glows, cameras, images, embedded
-pages and the server log.
+thermostats and media players. One value readout drawn eight ways (plain, stat, sparkline, split,
+bar, segment, pill and hero), plus compasses, batteries, clocks, weather and plain labels. Charts,
+timelines, floor plans with live light glows, cameras, images, embedded pages and the server log.
 Anything missing can be built as a custom widget from an HTML template, with an optional sandboxed
 JavaScript API.
 

docs/getting-started.md

@@ -34,7 +34,8 @@ and it is where everything else in this page happens.
 
 In edit mode:
 
-1. Press **+** to open the palette and pick a widget. A Button is the one to start with.
+1. Press **+** to open the palette and pick a widget, or type in its search box. A Button is the
+   one to start with.
 2. It lands on the grid. Drag it about, drag a corner to resize.
 3. Tap it to open its settings.
 
@@ -93,4 +94,4 @@ the whole configuration back.
 - **Settings › Kiosk & wall panel** is for a screen on a wall: no chrome, no menu, and the screen
   kept awake.
 - **Settings › Custom widgets** is where you write your own tile out of HTML when no built-in one
-  fits.
+  fits. Five examples ship with it, and starting from one is usually quicker than a blank page.

docs/theming.md

@@ -40,7 +40,7 @@ colours or all 27.
 
 | Token | What it paints |
 |---|---|
-| `good` | A reading that moved the way you want (a stat tile's trend arrow) |
+| `good` | A reading that moved the way you want (the value widget's trend arrow) |
 | `bad` | A reading that moved the wrong way |
 | `accent-ink` | Text drawn **on** the accent: filled tiles, chips, badges |
 
@@ -117,8 +117,9 @@ adopting it.
 | `.nh-fader__*` | The slider widget's four other styles (gradient, wedge, inset rail, bubble), which keep their own look in every theme on purpose. `.nh-fader__read` is the reading, `__bound` the ends of an inset scale, `__track` and `__fill` the two painted layers |
 | `.nh-log`, `.nh-log__line`, `.nh-log__level` | The log widget's console. The root carries `--lg-warn`, the one colour the tokens do not have (errors use `bad`); `.nh-log__line--warn` and `--error` mark the lines that carry it, `__time`, `__logger` and `__msg` are the columns, and `.nh-log__jump` is the pill that takes the reader back to the newest line |
 | `.nh-switch__track`, `.nh-switch__thumb` | The sliding toggle, which is the button widget drawn in its switch style. `.nh-switch--on` marks the on state, and `.nh-switch__state` is the ON/OFF caption under it |
-| `.nh-value__text`, `.nh-value__unit` | A reading and its unit, set separately |
-| `.nh-stat__value`, `.nh-stat__caption`, `.nh-stat__badge` | The stat tile |
+| `.nh-value__text`, `.nh-value__unit` | A reading and its unit in the value widget's plain style, set separately |
+| `.nh-stat__value`, `.nh-stat__frac`, `.nh-stat__unit`, `.nh-stat__caption`, `.nh-stat__badge` | The reading, its tenths, its unit, the small line under it and the marker beside it. The value widget's other seven styles all draw through these, so one rule reaches every one of them. `.nh-stat` is the stat style's own column, with `--center` and `--right` for its alignment |
+| `.nh-read`, `.nh-read__main` | The root of the six styles added after plain and stat, with `.nh-read--spark` through `--hero` saying which is drawn. `__plot`, `__line` and `__area` are the sparkline, `__track` and `__fill` the bar, `__disc` the split's icon circle, `__pill` the pill. Sizing the reading itself belongs on `.nh-stat__value` above, not here |
 | `.nh-clock__time`, `.nh-clock__date` | The clock |
 | `.nh-chart__chip`, `.nh-chart__legend` | Chart chrome |
 | `.nh-gauge__*`, `.nh-dial__*` | Gauge and dial internals |

e2e/README.md

@@ -162,7 +162,7 @@ id (`kitchen` becomes `kitchen-2`), which is one of the things that suite checks
 Four more deliberate exceptions, each for the same reason: the feature under test decides the id,
 so the suite cannot invent one.
 
-- `e2e-gallery.mjs` installs gallery widgets, which land under the catalogue's own ids
+- `e2e-gallery.mjs` adds the bundled example widgets, which land under the catalogue's own ids
   (`widgetdef:gallery-*`). It deletes exactly that prefix, before and after.
 - `e2e-partial.mjs` imports partial exports, which can create a numbered copy
   (`dashboard:nh-e2e-pdash-2`). It deletes its own prefixes, and because importing legitimately

e2e/e2e-assembly.mjs

@@ -112,7 +112,7 @@ try {
             toggle: true, command: switchState,
           }),
           w('b3', 'button', 6, 2, 2, 1, {
-            label: 'Zone C', command: 'noop', icon: 'mdi:factory', caption: 'Vision line',
+            item: ITEMS.switch, label: 'Zone C', command: 'noop', icon: 'mdi:factory', caption: 'Vision line',
             imageUrl:
               "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='64' height='64' fill='%23123f24'/%3E%3C/svg%3E",
           }),
@@ -121,8 +121,8 @@ try {
             toggle: true, command: 'never-match',
           }),
           w('l1', 'label', 0, 2, 2, 1, { text: 'Bare Label' }),
-          w('s1', 'stat', 2, 2, 2, 1, { item: ITEMS.dimmer, label: 'Stat', icon: 'mdi:factory', group: 'Panel' }),
-          w('s2', 'stat', 4, 2, 2, 1, { item: ITEMS.dimmer, label: 'Stat 2', group: 'Panel' }),
+          w('s1', 'value', 2, 2, 2, 1, { style: 'stat', item: ITEMS.dimmer, label: 'Stat', icon: 'mdi:factory', group: 'Panel' }),
+          w('s2', 'value', 4, 2, 2, 1, { style: 'stat', item: ITEMS.dimmer, label: 'Stat 2', group: 'Panel' }),
         ],
       },
     }),

e2e/e2e-audit2.mjs

@@ -1,6 +1,6 @@
 // Audit fixes for configuration that did not come from the editor.
 import { launchChromium } from './lib/browser.mjs'
-import { BASE, NS, TOKEN, AUTH } from './lib/target.mjs'
+import { BASE, NS, TOKEN, AUTH, ITEMS } from './lib/target.mjs'
 
 const launchBrowser = async () => { for (const c of ['msedge', 'chrome']) { try { return await launchChromium({ channel: c, headless: true }) } catch {} } return launchChromium({ headless: true }) }
 
@@ -45,7 +45,7 @@ await put({
     version: 1, id: 'nh-e2e-a2', name: 'E2E Audit2', columns: 12, rowHeight: 'match', gap: 5,
     widgets: [
       { id: 'a2-label', type: 'label', config: { text: 'Scaled', fontSize: 40 }, layout: { lg: { x: 0, y: 0, w: 3, h: 2 } } },
-      { id: 'a2-btn', type: 'button', config: { label: 'Pick', command: 'ON' }, layout: { lg: { x: 3, y: 0, w: 2, h: 2 } } },
+      { id: 'a2-btn', type: 'button', config: { item: ITEMS.switch, label: 'Pick', command: 'ON' }, layout: { lg: { x: 3, y: 0, w: 2, h: 2 } } },
     ],
   },
 })

e2e/e2e-button.mjs

@@ -17,6 +17,12 @@ const ACCENT = '#e0459a'
 const DIM = 'nh_e2e_btn'
 const STR = 'nh_e2e_btnstr'
 const HOLD_MS = 800 // comfortably past the 500ms threshold
+// The legacy dashboard below carries no version field at all, which reads as 1, and a save has to
+// land it on today's. Named so the next schema bump is a visible one-line edit rather than a check
+// that quietly starts asserting the wrong number - SCHEMA_VERSIONS.dashboard in
+// web/src/model/schema.ts is the source of truth.
+const LEGACY_SCHEMA = 1
+const CURRENT_SCHEMA = 3
 
 const results = []
 const ok = (name, cond, detail = '') => {
@@ -673,7 +679,11 @@ try {
   const widgets = stored?.config?.widgets ?? []
   const old = widgets.find((w) => w.id === 'w-old')
   const oldBare = widgets.find((w) => w.id === 'w-oldbare')
-  ok('saving writes the dashboard back at the current version', Number(stored?.config?.version) === 2, 'version=' + stored?.config?.version)
+  ok(
+    'saving writes the dashboard back at the current version',
+    Number(stored?.config?.version) === CURRENT_SCHEMA && CURRENT_SCHEMA > LEGACY_SCHEMA,
+    `version=${stored?.config?.version}, seeded at ${LEGACY_SCHEMA}, current is ${CURRENT_SCHEMA}`
+  )
   ok('the switch is stored as a button in switch style', old?.type === 'button' && old?.config?.style === 'switch', JSON.stringify(old?.type))
   ok(
     'with the behaviours it used to imply written out beside it',

e2e/e2e-editfix.mjs

@@ -81,7 +81,7 @@ try {
           { id: 'w-b', type: 'clock', config: { showDate: false }, layout: { lg: { x: 3, y: 0, w: 2, h: 2 } } },
           { id: 'w-c', type: 'label', config: { text: 'C' }, layout: { lg: { x: 0, y: 4, w: 2, h: 1 } } },
           { id: 'w-d', type: 'label', config: { text: 'D' }, layout: { lg: { x: 0, y: 5, w: 2, h: 1 } } },
-          { id: 'w-e', type: 'button', config: { label: 'Nav', command: 'ON' }, layout: { lg: { x: 6, y: 0, w: 2, h: 2 } } },
+          { id: 'w-e', type: 'button', config: { item: ITEMS.switch, label: 'Nav', command: 'ON' }, layout: { lg: { x: 6, y: 0, w: 2, h: 2 } } },
           { id: 'w-f', type: 'dial', config: { item: ITEMS.temperature, label: 'Tenths', min: 0, max: 200, step: 0.1, readOnly: true }, layout: { lg: { x: 6, y: 3, w: 3, h: 3 } } },
           { id: 'w-g', type: 'dial', config: { item: ITEMS.temperature, label: 'Whole', min: 0, max: 200, step: 1, readOnly: true }, layout: { lg: { x: 9, y: 3, w: 3, h: 3 } } },
         ],

e2e/e2e-ember.mjs

@@ -161,8 +161,8 @@ try {
   ok('rose letters only when asked', (await pa.locator('.nh-compass__rose').count()) === 8)
   const customFill = await pa.locator('.nh-gcell:has(.nh-compass__rose) .nh-compass__cardinal').getAttribute('fill', { timeout: 4000 }).catch(() => null)
   ok('explicit color reaches the cardinal (attribute, not class)', customFill === '#00ff88', customFill ?? 'none')
-  const emptyText = await pa.locator('.nh-compass__empty').textContent().catch(() => '')
-  ok('unconfigured compass explains itself', emptyText === 'No item configured', emptyText)
+  const emptyText = await pa.locator('.nh-widget__unset').first().innerText().catch(() => '')
+  ok('unconfigured compass explains itself', /pick one in this widget/i.test(emptyText), emptyText.replace(/\s+/g, ' '))
 
   if (FORMATTED_ITEM) {
     const fmtState = await (await fetch(itemUrl(FORMATTED_ITEM), { headers: AUTH })).json()