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

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

@@ -73,6 +73,8 @@
       "suppress_ack": "Suprimir la solicitud ACK en modo de túnel",
       "suppress_ack_help": "La opción anterior ayuda a la antigua compatibilidad de las interfaces KNX/IP. ADVERTENCIA: El nodo puede no notar la desconexión de la puerta de enlace. En este caso, use el regadeo en el modo de par torcido Ethernet+KNX.",
       "ignoreTelegramsWithRepeatedFlag": "Suprimir los telegramas repetidos (r-flag) FOM Bus",
+      "enable_flow_bubbles": "Habilitar plugin flow bubbles",
+      "enable_flow_bubbles_help": "Muestra burbujas de estado en vivo junto a los nodos KNX Device en el editor. Útil durante la puesta en marcha y la depuración.",
       "log_level": "Loglevel",
       "status_throttle": "Temporizar las actualizaciones de estado del nodo",
       "status_throttle_none": "Inmediato (sin temporización)",
@@ -102,6 +104,14 @@
       "delaybetweentelegrams": "Retraso entre cada telegrama (en milisegundos)",
       "delaybetweentelegramsfurtherdelayREAD": "y más retraso de multiplicar solo entre los telegramas de lectura"
     },
+    "help": {
+      "intro": "Configure la conexión del gateway KNX, la importación ETS y el comportamiento avanzado del editor.",
+      "flow_bubbles_title": "Plugin flow bubbles",
+      "flow_bubbles_enable": "Active esta opción para dibujar una pequeña burbuja de color junto a cada nodo KNX Device en el editor.",
+      "flow_bubbles_scope": "Las burbujas reflejan el último estado en vivo recibido por el editor desde los nodos KNX Device vinculados a este gateway.",
+      "flow_bubbles_tooltip": "Pase el cursor sobre la burbuja para ver el nombre o topic del nodo, el último payload y el texto de estado actual.",
+      "flow_bubbles_stale": "Si no hay tráfico KNX reciente, la burbuja queda atenuada para distinguir datos obsoletos de actualizaciones recientes."
+    },
     "ets": {
       "description": "Puede importar una lista de direcciones de grupo CSV CSV o una lista de direcciones de grupo ESF. Prefiera la lista de direcciones del grupo CSV CSV, ya que los puntos de datos son más completos.",
       "youtube": "& nbsp__ph_0 ____ ph_1 __ & nbsp__ph_2____ph_3__ ver cómo exportar el CSV en YouTube .__ PH_4__</a>",

package/nodes/locales/es/knxUltimateViewer.html

@@ -7,19 +7,35 @@ Vea todas las direcciones de grupo y sus valores en un widget del tablero.<Br />
 
 | Propiedad | Descripción |
 |-|-|
-|Puerta de entrada |La puerta de enlace KNX.|
-|Nombre |El nombre del nodo.|
+| Gateway | La pasarela KNX. |
+| Name | El nombre del nodo. |
 
-# Pines de salida
+# PÁGINA WEB
 
-1. Direcciones de grupo de tablero
-: carga útil (html): conéctelo directamente con el nodo UI de plantilla.Crea una tabla con todas las direcciones grupales y sus
-valores.
-2. Simple Array JSON para grabación de datos
-: carga útil (matriz): una matriz que contiene todo el GA.Puede usar la matriz para hacer su propio formato y reordenar.
-3. Dashboard Telegrams Queue
-: carga útil (html): conéctelo directamente con el nodo UI de plantilla.Crea una mesa con la cola de transmisión KNX para
-Monitoreo de la congestión del bus.
+El nodo **KNX Viewer** ahora incluye una **página web basada en Vue**, que se puede abrir directamente desde el editor del nodo.
+
+Se puede usar para:
+- visualizar en vivo las **luces** detectadas a partir de valores KNX booleanos
+- visualizar los **dimmers** detectados a partir de valores tipo `DPT 5.001`
+- filtrar elementos, cambiar entre nodos Viewer y mantener el auto-refresh activo
+- disponer de una interfaz visual coherente con **KNX AI**
+
+La página web es servida directamente por Node-RED, por lo que sigue el mismo modelo de autenticación que el editor y los endpoints de administración.
+
+# PINES DE SALIDA
+
+1. Direcciones de grupo del Dashboard
+   : payload (html): conéctelo directamente al nodo Dashboard <b>Template</b>. Crea una tabla con todas las direcciones de grupo y sus valores.
+2. Array simple para registro de datos
+   : payload (array): contiene todas las GA; puede formatearlo u ordenarlo como prefiera.
+3. Cola de telegramas del Dashboard
+   : payload (html): conéctelo a <b>Template</b>. Muestra la cola de transmisión KNX para supervisar la congestión del BUS.
+
+# NOTAS
+
+- La **página web** no sustituye las salidas existentes; siguen disponibles para flujos dashboard/template clásicos.
+- Las tarjetas de luces y dimmers se infieren a partir de los valores KNX que el Viewer está viendo en ese momento.
+- Si todavía no se han visto telegramas, la página web permanecerá vacía hasta que el Viewer recopile tráfico real.
 
 # MUESTRA
 

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

@@ -38,9 +38,9 @@ Configuration de la passerelle KNX
 
 | Propriété | Description |
 |-|-|
-| Echo envoyé un message à tous les nœuds avec la même adresse de groupe | Envoyez l'entrée MSG provenant du flux, à tous les nœuds ayant la même adresse de groupe. Les nœuds recevront le nouveau MSG comme s'il provenait du bus KNX. Ceci est utile en cas d'utilisation de l'émulation KNX et au cas où la connexion au bus KNX n'est pas établie. **Cette option sera obsolète dans la version suivante et par défaut est vérifiée.** La valeur par défaut est vérifiée. |
 | Supprimez les télégrammes répétés (R-FLAG) FOM BUS | Ignorez des télégrammes KNX répétés provenant du bus. La valeur par défaut n'est pas contrôlée. |
 | Supprimez la demande ACK en mode tunnel | Activez-le si vous avez une très ancienne passerelle KNX / IP. Il ignore la procédure ACK et accepte tous les télégrammes. La valeur par défaut n'est pas contrôlée. |
+| Activer le plugin flow bubbles | Affiche une petite bulle colorée à côté de chaque nœud KNX Device dans l'éditeur. La bulle reflète le dernier état en direct reçu depuis le gateway et s'atténue lorsque les données deviennent obsolètes. Utile pendant la mise en service et le débogage. Valeur par défaut : désactivé. |
 | Retard entre chaque télégramme (en millisecondes) | KNX Specs indique que la vitesse d'envoi de télégramme maximum est de 50 télégrammes par seconde. Une vitesse comprise entre 25 et 50 ms devrait être bien, sauf si vous vous connectez à une passerelle KNX distante via une connexion Internet lente (dans ce cas, vous devez augmenter la valeur, par exemple, 200 à 500 ms ou plus). |
 | Loglevel | Niveau de journal, au cas où vous auriez besoin de déboguer quelque chose avec le développement. La valeur par défaut est "erreur", |
 | Temporisation de l'état du nœud | Définissez la fréquence de mise à jour des badges de statut. Avec un délai actif, les changements intermédiaires sont ignorés et seul le dernier est affiché après l'intervalle choisi. Sélectionnez **Immédiat** pour conserver le comportement en temps réel. |

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

@@ -73,6 +73,8 @@
       "suppress_ack": "Supprimer la demande ACK en mode tunnelage",
       "suppress_ack_help": "L'option ci-dessus aide la compatibilité des interfaces KNX / IP anciennes. AVERTISSEMENT: le nœud ne peut pas remarquer la déconnexion de la passerelle. Dans ce cas, utilisez le chien de garde en mode paire twisted Ethernet + KNX.",
       "ignoreTelegramsWithRepeatedFlag": "Supprimez les télégrammes répétés (R-FLAG) FOM",
+      "enable_flow_bubbles": "Activer le plugin flow bubbles",
+      "enable_flow_bubbles_help": "Affiche des bulles d'état en direct à côté des nœuds KNX Device dans l'éditeur. Utile pendant la mise en service et le débogage.",
       "log_level": "Logevel",
       "status_throttle": "Temporisation des mises à jour d'état",
       "status_throttle_none": "Immédiat (sans temporisation)",
@@ -102,6 +104,14 @@
       "delaybetweentelegrams": "Retard entre chaque télégramme (en millisecondes)",
       "delaybetweentelegramsfurtherdelayREAD": "et multiplier davantage uniquement entre les télégrammes de lecture"
     },
+    "help": {
+      "intro": "Configurez la connexion au gateway KNX, l'import ETS et le comportement avancé de l'éditeur.",
+      "flow_bubbles_title": "Plugin flow bubbles",
+      "flow_bubbles_enable": "Activez cette option pour afficher une petite bulle colorée à côté de chaque nœud KNX Device dans l'éditeur.",
+      "flow_bubbles_scope": "Les bulles reflètent le dernier état en direct reçu par l'éditeur depuis les nœuds KNX Device liés à ce gateway.",
+      "flow_bubbles_tooltip": "Survolez la bulle pour voir le nom ou le topic du nœud, le dernier payload et le texte d'état courant.",
+      "flow_bubbles_stale": "S'il n'y a pas de trafic KNX récent, la bulle reste atténuée afin de distinguer les données obsolètes des mises à jour récentes."
+    },
     "ets": {
       "description": "Vous pouvez importer soit une liste d'adresses de groupe CSV ETS, soit une liste d'adresses de groupe ESF. Veuillez préférer la liste d'adresses du groupe CSV ETS, car les points de données sont plus complets.",
       "youtube": "& nbsp__ph_0 ____ ph_1 __ & nbsp__ph_2____ph_3__see comment exporter le CSV sur YouTube .__ Ph_4____ph_5__",

package/nodes/locales/fr/knxUltimateViewer.html

@@ -7,19 +7,35 @@ Affichez toutes les adresses de groupe et leurs valeurs dans un widget de tablea
 
 | Propriété | Description |
 |-|-|
-|Passerelle |La passerelle KNX.|
-|Nom |Le nom du nœud.|
+| Gateway | La passerelle KNX. |
+| Name | Le nom du nœud. |
 
-# Broches de sortie
+# PAGE WEB
 
-1. Adresses du groupe de tableau de bord
-: Télélé utile (HTML): Connectez-le directement avec le nœud d'interface utilisateur du modèle.Il crée une table avec toutes les adresses de groupe et leur
-valeurs.
-2. Array simple JSON pour l'enregistrement de données
-: charge utile (tableau): un tableau contenant tous les GA.Vous pouvez utiliser le tableau pour faire votre propre format et réorganiser.
-3. Fitre de télégrammes de tableau de bord
-: Télélé utile (HTML): Connectez-le directement avec le nœud d'interface utilisateur du modèle.Il crée une table avec la file d'attente de transmission KNX pour
-Surveillance de la congestion des bus.
+Le nœud **KNX Viewer** inclut désormais une **page Web basée sur Vue**, ouvrable directement depuis l'éditeur du nœud.
+
+Elle permet de :
+- visualiser en direct les **lumières** détectées à partir de valeurs KNX booléennes
+- visualiser les **variateurs** détectés à partir de valeurs de type `DPT 5.001`
+- filtrer les éléments, changer de nœud Viewer et garder l'auto-refresh actif
+- profiter d'une interface cohérente visuellement avec **KNX AI**
+
+La page web est servie directement par Node-RED et suit donc le même modèle d'authentification que l'éditeur et les endpoints d'administration.
+
+# SORTIES
+
+1. Adresses de groupe (Dashboard)
+   : payload (html) : à connecter directement à un nœud Dashboard <b>Template</b> ; crée un tableau avec toutes les GA et leurs valeurs.
+2. Tableau simple pour enregistrement
+   : payload (array) : contient toutes les GA ; vous pouvez le reformater ou le trier librement.
+3. File des télégrammes (Dashboard)
+   : payload (html) : à connecter à <b>Template</b> ; affiche la file d'envoi KNX pour surveiller la congestion du BUS.
+
+# NOTES
+
+- La **page Web** ne remplace pas les sorties existantes ; elles restent disponibles pour les flows dashboard/template classiques.
+- Les cartes lumières et variateurs sont déduites des valeurs KNX actuellement vues par le Viewer.
+- Si aucun télégramme n'a encore été reçu, la page Web restera vide jusqu'à ce que le Viewer collecte du trafic réel.
 
 # ÉCHANTILLON
 

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

@@ -38,9 +38,9 @@ Questo nodo si connette al tuo KNX/IP Gateway.
 
 |Proprietà|Descrizione|
 |--|--|
-| Echo sent message to all node with same Group Address | Inoltra ai nodi con lo stesso GA i msg inviati dal flow, come se provenissero dal BUS. Utile in emulazione KNX o senza connessione al BUS. **Opzione in deprecazione e presto abilitata di default.** Default: abilitato. |
 | Suppress repeated (R-Flag) telegrams fom BUS | Ignora i telegrammi ripetuti (flag R) dal BUS. Default: disabilitato. |
 | Suppress ACK request in tunneling mode | Per vecchie interfacce KNX/IP: ignora l'ACK e accetta tutti i telegrammi. Default: disabilitato. |
+| Abilita plugin flow bubbles | Disegna una piccola bubble colorata accanto a ogni nodo KNX Device nell'editor. La bubble riflette l'ultimo stato live ricevuto dal gateway e si attenua quando il dato diventa stantio. Utile durante commissioning e debug. Default: disabilitato. |
 | Delay between each telegram (ms) | Lo standard KNX prevede max 50 telegrammi/s. Un intervallo 25-50ms è adeguato. Con gateway remoto su link lento aumenta (es. 200-500ms). |
 | Loglevel | Livello di log per il debug. Default: "Error". |
 | Limitazione aggiornamento stato nodi | Imposta ogni quanto aggiornare il badge di stato dei nodi. Con un ritardo attivo gli stati intermedi vengono ignorati e viene mostrato solo l'ultimo dopo l'intervallo scelto. Seleziona **Immediato** per mantenere l'aggiornamento in tempo reale. |

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

@@ -73,6 +73,8 @@
             "suppress_ack": "Sopprimi richieste ACK in modalità tunnel",
             "suppress_ack_help": "L'opzione ACK sopra aiuta la compatibilità con vecchie interfacce. Attenzione: il nodo potrebbe non accorgersi della disconnessione al gateway. In questo caso, usare il watchdog in modalità Ethernet+KNX twisted pair.",
             "ignoreTelegramsWithRepeatedFlag": "Sopprimi telegrammi dal BUS ripetuti (Flag R)",
+            "enable_flow_bubbles": "Abilita plugin flow bubbles",
+            "enable_flow_bubbles_help": "Mostra bubble di stato live accanto ai nodi KNX Device nell'editor. Utile durante commissioning e debug.",
             "log_level": "Livello log",
             "status_throttle": "Limitazione aggiornamento stato nodi",
             "status_throttle_none": "Immediato (senza limitazione)",
@@ -106,6 +108,14 @@
             "exposeAsVariableREADONLY" : "Sola lettura",
             "exposeAsVariableREADWRITE" : "Lettura/Scrittura"
         },
+        "help": {
+            "intro": "Configura la connessione al gateway KNX, l'import ETS e il comportamento avanzato dell'editor.",
+            "flow_bubbles_title": "Plugin flow bubbles",
+            "flow_bubbles_enable": "Abilita questa opzione per disegnare una piccola bubble colorata accanto a ogni nodo KNX Device nell'editor.",
+            "flow_bubbles_scope": "Le bubble riflettono l'ultimo stato live ricevuto dall'editor dai nodi KNX Device collegati a questo gateway.",
+            "flow_bubbles_tooltip": "Passa con il mouse sulla bubble per vedere nome o topic del nodo, ultimo payload e testo di stato corrente.",
+            "flow_bubbles_stale": "Se non arriva traffico KNX recente, la bubble resta attenuata, così puoi distinguere dati stantii da aggiornamenti freschi."
+        },
         "ets": {
             "description": "Puoi importare sia il file ETS in CSV, che ESF. Usa il CSV se possibile, perchè i datapoints sono più precisi.",
             "youtube" : "&nbsp<i class=\"fa fa-youtube-play\"></i>&nbsp<a target=\"_blank\" href=\"https://youtu.be/egRbR_KwP9I\"><u>Guarda come si esporta un file CSV su YouTube.</u></a>",

package/nodes/locales/it/knxUltimateViewer.html

@@ -10,6 +10,18 @@ Mostra tutti gli indirizzi di gruppo e i relativi valori in un widget della Dash
 | Gateway | Il gateway KNX. |
 | Name | Nome del nodo. |
 
+# PAGINA WEB
+
+Il nodo **KNX Viewer** include ora una **Pagina Web basata su Vue**, apribile direttamente dall'editor del nodo.
+
+Puoi usarla per:
+- visualizzare le **luci** rilevate dai valori KNX booleani
+- visualizzare i **dimmer** rilevati dai valori in stile `DPT 5.001`
+- filtrare gli oggetti, cambiare nodo Viewer e mantenere la pagina in auto-refresh
+- avere una UI coerente visivamente con **KNX AI**
+
+La pagina web è servita direttamente da Node-RED, quindi segue lo stesso modello di autenticazione dell'editor e degli endpoint admin.
+
 # PIN DI USCITA
 
 1. Indirizzi di gruppo (Dashboard)
@@ -19,6 +31,12 @@ Mostra tutti gli indirizzi di gruppo e i relativi valori in un widget della Dash
 3. Coda telegrammi (Dashboard)
    : payload (html): collega a <b>Template</b>. Mostra la coda di trasmissione KNX per monitorare congestione BUS.
 
+# NOTE
+
+- La **Pagina Web** non sostituisce le uscite esistenti: restano disponibili per dashboard e template classici.
+- Le card luce e dimmer vengono dedotte dai valori KNX che il Viewer sta vedendo in quel momento.
+- Se non sono ancora passati telegrammi, la pagina web resterà vuota finché il Viewer non raccoglie traffico reale.
+
 # ESEMPIO
 
 <img src="https://raw.githubusercontent.com/Supergiovane/node-red-contrib-knx-ultimate/master/img/wiki/viewer2.png" width="90%"><br/>

package/nodes/locales/zh-CN/knxUltimate-config.html

@@ -38,9 +38,9 @@
 
 |属性|说明|
 |--|--|
-| Echo sent message to all node with same Group Address | 将来自流程的输入消息，转发给所有相同 GA 的节点，仿佛来自总线。在 KNX 模拟或未连总线时有用。 **该选项将来会废弃并默认启用。** |
 | Suppress repeated (R-Flag) telegrams fom BUS | 忽略来自总线的重复报文（R 标志）。|
 | Suppress ACK request in tunneling mode | 适用于非常老的 KNX/IP 网关：忽略 ACK 流程并接受所有报文。|
+| 启用 flow bubbles 插件 | 在编辑器中为每个 KNX Device 节点显示一个小的彩色气泡。该气泡反映从 gateway 收到的最新实时状态，当数据过旧时会自动变淡。适合在调试和现场调试时快速观察状态。默认未启用。 |
 | Delay between each telegram (ms) | KNX 规范最多 50 报文/秒。一般 25-50ms 合适；若经慢速网络远程连接，建议提高到 200-500ms。|
 | Loglevel | 日志级别（调试用）。默认 "Error"。|
 | 节点状态节流 | 设置状态徽章的刷新频率。启用延时后，中间状态会被丢弃，只在所选间隔后显示最后一次状态。选择 **立即** 可以保持实时显示。|

package/nodes/locales/zh-CN/knxUltimate-config.json

@@ -72,6 +72,8 @@
             "suppress_ack": "抑制 ACK 请求 in tunneling mode",
             "suppress_ack_help": "上面的选项有助于旧的 KNX/IP 接口兼容性 Warning: the node may not notice the disconnection from the gateway. In this case, use the watchdog in Ethernet+KNX twisted pair mode.",
             "ignoreTelegramsWithRepeatedFlag": "抑制重复的 (R-Flag) 来自总线的电报",
+            "enable_flow_bubbles": "启用 flow bubbles 插件",
+            "enable_flow_bubbles_help": "在编辑器中为 KNX Device 节点显示实时状态气泡。适合调试和调试期间快速观察状态。",
             "log_level": "日志等级",
             "status_datetime_format": "状态日期/时间格式",
             "status_datetime_format_legacy": "兼容模式（系统区域设置）",
@@ -94,6 +96,14 @@
             "delaybetweentelegrams": "数据发送间隔时间 (毫秒)",
             "delaybetweentelegramsfurtherdelayREAD" : "并且仅在读取电报之间进一步增加延迟"      
         },
+        "help": {
+            "intro": "配置 KNX gateway 连接、ETS 导入以及编辑器中的高级行为。",
+            "flow_bubbles_title": "Flow bubbles 插件",
+            "flow_bubbles_enable": "启用此选项后，编辑器会在每个 KNX Device 节点旁边显示一个小的彩色气泡。",
+            "flow_bubbles_scope": "这些气泡反映了编辑器从绑定到此 gateway 的 KNX Device 节点接收到的最新实时状态。",
+            "flow_bubbles_tooltip": "将鼠标悬停在气泡上，可以查看节点名称或 topic、最后一个 payload 以及当前状态文本。",
+            "flow_bubbles_stale": "如果最近没有 KNX 流量，气泡会保持变淡，以便区分过期数据和最新更新。"
+        },
         "ets": {
             "description": "您可以导入 ETS CSV 组地址列表或 ESF 组地址列表。 请优先选择 ETS CSV 组地址列表，因为数据类型更完整.",
             "youtube" : "&nbsp<i class=\"fa fa-youtube-play\"></i>&nbsp<a target=\"_blank\" href=\"https://youtu.be/egRbR_KwP9I\"><u>在Youtube上看怎么导入CSV文件.</u></a>",

package/nodes/locales/zh-CN/knxUltimateViewer.html

@@ -10,6 +10,18 @@
 | Gateway | KNX 网关 |
 | Name | 节点名称 |
 
+# WEB 页面
+
+**KNX Viewer** 现在包含一个基于 **Vue** 的独立 **Web 页面**，可直接从节点编辑器中打开。
+
+它可用于：
+- 显示由布尔型 KNX 数值识别出的**灯光**
+- 显示由 `DPT 5.001` 类型数值识别出的**调光器**
+- 过滤项目、切换不同 Viewer 节点，并保持自动刷新
+- 使用与 **KNX AI** 风格一致的界面
+
+该 Web 页面由 Node-RED 直接提供，因此沿用与编辑器和管理端点相同的认证模型。
+
 # 输出引脚
 
 1. 组地址（Dashboard）
@@ -19,6 +31,12 @@
 3. 报文队列（Dashboard）
    : payload (html)：连接到 <b>Template</b>；显示 KNX 发送队列以监控总线拥塞。
 
+# 说明
+
+- **Web 页面**不会替代现有输出；原有 dashboard/template 输出方式仍然可用。
+- 灯光卡片和调光器卡片是根据 Viewer 当前看到的 KNX 实时数值推断得到的。
+- 如果还没有接收到任何报文，Web 页面会保持空白，直到 Viewer 收集到实时流量。
+
 # 示例
 
 <img src="https://raw.githubusercontent.com/Supergiovane/node-red-contrib-knx-ultimate/master/img/wiki/viewer2.png" width="90%"><br/>

package/nodes/plugins/knxUltimate-flow-bubbles-plugin.html

@@ -0,0 +1,279 @@
+<script type="text/javascript">
+    (function () {
+        RED.plugins.registerPlugin("knxUltimate-flow-bubbles-plugin", {
+            onadd: function () {
+                const endpoint = "knxUltimate/editorLiveState";
+                const stateById = new Map();
+                let timer = null;
+                let refreshTimer = null;
+
+                if (!document.getElementById("knx-flow-bubbles-style")) {
+                    $("<style>", {
+                        id: "knx-flow-bubbles-style",
+                        text: `
+                        .knx-ultimate-flow-bubble { pointer-events: none; }
+                        .knx-ultimate-flow-bubble .knx-bubble-tail,
+                        .knx-ultimate-flow-bubble .knx-bubble-shell {
+                            stroke: rgba(255,255,255,0.96);
+                            stroke-width: 2.2px;
+                            filter: drop-shadow(0 1px 2px rgba(24, 28, 42, 0.22));
+                        }
+                        .knx-ultimate-flow-bubble .knx-bulb-outline {
+                            fill: none;
+                            stroke: rgba(43, 45, 50, 0.92);
+                            stroke-width: 1.7px;
+                            stroke-linecap: round;
+                            stroke-linejoin: round;
+                        }
+                        .knx-ultimate-flow-bubble .knx-bulb-accent {
+                            fill: none;
+                            stroke: rgba(92, 98, 108, 0.7);
+                            stroke-width: 1.7px;
+                            stroke-linecap: round;
+                            stroke-linejoin: round;
+                            opacity: 0.7;
+                        }
+                        .knx-ultimate-flow-bubble.is-on .knx-bubble-shell {
+                            filter: drop-shadow(0 0 6px rgba(255, 216, 77, 0.72));
+                        }
+                        .knx-ultimate-flow-bubble.is-on .knx-bulb-outline {
+                            stroke: rgba(120, 76, 0, 0.98);
+                        }
+                        .knx-ultimate-flow-bubble.is-on .knx-bulb-accent {
+                            stroke: rgba(181, 119, 6, 0.98);
+                            opacity: 0.9;
+                        }
+                        .knx-ultimate-flow-bubble.is-stale { opacity: 0.56; }
+                        `
+                    }).appendTo("head");
+                }
+
+                const getWorkspaceChart = function () {
+                    return document.querySelector("#red-ui-workspace-chart")
+                        || document.querySelector("#workspace-chart")
+                        || document.querySelector("svg.red-ui-workspace-chart")
+                        || null;
+                };
+
+                const resolveNodeId = function (group) {
+                    if (!group) return "";
+                    const candidates = [
+                        group.getAttribute("data-node-id"),
+                        group.getAttribute("data-id"),
+                        group.id,
+                        group.__data__ && group.__data__.id,
+                        group.__data__ && group.__data__.d && group.__data__.d.id,
+                        group.__data__ && group.__data__.node && group.__data__.node.id
+                    ];
+                    for (const candidate of candidates) {
+                        if (typeof candidate === "string" && candidate) {
+                            const node = RED.nodes.node(candidate);
+                            if (node && node.type === "knxUltimate") return candidate;
+                        }
+                    }
+                    return "";
+                };
+
+                const resolveEditorNode = function (group) {
+                    const nodeId = resolveNodeId(group);
+                    if (!nodeId) return null;
+                    try {
+                        const node = RED.nodes.node(nodeId);
+                        return node && node.type === "knxUltimate" ? node : null;
+                    } catch (error) {
+                        return null;
+                    }
+                };
+
+                const getNodeGroups = function () {
+                    const chart = getWorkspaceChart();
+                    if (!chart) return [];
+                    const groups = chart.querySelectorAll("g[data-node-id], g[data-id], g[id], g.nodegroup, g.red-ui-flow-node");
+                    return Array.from(groups).filter(function (group) {
+                        if (!(group instanceof SVGGElement)) return false;
+                        if (!group.querySelector("rect")) return false;
+                        return !!resolveNodeId(group);
+                    });
+                };
+
+                const removeAllBubbles = function () {
+                    document.querySelectorAll("g.knx-ultimate-flow-bubble").forEach(function (bubble) {
+                        bubble.remove();
+                    });
+                };
+
+                const removeBubbleFromGroup = function (group) {
+                    if (!group) return;
+                    group.querySelectorAll("g.knx-ultimate-flow-bubble").forEach(function (bubble) {
+                        bubble.remove();
+                    });
+                };
+
+                const scheduleRefresh = function (delay) {
+                    if (refreshTimer) {
+                        window.clearTimeout(refreshTimer);
+                        refreshTimer = null;
+                    }
+                    refreshTimer = window.setTimeout(function () {
+                        refreshTimer = null;
+                        tick();
+                    }, typeof delay === "number" ? delay : 0);
+                };
+
+                const isNodeFeatureEnabled = function (node) {
+                    if (!node || node.type !== "knxUltimate" || !node.server) return false;
+                    try {
+                        const cfg = RED.nodes.node(node.server);
+                        return !!(cfg && (cfg.enableFlowBubbles === true || cfg.enableFlowBubbles === "true"));
+                    } catch (error) {
+                        return false;
+                    }
+                };
+
+                const hasAnyVisibleBubbleNode = function () {
+                    const groups = getNodeGroups();
+                    return groups.some(function (group) {
+                        const node = resolveEditorNode(group);
+                        return isNodeFeatureEnabled(node);
+                    });
+                };
+
+                const ensureBubble = function (group, entry) {
+                    const rect = group.querySelector("rect");
+                    if (!rect) return;
+                    const x = Number(rect.getAttribute("x") || 0);
+                    const y = Number(rect.getAttribute("y") || 0);
+                    const width = Number(rect.getAttribute("width") || 120);
+                    const bubbleX = x + width + 24;
+                    const bubbleY = y - 18;
+
+                    let bubble = group.querySelector("g.knx-ultimate-flow-bubble");
+                    if (!bubble) {
+                        bubble = document.createElementNS("http://www.w3.org/2000/svg", "g");
+                        bubble.setAttribute("class", "knx-ultimate-flow-bubble");
+
+                        const tail = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                        tail.setAttribute("class", "knx-bubble-tail");
+                        tail.setAttribute("d", "M-4,10 L-24,26 L4,18 Z");
+                        bubble.appendChild(tail);
+
+                        const shell = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                        shell.setAttribute("class", "knx-bubble-shell");
+                        shell.setAttribute("x", "-20");
+                        shell.setAttribute("y", "-20");
+                        shell.setAttribute("width", "40");
+                        shell.setAttribute("height", "40");
+                        shell.setAttribute("rx", "20");
+                        shell.setAttribute("ry", "20");
+                        bubble.appendChild(shell);
+
+                        const bulbIcon = document.createElementNS("http://www.w3.org/2000/svg", "g");
+                        bulbIcon.setAttribute("transform", "translate(-10,-11) scale(0.78)");
+
+                        const accent = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                        accent.setAttribute("class", "knx-bulb-accent");
+                        accent.setAttribute("d", "M12.0001 7.89014L10.9301 9.75014C10.6901 10.1601 10.8901 10.5001 11.3601 10.5001H12.6301C13.1101 10.5001 13.3001 10.8401 13.0601 11.2501L12.0001 13.1101");
+                        bulbIcon.appendChild(accent);
+
+                        const outline = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                        outline.setAttribute("class", "knx-bulb-outline");
+                        outline.setAttribute("d", "M8.30035 18.0402V16.8802C6.00035 15.4902 4.11035 12.7802 4.11035 9.90018C4.11035 4.95018 8.66035 1.07018 13.8004 2.19018C16.0604 2.69018 18.0404 4.19018 19.0704 6.26018C21.1604 10.4602 18.9604 14.9202 15.7304 16.8702V18.0302C15.7304 18.3202 15.8404 18.9902 14.7704 18.9902H9.26035C8.16035 19.0002 8.30035 18.5702 8.30035 18.0402Z");
+                        bulbIcon.appendChild(outline);
+
+                        const base = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                        base.setAttribute("class", "knx-bulb-outline");
+                        base.setAttribute("d", "M8.5 22.0002C10.79 21.3502 13.21 21.3502 15.5 22.0002");
+                        bulbIcon.appendChild(base);
+
+                        bubble.appendChild(bulbIcon);
+
+                        const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+                        bubble.appendChild(title);
+                        group.appendChild(bubble);
+                    }
+
+                    const color = entry && entry.bubbleColor ? entry.bubbleColor : "#d4d8e2";
+                    const isOn = !!(entry && (entry.payload === true || entry.payload > 0 || color === "#ffd84d"));
+                    const isStale = !entry || !entry.updatedAt || (Date.now() - entry.updatedAt > 7000);
+                    const title = entry
+                        ? `${entry.name || entry.topic || entry.id}${entry.payloadText ? " | " + entry.payloadText : ""}${entry.text ? " | " + entry.text : ""}`
+                        : "Waiting for KNX traffic";
+
+                    bubble.setAttribute("transform", `translate(${bubbleX},${bubbleY})`);
+                    bubble.classList.toggle("is-on", isOn);
+                    bubble.classList.toggle("is-stale", isStale);
+                    bubble.querySelector(".knx-bubble-tail").setAttribute("fill", color);
+                    bubble.querySelector(".knx-bubble-shell").setAttribute("fill", color);
+                    bubble.querySelector("title").textContent = title;
+                };
+
+                const render = function () {
+                    const groups = getNodeGroups();
+                    if (!groups.length) return;
+                    if (!hasAnyVisibleBubbleNode()) {
+                        removeAllBubbles();
+                        return;
+                    }
+                    groups.forEach(function (group) {
+                        const node = resolveEditorNode(group);
+                        if (!node) return;
+                        if (!isNodeFeatureEnabled(node)) {
+                            removeBubbleFromGroup(group);
+                            return;
+                        }
+                        const id = node.id;
+                        ensureBubble(group, stateById.get(id));
+                    });
+                };
+
+                const tick = function () {
+                    if (!hasAnyVisibleBubbleNode()) {
+                        stateById.clear();
+                        removeAllBubbles();
+                        return;
+                    }
+                    if (document.visibilityState === "hidden") return;
+                    $.getJSON(endpoint, function (data) {
+                        stateById.clear();
+                        const nodes = Array.isArray(data && data.nodes) ? data.nodes : [];
+                        nodes.forEach(function (entry) {
+                            if (entry && entry.id) stateById.set(entry.id, entry);
+                        });
+                        window.requestAnimationFrame(render);
+                    }).fail(function () {
+                        window.requestAnimationFrame(render);
+                    });
+                };
+
+                $(document).on("change.knxUltimateFlowBubbles", "#node-config-input-enableFlowBubbles", function () {
+                    if ($(this).is(":checked")) {
+                        scheduleRefresh(0);
+                    } else {
+                        stateById.clear();
+                        removeAllBubbles();
+                    }
+                });
+
+                if (RED && RED.events && typeof RED.events.on === "function") {
+                    RED.events.on("flows:started", function () {
+                        scheduleRefresh(150);
+                    });
+                }
+
+                timer = window.setInterval(tick, 2000);
+                window.setTimeout(tick, 900);
+                window.addEventListener("beforeunload", function () {
+                    if (timer) {
+                        window.clearInterval(timer);
+                        timer = null;
+                    }
+                    if (refreshTimer) {
+                        window.clearTimeout(refreshTimer);
+                        refreshTimer = null;
+                    }
+                    $(document).off(".knxUltimateFlowBubbles");
+                }, { once: true });
+            }
+        });
+    }());
+</script>