iobroker.mywebui 1.37.64 → 1.37.66

package/io-package.json

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

package/package.json

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

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

@@ -767,7 +767,7 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         const collectAnimCfg = () => {
             const e = effectSel.value;
             const c = {};
-            const addCtrl = (key, row) => { const v = row._getCtrl(); if (v.oid) c[key] = v; };
+            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);
@@ -868,25 +868,12 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             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.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;';
-            pickBtn.onclick = async () => {
-                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);
-            wrap.appendChild(oidRow2);
             const condSel = sel([
                 ['equal','='],['not_equal','≠'],['less_than','<'],['less_equal','≤'],
                 ['greater_than','>'],['greater_equal','≥'],['exists','exists']
@@ -900,7 +887,11 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             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 = { condition: condSel.value, value: valInp.value };
+                if (ctrlCfg.oid_bind) v.oid_bind = ctrlCfg.oid_bind;
+                return v;
+            };
             return wrap;
         };
 
@@ -1064,8 +1055,7 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             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;
+            if (triggerSel.value === 'oid') {
                 out.condition = condSel.value;
                 out.conditionValue = condValInp.value;
             }
@@ -1146,21 +1136,12 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             ['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 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 oidPickBtn = document.createElement('button');
-        oidPickBtn.textContent = '…';
-        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(); }
-        };
-
         // ── Build UI ──────────────────────────────────────────────────────────
         content.innerHTML = '';
 
@@ -1180,16 +1161,15 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         const oidSection = document.createElement('div');
         oidSection.style.display = cfg.trigger === 'oid' ? '' : 'none';
         const oidLabel = document.createElement('div');
-        oidLabel.style.cssText = 'font-size:11px;font-weight:600;color:#555;margin-bottom:3px;padding-left:15px;';
-        oidLabel.textContent = 'OID';
-        const oidRowDiv = document.createElement('div');
-        oidRowDiv.style.cssText = 'display:flex;gap:3px;margin-bottom:4px;padding-left:15px;';
-        oidRowDiv.appendChild(oidInp); oidRowDiv.appendChild(oidPickBtn);
+        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;gap:3px;margin-bottom:6px;padding-left:15px;';
         condRowDiv.appendChild(condSel); condRowDiv.appendChild(condValInp);
         oidSection.appendChild(oidLabel);
-        oidSection.appendChild(oidRowDiv);
         oidSection.appendChild(condRowDiv);
         content.appendChild(oidSection);
         triggerSel.addEventListener('change', () => { oidSection.style.display = triggerSel.value === 'oid' ? '' : 'none'; });

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,11 @@ 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 = [
@@ -183,16 +200,27 @@ class AnimationInstance {
             'fillColorFrom', 'fillColorTo', 'transformOriginX', 'transformOriginY',
             'svgAttr', 'pathId', 'alignToPath', 'orientToPath'
         ];
+        let _restartTimer = null;
         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();
+                if (state?.val == null) return;
+                this.cfg[propCapture] = state.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;
+                    this.tween.timeScale(origDur / newDur);
+                    return;
                 }
+                // Other props: debounced restart so rapid changes don't freeze
+                clearTimeout(_restartTimer);
+                _restartTimer = setTimeout(() => {
+                    if (this.tween && !this.tween.paused()) this._play();
+                }, 60);
             };
             try {
                 iobrokerHandler.connection.subscribeState(bindCfg.signal, handler);
@@ -360,15 +388,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 () => {