iobroker.mywebui 1.37.65 → 1.37.67

package/io-package.json

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

package/package.json

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

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

@@ -874,38 +874,31 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             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']
             ], ctrlCfg.condition || 'equal');
-            condSel.style.cssText += 'width:70px;flex:none;margin-right:4px;';
+            condSel.style.cssText += 'flex:1;';
+            condSel.onchange = save;
+            const condRow = document.createElement('div');
+            condRow.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:4px;';
+            condRow.appendChild(this._makeBindSquare('condition', ctrlCfg, designItem, 'data-animation', saveAndRefresh));
+            condRow.appendChild(condSel);
+            wrap.appendChild(condRow);
             const valInp = document.createElement('input');
             valInp.type = 'text'; valInp.value = ctrlCfg.value ?? 'true';
             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);
+            valInp.onchange = save;
+            const valRow = document.createElement('div');
+            valRow.style.cssText = 'display:flex;align-items:center;gap:4px;';
+            valRow.appendChild(this._makeBindSquare('value', ctrlCfg, designItem, 'data-animation', saveAndRefresh));
+            valRow.appendChild(valInp);
+            wrap.appendChild(valRow);
             wrap._getCtrl = () => {
-                const v = { oid: oidInp.value || undefined, condition: condSel.value, value: valInp.value };
+                const v = { condition: condSel.value, value: valInp.value };
                 if (ctrlCfg.oid_bind) v.oid_bind = ctrlCfg.oid_bind;
+                if (ctrlCfg.condition_bind) v.condition_bind = ctrlCfg.condition_bind;
+                if (ctrlCfg.value_bind) v.value_bind = ctrlCfg.value_bind;
                 return v;
             };
             return wrap;
@@ -1071,8 +1064,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 || cfg.oid_bind)) {
-                if (oidInp.value) out.oid = oidInp.value;
+            if (triggerSel.value === 'oid') {
                 out.condition = condSel.value;
                 out.conditionValue = condValInp.value;
             }
@@ -1153,21 +1145,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 = '';
 
@@ -1192,15 +1175,17 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         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);
+        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(oidRowDiv);
         oidSection.appendChild(condRowDiv);
+        oidSection.appendChild(condValRowDiv);
         content.appendChild(oidSection);
         triggerSel.addEventListener('change', () => { oidSection.style.display = triggerSel.value === 'oid' ? '' : 'none'; });
 

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

@@ -160,30 +160,37 @@ class AnimationInstance {
             const ctrl = controls[key];
             if (!ctrl) return;
 
-            // If OID itself is bound via binding square, resolve it first
-            if (ctrl.oid_bind?.signal) {
+            // condition_bind: dynamically update which condition operator to use
+            if (ctrl.condition_bind?.signal) {
                 try {
-                    const s = await iobrokerHandler.connection.getState(ctrl.oid_bind.signal);
-                    if (s?.val != null) ctrl.oid = String(s.val);
+                    const s = await iobrokerHandler.connection.getState(ctrl.condition_bind.signal);
+                    if (s?.val != null) ctrl.condition = String(s.val);
                 } catch (e) {}
-                const oidBindHandler = (id, state) => {
-                    if (state?.val != null) ctrl.oid = String(state.val);
-                };
+                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) {}
+            }
+
+            // value_bind: dynamically update the trigger value
+            if (ctrl.value_bind?.signal) {
                 try {
-                    iobrokerHandler.connection.subscribeState(ctrl.oid_bind.signal, oidBindHandler);
-                    this._subs.push({ oid: ctrl.oid_bind.signal, handler: oidBindHandler });
+                    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) {}
             }
 
-            if (!ctrl.oid) return;
+            // 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(ctrl.oid, handler);
-                this._subs.push({ oid: ctrl.oid, handler });
+                iobrokerHandler.connection.subscribeState(oid, handler);
+                this._subs.push({ oid, handler });
             } catch (e) {}
-            iobrokerHandler.connection.getState(ctrl.oid).then(state => {
+            iobrokerHandler.connection.getState(oid).then(state => {
                 if (state && checkCond(state.val, ctrl.condition || 'equal', ctrl.value ?? 'true')) action();
             }).catch(() => {});
         };
@@ -200,16 +207,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);
@@ -378,24 +396,26 @@ async function _applyEffect(el, cfg) {
         _clickFn = applyTween;
         el.addEventListener('click', _clickFn);
     } 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;
+        // condition_bind and conditionValue_bind
+        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) {}
+        }
+        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) {}
         }
-        if (cfg.oid) {
-            _oidId = cfg.oid;
+        // 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(cfg.oid, _oidHandler); } catch (e) {}
-            iobrokerHandler.connection.getState(cfg.oid).then(state => {
+            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(() => {});
         }