iobroker.mywebui 1.37.74 → 1.37.76

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.37.74",
+    "version": "1.37.76",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.37.74",
+  "version": "1.37.76",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413",
   "type": "module",
   "main": "dist/backend/main.js",
@@ -74,20 +74,20 @@
     "@alcalzone/release-script-plugin-iobroker": "^4.0.0",
     "@alcalzone/release-script-plugin-license": "^4.0.0",
     "@blockly/zoom-to-fit": "^7.0.3",
-    "@iobroker/socket-client": "^5.0.2",
-    "@iobroker/testing": "^5.1.1",
-    "@iobroker/webcomponent-selectid-dialog": "^1.0.12",
     "@gokturk413/base-custom-webcomponent": "*",
-    "@node-projects/lean-he-esm": "^3.4.1",
-    "@node-projects/node-html-parser-esm": "^6.4.1",
     "@gokturk413/propertygrid.webcomponent": "*",
     "@gokturk413/splitview.webcomponent": "^1.0.1",
     "@gokturk413/web-component-designer": "*",
     "@gokturk413/web-component-designer-codeview-monaco": "*",
     "@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser": "*",
-    "@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.11",
     "@gokturk413/web-component-designer-visualization-addons": "*",
     "@gokturk413/web-component-designer-widgets-wunderbaum": "*",
+    "@iobroker/socket-client": "^5.0.2",
+    "@iobroker/testing": "^5.1.1",
+    "@iobroker/webcomponent-selectid-dialog": "^1.0.12",
+    "@node-projects/lean-he-esm": "^3.4.1",
+    "@node-projects/node-html-parser-esm": "^6.4.1",
+    "@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.11",
     "@types/json-schema": "^7.0.15",
     "@web/dev-server": "^0.4.6",
     "blockly": "^12.3.1",
@@ -107,10 +107,12 @@
     "gulp-replace": "^1.1.4",
     "javascript-obfuscator": "^5.3.0",
     "long": "^5.3.2",
+    "marked": "^18.0.3",
     "mobile-drag-drop": "^3.0.0-rc.0",
     "mocha": "^11.7.4",
     "monaco-editor": "^0.50.0",
     "nyc": "^17.1.0",
+    "puppeteer": "^24.42.0",
     "sinon-chai": "^4.0.1",
     "toastify-js": "^1.12.0",
     "ts-node": "^10.9.2",

package/www/dist/frontend/config/IobrokerWebuiAppShell.js

@@ -1115,154 +1115,192 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         const designItem = items[0];
         const element = designItem.element;
 
-        let cfg = {};
-        try { cfg = JSON.parse(element.getAttribute('data-effects') || '{}'); } catch (e) {}
-
-        const collectEffectsCfg = () => {
-            const out = {};
-            if (typeSel.value) out.type = typeSel.value;
-            out.trigger = triggerSel.value || 'load';
-            out.duration = parseFloat(durationInp.value) || 0.5;
-            if (parseFloat(delayInp.value)) out.delay = parseFloat(delayInp.value);
-            if (parseInt(repeatInp.value)) out.repeat = parseInt(repeatInp.value);
-            out.ease = easeSel.value || 'power2.out';
-            if (triggerSel.value === 'oid') {
-                out.condition = condSel.value;
-                out.conditionValue = condValInp.value;
-            }
-            if (typeSel.value === 'glow') {
-                out.glowColor = glowColorInp.value;
-                out.glowSize = parseInt(glowSizeInp.value) || 10;
-            }
-            if (typeSel.value === 'blur') out.blurAmount = parseInt(blurInp.value) || 5;
-            // Preserve all _bind properties
-            for (const [k, v] of Object.entries(cfg)) {
-                if (k.endsWith('_bind') && v) out[k] = v;
-            }
-            return out;
+        let raw = null;
+        try { raw = JSON.parse(element.getAttribute('data-effects') || 'null'); } catch (e) {}
+        let cfgList = Array.isArray(raw) ? raw : (raw ? [raw] : []);
+
+        content.innerHTML = '';
+
+        const saveAll = () => {
+            const data = cfgList.filter(c => c._collect).map(c => c._collect()).filter(c => c.type);
+            if (data.length === 0) designItem.removeAttribute('data-effects');
+            else if (data.length === 1) designItem.setAttribute('data-effects', JSON.stringify(data[0]));
+            else designItem.setAttribute('data-effects', JSON.stringify(data));
         };
+        const saveAndRefresh = () => { saveAll(); this._updateEffectsPanel(); };
 
-        const save = () => {
-            const c = collectEffectsCfg();
-            if (!c.type) designItem.removeAttribute('data-effects');
-            else designItem.setAttribute('data-effects', JSON.stringify(c));
+        // ── Add Effect button ─────────────────────────────────────────────────
+        const addBtn = document.createElement('button');
+        addBtn.textContent = '+ Add Effect';
+        addBtn.style.cssText = 'width:100%;font-size:11px;padding:4px;cursor:pointer;border:1px solid #4caf50;border-radius:3px;background:#e8f5e9;color:#2e7d32;margin-bottom:8px;';
+        addBtn.onclick = () => {
+            const existing = cfgList.filter(c => c._collect).map(c => c._collect()).filter(c => c.type);
+            existing.push({ type: 'fadeIn', trigger: 'load', duration: 0.5, ease: 'power2.out' });
+            const val = existing.length === 1 ? existing[0] : existing;
+            designItem.setAttribute('data-effects', JSON.stringify(val));
+            this._updateEffectsPanel();
         };
+        content.appendChild(addBtn);
 
-        const saveAndRefresh = () => { save(); this._updateEffectsPanel(); };
+        if (cfgList.length === 0) {
+            const ph = document.createElement('p');
+            ph.style.cssText = 'color:#999;font-style:italic;font-size:11px;text-align:center;margin-top:12px;';
+            ph.textContent = 'No effects. Click "+ Add Effect".';
+            content.appendChild(ph);
+            return;
+        }
 
-        const field = (label, propKey, inputEl) => {
-            const row = document.createElement('div');
-            row.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:6px;';
-            if (propKey) {
-                row.appendChild(this._makeBindSquare(propKey, cfg, designItem, 'data-effects', saveAndRefresh));
-            } else {
-                const sp = document.createElement('div');
-                sp.style.cssText = 'width:11px;min-width:11px;flex-shrink:0;';
-                row.appendChild(sp);
-            }
-            const lbl = document.createElement('span');
-            lbl.textContent = label;
-            lbl.style.cssText = 'min-width:78px;font-size:11px;color:#555;';
-            row.appendChild(lbl); row.appendChild(inputEl);
-            return row;
-        };
+        // ── Build one collapsible block per effect ────────────────────────────
+        const buildEffectBlock = (cfg, index) => {
+            const wrapper = document.createElement('div');
+            wrapper.style.cssText = 'border:1px solid #ddd;border-radius:4px;margin-bottom:6px;overflow:hidden;';
+
+            // Header
+            const header = document.createElement('div');
+            header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;background:#f0f4ff;padding:4px 6px;cursor:pointer;user-select:none;';
+            const headerLeft = document.createElement('span');
+            headerLeft.style.cssText = 'font-size:11px;font-weight:600;color:#1a237e;';
+            headerLeft.textContent = `▶ #${index + 1} — ${cfg.type || 'none'} (${cfg.trigger || 'load'})`;
+            const delBtn = document.createElement('button');
+            delBtn.textContent = '✕';
+            delBtn.title = 'Remove this effect';
+            delBtn.style.cssText = 'font-size:10px;padding:1px 5px;cursor:pointer;border:1px solid #e57373;border-radius:3px;background:#ffebee;color:#c62828;';
+            delBtn.onclick = (e) => {
+                e.stopPropagation();
+                const data = cfgList.filter(c => c._collect).map(c => c._collect()).filter(c => c.type);
+                data.splice(index, 1);
+                if (data.length === 0) designItem.removeAttribute('data-effects');
+                else if (data.length === 1) designItem.setAttribute('data-effects', JSON.stringify(data[0]));
+                else designItem.setAttribute('data-effects', JSON.stringify(data));
+                this._updateEffectsPanel();
+            };
+            header.appendChild(headerLeft);
+            header.appendChild(delBtn);
 
-        const inp = (val, type = 'text') => {
-            const i = document.createElement('input');
-            i.type = type; i.value = val ?? '';
-            i.style.cssText = 'flex:1;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;';
-            i.onchange = save; return i;
-        };
+            // Body (collapsed by default)
+            const body = document.createElement('div');
+            body.style.cssText = 'padding:8px;display:none;';
+            header.onclick = () => {
+                body.style.display = body.style.display === 'none' ? '' : 'none';
+                headerLeft.textContent = (body.style.display === 'none' ? '▶' : '▼') + ` #${index + 1} — ${cfg.type || 'none'} (${cfg.trigger || 'load'})`;
+            };
 
-        const sel = (options, val) => {
-            const s = document.createElement('select');
-            s.style.cssText = 'flex:1;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;';
-            options.forEach(([v, t]) => {
-                const o = document.createElement('option');
-                o.value = v; o.textContent = t; o.selected = v === val;
-                s.appendChild(o);
-            });
-            s.onchange = save; return s;
-        };
+            // ── helpers scoped to this block ──────────────────────────────────
+            const makeBindSq = (propKey) => this._makeBindSquare(propKey, cfg, designItem, 'data-effects', saveAndRefresh);
+
+            const field = (label, propKey, inputEl) => {
+                const row = document.createElement('div');
+                row.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:6px;';
+                row.appendChild(propKey ? makeBindSq(propKey) : (() => { const sp = document.createElement('div'); sp.style.cssText = 'width:11px;min-width:11px;flex-shrink:0;'; return sp; })());
+                const lbl = document.createElement('span');
+                lbl.textContent = label;
+                lbl.style.cssText = 'min-width:78px;font-size:11px;color:#555;';
+                row.appendChild(lbl); row.appendChild(inputEl);
+                return row;
+            };
 
-        const typeSel = sel([
-            ['','— none —'],['fadeIn','Fade In'],['fadeOut','Fade Out'],
-            ['slideInLeft','Slide In Left'],['slideInRight','Slide In Right'],
-            ['slideInTop','Slide In Top'],['slideInBottom','Slide In Bottom'],
-            ['bounce','Bounce'],['pulse','Pulse'],['shake','Shake'],
-            ['glow','Glow'],['blur','Blur'],['spin','Spin'],['flip','Flip 3D']
-        ], cfg.type || '');
-
-        const triggerSel = sel([
-            ['load','On Load'],['hover','On Hover'],['click','On Click'],['oid','OID State']
-        ], cfg.trigger || 'load');
-
-        const durationInp = inp(cfg.duration ?? 0.5, 'number');
-        const delayInp    = inp(cfg.delay ?? 0, 'number');
-        const repeatInp   = inp(cfg.repeat ?? 0, 'number');
-
-        const easeSel = sel([
-            ['power2.out','power2.out'],['power2.in','power2.in'],['power2.inOut','power2.inOut'],
-            ['power1.inOut','power1.inOut'],['bounce.out','bounce.out'],
-            ['elastic.out(1,0.3)','elastic.out'],['back.inOut(1.7)','back.inOut'],['none','none']
-        ], cfg.ease || 'power2.out');
-
-        const condSel    = sel([['equal','='],['not_equal','≠'],['less_than','<'],['greater_than','>'],['exists','exists']], cfg.condition || 'equal');
-        const condValInp = inp(cfg.conditionValue ?? 'true');
-        const glowColorInp = inp(cfg.glowColor || 'yellow', 'color');
-        const glowSizeInp  = inp(cfg.glowSize || 10, 'number');
-        const blurInp      = inp(cfg.blurAmount || 5, 'number');
-
-        // ── Build UI ──────────────────────────────────────────────────────────
-        content.innerHTML = '';
+            const inp = (val, type = 'text') => {
+                const i = document.createElement('input');
+                i.type = type; i.value = val ?? '';
+                i.style.cssText = 'flex:1;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;';
+                i.onchange = saveAll; return i;
+            };
+
+            const sel = (options, val) => {
+                const s = document.createElement('select');
+                s.style.cssText = 'flex:1;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;';
+                options.forEach(([v, t]) => { const o = document.createElement('option'); o.value = v; o.textContent = t; o.selected = v === val; s.appendChild(o); });
+                s.onchange = saveAll; return s;
+            };
+
+            const typeSel = sel([
+                ['','— none —'],['fadeIn','Fade In'],['fadeOut','Fade Out'],
+                ['slideInLeft','Slide In Left'],['slideInRight','Slide In Right'],
+                ['slideInTop','Slide In Top'],['slideInBottom','Slide In Bottom'],
+                ['bounce','Bounce'],['pulse','Pulse'],['shake','Shake'],
+                ['glow','Glow'],['blur','Blur'],['spin','Spin'],['flip','Flip 3D']
+            ], cfg.type || '');
+
+            const triggerSel = sel([
+                ['load','On Load'],['hover','On Hover'],['click','On Click'],['oid','OID State']
+            ], cfg.trigger || 'load');
+
+            const durationInp = inp(cfg.duration ?? 0.5, 'number');
+            const delayInp    = inp(cfg.delay ?? 0, 'number');
+            const repeatInp   = inp(cfg.repeat ?? 0, 'number');
+            const easeSel = sel([
+                ['power2.out','power2.out'],['power2.in','power2.in'],['power2.inOut','power2.inOut'],
+                ['power1.inOut','power1.inOut'],['bounce.out','bounce.out'],
+                ['elastic.out(1,0.3)','elastic.out'],['back.inOut(1.7)','back.inOut'],['none','none']
+            ], cfg.ease || 'power2.out');
+
+            const condSel    = sel([['equal','='],['not_equal','≠'],['less_than','<'],['greater_than','>'],['exists','exists']], cfg.condition || 'equal');
+            const condValInp = inp(cfg.conditionValue ?? 'true');
+            const glowColorInp = inp(cfg.glowColor || 'yellow', 'color');
+            const glowSizeInp  = inp(cfg.glowSize || 10, 'number');
+            const blurInp      = inp(cfg.blurAmount || 5, 'number');
+
+            body.appendChild(field('Type', 'type', typeSel));
+            body.appendChild(field('Trigger', null, triggerSel));
+            body.appendChild(field('Duration (s)', 'duration', durationInp));
+            body.appendChild(field('Delay (s)', 'delay', delayInp));
+            body.appendChild(field('Repeat', 'repeat', repeatInp));
+            body.appendChild(field('Ease', 'ease', easeSel));
+
+            // OID section
+            const oidSection = document.createElement('div');
+            oidSection.style.display = cfg.trigger === 'oid' ? '' : 'none';
+            const oidLabel = document.createElement('div');
+            oidLabel.style.cssText = 'display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#555;margin-bottom:3px;padding-left:4px;';
+            oidLabel.appendChild(makeBindSq('oid'));
+            const oidLabelText = document.createElement('span'); oidLabelText.textContent = 'OID'; oidLabel.appendChild(oidLabelText);
+            const condRowDiv = document.createElement('div');
+            condRowDiv.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:4px;padding-left:4px;';
+            condRowDiv.appendChild(makeBindSq('condition')); condRowDiv.appendChild(condSel);
+            const condValRowDiv = document.createElement('div');
+            condValRowDiv.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:6px;padding-left:4px;';
+            condValRowDiv.appendChild(makeBindSq('conditionValue')); condValRowDiv.appendChild(condValInp);
+            oidSection.appendChild(oidLabel); oidSection.appendChild(condRowDiv); oidSection.appendChild(condValRowDiv);
+            body.appendChild(oidSection);
+            triggerSel.addEventListener('change', () => { oidSection.style.display = triggerSel.value === 'oid' ? '' : 'none'; });
+
+            // Glow section
+            const glowSection = document.createElement('div');
+            glowSection.style.display = cfg.type === 'glow' ? '' : 'none';
+            glowSection.appendChild(field('Glow Color', 'glowColor', glowColorInp));
+            glowSection.appendChild(field('Glow Size', 'glowSize', glowSizeInp));
+            body.appendChild(glowSection);
+            typeSel.addEventListener('change', () => { glowSection.style.display = typeSel.value === 'glow' ? '' : 'none'; });
+
+            // Blur section
+            const blurSection = document.createElement('div');
+            blurSection.style.display = cfg.type === 'blur' ? '' : 'none';
+            blurSection.appendChild(field('Blur (px)', 'blurAmount', blurInp));
+            body.appendChild(blurSection);
+            typeSel.addEventListener('change', () => { blurSection.style.display = typeSel.value === 'blur' ? '' : 'none'; });
+
+            // _collect: read current UI values back into a plain object
+            cfg._collect = () => {
+                const out = {};
+                if (typeSel.value) out.type = typeSel.value;
+                out.trigger = triggerSel.value || 'load';
+                out.duration = parseFloat(durationInp.value) || 0.5;
+                if (parseFloat(delayInp.value)) out.delay = parseFloat(delayInp.value);
+                if (parseInt(repeatInp.value)) out.repeat = parseInt(repeatInp.value);
+                out.ease = easeSel.value || 'power2.out';
+                if (triggerSel.value === 'oid') { out.condition = condSel.value; out.conditionValue = condValInp.value; }
+                if (typeSel.value === 'glow') { out.glowColor = glowColorInp.value; out.glowSize = parseInt(glowSizeInp.value) || 10; }
+                if (typeSel.value === 'blur') out.blurAmount = parseInt(blurInp.value) || 5;
+                for (const [k, v] of Object.entries(cfg)) { if (k.endsWith('_bind') && v) out[k] = v; }
+                return out;
+            };
+
+            wrapper.appendChild(header);
+            wrapper.appendChild(body);
+            return wrapper;
+        };
 
-        const clearBtn = document.createElement('button');
-        clearBtn.textContent = 'Clear';
-        clearBtn.style.cssText = 'float:right;font-size:10px;padding:2px 6px;cursor:pointer;border:1px solid #ccc;border-radius:3px;background:#fff;margin-bottom:8px;';
-        clearBtn.onclick = () => { designItem.removeAttribute('data-effects'); this._updateEffectsPanel(); };
-        content.appendChild(clearBtn);
-
-        content.appendChild(field('Type', 'type', typeSel));
-        content.appendChild(field('Trigger', null, triggerSel));
-        content.appendChild(field('Duration (s)', 'duration', durationInp));
-        content.appendChild(field('Delay (s)', 'delay', delayInp));
-        content.appendChild(field('Repeat', 'repeat', repeatInp));
-        content.appendChild(field('Ease', 'ease', easeSel));
-
-        const oidSection = document.createElement('div');
-        oidSection.style.display = cfg.trigger === 'oid' ? '' : 'none';
-        const oidLabel = document.createElement('div');
-        oidLabel.style.cssText = 'display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#555;margin-bottom:3px;padding-left:4px;';
-        oidLabel.appendChild(this._makeBindSquare('oid', cfg, designItem, 'data-effects', saveAndRefresh));
-        const oidLabelText = document.createElement('span');
-        oidLabelText.textContent = 'OID';
-        oidLabel.appendChild(oidLabelText);
-        const condRowDiv = document.createElement('div');
-        condRowDiv.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:4px;padding-left:4px;';
-        condRowDiv.appendChild(this._makeBindSquare('condition', cfg, designItem, 'data-effects', saveAndRefresh));
-        condRowDiv.appendChild(condSel);
-        const condValRowDiv = document.createElement('div');
-        condValRowDiv.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:6px;padding-left:4px;';
-        condValRowDiv.appendChild(this._makeBindSquare('conditionValue', cfg, designItem, 'data-effects', saveAndRefresh));
-        condValRowDiv.appendChild(condValInp);
-        oidSection.appendChild(oidLabel);
-        oidSection.appendChild(condRowDiv);
-        oidSection.appendChild(condValRowDiv);
-        content.appendChild(oidSection);
-        triggerSel.addEventListener('change', () => { oidSection.style.display = triggerSel.value === 'oid' ? '' : 'none'; });
-
-        const glowSection = document.createElement('div');
-        glowSection.style.display = cfg.type === 'glow' ? '' : 'none';
-        glowSection.appendChild(field('Glow Color', 'glowColor', glowColorInp));
-        glowSection.appendChild(field('Glow Size', 'glowSize', glowSizeInp));
-        content.appendChild(glowSection);
-        typeSel.addEventListener('change', () => { glowSection.style.display = typeSel.value === 'glow' ? '' : 'none'; });
-
-        const blurSection = document.createElement('div');
-        blurSection.style.display = cfg.type === 'blur' ? '' : 'none';
-        blurSection.appendChild(field('Blur (px)', 'blurAmount', blurInp));
-        content.appendChild(blurSection);
-        typeSel.addEventListener('change', () => { blurSection.style.display = typeSel.value === 'blur' ? '' : 'none'; });
+        cfgList.forEach((cfg, i) => content.appendChild(buildEffectBlock(cfg, i)));
     }
 
     /* Move to a Dock Spawn Helper */

package/www/dist/frontend/runtime/AnimationService.js

@@ -2,7 +2,6 @@ import { iobrokerHandler } from '../common/IobrokerHandler.js';
 
 let _gsapLoadPromise = null;
 
-// Resolve paths relative to this module's location (works regardless of adapter URL prefix)
 // AnimationService.js is at dist/frontend/runtime/ → ../../vendor/gsap/ = dist/vendor/gsap/
 const _gsapBase = new URL('../../vendor/gsap/', import.meta.url).href;
 
@@ -105,7 +104,6 @@ function buildTweenConfig(cfg, value) {
             if (cfg.valueFrom != null) config.startAt = { y: parseFloat(cfg.valueFrom) };
             break;
         case 'translate': {
-            // valueTo / valueFrom: "x,y" or single number (used for x, y=0)
             const parseXY = (v, defVal) => {
                 if (v == null) return { x: defVal, y: 0 };
                 const s = String(v);
@@ -174,6 +172,157 @@ function buildTweenConfig(cfg, value) {
     return config;
 }
 
+// ─── Binding resolver ──────────────────────────────────────────────────────────
+// Handles all webui binding prefix types so animations/effects work in custom
+// controls just like they do in screens.
+
+function _cleanupSubs(subs) {
+    for (const sub of subs) {
+        try {
+            if (sub.type === 'event') {
+                sub.target.removeEventListener(sub.event, sub.handler);
+            } else if (sub.type === 'state') {
+                iobrokerHandler.connection.unsubscribeState(sub.oid, sub.handler);
+            } else if (sub.type === 'delegate') {
+                _cleanupSubs(sub.innerSubs);
+            }
+        } catch (e) {}
+    }
+    subs.length = 0;
+}
+
+/**
+ * Resolve a template OID like "webui.0.test.{webui.0.test.select}" by subscribing
+ * to each {stateId} placeholder and re-resolving when any placeholder changes.
+ */
+async function _resolveTemplateBinding(template, element, onValue, subs) {
+    const placeholders = [];
+    const regex = /\{([^}]+)\}/g;
+    let m;
+    while ((m = regex.exec(template)) !== null) placeholders.push(m[1]);
+    if (placeholders.length === 0) return;
+
+    const values = {};
+    for (const p of placeholders) values[p] = null;
+
+    const innerSubs = [];
+
+    const rebuildAndSub = async () => {
+        if (Object.values(values).some(v => v == null)) return;
+        let resolved = template;
+        for (const [p, v] of Object.entries(values)) resolved = resolved.replace('{' + p + '}', v);
+        _cleanupSubs(innerSubs);
+        await resolveAnimBinding(resolved, element, onValue, innerSubs);
+    };
+
+    for (const placeholder of placeholders) {
+        const h = async (id, state) => {
+            if (state?.val != null) { values[placeholder] = String(state.val); await rebuildAndSub(); }
+        };
+        try { iobrokerHandler.connection.subscribeState(placeholder, h); subs.push({ type: 'state', oid: placeholder, handler: h }); } catch (e) {}
+        try { const s = await iobrokerHandler.connection.getState(placeholder); if (s?.val != null) values[placeholder] = String(s.val); } catch (e) {}
+    }
+
+    await rebuildAndSub();
+    subs.push({ type: 'delegate', innerSubs });
+}
+
+/**
+ * Subscribe to a signal/binding reference, calling onValue(value) for current and future values.
+ * Supports: {template}  ??prop  ?prop  state:id  object:id  local_*  .relative  plain OID
+ *
+ * @param {string}   signal  - binding signal string from *_bind.signal
+ * @param {Element}  element - DOM element carrying the animation (for host lookup)
+ * @param {Function} onValue - called with the resolved scalar value
+ * @param {Array}    subs    - array for cleanup descriptors (push here, pass to _cleanupSubs later)
+ */
+async function resolveAnimBinding(signal, element, onValue, subs) {
+    if (!signal) return;
+
+    // Template OID: "prefix.{stateId}.suffix" — resolve placeholders dynamically
+    if (signal.includes('{') && signal.includes('}')) {
+        await _resolveTemplateBinding(signal, element, onValue, subs);
+        return;
+    }
+
+    // Find nearest custom-control host element (for ? and ?? bindings)
+    const getRoot = () => {
+        const rn = element.getRootNode();
+        return rn && rn !== document ? (rn.host ?? null) : null;
+    };
+
+    if (signal.startsWith('??')) {
+        // Direct property read: root[propName], re-fires on propName-changed event
+        const propName = signal.slice(2);
+        const root = getRoot();
+        if (!root) return;
+        const read = () => {
+            const v = root[propName] ?? root.getAttribute?.(propName);
+            if (v != null) onValue(v);
+        };
+        read();
+        const h = () => read();
+        root.addEventListener(propName + '-changed', h);
+        subs.push({ type: 'event', target: root, event: propName + '-changed', handler: h });
+
+    } else if (signal.startsWith('?')) {
+        // Indirect: root[propName] holds the actual OID; re-resolve when property changes
+        const propName = signal.slice(1);
+        const root = getRoot();
+        if (!root) return;
+        const innerSubs = [];
+        const resolveAndSub = async () => {
+            _cleanupSubs(innerSubs);
+            const actualOid = root[propName] ?? root.getAttribute?.(propName);
+            if (actualOid) await resolveAnimBinding(actualOid, element, onValue, innerSubs);
+        };
+        await resolveAndSub();
+        const h = () => resolveAndSub();
+        root.addEventListener(propName + '-changed', h);
+        subs.push({ type: 'event', target: root, event: propName + '-changed', handler: h });
+        subs.push({ type: 'delegate', innerSubs });
+
+    } else if (signal.startsWith('state:')) {
+        const oid = signal.slice(6);
+        const h = (id, state) => { if (state?.val != null) onValue(state.val); };
+        try { iobrokerHandler.connection.subscribeState(oid, h); subs.push({ type: 'state', oid, handler: h }); } catch (e) {}
+        try { const s = await iobrokerHandler.connection.getState(oid); if (s?.val != null) onValue(s.val); } catch (e) {}
+
+    } else if (signal.startsWith('object:')) {
+        // object: bindings rarely used for animation scalar params — skip
+
+    } else {
+        // Relative path (starts with '.'): prepend host's relativeSignalsPath
+        let oid = signal;
+        if (oid.startsWith('.')) {
+            const root = getRoot();
+            const relPath = root?._getRelativeSignalsPath?.() ?? '';
+            oid = relPath + oid.slice(1);
+        }
+        // local_* handled by iobrokerHandler.subscribeState; plain OID falls through to connection
+        const h = (id, state) => { if (state?.val != null) onValue(state.val); };
+        try {
+            if (oid.startsWith('local_')) {
+                iobrokerHandler.subscribeState(oid, h);
+            } else {
+                iobrokerHandler.connection.subscribeState(oid, h);
+            }
+            subs.push({ type: 'state', oid, handler: h });
+        } catch (e) {}
+        try {
+            let s;
+            if (oid.startsWith('local_')) {
+                s = await iobrokerHandler.getState(oid);
+            } else {
+                s = await iobrokerHandler.connection.getState(oid);
+            }
+            if (s?.val != null) onValue(s.val);
+        } catch (e) {}
+    }
+}
+
+// ─── AnimationInstance ─────────────────────────────────────────────────────────
+
 class AnimationInstance {
     constructor(element, cfg) {
         this.element = element;
@@ -191,39 +340,25 @@ class AnimationInstance {
             const ctrl = controls[key];
             if (!ctrl) return;
 
-            // condition_bind: dynamically update which condition operator to use
+            // condition_bind: dynamically update the condition operator
             if (ctrl.condition_bind?.signal) {
-                try {
-                    const s = await iobrokerHandler.connection.getState(ctrl.condition_bind.signal);
-                    if (s?.val != null) ctrl.condition = String(s.val);
-                } catch (e) {}
-                const h = (id, state) => { if (state?.val != null) ctrl.condition = String(state.val); };
-                try { iobrokerHandler.connection.subscribeState(ctrl.condition_bind.signal, h); this._subs.push({ oid: ctrl.condition_bind.signal, handler: h }); } catch (e) {}
+                await resolveAnimBinding(ctrl.condition_bind.signal, this.element,
+                    (val) => { ctrl.condition = String(val); }, this._subs);
             }
 
             // value_bind: dynamically update the trigger value
             if (ctrl.value_bind?.signal) {
-                try {
-                    const s = await iobrokerHandler.connection.getState(ctrl.value_bind.signal);
-                    if (s?.val != null) ctrl.value = String(s.val);
-                } catch (e) {}
-                const h = (id, state) => { if (state?.val != null) ctrl.value = String(state.val); };
-                try { iobrokerHandler.connection.subscribeState(ctrl.value_bind.signal, h); this._subs.push({ oid: ctrl.value_bind.signal, handler: h }); } catch (e) {}
+                await resolveAnimBinding(ctrl.value_bind.signal, this.element,
+                    (val) => { ctrl.value = String(val); }, this._subs);
             }
 
             // oid_bind.signal IS the OID to watch (binding square directly holds the target OID)
-            const oid = ctrl.oid || ctrl.oid_bind?.signal;
-            if (!oid) return;
-            const handler = (id, state) => {
-                if (checkCond(state?.val, ctrl.condition || 'equal', ctrl.value ?? 'true')) action();
-            };
-            try {
-                iobrokerHandler.connection.subscribeState(oid, handler);
-                this._subs.push({ oid, handler });
-            } catch (e) {}
-            iobrokerHandler.connection.getState(oid).then(state => {
-                if (state && checkCond(state.val, ctrl.condition || 'equal', ctrl.value ?? 'true')) action();
-            }).catch(() => {});
+            const oidSignal = ctrl.oid_bind?.signal || ctrl.oid;
+            if (!oidSignal) return;
+
+            await resolveAnimBinding(oidSignal, this.element, (val) => {
+                if (checkCond(val, ctrl.condition || 'equal', ctrl.value ?? 'true')) action();
+            }, this._subs);
         };
 
         await bindControl('play', () => this._play());
@@ -243,14 +378,13 @@ class AnimationInstance {
             const bindCfg = this.cfg[prop + '_bind'];
             if (!bindCfg?.signal) continue;
             const propCapture = prop;
-            const handler = (id, state) => {
-                if (state?.val == null) return;
-                this.cfg[propCapture] = state.val;
+            await resolveAnimBinding(bindCfg.signal, this.element, (val) => {
+                this.cfg[propCapture] = val;
                 if (!this.tween) return;
                 // Duration: adjust timeScale without restarting (smooth for repeat:-1)
                 if (propCapture === 'duration' && this.tween.vars) {
                     const origDur = parseFloat(this.tween.vars.duration) || 1;
-                    const newDur = parseFloat(state.val) || 1;
+                    const newDur = parseFloat(val) || 1;
                     this.tween.timeScale(origDur / newDur);
                     return;
                 }
@@ -259,15 +393,7 @@ class AnimationInstance {
                 _restartTimer = setTimeout(() => {
                     if (this.tween && !this.tween.paused()) this._play();
                 }, 60);
-            };
-            try {
-                iobrokerHandler.connection.subscribeState(bindCfg.signal, handler);
-                this._subs.push({ oid: bindCfg.signal, handler });
-            } catch (e) {}
-            try {
-                const state = await iobrokerHandler.connection.getState(bindCfg.signal);
-                if (state?.val != null) this.cfg[prop] = state.val;
-            } catch (e) {}
+            }, this._subs);
         }
     }
 
@@ -316,13 +442,12 @@ class AnimationInstance {
 
     destroy() {
         if (this.tween) { this.tween.kill(); this.tween = null; }
-        for (const sub of this._subs) {
-            try { iobrokerHandler.connection.unsubscribeState(sub.oid, sub.handler); } catch (e) {}
-        }
-        this._subs = [];
+        _cleanupSubs(this._subs);
     }
 }
 
+// ─── Public API ────────────────────────────────────────────────────────────────
+
 const _activeAnimations = new WeakMap();
 const _activeEffects = new WeakMap();
 
@@ -364,11 +489,17 @@ export async function scanAndApplyEffects(root) {
     const elements = (root || document).querySelectorAll('[data-effects]');
     for (const el of elements) {
         try {
-            const cfg = JSON.parse(el.getAttribute('data-effects'));
-            const existing = _activeEffects.get(el);
-            if (existing?.cleanup) existing.cleanup();
-            const cleanup = await _applyEffect(el, cfg);
-            _activeEffects.set(el, { cleanup });
+            const raw = JSON.parse(el.getAttribute('data-effects'));
+            const cfgList = Array.isArray(raw) ? raw : [raw];
+            const existing = _activeEffects.get(el) || [];
+            for (const inst of existing) if (inst?.cleanup) inst.cleanup();
+            const instances = [];
+            for (const cfg of cfgList) {
+                if (!cfg || typeof cfg !== 'object') continue;
+                const cleanup = await _applyEffect(el, cfg);
+                instances.push({ cleanup });
+            }
+            _activeEffects.set(el, instances);
         } catch (e) {
             console.warn('[AnimationService] data-effects parse error on element:', el, e);
         }
@@ -378,8 +509,9 @@ export async function scanAndApplyEffects(root) {
 export function cleanupEffects(root) {
     const elements = (root || document).querySelectorAll('[data-effects]');
     for (const el of elements) {
-        const inst = _activeEffects.get(el);
-        if (inst?.cleanup) { inst.cleanup(); _activeEffects.delete(el); }
+        const instances = _activeEffects.get(el) || [];
+        for (const inst of instances) if (inst?.cleanup) inst.cleanup();
+        _activeEffects.delete(el);
     }
 }
 
@@ -426,7 +558,8 @@ async function _applyEffect(el, cfg) {
         }
     };
 
-    let _hoverFn = null, _clickFn = null, _oidHandler = null, _oidId = null;
+    let _hoverFn = null, _clickFn = null;
+    const effectSubs = [];
 
     if (cfg.trigger === 'load') {
         applyTween();
@@ -437,36 +570,28 @@ async function _applyEffect(el, cfg) {
         _clickFn = applyTween;
         el.addEventListener('click', _clickFn);
     } else if (cfg.trigger === 'oid') {
-        // condition_bind and conditionValue_bind
+        // condition_bind: resolve condition operator dynamically
         if (cfg.condition_bind?.signal) {
-            try { const s = await iobrokerHandler.connection.getState(cfg.condition_bind.signal); if (s?.val != null) cfg.condition = String(s.val); } catch (e) {}
-            const h = (id, state) => { if (state?.val != null) cfg.condition = String(state.val); };
-            try { iobrokerHandler.connection.subscribeState(cfg.condition_bind.signal, h); } catch (e) {}
+            await resolveAnimBinding(cfg.condition_bind.signal, el,
+                (val) => { cfg.condition = String(val); }, effectSubs);
         }
+        // conditionValue_bind: resolve comparison value dynamically
         if (cfg.conditionValue_bind?.signal) {
-            try { const s = await iobrokerHandler.connection.getState(cfg.conditionValue_bind.signal); if (s?.val != null) cfg.conditionValue = String(s.val); } catch (e) {}
-            const h = (id, state) => { if (state?.val != null) cfg.conditionValue = String(state.val); };
-            try { iobrokerHandler.connection.subscribeState(cfg.conditionValue_bind.signal, h); } catch (e) {}
+            await resolveAnimBinding(cfg.conditionValue_bind.signal, el,
+                (val) => { cfg.conditionValue = String(val); }, effectSubs);
         }
-        // oid_bind.signal IS the OID to watch (same as for animation controls)
-        const oid = cfg.oid || cfg.oid_bind?.signal;
-        if (oid) {
-            _oidId = oid;
-            _oidHandler = (id, state) => {
-                if (checkCond(state?.val, cfg.condition || 'equal', cfg.conditionValue ?? 'true')) applyTween();
-            };
-            try { iobrokerHandler.connection.subscribeState(oid, _oidHandler); } catch (e) {}
-            iobrokerHandler.connection.getState(oid).then(state => {
-                if (state && checkCond(state.val, cfg.condition || 'equal', cfg.conditionValue ?? 'true')) applyTween();
-            }).catch(() => {});
+        // oid_bind.signal IS the OID to watch
+        const oidSignal = cfg.oid_bind?.signal || cfg.oid;
+        if (oidSignal) {
+            await resolveAnimBinding(oidSignal, el, (val) => {
+                if (checkCond(val, cfg.condition || 'equal', cfg.conditionValue ?? 'true')) applyTween();
+            }, effectSubs);
         }
     }
 
     return () => {
         if (_hoverFn) el.removeEventListener('mouseenter', _hoverFn);
         if (_clickFn) el.removeEventListener('click', _clickFn);
-        if (_oidHandler && _oidId) {
-            try { iobrokerHandler.connection.unsubscribeState(_oidId, _oidHandler); } catch (e) {}
-        }
+        _cleanupSubs(effectSubs);
     };
 }

package/www/node_modules/@gokturk413/web-component-designer-visualization-addons/dist/helpers/BindingsHelper.js

@@ -698,6 +698,7 @@ export class BindingsHelper {
         let valuesObject = new Array(signals.length);
         for (let i = 0; i < signals.length; i++) {
             const s = signals[i];
+            if (s == null) continue; // ?prop resolved to undefined — skip, re-apply fires when property changes
             if (s[0] === '?') {
                 if (root) {
                     const nm = s.substring(1);