iobroker.mywebui 1.37.66 → 1.37.68

package/io-package.json

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

package/package.json

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

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

@@ -878,18 +878,27 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 ['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 = { 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;
@@ -897,7 +906,8 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
 
         const effectSel = sel([
             ['','— none —'],['opacity','Opacity'],['rotation','Rotation'],['scale','Scale'],
-            ['translate','Translate XY'],['translateX','Translate X'],['translateY','Translate Y'],
+            ['translateX','Move X (relative)'],['translateY','Move Y (relative)'],['translate','Move XY (relative)'],
+            ['left','Move Left (absolute)'],['top','Move Top (absolute)'],
             ['skew','Skew'],['fill','Fill Color'],['transform','Transform (CSS)'],
             ['svg','SVG Attribute'],['morphSVG','MorphSVG'],['motionPath','Motion Path']
         ], cfg.effect || '');
@@ -1167,10 +1177,16 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         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);
+        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'; });
 

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

@@ -95,17 +95,39 @@ function buildTweenConfig(cfg, value) {
         case 'translateX':
             config.x = cfg.valueTo != null ? parseFloat(cfg.valueTo)
                 : (typeof normalVal === 'boolean' ? (normalVal ? 100 : 0) : numVal);
+            if (cfg.valueFrom != null) config.startAt = { x: parseFloat(cfg.valueFrom) };
             break;
         case 'translateY':
             config.y = cfg.valueTo != null ? parseFloat(cfg.valueTo)
                 : (typeof normalVal === 'boolean' ? (normalVal ? 100 : 0) : numVal);
+            if (cfg.valueFrom != null) config.startAt = { y: parseFloat(cfg.valueFrom) };
             break;
         case 'translate': {
-            const tv = cfg.valueTo != null ? parseFloat(cfg.valueTo)
-                : (typeof normalVal === 'boolean' ? (normalVal ? 100 : 0) : numVal);
-            config.x = tv; config.y = tv;
+            // 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);
+                const parts = s.split(',');
+                return { x: parseFloat(parts[0]) || 0, y: parts.length > 1 ? parseFloat(parts[1]) || 0 : 0 };
+            };
+            const to = parseXY(cfg.valueTo, typeof normalVal === 'boolean' ? (normalVal ? 100 : 0) : numVal);
+            config.x = to.x; config.y = to.y;
+            if (cfg.valueFrom != null) {
+                const from = parseXY(cfg.valueFrom, 0);
+                config.startAt = { x: from.x, y: from.y };
+            }
             break;
         }
+        case 'left':
+            config.left = cfg.valueTo != null ? cfg.valueTo
+                : (typeof normalVal === 'boolean' ? (normalVal ? '100px' : '0px') : (numVal + 'px'));
+            if (cfg.valueFrom != null) config.startAt = { left: isNaN(cfg.valueFrom) ? cfg.valueFrom : cfg.valueFrom + 'px' };
+            break;
+        case 'top':
+            config.top = cfg.valueTo != null ? cfg.valueTo
+                : (typeof normalVal === 'boolean' ? (normalVal ? '100px' : '0px') : (numVal + 'px'));
+            if (cfg.valueFrom != null) config.startAt = { top: isNaN(cfg.valueFrom) ? cfg.valueFrom : cfg.valueFrom + 'px' };
+            break;
         case 'skew': {
             const sv = cfg.valueTo != null ? parseFloat(cfg.valueTo)
                 : (typeof normalVal === 'boolean' ? (normalVal ? 45 : 0) : numVal);
@@ -160,30 +182,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(() => {});
         };
@@ -389,24 +418,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(() => {});
         }