node-red-contrib-knx-ultimate 4.2.3 → 4.2.5

package/nodes/knxUltimateViewer.js

@@ -1,7 +1,210 @@
+const fs = require('fs')
+const path = require('path')
 const KNXAddress = require('knxultimate').KNXAddress
 const _ = require('lodash')
 
+let viewerAdminEndpointsRegistered = false
+const viewerRuntimeNodes = new Map()
+const knxUltimateViewerVueDistDir = path.join(__dirname, 'plugins', 'knxUltimateViewer-vue')
+
+const sendKnxUltimateViewerVueIndex = (res) => {
+  const entryPath = path.join(knxUltimateViewerVueDistDir, 'index.html')
+  fs.stat(entryPath, (error, stats) => {
+    if (error || !stats || !stats.isFile()) {
+      res.status(503).type('text/plain').send('KNX Viewer Vue build not found. Run "npm run knx-viewer:build" in the module root.')
+      return
+    }
+    res.sendFile(entryPath, (sendError) => {
+      if (!sendError || res.headersSent) return
+      res.status(sendError.statusCode || 500).type('text/plain').send(sendError.message || String(sendError))
+    })
+  })
+}
+
+const sendStaticFileSafe = ({ rootDir, relativePath, res }) => {
+  const rootPath = path.resolve(rootDir)
+  const requestedPath = String(relativePath || '').replace(/^\/+/, '')
+  const fullPath = path.resolve(rootPath, requestedPath)
+  if (!fullPath.startsWith(rootPath + path.sep) && fullPath !== rootPath) {
+    res.status(403).type('text/plain').send('Forbidden')
+    return
+  }
+  fs.stat(fullPath, (statError, stats) => {
+    if (statError || !stats || !stats.isFile()) {
+      res.status(404).type('text/plain').send('File not found')
+      return
+    }
+    res.sendFile(fullPath, (sendError) => {
+      if (!sendError || res.headersSent) return
+      res.status(sendError.statusCode || 500).type('text/plain').send(sendError.message || String(sendError))
+    })
+  })
+}
+
+const normalizeDpt = (value) => String(value || '').trim().toUpperCase()
+
+const isBooleanLikeDpt = (value) => {
+  const dpt = normalizeDpt(value)
+  return dpt === '1' || dpt.startsWith('1.') || dpt.includes('DPT-1') || dpt.includes('DPST-1-')
+}
+
+const isDimmerLikeDpt = (value) => {
+  const dpt = normalizeDpt(value)
+  return dpt === '5.001' || dpt.includes('5.001') || dpt.includes('DPST-5-1') || dpt.includes('DPT-5')
+}
+
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value))
+
+const normalizePayloadText = (value) => {
+  if (value === undefined || value === null) return ''
+  if (Buffer.isBuffer(value)) return value.toString('hex')
+  if (typeof value === 'object') {
+    try {
+      return JSON.stringify(value)
+    } catch (error) {
+      return String(value)
+    }
+  }
+  return String(value)
+}
+
+const sortViewerEntries = (a, b) => {
+  if (a.addressRAW !== undefined && b.addressRAW !== undefined) {
+    return a.addressRAW > b.addressRAW ? 1 : -1
+  }
+  return a.addressRAW !== undefined ? 1 : -1
+}
+
+const classifyViewerEntry = (entry) => {
+  const payloadNumber = Number(entry && entry.payload)
+  const numericPayload = Number.isFinite(payloadNumber) ? clamp(payloadNumber, 0, 100) : null
+  const dpt = String(entry && entry.dpt ? entry.dpt : '').trim()
+  const isBooleanPayload = typeof (entry && entry.payload) === 'boolean'
+
+  if (isBooleanPayload || isBooleanLikeDpt(dpt)) {
+    return {
+      kind: 'light',
+      isOn: entry && entry.payload === true,
+      level: entry && entry.payload === true ? 100 : 0
+    }
+  }
+
+  if (numericPayload !== null && isDimmerLikeDpt(dpt)) {
+    return {
+      kind: 'dimmer',
+      isOn: numericPayload > 0,
+      level: Math.round(numericPayload)
+    }
+  }
+
+  return {
+    kind: 'other',
+    isOn: false,
+    level: null
+  }
+}
+
+const buildViewerWebState = (node) => {
+  const entries = Array.isArray(node && node.exposedGAs) ? node.exposedGAs.slice().sort(sortViewerEntries) : []
+  const items = entries.map((entry) => {
+    const classification = classifyViewerEntry(entry)
+    const lastUpdateMs = entry && entry.lastupdate ? new Date(entry.lastupdate).getTime() : 0
+    return {
+      address: String(entry && entry.address ? entry.address : '').trim(),
+      addressRAW: Number(entry && entry.addressRAW ? entry.addressRAW : 0),
+      dpt: String(entry && entry.dpt ? entry.dpt : '').trim(),
+      payload: entry ? entry.payload : undefined,
+      payloadText: normalizePayloadText(entry ? entry.payload : ''),
+      devicename: String(entry && entry.devicename ? entry.devicename : '').trim(),
+      lastUpdate: entry && entry.lastupdate ? new Date(entry.lastupdate).toISOString() : '',
+      lastUpdateMs: Number.isFinite(lastUpdateMs) ? lastUpdateMs : 0,
+      rawPayload: String(entry && entry.rawPayload ? entry.rawPayload : '').trim(),
+      payloadmeasureunit: String(entry && entry.payloadmeasureunit ? entry.payloadmeasureunit : '').trim(),
+      kind: classification.kind,
+      isOn: classification.isOn,
+      level: classification.level
+    }
+  })
+
+  const lights = items.filter(item => item.kind === 'light')
+  const dimmers = items.filter(item => item.kind === 'dimmer')
+  const others = items.filter(item => item.kind === 'other')
+  const lastUpdateMs = Math.max(...items.map(item => Number(item.lastUpdateMs || 0)), 0)
+
+  return {
+    node: {
+      id: node.id,
+      name: node.name || 'KNXViewer',
+      gatewayId: node.serverKNX ? node.serverKNX.id : '',
+      gatewayName: (node.serverKNX && node.serverKNX.name) ? node.serverKNX.name : ''
+    },
+    summary: {
+      totalItems: items.length,
+      lightCount: lights.length,
+      dimmerCount: dimmers.length,
+      otherCount: others.length,
+      lightOnCount: lights.filter(item => item.isOn).length,
+      lightOffCount: lights.filter(item => !item.isOn).length,
+      dimmerActiveCount: dimmers.filter(item => Number(item.level || 0) > 0).length,
+      averageDimmerLevel: dimmers.length
+        ? Math.round(dimmers.reduce((acc, item) => acc + Number(item.level || 0), 0) / dimmers.length)
+        : 0,
+      lastUpdate: lastUpdateMs > 0 ? new Date(lastUpdateMs).toISOString() : ''
+    },
+    items
+  }
+}
+
 module.exports = function (RED) {
+  if (!viewerAdminEndpointsRegistered) {
+    RED.httpAdmin.get('/knxUltimateViewer/page', RED.auth.needsPermission('knxUltimate-config.read'), (req, res) => {
+      sendKnxUltimateViewerVueIndex(res)
+    })
+
+    RED.httpAdmin.get('/knxUltimateViewer/page/assets/:file', RED.auth.needsPermission('knxUltimate-config.read'), (req, res) => {
+      sendStaticFileSafe({
+        rootDir: path.join(knxUltimateViewerVueDistDir, 'assets'),
+        relativePath: req.params.file,
+        res
+      })
+    })
+
+    RED.httpAdmin.get('/knxUltimateViewer/nodes', RED.auth.needsPermission('knxUltimate-config.read'), (req, res) => {
+      try {
+        const nodes = Array.from(viewerRuntimeNodes.values())
+          .map((node) => ({
+            id: node.id,
+            name: node.name || 'KNXViewer',
+            gatewayId: node.serverKNX ? node.serverKNX.id : '',
+            gatewayName: (node.serverKNX && node.serverKNX.name) ? node.serverKNX.name : ''
+          }))
+          .sort((a, b) => String(a.name || '').localeCompare(String(b.name || '')))
+        res.json({ nodes })
+      } catch (error) {
+        res.status(500).json({ error: error.message || String(error) })
+      }
+    })
+
+    RED.httpAdmin.get('/knxUltimateViewer/state', RED.auth.needsPermission('knxUltimate-config.read'), (req, res) => {
+      try {
+        const nodeId = String(req.query.nodeId || '').trim()
+        let viewerNode = nodeId ? viewerRuntimeNodes.get(nodeId) : null
+        if (!viewerNode) {
+          viewerNode = Array.from(viewerRuntimeNodes.values())[0]
+        }
+        if (!viewerNode) {
+          res.status(404).json({ error: 'KNX Viewer node not found' })
+          return
+        }
+        res.json(buildViewerWebState(viewerNode))
+      } catch (error) {
+        res.status(500).json({ error: error.message || String(error) })
+      }
+    })
+
+    viewerAdminEndpointsRegistered = true
+  }
+
   function knxUltimateViewer (config) {
     RED.nodes.createNode(this, config)
     const node = this
@@ -37,9 +240,9 @@ module.exports = function (RED) {
     node.initialread = false
     node.listenallga = true
     node.outputtype = 'write'
-    node.outputRBE = 'false' // Apply or not RBE to the output (Messages coming from flow)
-    node.inputRBE = 'false' // Apply or not RBE to the input (Messages coming from BUS)
-    node.currentPayload = '' // Current value for the RBE input and for the .previouspayload msg
+    node.outputRBE = 'false'
+    node.inputRBE = 'false'
+    node.currentPayload = ''
     node.passthrough = 'no'
     node.formatmultiplyvalue = 1
     node.formatnegativevalue = 'leave'
@@ -47,58 +250,61 @@ module.exports = function (RED) {
     node.timerPIN3 = null
     node.exposedGAs = []
 
-    // Used to call the status update from the config node.
-    node.setNodeStatus = ({ fill, shape, text, payload, GA, dpt, devicename }) => {
+    viewerRuntimeNodes.set(node.id, node)
+
+    node.setNodeStatus = ({ fill, shape, text, payload, GA }) => {
       try {
         if (node.serverKNX === null) { updateStatus({ fill: 'red', shape: 'dot', text: '[NO GATEWAY SELECTED]' }); return }
-        GA = GA === undefined ? '' : GA
-        payload = payload === undefined ? '' : payload
-        payload = typeof payload === 'object' ? JSON.stringify(payload) : payload
+        const gaValue = GA === undefined ? '' : GA
+        let payloadValue = payload === undefined ? '' : payload
+        payloadValue = typeof payloadValue === 'object' ? JSON.stringify(payloadValue) : payloadValue
         const dDate = new Date()
         const ts = (node.serverKNX && typeof node.serverKNX.formatStatusTimestamp === 'function')
           ? node.serverKNX.formatStatusTimestamp(dDate)
           : `${dDate.getDate()}, ${dDate.toLocaleTimeString()}`
-        updateStatus({ fill, shape, text: GA + ' ' + payload + ' ' + text + ' (' + ts + ')' })
+        updateStatus({ fill, shape, text: gaValue + ' ' + payloadValue + ' ' + text + ' (' + ts + ')' })
       } catch (error) { /* empty */ }
     }
 
-    // This function is called by the knx-ultimate config node, to output a msg.payload.
-    node.handleSend = msg => {
+    node.handleSend = (msg) => {
+      let gaEntry
       try {
-        var oGa = node.exposedGAs.find(ga => ga.address === msg.knx.destination)
+        gaEntry = node.exposedGAs.find(ga => ga.address === msg.knx.destination)
       } catch (error) {
-
       }
-      const sDeviceName = msg.devicename === node.name ? 'Import ETS file to view the group address name' : msg.devicename // The ETS file hasn't been imported
-      const sAddressRAW = KNXAddress.createFromString(msg.knx.destination, KNXAddress.TYPE_GROUP).get() // Address as number (for ordering later)
-      if (oGa === undefined) {
-        node.exposedGAs.push({ address: msg.knx.destination, addressRAW: sAddressRAW, dpt: msg.knx.dpt, payload: msg.payload, devicename: sDeviceName, lastupdate: new Date(), rawPayload: 'HEX Raw: ' + msg.knx.rawValue.toString('hex') || '?', payloadmeasureunit: (msg.payloadmeasureunit !== 'unknown' ? ' ' + msg.payloadmeasureunit : '') })
+      const deviceName = msg.devicename === node.name ? 'Import ETS file to view the group address name' : msg.devicename
+      const addressRAW = KNXAddress.createFromString(msg.knx.destination, KNXAddress.TYPE_GROUP).get()
+      if (gaEntry === undefined) {
+        node.exposedGAs.push({
+          address: msg.knx.destination,
+          addressRAW,
+          dpt: msg.knx.dpt,
+          payload: msg.payload,
+          devicename: deviceName,
+          lastupdate: new Date(),
+          rawPayload: 'HEX Raw: ' + msg.knx.rawValue.toString('hex') || '?',
+          payloadmeasureunit: (msg.payloadmeasureunit !== 'unknown' ? ' ' + msg.payloadmeasureunit : '')
+        })
       } else {
-        oGa.dpt = msg.knx.dpt
-        oGa.payload = msg.payload
-        oGa.devicename = sDeviceName
-        oGa.lastupdate = new Date()
-        oGa.rawPayload = 'HEX Raw: ' + msg.knx.rawValue.toString('hex') || '?'
-        oGa.payloadmeasureunit = (msg.payloadmeasureunit !== 'unknown' ? ' ' + msg.payloadmeasureunit : '')
+        gaEntry.dpt = msg.knx.dpt
+        gaEntry.payload = msg.payload
+        gaEntry.devicename = deviceName
+        gaEntry.lastupdate = new Date()
+        gaEntry.rawPayload = 'HEX Raw: ' + msg.knx.rawValue.toString('hex') || '?'
+        gaEntry.payloadmeasureunit = (msg.payloadmeasureunit !== 'unknown' ? ' ' + msg.payloadmeasureunit : '')
       }
-      // Output the payload
-      const PIN1 = node.createPayloadPIN1()
-      const PIN2 = node.createPayloadPIN2()
-      const PIN3 = node.createPayloadPIN3()
-      node.send([PIN1, PIN2, PIN3])
+
+      const pin1 = node.createPayloadPIN1()
+      const pin2 = node.createPayloadPIN2()
+      const pin3 = node.createPayloadPIN3()
+      node.send([pin1, pin2, pin3])
     }
 
     node.createPayloadPIN1 = () => {
-      const aSorted = node.exposedGAs.sort((a, b) => {
-        if (a.addressRAW !== undefined && b.addressRAW !== undefined) {
-          return a.addressRAW > b.addressRAW ? 1 : -1
-        } else {
-          return a.addressRAW !== undefined ? 1 : -1
-        }
-      })
-      let sPayload = ''
+      const sorted = node.exposedGAs.sort(sortViewerEntries)
+      let payload = ''
 
-      const sHead = `<div class="main"><table><caption>Current received KNX Group address values</caption>
+      const head = `<div class="main"><table><caption>Current received KNX Group address values</caption>
             <thead>
               <tr>
                 <th> GA </th>
@@ -109,65 +315,55 @@ module.exports = function (RED) {
               </tr>
             </thead>
             <tbody>`
-      const sFooter = `</tbody><tfoot>
+      const footer = `</tbody><tfoot>
             <tr>
               <th scope="row">Count</th>
-              <td>` + aSorted.length + `</td>
+              <td>` + sorted.length + `</td>
             </tr>
           </tfoot>
           </table></div>`
 
       try {
-        for (let index = 0; index < aSorted.length; index++) {
-          const element = aSorted[index]
-          sPayload += '<tr><td>' + element.address + '</td>'
+        for (let index = 0; index < sorted.length; index++) {
+          const element = sorted[index]
+          payload += '<tr><td>' + element.address + '</td>'
           if (typeof element.payload === 'boolean' && element.payload === true) {
-            sPayload += '<td><b><font color=green>True</font></b></td>'
+            payload += '<td><b><font color=green>True</font></b></td>'
           } else if (typeof element.payload === 'boolean' && element.payload === false) {
-            sPayload += '<td><font color=red>False</font></td>'
+            payload += '<td><font color=red>False</font></td>'
           } else if (typeof element.payload === 'object' && !isNaN(Date.parse(element.payload))) {
-            // The payload is a datetime
-            sPayload += '<td>' + element.payload.toLocaleString() + '</td>'
+            payload += '<td>' + element.payload.toLocaleString() + '</td>'
           } else if (typeof element.payload === 'object') {
-            // Is maybe a JSON?
             try {
-              // sPayload += '<td>' + JSON.stringify(element.payload) + '</td>'
-              sPayload += '<td><i>' + element.rawPayload + '</i></td>'
+              payload += '<td><i>' + element.rawPayload + '</i></td>'
             } catch (error) {
-              sPayload += '<td>' + element.payload + '</td>'
+              payload += '<td>' + element.payload + '</td>'
             }
           } else {
-            sPayload += '<td>' + element.payload + element.payloadmeasureunit + '</td>'
+            payload += '<td>' + element.payload + element.payloadmeasureunit + '</td>'
           }
-          sPayload += '<td>' + element.dpt + '</td>'
-          sPayload += '<td>' + element.lastupdate.toLocaleString() + '</td>'
-          sPayload += '<td><font style="font-size: smaller;">' + element.devicename + '</font></td></tr>'
+          payload += '<td>' + element.dpt + '</td>'
+          payload += '<td>' + element.lastupdate.toLocaleString() + '</td>'
+          payload += '<td><font style="font-size: smaller;">' + element.devicename + '</font></td></tr>'
         }
       } catch (error) {
-
       }
-      return { topic: node.name, payload: sHead + sPayload + sFooter }
+      return { topic: node.name, payload: head + payload + footer }
     }
+
     node.createPayloadPIN2 = () => {
       return { topic: node.name, payload: node.exposedGAs }
     }
+
     node.createPayloadPIN3 = () => {
-      // Object containing the telegram in the queue
-      // node.writeQueueAdd({
-      //   grpaddr: _oClient.topic,
-      //   payload: "",
-      //   dpt: "",
-      //   outputtype: "read",
-      //   nodecallerid: _oClient.id,
-      // });
-      let sHead = ''
-      let sFooter = ''
-      let sPayload = ''
+      let head = ''
+      let footer = ''
+      let payload = ''
       try {
-        const aItems = _.clone(node.serverKNX.knxConnection.commandQueue)
-        if (aItems === undefined) return
+        const items = _.clone(node.serverKNX.knxConnection.commandQueue)
+        if (items === undefined) return
 
-        sHead = `<div class="main"><table><caption>Queue of outgoing telegrams to the KNX BUS. The more the count,</br>the more congested is the KNX BUS.</caption>
+        head = `<div class="main"><table><caption>Queue of outgoing telegrams to the KNX BUS. The more the count,</br>the more congested is the KNX BUS.</caption>
             <thead>
               <tr>
                 <th> Channel ID </th>
@@ -177,50 +373,43 @@ module.exports = function (RED) {
               </tr>
             </thead>
             <tbody>`
-        sFooter = `</tbody><tfoot>
+        footer = `</tbody><tfoot>
               <tr>
                 <th scope="row">Count</th>
-                <td>` + aItems.length + `</td>
+                <td>` + items.length + `</td>
               </tr>
             </tfoot>
             </table></div>`
 
-        for (let index = 0; index < aItems.length; index++) {
-          const element = aItems[index]
-          sPayload += '<tr><td>' + element.knxPacket.channelID + '</td>'
-          sPayload += '<td><b><font color=green>' + element.knxPacket.seqCounter + '</font></b></td>'
-          sPayload += '<td>' + element.knxPacket.type + '</td>'
-          sPayload += '<td>' + element.knxPacket.status + '</td></tr>'
+        for (let index = 0; index < items.length; index++) {
+          const element = items[index]
+          payload += '<tr><td>' + element.knxPacket.channelID + '</td>'
+          payload += '<td><b><font color=green>' + element.knxPacket.seqCounter + '</font></b></td>'
+          payload += '<td>' + element.knxPacket.type + '</td>'
+          payload += '<td>' + element.knxPacket.status + '</td></tr>'
         }
       } catch (error) {
-
       }
-      return { topic: node.name, payload: sHead + sPayload + sFooter }
+      return { topic: node.name, payload: head + payload + footer }
     }
 
-    // if (timerPIN3 !== null) clearInterval(timerPIN3);
-    // timerPIN3 = setInterval(() => {
-    //   let PIN3 = node.createPayloadPIN3();
-    //   node.send([null, null, PIN3]);
-    // }, 200);
-
-    node.on('input', function (msg) {
-
+    node.on('input', function () {
     })
 
     node.on('close', function (done) {
-      if (timerPIN3 !== null) clearInterval(timerPIN3)
+      if (node.timerPIN3 !== null) clearInterval(node.timerPIN3)
+      viewerRuntimeNodes.delete(node.id)
       if (node.serverKNX) {
         node.serverKNX.removeClient(node)
       }
       done()
     })
 
-    // On each deploy, unsubscribe+resubscribe
     if (node.serverKNX) {
       node.serverKNX.removeClient(node)
       node.serverKNX.addClient(node)
     }
   }
+
   RED.nodes.registerType('knxUltimateViewer', knxUltimateViewer)
 }

package/nodes/locales/de/knxUltimate-config.html

@@ -38,9 +38,9 @@ Dieser Node stellt die Verbindung zu deinem KNX/IP-Gateway her.
 
 |Eigenschaft|Beschreibung|
 |--|--|
-| Echo sent message to all node with same Group Address | Leitet Flow-Nachrichten an alle Nodes mit derselben GA weiter, so als kämen sie vom BUS. Nützlich bei KNX-Emulation oder fehlender BUS-Verbindung. **Wird künftig standardmäßig aktiviert und dann entfernt.** |
 | Suppress repeated (R-Flag) telegrams fom BUS | Wiederholte BUS-Telegramme (R-Flag) ignorieren. |
 | Suppress ACK request in tunneling mode | Für sehr alte KNX/IP-Gateways: ACK ignorieren, alle Telegramme akzeptieren. |
+| Flow-Bubbles-Plugin aktivieren | Zeigt im Editor neben jedem KNX Device Node eine kleine farbige Bubble an. Die Bubble spiegelt den zuletzt vom Gateway empfangenen Live-Status wider und wird abgeblendet, wenn die Daten veraltet sind. Nützlich bei Inbetriebnahme und Debugging. Standard: deaktiviert. |
 | Delay between each telegram (ms) | KNX erlaubt max. 50 Telegramme/s. 25-50 ms sind üblich; bei langsamen Verbindungen höher (z. B. 200-500 ms). |
 | Loglevel | Log-Detailgrad. Standard: "Error". |
 | Aktualisierung der Status-Badges | Legt fest, wie oft die Statusanzeige der Nodes erneuert wird. Mit einer Verzögerung werden Zwischenstände verworfen und nur der letzte Wert nach dem gewählten Intervall angezeigt. Wählen Sie **Sofort**, um das bisherige Echtzeitverhalten beizubehalten. |

package/nodes/locales/de/knxUltimate-config.json

@@ -72,6 +72,8 @@
             "suppress_ack": "ACK-Anfrage unterdrücken in Tunnel Modus",
             "suppress_ack_help": "Diese Option unterstützt die Kompatibilität mit der alten Firmware des alten IP-Interfaces.Achtung: Der Knoten kann die Trennung vom Gateway möglicherweise nicht bemerken. Verwenden Sie in diesem Fall den Watchdog im Ethernet+KNX-Twisted-Pair Modus.",
             "ignoreTelegramsWithRepeatedFlag": "Wiederholt (R-Flag) telegramme vom BUS unterdrücken",
+            "enable_flow_bubbles": "Flow-Bubbles-Plugin aktivieren",
+            "enable_flow_bubbles_help": "Zeigt Live-Status-Bubbles neben KNX Device Nodes im Editor an. Nützlich bei Inbetriebnahme und Debugging.",
             "log_level": "Loglevel",
             "status_datetime_format": "Status Datum/Uhrzeit-Format",
             "status_datetime_format_legacy": "Legacy (System-Locale)",
@@ -98,6 +100,14 @@
             "exposeAsVariableREADONLY": "Nur Lesen",
             "exposeAsVariableREADWRITE": "Lesen/Schreiben"
         },
+        "help": {
+            "intro": "Konfigurieren Sie die KNX-Gateway-Verbindung, den ETS-Import und das erweiterte Verhalten des Editors.",
+            "flow_bubbles_title": "Flow-Bubbles-Plugin",
+            "flow_bubbles_enable": "Aktivieren Sie diese Option, um neben jedem KNX Device Node im Editor eine kleine farbige Bubble anzuzeigen.",
+            "flow_bubbles_scope": "Die Bubbles spiegeln den zuletzt im Editor empfangenen Live-Status der KNX Device Nodes wider, die mit diesem Gateway verknüpft sind.",
+            "flow_bubbles_tooltip": "Fahren Sie mit der Maus über die Bubble, um Knotenname oder Topic, den letzten Payload und den aktuellen Statustext zu sehen.",
+            "flow_bubbles_stale": "Wenn kein aktueller KNX-Verkehr vorliegt, bleibt die Bubble abgeblendet, sodass alte Daten von frischen Aktualisierungen unterschieden werden können."
+        },
         "ets": {
             "description": "Sie können entweder eine ETS CSV-Gruppenadressliste oder eine ESF-Gruppenadressliste importieren. Bitte bevorzugen Sie die Adressliste der ETS CSV-Gruppe, da die Datenpunkte vollständiger sind.",
             "youtube": "&nbsp<i class=\"fa fa-youtube-play\"></i>&nbsp<a target=\"_blank\" href=\"https://youtu.be/egRbR_KwP9I\"><u>Anleitung des ETS CSV Exports auf Youtube.</u></a>",

package/nodes/locales/de/knxUltimateViewer.html

@@ -10,6 +10,18 @@ Zeigt alle Gruppenadressen und deren Werte in einem Dashboard-Widget an.<br/>
 | Gateway | KNX-Gateway. |
 | Name | Node-Name. |
 
+# WEBSEITE
+
+Der **KNX Viewer** enthält jetzt eine eigene **Vue-basierte Webseite**, die direkt aus dem Node-Editor geöffnet werden kann.
+
+Sie kann verwendet werden, um:
+- **Lichter** aus booleschen KNX-Werten live anzuzeigen
+- **Dimmer** aus Werten im Stil `DPT 5.001` anzuzeigen
+- Einträge zu filtern, zwischen Viewer-Nodes zu wechseln und Auto-Refresh aktiv zu halten
+- eine optisch mit **KNX AI** abgestimmte Oberfläche zu nutzen
+
+Die Webseite wird direkt von Node-RED bereitgestellt und folgt daher demselben Authentifizierungsmodell wie Editor und Admin-Endpunkte.
+
 # AUSGÄNGE
 
 1. Gruppenadressen (Dashboard)
@@ -19,6 +31,12 @@ Zeigt alle Gruppenadressen und deren Werte in einem Dashboard-Widget an.<br/>
 3. Telegramm-Warteschlange (Dashboard)
    : payload (html): mit <b>Template</b> verbinden; zeigt die KNX-Sendequeue zur BUS-Überwachung.
 
+# HINWEISE
+
+- Die **Webseite** ersetzt die bestehenden Ausgänge nicht; sie bleiben für klassische Dashboard-/Template-Flows verfügbar.
+- Licht- und Dimmer-Karten werden aus den aktuell vom Viewer gesehenen KNX-Werten abgeleitet.
+- Wenn noch keine Telegramme empfangen wurden, bleibt die Webseite leer, bis der Viewer Live-Verkehr gesammelt hat.
+
 # BEISPIEL
 
 <img src="https://raw.githubusercontent.com/Supergiovane/node-red-contrib-knx-ultimate/master/img/wiki/viewer2.png" width="90%"><br/>

package/nodes/locales/en/knxUltimate-config.html

@@ -38,9 +38,9 @@
 
 |Property|Description|
 |--|--|
-| Echo sent message to all node with same Group Address | Send the msg input coming from the flow, to all nodes having the same group address. The nodes will receive the new msg as if it's coming from the KNX bus. This is useful in case of using the KNX emulation and in case the connection to the KNX bus is not established. **This option will be deprecated in the next version and defaulted to checked.** Default is checked. |
 | Suppress repeated (R-Flag) telegrams fom BUS | Ignore repeated KNX telegrams coming from the bus. Default is unchecked. |
 | Suppress ACK request in tunneling mode | Enable it if you have a very old KNX/IP gateway. It ignores the ACK procedure and accepts all telegrams. Default is unchecked.|
+| Enable flow bubbles plugin | Draw a small coloured bubble next to each KNX Device node in the editor. The bubble reflects the latest live state received from the gateway and becomes dim when the data is stale. Useful during commissioning and debugging. Default is unchecked. |
 | Delay between each telegram (in milliseconds) | KNX specs states, that the maximum telegram sending speed is 50 telegrams per second. A speed between 25 and 50ms should be fine, unless you're connecting to a remote KNX Gateway via a slow internet connection (in this case, you should increase the value by, for example, 200 to 500ms or more). |
 | Loglevel | Log level, in case you need to debug something with the dev. Default is "Error", |
 | Node status throttle | Delay how often node badges are refreshed. When a delay is selected, intermediate status changes are discarded and the last one is shown after the chosen interval. Select **Immediate** to keep the legacy real-time behaviour. |

package/nodes/locales/en/knxUltimate-config.json

@@ -73,6 +73,8 @@
             "suppress_ack": "Suppress ACK request in tunneling mode",
             "suppress_ack_help": "The option above helps old KNX/IP Interfaces compatibility. Warning: the node may not notice the disconnection from the gateway. In this case, use the watchdog in Ethernet+KNX twisted pair mode.",
             "ignoreTelegramsWithRepeatedFlag": "Suppress repeated (R-Flag) telegrams fom BUS",
+            "enable_flow_bubbles": "Enable flow bubbles plugin",
+            "enable_flow_bubbles_help": "Draw live status bubbles next to KNX Device nodes in the editor. Useful during commissioning and debugging.",
             "log_level": "Loglevel",
         "status_throttle": "Throttle node status updates",
         "status_throttle_none": "Immediate (no throttle)",
@@ -102,6 +104,14 @@
             "delaybetweentelegrams": "Delay between each telegram (in milliseconds)",
             "delaybetweentelegramsfurtherdelayREAD": "and further multiply delay only between -read- telegrams"
         },
+        "help": {
+            "intro": "Configure the KNX gateway connection, ETS import and advanced editor behaviour.",
+            "flow_bubbles_title": "Flow bubbles plugin",
+            "flow_bubbles_enable": "Enable this option to draw a small coloured bubble next to each KNX Device node in the editor.",
+            "flow_bubbles_scope": "Bubbles reflect the latest live state received by the editor from KNX Device nodes linked to this gateway.",
+            "flow_bubbles_tooltip": "Hover the bubble to inspect the node name/topic, the last payload and the current status text.",
+            "flow_bubbles_stale": "If no recent KNX traffic is available, the bubble stays dimmed so stale data can be distinguished from fresh updates."
+        },
         "ets": {
             "description": "You can import either an ETS CSV group address list, or an ESF group address list. Please prefer the ETS CSV group address list, as the datapoints are more complete.",
             "youtube": "&nbsp<i class=\"fa fa-youtube-play\"></i>&nbsp<a target=\"_blank\" href=\"https://youtu.be/egRbR_KwP9I\"><u>See how to export the CSV on Youtube.</u></a>",

package/nodes/locales/en/knxUltimateViewer.html

@@ -10,16 +10,32 @@
 | Gateway | The KNX gateway. |
 | Name | The node name. |
 
+# WEB PAGE
+
+The **KNX Viewer** node now includes a dedicated **Vue-based Web Page** that you can open directly from the node editor.
+
+Use it to:
+- browse live **lights** detected from boolean-style KNX values
+- browse live **dimmers** detected from `DPT 5.001` style values
+- filter items, switch between Viewer nodes and keep the page auto-refreshed
+- get a UI visually aligned with **KNX AI**
+
+The web page is served directly by Node-RED, so it follows the same authentication model used by the editor/admin endpoints.
+
 # OUTPUT PINS
 
 1. Dashboard Group Addresses
-   : payload (html) : Connect it directly with the Template UI node. It creates a table with all Group Addresses and their
-   values.
+   : payload (html) : Connect it directly with the Template UI node. It creates a table with all Group Addresses and their values.
 2. Simple Array JSON for data recording
    : payload (array) : An array containing all the GA. You can use the array to do your own format and reordering.
 3. Dashboard telegrams queue
-   : payload (html) : Connect it directly with the Template UI node. It creates a table with the KNX transmission queue for
-   monitoring BUS congestion.
+   : payload (html) : Connect it directly with the Template UI node. It creates a table with the KNX transmission queue for monitoring BUS congestion.
+
+# NOTES
+
+- The **Web Page** does not replace the existing outputs: they remain available for dashboard/template flows.
+- Light and dimmer cards are inferred from the KNX values currently seen by the Viewer node.
+- If no telegrams have been seen yet, the web page will stay empty until the Viewer collects live traffic.
 
 # SAMPLE
 

package/nodes/locales/es/knxUltimate-config.html

@@ -33,9 +33,9 @@
 <br/> **Avanzado** | Propiedad | Descripción |
 
 |-|-|
-| Echo enviado mensaje a todos los nodos con la misma dirección de grupo | Envíe la entrada MSG que viene del flujo a todos los nodos que tienen la misma dirección de grupo. Los nodos recibirán el nuevo MSG como si viniera del autobús KNX. Esto es útil en el caso de usar la emulación KNX y en caso de que no se establezca la conexión con el bus KNX. ** Esta opción estará en desuso en la próxima versión y se predeterminó en verificación.** Se verifica el valor predeterminado. |
 | Suprimir los telegramas repetidos (r-flag) FOM BUS | Ignore los repetidos telegramas de KNX que provengan del autobús. El valor predeterminado no está marcado. |
 | Suprimir la solicitud ACK en el modo de túnel | Habilite si tiene una puerta de enlace KNX/IP muy antigua. Ignora el procedimiento ACK y acepta todos los telegramas. El valor predeterminado no está marcado. |
+| Habilitar plugin flow bubbles | Dibuja una pequeña burbuja de color junto a cada nodo KNX Device en el editor. La burbuja refleja el último estado en vivo recibido desde el gateway y se atenúa cuando los datos ya no son recientes. Útil durante la puesta en marcha y la depuración. Valor predeterminado: desactivado. |
 | Retraso entre cada telegrama (en milisegundos) | Las especificaciones de KNX establecen que la velocidad máxima de envío de telegrama es de 50 telegramas por segundo. Una velocidad entre 25 y 50 ms debe estar bien, a menos que se conecte a una puerta de enlace KNX remota a través de una conexión a Internet lenta (en este caso, debe aumentar el valor, por ejemplo, de 200 a 500 ms o más). |
 | Loglevel | Nivel de registro, en caso de que necesite depurar algo con el desarrollo. El valor predeterminado es "error", |
 | Temporización de actualizaciones de estado | Define cada cuánto se actualiza la insignia de estado de los nodos. Con un retardo activo se descartan los estados intermedios y solo se muestra el último después del intervalo elegido. Seleccione **Inmediato** para mantener el comportamiento en tiempo real. |