autoupdate=false items follow what the device reports back

a tile on a vetoed item now clears as soon as the device answers, even when the
answer changes nothing, instead of showing what you sent until a reload. a notice
says when the device reports the opposite of the command, and sliders and color
controls on those items no longer hide changes made elsewhere. e2e-floorplan waits
for a real bulb to finish fading before it measures the glow.

Author: Fohdeesha

CHANGELOG.md

@@ -6,6 +6,13 @@ Anything not listed here yet is on `main` and ships with the next release.
 
 ## Unreleased
 
+## 1.37.0
+
+- Tiles on `autoupdate=false` items show what the device reports back, not what you sent, without a
+  reload.
+- A notice says when such a device reports the opposite of the command it was sent.
+- Sliders and color controls on those items no longer hide changes made elsewhere.
+
 ## 1.36.0
 
 - A dashboard no longer flickers between two sizes when its height lands close to the window's. The

README.md

@@ -6,7 +6,7 @@
 # neohab
 
 A modern UI for [openHAB](https://www.openhab.org/).
-Modern web dashboards with mobile devices and tablets as first class citizens, built and configured entirely in the browser. **Status:** stable, latest release **1.36.0**. A community project, not an official openHAB UI.
+Modern web dashboards with mobile devices and tablets as first class citizens, built and configured entirely in the browser. **Status:** stable, latest release **1.37.0**. A community project, not an official openHAB UI.
 
 <p float="center">
   <img src="imgs/1.png" width="400" />

e2e/e2e-button.mjs

@@ -3,8 +3,8 @@
 // exactly, so every state check here is written to tell those two rules apart.
 // SAFE with a live config. Creates and deletes exactly: dashboard:nh-e2e-button,
 // dashboard:nh-e2e-btnlegacy, dashboard:nh-e2e-btnface and dashboard:nh-e2e-noauto (neohab:config),
-// managed items nh_e2e_btn, nh_e2e_btnstr and nh_e2e_noauto - the last one carrying autoupdate
-// metadata of its own, which is deleted with the item.
+// managed items nh_e2e_btn, nh_e2e_btnstr, nh_e2e_noauto and nh_e2e_noautodim - the last two carrying
+// autoupdate metadata of their own, which is deleted with the item.
 // It SAVES through the app once, on purpose - the migration has to be proved to write back - so it mints
 // one version-history restore point, like any real edit.
 import { launchChromium } from './lib/browser.mjs'
@@ -18,6 +18,7 @@ const ACCENT = '#e0459a'
 const DIM = 'nh_e2e_btn'
 const STR = 'nh_e2e_btnstr'
 const NOAUTO = 'nh_e2e_noauto'
+const NOAUTO_DIM = 'nh_e2e_noautodim'
 const NOAUTO_UID = 'dashboard:nh-e2e-noauto'
 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
@@ -879,26 +880,32 @@ try {
 
   // ---- an item openHAB has promised not to update --------------------------------------------
   //
-  // `autoupdate=false` means core's AutoUpdateManager takes the DONT branch: the command goes to
-  // the binding and NOTHING is posted - no ItemStatePredictedEvent, no ItemStateChangedEvent.
-  // Measured on a live 4.3.11 server as five OFF commands in a row with nothing behind any of them,
-  // which leaves a toggle reading the state alone stuck on whatever the device last reported and
-  // sending the same command for ever. The tile shows what was asked for instead, marked as
-  // unconfirmed, and a real state update still wins.
+  // `autoupdate=false` means core's AutoUpdateManager takes the DONT branch: the command goes to the
+  // binding and openHAB posts no state for it. The device's own answer is the only thing that moves
+  // the item, and a device can answer by confirming the state the item already had - an update that
+  // is not a change, which the states tracker never carries. These items have no binding at all, so
+  // a PUT to /state plays the device: it is the same ItemStateEvent a binding posts.
   {
-    await fetch(itemUrl(NOAUTO), {
-      method: 'PUT',
-      headers: { ...AUTH, 'Content-Type': 'application/json' },
-      body: JSON.stringify({ type: 'Switch', name: NOAUTO, label: 'NH E2E No Autoupdate' })
-    })
-    const meta = await fetch(itemUrl(NOAUTO) + '/metadata/autoupdate', {
-      method: 'PUT',
-      headers: { ...AUTH, 'Content-Type': 'application/json' },
-      body: JSON.stringify({ value: 'false' })
-    })
-    ok('seed: an item that vetoes autoupdate', meta.status === 200 || meta.status === 201, 'metadata ' + meta.status)
-    await sleep(600)
-    await putState(NOAUTO, 'ON')
+    const vetoed = []
+    for (const [name, type, label, rest] of [
+      [NOAUTO, 'Switch', 'NH E2E No Autoupdate', 'ON'],
+      [NOAUTO_DIM, 'Dimmer', 'NH E2E No Autoupdate Dim', '40']
+    ]) {
+      await fetch(itemUrl(name), {
+        method: 'PUT',
+        headers: { ...AUTH, 'Content-Type': 'application/json' },
+        body: JSON.stringify({ type, name, label })
+      })
+      const meta = await fetch(itemUrl(name) + '/metadata/autoupdate', {
+        method: 'PUT',
+        headers: { ...AUTH, 'Content-Type': 'application/json' },
+        body: JSON.stringify({ value: 'false' })
+      })
+      vetoed.push(meta.status)
+      await sleep(300)
+      await putState(name, rest)
+    }
+    ok('seed: two items that veto autoupdate', vetoed.every((s) => s === 200 || s === 201), 'metadata ' + vetoed.join(','))
     await sleep(400)
 
     await fetch(NS, {
@@ -919,13 +926,20 @@ try {
               type: 'button',
               config: { item: NOAUTO, label: 'Veto', command: 'ON', commandAlt: 'OFF', toggle: true, style: 'switch' },
               layout: { lg: { x: 0, y: 0, w: 3, h: 2 } }
+            },
+            {
+              id: 'w-nad',
+              type: 'slider',
+              config: { item: NOAUTO_DIM, label: 'Veto dim', style: 'plain', min: 0, max: 100, step: 1 },
+              layout: { lg: { x: 3, y: 0, w: 4, h: 2 } }
             }
           ]
         }
       })
     })
 
     const sent = []
+    const sentDim = []
     const na = await browser.newPage({ viewport: { width: 1200, height: 800 } })
     await na.addInitScript((t) => {
       try {
@@ -937,6 +951,10 @@ try {
       if (r.request().method() === 'POST') sent.push(r.request().postData())
       return r.continue()
     })
+    await na.route('**/rest/items/' + NOAUTO_DIM, (r) => {
+      if (r.request().method() === 'POST') sentDim.push(r.request().postData())
+      return r.continue()
+    })
     await na.goto(APP + '#/d/nh-e2e-noauto', { waitUntil: 'domcontentloaded' })
     await na.waitForSelector('.nh-switch', { timeout: 20000 })
     await sleep(1200)
@@ -951,31 +969,85 @@ try {
         })
         .catch(() => null)
 
+    // every notice as it appears, so one that has already faded is still counted
+    await na.evaluate(() => {
+      window.__nhToasts = []
+      new MutationObserver(() => {
+        for (const t of document.querySelectorAll('.nh-toast__text')) {
+          if (!window.__nhToasts.includes(t.textContent)) window.__nhToasts.push(t.textContent)
+        }
+      }).observe(document.body, { childList: true, subtree: true, characterData: true })
+    })
+    const toasts = () => na.evaluate(() => window.__nhToasts ?? []).catch(() => [])
+    const lastSent = () => sent.filter(Boolean).slice(-1)[0]
+
     const start = await read()
     ok('it starts on the state the server reports', start?.on === true && start.asking === false, JSON.stringify(start))
 
     await na.click('.nh-switch')
     await sleep(700)
     const afterOff = await read()
-    ok('pressing it sends the alternate command', sent.filter(Boolean).slice(-1)[0] === 'OFF', JSON.stringify(sent))
+    ok('pressing it sends the alternate command', lastSent() === 'OFF', JSON.stringify(sent))
     ok('the server posts no state for it at all', (await readState(NOAUTO)) === 'ON', await readState(NOAUTO))
     ok('but the tile shows what was asked for', afterOff?.on === false, JSON.stringify(afterOff))
     ok('and says it is unconfirmed rather than claiming it', afterOff?.asking === true, JSON.stringify(afterOff))
 
-    // past SETTLE_MS, which is what the old hold would have expired at
+    // a device that never answers: past SETTLE_MS, and past the time an answer is given to settle
     await sleep(5000)
     const held = await read()
-    ok('it still shows it after the settle window, because nothing can arrive to settle to', held?.on === false && held.asking === true, JSON.stringify(held))
+    ok('with no answer at all it still shows what was asked for, because nothing can arrive to settle to', held?.on === false && held.asking === true, JSON.stringify(held))
 
     await na.click('.nh-switch')
     await sleep(700)
-    ok('so pressing again sends the other command instead of repeating', sent.filter(Boolean).slice(-1)[0] === 'ON', JSON.stringify(sent.filter(Boolean).slice(-3)))
+    ok('so pressing again sends the other command instead of repeating', lastSent() === 'ON', JSON.stringify(sent.filter(Boolean).slice(-3)))
 
-    // a real state update is the one thing that wins
+    // told ON, the device reports the ON the item already had: no change, so only an update says so
+    await putState(NOAUTO, 'ON')
+    await sleep(1200)
+    const agreed = await read()
+    ok('an answer that changes nothing still ends the wait', agreed?.on === true && agreed.asking === false, JSON.stringify(agreed))
+
+    // what CHATAIGNE did before its link was fixed: told OFF, it reported ON
+    await na.click('.nh-switch')
+    await sleep(700)
+    ok('pressing it again sends OFF', lastSent() === 'OFF', JSON.stringify(sent.filter(Boolean).slice(-3)))
+    await putState(NOAUTO, 'ON')
+    await sleep(1200)
+    const refused = await read()
+    ok('when the device answers the opposite, the tile shows the answer, not the request', refused?.on === true && refused.asking === false, JSON.stringify(refused))
+    const refusal = `Sent OFF to ${NOAUTO}, but it reported ON`
+    let seen = false
+    for (let i = 0; i < 40 && !seen; i++) {
+      seen = (await toasts()).includes(refusal)
+      if (!seen) await sleep(250)
+    }
+    ok('and a notice says the device answered the opposite', seen, JSON.stringify(await toasts()))
+
+    // a real change still wins, and an answer that agrees is not reported
+    await na.click('.nh-switch')
+    await sleep(700)
+    ok('from ON, a press sends OFF', lastSent() === 'OFF', JSON.stringify(sent.filter(Boolean).slice(-3)))
     await putState(NOAUTO, 'OFF')
     await sleep(1500)
     const confirmed = await read()
     ok('a state the server does post wins and clears the mark', confirmed?.on === false && confirmed.asking === false, JSON.stringify(confirmed))
+    await sleep(4500)
+    const told = (await toasts()).filter((t) => t.includes(NOAUTO))
+    ok('only the answer that contradicted its command was reported', told.length === 1 && told[0] === refusal, JSON.stringify(told))
+
+    // a slider on a vetoed item used to hold what it sent for good, even over a change made elsewhere
+    const dim = na.locator('.nh-widget:has(.nh-widget__labeltext:text-is("Veto dim")) input[type="range"]')
+    const before = Number(await dim.inputValue().catch(() => NaN))
+    await dim.focus().catch(() => {})
+    await na.keyboard.press('ArrowUp')
+    await sleep(1200)
+    const heldDim = Number(await dim.inputValue().catch(() => NaN))
+    ok('a slider on a vetoed item sends its value', sentDim.filter(Boolean).slice(-1)[0] === String(before + 1), `${before} ${JSON.stringify(sentDim)}`)
+    ok('and shows it while nothing has answered', heldDim === before + 1, `${before} -> ${heldDim}`)
+    await putState(NOAUTO_DIM, '20')
+    await sleep(5000)
+    const movedDim = Number(await dim.inputValue().catch(() => NaN))
+    ok('a change made elsewhere still moves it', movedDim === 20, `${before} -> ${heldDim} -> ${movedDim}`)
     await na.close().catch(() => {})
   }
 
@@ -986,7 +1058,7 @@ try {
   for (const uid of [UID, LEGACY_UID, FACE_UID, NOAUTO_UID]) {
     await fetch(NS + '/' + encodeURIComponent(uid), { method: 'DELETE', headers: AUTH }).catch(() => {})
   }
-  for (const item of [DIM, STR, NOAUTO]) {
+  for (const item of [DIM, STR, NOAUTO, NOAUTO_DIM]) {
     await fetch(itemUrl(item), { method: 'DELETE', headers: AUTH }).catch(() => {})
   }
   const left = await fetch(NS, { headers: AUTH })
@@ -995,7 +1067,7 @@ try {
     .catch(() => ['<unreadable>'])
   ok('cleanup: dashboards removed', left.length === 0, left.join(','))
   const items = []
-  for (const item of [DIM, STR, NOAUTO]) {
+  for (const item of [DIM, STR, NOAUTO, NOAUTO_DIM]) {
     const there = await fetch(itemUrl(item), { headers: AUTH })
       .then((r) => r.status === 200)
       .catch(() => false)

e2e/e2e-floorplan.mjs

@@ -48,16 +48,22 @@ async function pollItem(name, want, tries = 20) {
   }
   return itemState(name)
 }
-// A hue on its own is not a settled colour: `pollItem(color, '0')` is satisfied by `0.000,92,100`,
-// which is a real DMX bulb part way through its fade, and the glow then reads 21 of green where the
-// section wants pure red. Wait for all three channels.
-async function pollColor(name, want, tries = 25) {
+// A colour is settled when all three channels match AND stay matched: openHAB's optimistic update
+// shows the target the instant the command lands, then a real DMX bulb reports its pre-fade colour
+// and fades back (321.4 -> 0 over 1.02s, measured). Returning on the first match loaded the page
+// mid-fade, inside the app's 1.5s hold, and the glow read the old colour.
+async function pollColor(name, want, stableMs = 2000, budgetMs = 15000) {
   const parts = want.split(',').map(Number)
-  for (let i = 0; i < tries; i++) {
+  const end = Date.now() + budgetMs
+  let since = 0
+  while (Date.now() < end) {
     const s = await itemState(name)
     const got = s.split(',').map(Number)
-    if (got.length === parts.length && parts.every((v, j) => Math.abs(v - got[j]) <= 1)) return s
-    await sleep(300)
+    const match = got.length === parts.length && parts.every((v, j) => Math.abs(v - got[j]) <= 1)
+    if (!match) since = 0
+    else if (since === 0) since = Date.now()
+    else if (Date.now() - since >= stableMs) return s
+    await sleep(250)
   }
   return itemState(name)
 }

pom.xml

@@ -6,7 +6,7 @@
 
   <groupId>org.openhab.ui.bundles</groupId>
   <artifactId>org.openhab.ui.neohab</artifactId>
-  <version>1.36.0</version>
+  <version>1.37.0</version>
   <packaging>jar</packaging>
 
   <name>neohab</name>

web/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "neohab-web",
   "private": true,
-  "version": "1.36.0",
+  "version": "1.37.0",
   "license": "EPL-2.0",
   "type": "module",
   "engines": {

web/package.json

@@ -0,0 +1,97 @@
+import { ohUrl } from './base'
+
+const OPEN_WAIT_MS = 1500
+// an item name is \w+ in openHAB, and anything else would make the server refuse the whole filter
+const ITEM_NAME = /^\w+$/
+
+interface SseEnvelope {
+  topic?: unknown
+  payload?: unknown
+}
+
+/**
+ * Every state update for a few items, including the ones that change nothing. The states tracker
+ * is fed from ItemStateChangedEvent alone, so a device that answers a command by confirming the
+ * state it already had is only heard here.
+ */
+export class ReportStream {
+  private source: EventSource | null = null
+  private items = new Set<string>()
+  private opened: Promise<void> = Promise.resolve()
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null
+  private reconnectDelay = 1000
+
+  constructor(private onReport: (item: string, value: string) => void) {}
+
+  /** listening for all of these, reopening if needed; settles once open or after a bound either way */
+  listen(names: Iterable<string>): Promise<void> {
+    const wanted = [...names].filter((n) => ITEM_NAME.test(n))
+    if (this.source && wanted.every((n) => this.items.has(n))) return this.opened
+    for (const n of wanted) this.items.add(n)
+    this.connect()
+    return this.opened
+  }
+
+  close(): void {
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer)
+      this.reconnectTimer = null
+    }
+    this.source?.close()
+    this.source = null
+    this.items.clear()
+  }
+
+  private connect(): void {
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer)
+      this.reconnectTimer = null
+    }
+    this.source?.close()
+    this.source = null
+    if (this.items.size === 0) return
+    const topics = [...this.items].sort().map((n) => `openhab/items/${n}/state`)
+    const source = new EventSource(ohUrl('/rest/events?topics=') + encodeURIComponent(topics.join(',')))
+    this.source = source
+    let settle = () => {}
+    this.opened = new Promise<void>((resolve) => {
+      const done = setTimeout(resolve, OPEN_WAIT_MS)
+      settle = () => {
+        clearTimeout(done)
+        resolve()
+      }
+    })
+    source.onopen = () => {
+      this.reconnectDelay = 1000
+      settle()
+    }
+
+    source.onmessage = (e) => {
+      if (!e.data) return
+      try {
+        const evt = JSON.parse(e.data as string) as SseEnvelope
+        if (typeof evt.topic !== 'string' || typeof evt.payload !== 'string') return
+        const parts = evt.topic.split('/')
+        if (parts.length !== 4 || parts[0] !== 'openhab' || parts[1] !== 'items' || parts[3] !== 'state') return
+        const payload = JSON.parse(evt.payload) as { value?: unknown }
+        if (typeof payload.value === 'string') this.onReport(parts[2], payload.value)
+      } catch {
+        // ignore malformed frames
+      }
+    }
+
+    source.onerror = () => {
+      // a stream the server refuses must not hold up the command that is waiting on it
+      settle()
+      source.close()
+      if (this.source !== source) return
+      this.source = null
+      if (this.reconnectTimer || this.items.size === 0) return
+      this.reconnectTimer = setTimeout(() => {
+        this.reconnectTimer = null
+        this.connect()
+      }, this.reconnectDelay)
+      this.reconnectDelay = Math.min(this.reconnectDelay * 2, 30_000)
+    }
+  }
+}