node-red-contrib-room-tools 1.8.15 → 1.8.16

package/native-binding-plan.js

@@ -1,4 +1,5 @@
 const { configuredRoutes } = require('./control-bound-protocol')
+const { meterRoute } = require('./meter-route')
 
 const supportedTypes = {
   boolean: { eventType: 'Boolean', eventOptions: { boolParamFilter: 'Any' } },
@@ -28,6 +29,7 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
   const nodes = []
   const readTargets = new Map()
   const writeTargets = new Map()
+  const meterStreams = new Map()
   const commandRules = []
   const commandWires = []
 
@@ -51,7 +53,10 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
     if (['source', 'preset'].includes(type) && !['enum', 'integer', 'string'].includes(target.type)) {
       throw new Error(`Choice control bound to ${target.type}: ${path}`)
     }
-    if (!['mute', 'power', 'level', 'dimmer', 'position', 'text', 'source', 'preset'].includes(type)) {
+    if (type === 'meter' && (!target.meter || !['integer', 'float'].includes(target.type) || target.access !== 'ro')) {
+      throw new Error(`Meter control must bind to a readonly Meter target: ${path}`)
+    }
+    if (!['mute', 'power', 'level', 'dimmer', 'position', 'meter', 'text', 'source', 'preset'].includes(type)) {
       throw new Error(`Control type requires a separate command adapter: ${type}`)
     }
     if (!['ro', 'wo', 'rw'].includes(target.access) || !target.access.includes(access)) {
@@ -88,6 +93,47 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
     if (control.mode !== 'write') {
       if (!binding.readPath) throw new Error(`Missing read path: ${id}`)
       const target = metadata(binding.device, binding.readPath, control.type, 'r')
+      if (target.meter) {
+        const meter = meterRoute(target.meter)
+        if (control.mode !== 'read' || control.adapter !== 'meter') throw Error(`Meter is read-only: ${id}`)
+        const key = JSON.stringify([target.device, meter.streamId])
+        const previous = meterStreams.get(key)
+        if (previous) {
+          if (JSON.stringify(previous.meter) !== JSON.stringify(meter) || previous.onebased !== target.onebased) {
+            throw Error(`Conflicting meter stream: ${meter.streamId}`)
+          }
+          continue
+        }
+        const index = meterStreams.size + 1
+        const statusId = `${scopeId}-meter-read-${index}`
+        const tagIds = []
+        meterStreams.set(key, { meter, onebased: target.onebased, statusId, tagIds })
+        for (const [role, path] of [['manifest', meter.manifestPath], ['frame', meter.eventPath]]) {
+          const eventId = `${scopeId}-meter-${role}-${index}`
+          const tagId = `${eventId}-tag`
+          tagIds.push(tagId)
+          const y = 540 + (index - 1) * 280 + (role === 'frame' ? 140 : 0)
+          if (role === 'manifest') nodes.push({
+            id: statusId, type: 'Status', z: subflowId, name: `Read meter manifest ${target.device}`,
+            x: 440, y: y - 60, mojo: { version: '1.0', device: [target.device],
+              parameter: path, onebased: target.onebased }, wires: [[tagId]]
+          })
+          nodes.push({ id: eventId, type: 'Event', z: subflowId,
+            name: `Watch meter ${role} ${target.device} ${meter.streamId}`, x: 440, y,
+            mojo: { version: '1.0', device: [target.device], event: path,
+              eventKind: role === 'frame' ? 'Event' : 'Parameter', paramType: 'String',
+              onebased: target.onebased }, wires: [[tagId]] })
+          nodes.push({ id: tagId, type: 'change', z: subflowId,
+            name: `Identify meter ${role} ${target.device}`, x: 1000, y,
+            rules: [
+              { t: 'set', p: 'kind', pt: 'msg', to: 'device-meter-' + role, tot: 'str' },
+              { t: 'set', p: 'device', pt: 'msg', to: target.device, tot: 'str' },
+              { t: 'set', p: 'path', pt: 'msg', to: path, tot: 'str' },
+              { t: 'set', p: 'streamId', pt: 'msg', to: meter.streamId, tot: 'str' }
+            ], wires: [[]] })
+        }
+        continue
+      }
       const key = JSON.stringify([target.device, target.path])
       if (readTargets.has(key)) continue
       const index = readTargets.size + 1
@@ -128,6 +174,8 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
   }
 
   const commandSwitchId = `${scopeId}-commands`
+  // Meter lanes follow ordinary feedback lanes without overlapping their labels.
+  for (const node of nodes) if (node.id.startsWith(`${scopeId}-meter-`)) node.y += readTargets.size * 170
   const routerId = `${scopeId}-router`
   if (commandRules.length) {
     nodes.push({
@@ -148,16 +196,17 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
     ],
     checkall: 'false', repair: false, outputs: 2,
     wires: [commandRules.length ? [commandSwitchId] : [],
-      [...readTargets.values()].map(target => target.statusId)]
+      [...readTargets.values(), ...meterStreams.values()].map(target => target.statusId)]
   })
   const subflow = {
     id: subflowId, type: 'subflow', name: `Binding bridge ${scopeId}`,
     info: 'Generated panel binding bridge. Requires a Controller node and authenticated command source.',
     category: 'panel binding',
     in: [{ x: 170, y: 150, wires: [{ id: routerId }] }],
-    out: readTargets.size
-      ? [{ x: 1290, y: Math.round((390 + (readTargets.size + 1) * 85) / 10) * 10,
-        wires: [...readTargets.values()].map(target => ({ id: target.tagId, port: 0 })) }]
+    out: readTargets.size || meterStreams.size
+      ? [{ x: meterStreams.size ? 1600 : 1290, y: Math.round((390 + (readTargets.size + meterStreams.size + 1) * 85) / 10) * 10,
+        wires: [...readTargets.values()].map(target => ({ id: target.tagId, port: 0 }))
+          .concat([...meterStreams.values()].flatMap(target => target.tagIds.map(id => ({ id, port: 0 })))) }]
       : [],
     env: [], meta: {}, color: '#96bca7'
   }
@@ -166,7 +215,8 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
     manifest: {
       subflowId,
       controls: routes.size,
-      nativeReads: readTargets.size,
+      nativeReads: readTargets.size + meterStreams.size,
+      nativeMeterStreams: meterStreams.size,
       nativeWrites: writeTargets.size,
       requiresController: true,
       initialReadMessage: { kind: 'read-all' }

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "node-red-contrib-room-tools",
-  "version": "1.8.15",
+  "version": "1.8.16",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "node-red-contrib-room-tools",
-      "version": "1.8.15",
+      "version": "1.8.16",
       "license": "UNLICENSED",
       "dependencies": {
         "@vue/compiler-sfc": "3.5.42",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-red-contrib-room-tools",
-  "version": "1.8.15",
+  "version": "1.8.16",
   "description": "Authenticated visual control panel binding for Node-RED and MUSE Automator",
   "license": "UNLICENSED",
   "engines": { "node": ">=18.16.0" },
@@ -21,6 +21,10 @@
     "control-catalog.js",
     "control-type-contract.json",
     "control-type-model.js",
+    "meter-route.js",
+    "meter-frame.js",
+    "panel-meter.js",
+    "panel-meter-client.js",
     "panel-template-instrumentation.js",
     "panel-visual-bindings.js",
     "panel-visual-apply.js",

package/panel-binding-editor.js

@@ -6,10 +6,15 @@ function initializeVisualBinding () {
   const root = this.$el
   const base = config.editorEndpoint
   const saved = new Map(Object.entries(config.bindings || {}))
+  const meterEntries = [...saved].filter(([, entry]) => entry.readMeta?.meter)
+  const meterTargets = new Map()
+  let meterClient = null, lastMeterFrame = null
   const attached = new WeakSet()
   const feedbackModels = new Map()
   const pendingText = new Map()
   const cleanup = []
+  let disposed = false
+  cleanup.push(() => { disposed = true })
   let editing = new URL(window.location.href).searchParams.get('cp-edit') === config.panelId
   let editSession = null
   let snapshot = null
@@ -47,15 +52,15 @@ function initializeVisualBinding () {
       status.dataset.error = error ? 'true' : 'false'
     }
   }
-  async function request (path, method = 'GET', body) {
-    const response = await component.__panelFetch(base + path, {
+  async function request (path, method = 'GET', body, timeoutMs) {
+    const { response, result } = await component.__panelFetch(base + path, {
       method, credentials: 'same-origin',
       headers: method === 'POST'
         ? { 'Content-Type': 'application/json', 'X-Panel-CSRF': editSession?.csrf || '' }
         : undefined,
       body: method === 'POST' ? JSON.stringify(body || {}) : undefined
-    }, path === '/apply' ? 120000 : 12000)
-    const result = await response.json().catch(() => ({}))
+    }, path === '/apply' ? 120000 : (timeoutMs ?? 12000),
+    async response => ({ response, result: await response.json() }))
     if (!response.ok) throw new Error(result.error || `Request failed (${response.status})`)
     return result
   }
@@ -104,7 +109,7 @@ function initializeVisualBinding () {
   }
   function showFeedback () {
     for (const [id, binding] of saved) {
-      if (binding.mode === 'write') continue
+      if (binding.mode === 'write' || binding.readMeta?.meter) continue
       const matches = root.querySelectorAll('[data-cp-auto="' + binding.locator + '"]')
       if (matches.length !== 1) continue
       if (!Object.prototype.hasOwnProperty.call(component.boundState, id)) continue
@@ -192,8 +197,44 @@ function initializeVisualBinding () {
         })
       } else node.addEventListener('change', () => send(true))
     }
+    if (meterEntries.length) {
+      const locators = new Map()
+      for (const node of root.querySelectorAll('[data-cp-auto]')) {
+        const locator = node.getAttribute('data-cp-auto')
+        locators.set(locator, locators.has(locator) ? null : node)
+      }
+      meterTargets.clear()
+      for (const [id, binding] of meterEntries) {
+        const node = locators.get(binding.locator)
+        if (node) meterTargets.set(id, { node, binding })
+      }
+      if (lastMeterFrame) applyMeterFrame(lastMeterFrame.frame, lastMeterFrame.ids)
+      else invalidateMeters()
+    }
     showFeedback()
   }
+  function applyMeterFrame (frame, ids) {
+    lastMeterFrame = { frame, ids }
+    for (let index = 0; index < ids.length; index++) {
+      const target = meterTargets.get(ids[index])
+      if (!target) continue
+      const { node, binding } = target
+      node.setAttribute('data-cpv-meter-valid', String(frame.valid[index]))
+      node.setAttribute('aria-invalid', String(!frame.valid[index]))
+      if (!frame.valid[index]) continue
+      const value = mappedValue(frame.values[index], binding.readMeta, numericRange(binding, node))
+      if (binding.model) {
+        if (binding.model in component && !component.$options?.computed?.[binding.model]) component[binding.model] = value
+      } else node.value = value
+    }
+  }
+  function invalidateMeters () {
+    lastMeterFrame = null
+    for (const { node } of meterTargets.values()) {
+      node.setAttribute('data-cpv-meter-valid', 'false')
+      node.setAttribute('aria-invalid', 'true')
+    }
+  }
   function attachModelControls () {
     for (const [id, binding] of saved) {
       if (!binding.component || !binding.model || binding.mode === 'read') continue
@@ -330,6 +371,7 @@ function initializeVisualBinding () {
   }
   function closeLoginScreen () { loginScreen?.remove(); loginScreen = null }
   function showLoginForm (title, login, editor = false) {
+    if (disposed) return
     const content = coverPage(title, editor ? 'editor' : 'panel', 'login')
     const form = element('form')
     const user = field(form, editor ? 'Editor username' : 'Username', element('input'))
@@ -353,6 +395,7 @@ function initializeVisualBinding () {
       message.textContent = ''
       try {
         await login(user.value, password.value)
+        if (disposed) return
         closeLoginScreen()
       } catch (error) {
         message.textContent = error.message
@@ -366,13 +409,13 @@ function initializeVisualBinding () {
   }
   function loginView () {
     showLoginForm('ControlPanel editor', async (username, password) => {
-      const response = await component.__panelFetch(base + '/login', {
+      const { response, result } = await component.__panelFetch(base + '/login', {
         method: 'POST', credentials: 'same-origin',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ username, password })
-      })
-      const result = await response.json()
+      }, 12000, async response => ({ response, result: await response.json() }))
       if (!response.ok) throw new Error(result.error || 'Login failed')
+      if (disposed) return
       editSession = result
       await loadEditor()
     }, true)
@@ -382,7 +425,9 @@ function initializeVisualBinding () {
   }
   async function loadEditor () {
     snapshot = await request('/config')
+    if (disposed) return
     const response = await request('/devices')
+    if (disposed) return
     devices = response.devices
     draft = snapshot.bindings.map(entry => ({ ...entry, onebased: numberingMode(entry) }))
     closeOverlay()
@@ -390,6 +435,7 @@ function initializeVisualBinding () {
     renderToolbar()
     inform('Choose a control on the page')
     updateBindingMarkers()
+    meterClient?.setAuth({ endpoint: base, csrf: editSession.csrf, header: 'X-Panel-CSRF' })
   }
   function choose (label, options, selected) {
     const select = element('select')
@@ -658,6 +704,25 @@ function initializeVisualBinding () {
   }
   attachControls()
   attachModelControls()
+  if (this.__boundPanelConfig().meter && meterEntries.length) {
+    try {
+      const ids = meterEntries.map(([id]) => id).sort((a, b) => a.localeCompare(b))
+      meterClient = this.__createPanelMeterClient({ socket: this.$socket,
+        panelId: config.panelId, room: this.__boundPanelConfig().room, ids,
+        request: (...args) => component.__panelFetch(...args),
+        createReceiver: this.__createRoomMeterReceiver, createRenderer: this.__createMeterRenderer,
+        apply: applyMeterFrame, invalidate: invalidateMeters,
+        onUnauthorized: () => {
+          if (editing) { editSession = null; loginView() }
+          else component.clearBoundPanelSession()
+        } })
+      cleanup.push(() => meterClient.close())
+      if (!editing) cleanup.push(this.$watch('boundAuthenticated', authenticated => {
+        meterClient.setAuth(authenticated ? { endpoint: component.__boundPanelConfig().endpoint,
+          csrf: component.__boundPanelSession.csrf, header: 'X-Room-CSRF' } : null)
+      }))
+    } catch (error) { console.error('ControlPanel meter initialization failed', error) }
+  }
   observer = new MutationObserver(() => {
     attachControls()
     updateBindingMarkers()
@@ -730,6 +795,7 @@ function initializeVisualBinding () {
     .cpv-binding-actions{display:flex;gap:6px;flex-shrink:0}
     body.cpv-editing [data-cpv-bound="true"]{outline:2px solid #b526f2 !important;outline-offset:3px;box-shadow:0 0 0 4px #b526f255 !important}
     body.cpv-editing [data-cp-auto]:hover{outline:2px solid #b526f2;outline-offset:2px}
+    [data-cpv-meter-valid="false"]{opacity:.45}
   `
   document.head.append(style)
   cleanup.push(() => style.remove())
@@ -737,7 +803,11 @@ function initializeVisualBinding () {
     document.body.classList.add('cpv-editing')
     cleanup.push(() => document.body.classList.remove('cpv-editing'))
     coverPage('Loading...', 'editor')
-    request('/session').then(session => { editSession = session; return loadEditor() })
+    request('/session', 'GET', undefined, 2500).then(session => {
+      if (disposed) return
+      editSession = session
+      return loadEditor()
+    })
       .then(closeLoginScreen).catch(() => loginView())
   } else {
     coverPage('Loading...', 'panel')
@@ -745,10 +815,13 @@ function initializeVisualBinding () {
       if (authenticated) closeLoginScreen()
       else if (!loginScreen) normalLoginView()
     }))
-    component.restoreBoundPanelSession().then(session => {
+    component.restoreBoundPanelSession(2500).then(session => {
+      if (disposed) return
       if (session || component.boundAuthenticated) closeLoginScreen()
       else normalLoginView()
-    }).catch(() => normalLoginView())
+    }).catch(() => {
+      normalLoginView()
+    })
   }
 }
 

package/panel-editor-auth.js

@@ -1,7 +1,7 @@
 const crypto = require('node:crypto')
 const { readJsonBody, replyJson: reply, sameOrigin } = require('./panel-http')
 
-function createPanelEditor ({ panelId, username, password, secureCookie, getConfig, getDevices, getTargets, apply, restoredSessions }) {
+function createPanelEditor ({ panelId, username, password, secureCookie, getConfig, getDevices, getTargets, apply, restoredSessions, onAuthenticatedRequest }) {
   if (!username || !password) return null
   const prefix = `/control-panel-edit/panels/${panelId}`
   const cookieName = `cp_edit_${panelId.replace(/[^a-zA-Z0-9]/g, '_')}`
@@ -71,6 +71,8 @@ function createPanelEditor ({ panelId, username, password, secureCookie, getConf
         reply(res, 403, { error: 'CSRF rejected' })
         return true
       }
+      if (onAuthenticatedRequest && await onAuthenticatedRequest(req, res,
+        { token, expiry: session.expiry })) return true
       if (path === prefix + '/session' && req.method === 'GET') {
         reply(res, 200, { csrf: session.csrf })
       } else if (path === prefix + '/logout' && req.method === 'POST') {
@@ -84,7 +86,7 @@ function createPanelEditor ({ panelId, username, password, secureCookie, getConf
         const device = new URL(req.url, 'http://localhost').searchParams.get('device')
         reply(res, 200, { targets: await getTargets(req, device) })
       } else if (path === prefix + '/apply' && req.method === 'POST') {
-        reply(res, 200, await apply(req, await readJsonBody(req, 65536)))
+        reply(res, 200, await apply(req, await readJsonBody(req, 524288)))
       } else {
         reply(res, 404, { error: 'Not found' })
       }
@@ -97,6 +99,7 @@ function createPanelEditor ({ panelId, username, password, secureCookie, getConf
 
   return {
     handler,
+    sessionActive: token => !closed && (sessions.get(token)?.expiry || 0) > Date.now(),
     sessionSnapshot () {
       return new Map([...sessions].filter(([, session]) => session.expiry > Date.now())
         .map(([token, session]) => [token, { ...session }]))

package/panel-http.js

@@ -56,12 +56,13 @@ async function readJsonBody (req, maxBytes) {
 }
 
 // Serialized into the Vue component, so keep this function browser-only and self-contained.
-async function fetchWithTimeout (url, options = {}, timeoutMs = 12000) {
+async function fetchWithTimeout (url, options = {}, timeoutMs = 12000, readResponse) {
   const controller = new AbortController()
   let timedOut = false
   const timer = setTimeout(() => { timedOut = true; controller.abort() }, timeoutMs)
   try {
-    return await fetch(url, { ...options, signal: controller.signal })
+    const response = await fetch(url, { ...options, signal: controller.signal })
+    return readResponse ? await readResponse(response) : response
   } catch (error) {
     if (timedOut) throw new Error('Request timed out; your binding draft is still available')
     throw error

package/panel-meter-client.js

@@ -0,0 +1,84 @@
+// Self-contained: serialized as a Vue method, with factories supplied by the node.
+function createPanelMeterClient ({ socket, panelId, room, ids, request, createReceiver,
+  createRenderer, apply, invalidate, onUnauthorized }) {
+  if (!socket) throw Error('Dashboard socket is unavailable for meter telemetry')
+  let auth = null, renderer = null, generation = 0, disposed = false
+  let retry = null, stale = null, connecting = false, delay = 500
+  const stopRendering = () => {
+    renderer?.close(); renderer = null
+    clearTimeout(stale); stale = null
+    invalidate()
+  }
+  const pause = () => {
+    generation++
+    connecting = false
+    clearTimeout(retry); retry = null
+    if (socket.connected) socket.emit('control-panel:meter-unsubscribe', panelId)
+    stopRendering()
+  }
+  const connect = async () => {
+    if (disposed || !auth || document.hidden || !socket.connected || connecting) return
+    clearTimeout(retry); retry = null
+    connecting = true
+    const expected = generation
+    try {
+      const { response, result } = await request(auth.endpoint + '/meter-ticket', {
+        method: 'POST', credentials: 'same-origin',
+        headers: { 'Content-Type': 'application/json', [auth.header]: auth.csrf },
+        body: JSON.stringify({ room, socketId: socket.id })
+      }, 5000, async response => ({ response, result: await response.json() }))
+      if (disposed || expected !== generation || document.hidden) return
+      if (response.status === 401) { pause(); auth = null; onUnauthorized(); return }
+      if (!response.ok) throw Error(result.error || 'Meter subscription failed')
+      delay = 500
+      socket.emit('control-panel:meter-subscribe', panelId, result.ticket)
+    } catch (_) {
+      if (!disposed && expected === generation && auth) {
+        retry = setTimeout(connect, delay)
+        delay = Math.min(delay * 2, 5000)
+      }
+    } finally { if (expected === generation) connecting = false }
+  }
+  const ready = layout => {
+    if (disposed || !auth || document.hidden || layout?.panelId !== panelId || layout.room !== room ||
+      !Array.isArray(layout.ids) || JSON.stringify(layout.ids) !== JSON.stringify(ids)) return
+    stopRendering()
+    try {
+      renderer = createRenderer({ receiver: createReceiver(layout),
+        requestFrame: callback => requestAnimationFrame(callback), cancelFrame: cancelAnimationFrame,
+        apply: frame => { apply(frame, ids) } })
+    } catch (_) { stopRendering() }
+  }
+  const frame = message => {
+    if (message?.panelId !== panelId || !auth || document.hidden || !renderer?.receive(message)) return
+    clearTimeout(stale)
+    stale = setTimeout(invalidate, 1500)
+  }
+  const ended = message => {
+    if (message?.panelId !== panelId) return
+    stopRendering()
+    if (auth && !disposed && !retry) retry = setTimeout(connect, 500)
+  }
+  const disconnected = () => { generation++; connecting = false; stopRendering() }
+  const visibility = () => { if (document.hidden) pause(); else void connect() }
+  socket.on('control-panel:meter-ready', ready)
+  socket.on('control-panel:meter-frame', frame)
+  socket.on('control-panel:meter-ended', ended)
+  socket.on('connect', connect)
+  socket.on('disconnect', disconnected)
+  document.addEventListener('visibilitychange', visibility)
+  return {
+    setAuth (next) { pause(); auth = next; delay = 500; if (auth) void connect() },
+    close () {
+      disposed = true; pause(); auth = null
+      socket.off('control-panel:meter-ready', ready)
+      socket.off('control-panel:meter-frame', frame)
+      socket.off('control-panel:meter-ended', ended)
+      socket.off('connect', connect)
+      socket.off('disconnect', disconnected)
+      document.removeEventListener('visibilitychange', visibility)
+    }
+  }
+}
+
+module.exports = { createPanelMeterClient }