iobroker.mywebui 1.37.63 → 1.37.65

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.37.60",
+    "version": "1.37.65",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",
@@ -337,7 +337,7 @@
       "color": "#c8ffe1",
       "order": 1
     },
-    "installedFrom": "iobroker.mywebui@1.37.16"
+    "installedFrom": "iobroker.mywebui"
   },
   "native": {
     "licenseKey": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.37.63",
+  "version": "1.37.65",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413",
   "type": "module",
   "main": "dist/backend/main.js",

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

@@ -651,6 +651,73 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         content.appendChild(actionDiv);
     }
 
+    // ─── Shared binding square helper ────────────────────────────────────────
+
+    _makeBindSquare(propKey, cfg, designItem, attrName, saveAndRefresh) {
+        const bindCfg = cfg[propKey + '_bind'] || null;
+        const signal = bindCfg?.signal || null;
+
+        const btn = document.createElement('div');
+        btn.title = signal ? `Bound: ${signal}\n(right-click: edit/clear)` : `Click to bind to ioBroker state`;
+        btn.style.cssText = 'width:11px;height:11px;min-width:11px;border:1px solid #596c7a;cursor:pointer;flex-shrink:0;box-sizing:border-box;'
+            + (signal ? 'background:orange;' : 'background:transparent;');
+
+        const openEditor = () => {
+            const existingBinding = signal ? { bindableObjectNames: [signal], expression: bindCfg.expression || '', target: 'property' } : null;
+            const dynEdt = new IobrokerWebuiBindingsEditor(
+                { name: propKey, propertyType: 'propertyAndAttribute' },
+                existingBinding, 'property', serviceContainer,
+                designItem.instanceServiceContainer, this
+            );
+            const cw = new IobrokerWebuiConfirmationWrapper();
+            cw.title = `Bind "${propKey}"`;
+            cw.appendChild(dynEdt);
+            const dlg = this.openDialog(cw, { x: 200, y: 200, width: 700, height: 460 });
+            cw.cancelClicked.on(() => dlg.close());
+            cw.okClicked.on(() => {
+                dlg.close();
+                const newSignal = dynEdt.objectNames;
+                if (newSignal) {
+                    const bnd = { signal: newSignal };
+                    if (dynEdt.expression) bnd.expression = dynEdt.expression;
+                    cfg[propKey + '_bind'] = bnd;
+                } else {
+                    delete cfg[propKey + '_bind'];
+                }
+                saveAndRefresh();
+            });
+        };
+
+        btn.onclick = openEditor;
+
+        btn.oncontextmenu = (e) => {
+            e.preventDefault();
+            const existing = document.getElementById('__animbind-ctx');
+            if (existing) existing.remove();
+            const menu = document.createElement('div');
+            menu.id = '__animbind-ctx';
+            menu.style.cssText = `position:fixed;left:${e.clientX}px;top:${e.clientY}px;background:#2d2d2d;color:#ddd;font-size:12px;border:1px solid #555;border-radius:3px;z-index:99999;min-width:120px;box-shadow:2px 2px 6px rgba(0,0,0,0.5);`;
+            const addItem = (text, cb, disabled = false) => {
+                const item = document.createElement('div');
+                item.textContent = text;
+                item.style.cssText = `padding:6px 12px;cursor:${disabled ? 'default' : 'pointer'};color:${disabled ? '#666' : '#ddd'};`;
+                if (!disabled) {
+                    item.onmouseenter = () => item.style.background = '#3e6db4';
+                    item.onmouseleave = () => item.style.background = '';
+                    item.onclick = () => { menu.remove(); cb(); };
+                }
+                menu.appendChild(item);
+            };
+            addItem('edit binding', openEditor);
+            addItem('clear binding', () => { delete cfg[propKey + '_bind']; saveAndRefresh(); }, !signal);
+            document.body.appendChild(menu);
+            const close = (ev) => { if (!menu.contains(ev.target)) { menu.remove(); document.removeEventListener('mousedown', close); } };
+            setTimeout(() => document.addEventListener('mousedown', close), 0);
+        };
+
+        return btn;
+    }
+
     // ─── Animations Panel ────────────────────────────────────────────────────
 
     _setupAnimationsPanel() {
@@ -697,33 +764,78 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         try { cfg = JSON.parse(element.getAttribute('data-animation') || '{}'); } catch (e) {}
         const controls = cfg.controls || {};
 
+        const collectAnimCfg = () => {
+            const e = effectSel.value;
+            const c = {};
+            const addCtrl = (key, row) => { const v = row._getCtrl(); if (v.oid || v.oid_bind) c[key] = v; };
+            addCtrl('play', playCtrl); addCtrl('pause', pauseCtrl);
+            addCtrl('resume', resumeCtrl); addCtrl('stop', stopCtrl);
+            addCtrl('reverse', reverseCtrl);
+            const out = {};
+            if (e) out.effect = e;
+            if (e === 'svg' && svgAttrSel.value) out.svgAttr = svgAttrSel.value;
+            if (valueFromInp.value) out.valueFrom = valueFromInp.value;
+            if (valueToInp.value) out.valueTo = valueToInp.value;
+            out.duration = parseFloat(durationInp.value) || 1;
+            out.ease = easeSel.value || 'power1.inOut';
+            out.repeat = parseInt(repeatInp.value) || 0;
+            if (yoyoChk.querySelector('input').checked) out.yoyo = true;
+            if (['rotation','scale'].includes(e)) {
+                out.transformOriginX = originXInp.value;
+                out.transformOriginY = originYInp.value;
+            }
+            if (e === 'fill' || e === 'svg') {
+                if (fillFromInp.value) out.fillColorFrom = fillFromInp.value;
+                if (fillToInp.value) out.fillColorTo = fillToInp.value;
+            }
+            if (e === 'motionPath') {
+                if (pathIdInp.value) out.pathId = pathIdInp.value;
+                if (alignToPathChk.querySelector('input').checked) out.alignToPath = true;
+                if (orientToPathChk.querySelector('input').checked) out.orientToPath = true;
+            }
+            if (Object.keys(c).length) out.controls = c;
+            // Preserve all _bind properties from cfg
+            for (const [k, v] of Object.entries(cfg)) {
+                if (k.endsWith('_bind') && v) out[k] = v;
+            }
+            return out;
+        };
+
         const save = () => {
             const newCfg = collectAnimCfg();
-            if (Object.keys(newCfg).length === 0 || (!newCfg.effect && !newCfg.controls)) {
+            if (!newCfg.effect && !newCfg.controls && !Object.keys(newCfg).some(k => k.endsWith('_bind'))) {
                 designItem.removeAttribute('data-animation');
             } else {
                 designItem.setAttribute('data-animation', JSON.stringify(newCfg));
             }
         };
 
-        const field = (label, inputEl) => {
+        const saveAndRefresh = () => { save(); this._updateAnimationsPanel(); };
+
+        // field(label, propKey, inputEl) — propKey=null → no binding square
+        const field = (label, propKey, inputEl) => {
             const row = document.createElement('div');
-            row.style.cssText = 'display:flex;align-items:center;gap:6px;margin-bottom:6px;';
+            row.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:6px;';
+            if (propKey) {
+                row.appendChild(this._makeBindSquare(propKey, cfg, designItem, 'data-animation', 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:90px;font-size:11px;color:#555;';
+            lbl.style.cssText = 'min-width:84px;font-size:11px;color:#555;';
             row.appendChild(lbl);
             row.appendChild(inputEl);
             return row;
         };
 
-        const inp = (val, type = 'text', width = '100%') => {
+        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;width:${width};`;
-            i.onchange = save;
-            return i;
+            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;
         };
 
         const sel = (options, val) => {
@@ -734,37 +846,39 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 o.value = v; o.textContent = t; o.selected = v === val;
                 s.appendChild(o);
             });
-            s.onchange = save;
-            return s;
+            s.onchange = save; return s;
         };
 
-        const chk = (val, label) => {
-            const wrap = document.createElement('label');
-            wrap.style.cssText = 'display:flex;align-items:center;gap:4px;font-size:11px;cursor:pointer;';
+        const chkField = (propKey, label, val) => {
+            const row = document.createElement('div');
+            row.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:6px;';
+            row.appendChild(this._makeBindSquare(propKey, cfg, designItem, 'data-animation', saveAndRefresh));
+            const lbl = document.createElement('label');
+            lbl.style.cssText = 'display:flex;align-items:center;gap:4px;font-size:11px;cursor:pointer;';
             const c = document.createElement('input');
             c.type = 'checkbox'; c.checked = val === true || val === 'true';
             c.onchange = save;
-            wrap.appendChild(c);
-            wrap.appendChild(document.createTextNode(label));
-            return wrap;
+            lbl.appendChild(c);
+            lbl.appendChild(document.createTextNode(label));
+            row.appendChild(lbl);
+            return row;
         };
 
-        const oidRow = (label, ctrlKey, ctrlCfg) => {
+        const oidRow = (label, ctrlCfg) => {
             const wrap = document.createElement('div');
             wrap.style.cssText = 'border:1px solid #eee;border-radius:3px;padding:6px;margin-bottom:6px;background:#fafafa;';
-
             const head = document.createElement('div');
-            head.style.cssText = 'font-size:11px;font-weight:600;color:#444;margin-bottom:5px;';
-            head.textContent = label;
+            head.style.cssText = 'display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#444;margin-bottom:5px;';
+            head.appendChild(this._makeBindSquare('oid', ctrlCfg, designItem, 'data-animation', saveAndRefresh));
+            const headText = document.createElement('span');
+            headText.textContent = label;
+            head.appendChild(headText);
             wrap.appendChild(head);
-
             const oidInp = document.createElement('input');
-            oidInp.type = 'text';
-            oidInp.value = ctrlCfg.oid || '';
+            oidInp.type = 'text'; oidInp.value = ctrlCfg.oid || '';
             oidInp.placeholder = 'OID…';
             oidInp.style.cssText = 'width:100%;box-sizing:border-box;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;margin-bottom:3px;';
             oidInp.onchange = save;
-
             const pickBtn = document.createElement('button');
             pickBtn.textContent = '…';
             pickBtn.style.cssText = 'padding:2px 6px;font-size:11px;cursor:pointer;border:1px solid #aaa;border-radius:3px;margin-left:3px;';
@@ -772,51 +886,43 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 const picked = await openSelectIdDialog(document.body, { id: oidInp.value });
                 if (picked) { oidInp.value = picked; save(); }
             };
-
             const oidRow2 = document.createElement('div');
             oidRow2.style.cssText = 'display:flex;margin-bottom:3px;';
-            oidRow2.appendChild(oidInp);
-            oidRow2.appendChild(pickBtn);
+            oidRow2.appendChild(oidInp); oidRow2.appendChild(pickBtn);
             wrap.appendChild(oidRow2);
-
             const condSel = sel([
-                ['equal','='], ['not_equal','≠'], ['less_than','<'], ['less_equal','≤'],
-                ['greater_than','>'], ['greater_equal','≥'], ['exists','exists']
+                ['equal','='],['not_equal','≠'],['less_than','<'],['less_equal','≤'],
+                ['greater_than','>'],['greater_equal','≥'],['exists','exists']
             ], ctrlCfg.condition || 'equal');
             condSel.style.cssText += 'width:70px;flex:none;margin-right:4px;';
             const valInp = document.createElement('input');
             valInp.type = 'text'; valInp.value = ctrlCfg.value ?? 'true';
-            valInp.placeholder = 'value';
             valInp.style.cssText = 'flex:1;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;';
             condSel.onchange = save; valInp.onchange = save;
-
             const condRow = document.createElement('div');
             condRow.style.cssText = 'display:flex;gap:3px;';
             condRow.appendChild(condSel); condRow.appendChild(valInp);
             wrap.appendChild(condRow);
-
-            wrap._getCtrl = () => ({
-                oid: oidInp.value || undefined,
-                condition: condSel.value,
-                value: valInp.value
-            });
+            wrap._getCtrl = () => {
+                const v = { oid: oidInp.value || undefined, condition: condSel.value, value: valInp.value };
+                if (ctrlCfg.oid_bind) v.oid_bind = ctrlCfg.oid_bind;
+                return v;
+            };
             return wrap;
         };
 
         const effectSel = sel([
-            ['', '— none —'], ['opacity','Opacity'], ['rotation','Rotation'],
-            ['scale','Scale'], ['translate','Translate XY'],
-            ['translateX','Translate X'], ['translateY','Translate Y'],
-            ['skew','Skew'], ['fill','Fill Color'], ['transform','Transform (CSS)'],
-            ['svg','SVG Attribute'], ['morphSVG','MorphSVG'], ['motionPath','Motion Path']
+            ['','— none —'],['opacity','Opacity'],['rotation','Rotation'],['scale','Scale'],
+            ['translate','Translate XY'],['translateX','Translate X'],['translateY','Translate Y'],
+            ['skew','Skew'],['fill','Fill Color'],['transform','Transform (CSS)'],
+            ['svg','SVG Attribute'],['morphSVG','MorphSVG'],['motionPath','Motion Path']
         ], cfg.effect || '');
 
         const svgAttrSel = sel([
-            ['fill','fill'], ['color','color'], ['fill-opacity','fill-opacity'],
-            ['stroke-opacity','stroke-opacity'], ['stroke-width','stroke-width'],
-            ['stroke-dasharray','stroke-dasharray'], ['stroke-dashoffset','stroke-dashoffset'],
-            ['x','x'], ['y','y'], ['cx','cx'], ['cy','cy'],
-            ['r','r'], ['rx','rx'], ['ry','ry']
+            ['fill','fill'],['color','color'],['fill-opacity','fill-opacity'],
+            ['stroke-opacity','stroke-opacity'],['stroke-width','stroke-width'],
+            ['stroke-dasharray','stroke-dasharray'],['stroke-dashoffset','stroke-dashoffset'],
+            ['x','x'],['y','y'],['cx','cx'],['cy','cy'],['r','r'],['rx','rx'],['ry','ry']
         ], cfg.svgAttr || 'fill');
 
         const easeSel = sel([
@@ -829,127 +935,82 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         ], cfg.ease || 'power1.inOut');
 
         const valueFromInp = inp(cfg.valueFrom, 'text');
-        const valueToInp = inp(cfg.valueTo, 'text');
-        const durationInp = inp(cfg.duration ?? 1, 'number');
-        const repeatInp = inp(cfg.repeat ?? 0, 'number');
-        const yoyoChk = chk(cfg.yoyo, 'yoyo');
-        const originXInp = inp(cfg.transformOriginX ?? '50', 'number');
-        const originYInp = inp(cfg.transformOriginY ?? '50', 'number');
-        const fillFromInp = inp(cfg.fillColorFrom || '#000000', 'color');
-        const fillToInp = inp(cfg.fillColorTo || '#ff0000', 'color');
-        const pathIdInp = inp(cfg.pathId, 'text');
-        const alignToPathChk = chk(cfg.alignToPath, 'align to path');
-        const orientToPathChk = chk(cfg.orientToPath, 'auto-rotate');
-
-        const playCtrl = oidRow('▶ Play', 'play', controls.play || {});
-        const pauseCtrl = oidRow('⏸ Pause', 'pause', controls.pause || {});
-        const resumeCtrl = oidRow('▶ Resume', 'resume', controls.resume || {});
-        const stopCtrl = oidRow('⏹ Stop', 'stop', controls.stop || {});
-        const reverseCtrl = oidRow('◀ Reverse', 'reverse', controls.reverse || {});
-
-        const collectAnimCfg = () => {
-            const e = effectSel.value;
-            const c = {};
-            const addCtrl = (key, row) => {
-                const v = row._getCtrl();
-                if (v.oid) c[key] = v;
-            };
-            addCtrl('play', playCtrl); addCtrl('pause', pauseCtrl);
-            addCtrl('resume', resumeCtrl); addCtrl('stop', stopCtrl);
-            addCtrl('reverse', reverseCtrl);
-
-            const out = {};
-            if (e) out.effect = e;
-            if (e === 'svg' && svgAttrSel.value) out.svgAttr = svgAttrSel.value;
-            if (valueFromInp.value) out.valueFrom = valueFromInp.value;
-            if (valueToInp.value) out.valueTo = valueToInp.value;
-            out.duration = parseFloat(durationInp.value) || 1;
-            out.ease = easeSel.value || 'power1.inOut';
-            out.repeat = parseInt(repeatInp.value) || 0;
-            if (yoyoChk.querySelector('input').checked) out.yoyo = true;
-            if (['rotation','scale'].includes(e)) {
-                out.transformOriginX = originXInp.value;
-                out.transformOriginY = originYInp.value;
-            }
-            if (e === 'fill' || e === 'svg') {
-                if (fillFromInp.value) out.fillColorFrom = fillFromInp.value;
-                if (fillToInp.value) out.fillColorTo = fillToInp.value;
-            }
-            if (e === 'motionPath') {
-                if (pathIdInp.value) out.pathId = pathIdInp.value;
-                if (alignToPathChk.querySelector('input').checked) out.alignToPath = true;
-                if (orientToPathChk.querySelector('input').checked) out.orientToPath = true;
-            }
-            if (Object.keys(c).length) out.controls = c;
-            return out;
-        };
-
-        // Build UI
+        const valueToInp   = inp(cfg.valueTo, 'text');
+        const durationInp  = inp(cfg.duration ?? 1, 'number');
+        const repeatInp    = inp(cfg.repeat ?? 0, 'number');
+        const originXInp   = inp(cfg.transformOriginX ?? '50', 'number');
+        const originYInp   = inp(cfg.transformOriginY ?? '50', 'number');
+        const fillFromInp  = inp(cfg.fillColorFrom || '#000000', 'color');
+        const fillToInp    = inp(cfg.fillColorTo || '#ff0000', 'color');
+        const pathIdInp    = inp(cfg.pathId, 'text');
+
+        const yoyoChk        = chkField('yoyo', 'Yoyo', cfg.yoyo);
+        const alignToPathChk = chkField('alignToPath', 'Align to path', cfg.alignToPath);
+        const orientToPathChk= chkField('orientToPath', 'Auto-rotate', cfg.orientToPath);
+
+        const playCtrl    = oidRow('▶ Play',     controls.play    || {});
+        const pauseCtrl   = oidRow('⏸ Pause',    controls.pause   || {});
+        const resumeCtrl  = oidRow('▶ Resume',   controls.resume  || {});
+        const stopCtrl    = oidRow('⏹ Stop',     controls.stop    || {});
+        const reverseCtrl = oidRow('◀ Reverse',  controls.reverse || {});
+
+        // ── Build UI ──────────────────────────────────────────────────────────
         content.innerHTML = '';
 
-        // Clear button
         const clearBtn = document.createElement('button');
-        clearBtn.textContent = 'Clear Animation';
+        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-animation'); this._updateAnimationsPanel(); };
         content.appendChild(clearBtn);
 
         const sec = (title) => {
             const d = document.createElement('div');
-            d.style.cssText = 'font-size:11px;font-weight:700;color:#555;margin:10px 0 5px;padding-top:8px;border-top:1px solid #eee;';
+            d.style.cssText = 'font-size:11px;font-weight:700;color:#555;margin:10px 0 5px;padding-top:8px;border-top:1px solid #eee;clear:both;';
             d.textContent = title;
             return d;
         };
 
         content.appendChild(sec('Effect'));
-        content.appendChild(field('Type', effectSel));
+        content.appendChild(field('Type', 'effect', effectSel));
 
-        const svgAttrRow = field('SVG Attr', svgAttrSel);
+        const svgAttrRow = field('SVG Attr', 'svgAttr', svgAttrSel);
         svgAttrRow.style.display = cfg.effect === 'svg' ? '' : 'none';
         content.appendChild(svgAttrRow);
-        effectSel.addEventListener('change', () => {
-            svgAttrRow.style.display = effectSel.value === 'svg' ? '' : 'none';
-        });
+        effectSel.addEventListener('change', () => { svgAttrRow.style.display = effectSel.value === 'svg' ? '' : 'none'; });
 
-        content.appendChild(field('Value From', valueFromInp));
-        content.appendChild(field('Value To', valueToInp));
+        content.appendChild(field('Value From', 'valueFrom', valueFromInp));
+        content.appendChild(field('Value To', 'valueTo', valueToInp));
 
         const colorRows = document.createElement('div');
         colorRows.style.display = (cfg.effect === 'fill' || cfg.effect === 'svg') ? '' : 'none';
-        colorRows.appendChild(field('Color From', fillFromInp));
-        colorRows.appendChild(field('Color To', fillToInp));
+        colorRows.appendChild(field('Color From', 'fillColorFrom', fillFromInp));
+        colorRows.appendChild(field('Color To', 'fillColorTo', fillToInp));
         content.appendChild(colorRows);
-        effectSel.addEventListener('change', () => {
-            colorRows.style.display = (effectSel.value === 'fill' || effectSel.value === 'svg') ? '' : 'none';
-        });
+        effectSel.addEventListener('change', () => { colorRows.style.display = (effectSel.value === 'fill' || effectSel.value === 'svg') ? '' : 'none'; });
 
         const motionRows = document.createElement('div');
         motionRows.style.display = cfg.effect === 'motionPath' ? '' : 'none';
-        motionRows.appendChild(field('Path ID', pathIdInp));
+        motionRows.appendChild(field('Path ID', 'pathId', pathIdInp));
         motionRows.appendChild(alignToPathChk);
         motionRows.appendChild(orientToPathChk);
         content.appendChild(motionRows);
-        effectSel.addEventListener('change', () => {
-            motionRows.style.display = effectSel.value === 'motionPath' ? '' : 'none';
-        });
+        effectSel.addEventListener('change', () => { motionRows.style.display = effectSel.value === 'motionPath' ? '' : 'none'; });
 
         content.appendChild(sec('Timing'));
-        content.appendChild(field('Duration (s)', durationInp));
-        content.appendChild(field('Ease', easeSel));
-        content.appendChild(field('Repeat', repeatInp));
+        content.appendChild(field('Duration (s)', 'duration', durationInp));
+        content.appendChild(field('Ease', 'ease', easeSel));
+        content.appendChild(field('Repeat', 'repeat', repeatInp));
         content.appendChild(yoyoChk);
 
         const originRows = document.createElement('div');
         originRows.style.display = (cfg.effect === 'rotation' || cfg.effect === 'scale') ? '' : 'none';
         originRows.appendChild(sec('Transform Origin'));
-        originRows.appendChild(field('Origin X (%)', originXInp));
-        originRows.appendChild(field('Origin Y (%)', originYInp));
+        originRows.appendChild(field('Origin X (%)', 'transformOriginX', originXInp));
+        originRows.appendChild(field('Origin Y (%)', 'transformOriginY', originYInp));
         content.appendChild(originRows);
-        effectSel.addEventListener('change', () => {
-            originRows.style.display = (effectSel.value === 'rotation' || effectSel.value === 'scale') ? '' : 'none';
-        });
+        effectSel.addEventListener('change', () => { originRows.style.display = (effectSel.value === 'rotation' || effectSel.value === 'scale') ? '' : 'none'; });
 
-        content.appendChild(sec('Controls (OID bindings)'));
+        content.appendChild(sec('Controls (OID triggers)'));
         content.appendChild(playCtrl);
         content.appendChild(pauseCtrl);
         content.appendChild(resumeCtrl);
@@ -1002,18 +1063,52 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         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' && (oidInp.value || cfg.oid_bind)) {
+                if (oidInp.value) out.oid = oidInp.value;
+                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;
+        };
+
         const save = () => {
             const c = collectEffectsCfg();
             if (!c.type) designItem.removeAttribute('data-effects');
             else designItem.setAttribute('data-effects', JSON.stringify(c));
         };
 
-        const field = (label, inputEl) => {
+        const saveAndRefresh = () => { save(); this._updateEffectsPanel(); };
+
+        const field = (label, propKey, inputEl) => {
             const row = document.createElement('div');
-            row.style.cssText = 'display:flex;align-items:center;gap:6px;margin-bottom:6px;';
+            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:80px;font-size:11px;color:#555;';
+            lbl.style.cssText = 'min-width:78px;font-size:11px;color:#555;';
             row.appendChild(lbl); row.appendChild(inputEl);
             return row;
         };
@@ -1049,107 +1144,78 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         ], 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 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']
+            ['elastic.out(1,0.3)','elastic.out'],['back.inOut(1.7)','back.inOut'],['none','none']
         ], cfg.ease || 'power2.out');
 
-        const oidInp = inp(cfg.oid || '');
-        const condSel = sel([
-            ['equal','='],['not_equal','≠'],['less_than','<'],['greater_than','>'],['exists','exists']
-        ], cfg.condition || 'equal');
+        const oidInp     = inp(cfg.oid || '');
+        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');
+        const glowSizeInp  = inp(cfg.glowSize || 10, 'number');
+        const blurInp      = inp(cfg.blurAmount || 5, 'number');
 
         const oidPickBtn = document.createElement('button');
         oidPickBtn.textContent = '…';
-        oidPickBtn.style.cssText = 'padding:2px 6px;font-size:11px;cursor:pointer;border:1px solid #aaa;border-radius:3px;';
+        oidPickBtn.style.cssText = 'padding:2px 6px;font-size:11px;cursor:pointer;border:1px solid #aaa;border-radius:3px;flex-shrink:0;';
         oidPickBtn.onclick = async () => {
             const picked = await openSelectIdDialog(document.body, { id: oidInp.value });
             if (picked) { oidInp.value = picked; save(); }
         };
 
-        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' && oidInp.value) {
-                out.oid = oidInp.value;
-                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;
-            return out;
-        };
-
+        // ── Build UI ──────────────────────────────────────────────────────────
         content.innerHTML = '';
 
         const clearBtn = document.createElement('button');
-        clearBtn.textContent = 'Clear Effect';
+        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', typeSel));
-        content.appendChild(field('Trigger', triggerSel));
-        content.appendChild(field('Duration (s)', durationInp));
-        content.appendChild(field('Delay (s)', delayInp));
-        content.appendChild(field('Repeat', repeatInp));
-        content.appendChild(field('Ease', easeSel));
+        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 oidRow = document.createElement('div');
-        oidRow.style.cssText = 'display:flex;gap:3px;margin-bottom:6px;';
-        oidRow.appendChild(oidInp); oidRow.appendChild(oidPickBtn);
-        oidSection.appendChild(field('OID', document.createElement('span')));
-        oidSection.lastChild.remove();
         const oidLabel = document.createElement('div');
-        oidLabel.style.cssText = 'font-size:11px;font-weight:600;color:#555;margin-bottom:3px;';
-        oidLabel.textContent = 'OID';
+        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 oidRowDiv = document.createElement('div');
+        oidRowDiv.style.cssText = 'display:flex;gap:3px;margin-bottom:4px;padding-left:15px;';
+        oidRowDiv.appendChild(oidInp); oidRowDiv.appendChild(oidPickBtn);
+        const condRowDiv = document.createElement('div');
+        condRowDiv.style.cssText = 'display:flex;gap:3px;margin-bottom:6px;padding-left:15px;';
+        condRowDiv.appendChild(condSel); condRowDiv.appendChild(condValInp);
         oidSection.appendChild(oidLabel);
-        oidSection.appendChild(oidRow);
-        const condRow = document.createElement('div');
-        condRow.style.cssText = 'display:flex;gap:3px;margin-bottom:6px;';
-        condRow.appendChild(condSel); condRow.appendChild(condValInp);
-        oidSection.appendChild(condRow);
+        oidSection.appendChild(oidRowDiv);
+        oidSection.appendChild(condRowDiv);
         content.appendChild(oidSection);
-        triggerSel.addEventListener('change', () => {
-            oidSection.style.display = triggerSel.value === 'oid' ? '' : 'none';
-        });
+        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', glowColorInp));
-        glowSection.appendChild(field('Glow Size (px)', glowSizeInp));
+        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';
-        });
+        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)', blurInp));
+        blurSection.appendChild(field('Blur (px)', 'blurAmount', blurInp));
         content.appendChild(blurSection);
-        typeSel.addEventListener('change', () => {
-            blurSection.style.display = typeSel.value === 'blur' ? '' : 'none';
-        });
+        typeSel.addEventListener('change', () => { blurSection.style.display = typeSel.value === 'blur' ? '' : 'none'; });
     }
 
     /* Move to a Dock Spawn Helper */

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

@@ -156,9 +156,26 @@ class AnimationInstance {
         if (!window.gsap) return;
         const controls = this.cfg.controls || {};
 
-        const bindControl = (key, action) => {
+        const bindControl = async (key, action) => {
             const ctrl = controls[key];
-            if (!ctrl?.oid) return;
+            if (!ctrl) return;
+
+            // If OID itself is bound via binding square, resolve it first
+            if (ctrl.oid_bind?.signal) {
+                try {
+                    const s = await iobrokerHandler.connection.getState(ctrl.oid_bind.signal);
+                    if (s?.val != null) ctrl.oid = String(s.val);
+                } catch (e) {}
+                const oidBindHandler = (id, state) => {
+                    if (state?.val != null) ctrl.oid = String(state.val);
+                };
+                try {
+                    iobrokerHandler.connection.subscribeState(ctrl.oid_bind.signal, oidBindHandler);
+                    this._subs.push({ oid: ctrl.oid_bind.signal, handler: oidBindHandler });
+                } catch (e) {}
+            }
+
+            if (!ctrl.oid) return;
             const handler = (id, state) => {
                 if (checkCond(state?.val, ctrl.condition || 'equal', ctrl.value ?? 'true')) action();
             };
@@ -171,11 +188,38 @@ class AnimationInstance {
             }).catch(() => {});
         };
 
-        bindControl('play', () => this._play());
-        bindControl('pause', () => this.tween?.pause());
-        bindControl('resume', () => this.tween?.play());
-        bindControl('stop', () => this.tween?.pause(0));
-        bindControl('reverse', () => this.tween?.reverse());
+        await bindControl('play', () => this._play());
+        await bindControl('pause', () => this.tween?.pause());
+        await bindControl('resume', () => this.tween?.play());
+        await bindControl('stop', () => this.tween?.pause(0));
+        await bindControl('reverse', () => this.tween?.reverse());
+
+        // Dynamic property bindings — each prop can have a propKey_bind: {signal, expression}
+        const dynamicProps = [
+            'effect', 'valueFrom', 'valueTo', 'duration', 'ease', 'repeat', 'yoyo',
+            'fillColorFrom', 'fillColorTo', 'transformOriginX', 'transformOriginY',
+            'svgAttr', 'pathId', 'alignToPath', 'orientToPath'
+        ];
+        for (const prop of dynamicProps) {
+            const bindCfg = this.cfg[prop + '_bind'];
+            if (!bindCfg?.signal) continue;
+            const propCapture = prop;
+            const handler = (id, state) => {
+                if (state?.val != null) {
+                    this.cfg[propCapture] = state.val;
+                    // Rebuild tween if currently playing
+                    if (this.tween && !this.tween.paused()) this._play();
+                }
+            };
+            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) {}
+        }
     }
 
     _play() {
@@ -333,15 +377,28 @@ async function _applyEffect(el, cfg) {
     } else if (cfg.trigger === 'click') {
         _clickFn = applyTween;
         el.addEventListener('click', _clickFn);
-    } else if (cfg.trigger === 'oid' && cfg.oid) {
-        _oidId = cfg.oid;
-        _oidHandler = (id, state) => {
-            if (checkCond(state?.val, cfg.condition || 'equal', cfg.conditionValue ?? 'true')) applyTween();
-        };
-        try { iobrokerHandler.connection.subscribeState(cfg.oid, _oidHandler); } catch (e) {}
-        iobrokerHandler.connection.getState(cfg.oid).then(state => {
-            if (state && checkCond(state.val, cfg.condition || 'equal', cfg.conditionValue ?? 'true')) applyTween();
-        }).catch(() => {});
+    } else if (cfg.trigger === 'oid') {
+        // Resolve OID — may come from a binding square binding
+        if (cfg.oid_bind?.signal) {
+            try {
+                const s = await iobrokerHandler.connection.getState(cfg.oid_bind.signal);
+                if (s?.val != null) cfg.oid = String(s.val);
+            } catch (e) {}
+            const oidBindHandler = (id, state) => { if (state?.val != null) cfg.oid = String(state.val); };
+            try { iobrokerHandler.connection.subscribeState(cfg.oid_bind.signal, oidBindHandler); } catch (e) {}
+            _oidId = cfg.oid_bind.signal;
+            _oidHandler = oidBindHandler;
+        }
+        if (cfg.oid) {
+            _oidId = cfg.oid;
+            _oidHandler = (id, state) => {
+                if (checkCond(state?.val, cfg.condition || 'equal', cfg.conditionValue ?? 'true')) applyTween();
+            };
+            try { iobrokerHandler.connection.subscribeState(cfg.oid, _oidHandler); } catch (e) {}
+            iobrokerHandler.connection.getState(cfg.oid).then(state => {
+                if (state && checkCond(state.val, cfg.condition || 'equal', cfg.conditionValue ?? 'true')) applyTween();
+            }).catch(() => {});
+        }
     }
 
     return () => {