iobroker.mywebui 1.37.73 → 1.37.75

package/io-package.json

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

package/package.json

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

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();
 
@@ -426,7 +551,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 +563,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/dist/frontend/runtime/CustomControls.js

@@ -2,6 +2,7 @@ import { BaseCustomWebComponentConstructorAppend, css, cssFromString } from "@go
 import { iobrokerHandler } from "../common/IobrokerHandler.js";
 import { PropertiesHelper } from "@gokturk413/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";
 import { visibilityService } from "./VisibilityService.js";
+import { scanAndApplyAnimations, scanAndApplyEffects, cleanupAnimations, cleanupEffects } from "./AnimationService.js";
 export const webuiCustomControlPrefix = 'webui-';
 export const webuiCustomControlSymbol = Symbol('webuiCustomControlSymbol');
 export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
@@ -80,6 +81,9 @@ export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
         
         // Scan and apply visibility to all elements inside the custom control
         await visibilityService.scanAndApply(this.shadowRoot);
+        // Scan and apply animations/effects to all elements inside the custom control
+        scanAndApplyAnimations(this.shadowRoot).catch(() => {});
+        scanAndApplyEffects(this.shadowRoot).catch(() => {});
     }
     disconnectedCallback() {
         for (let e of this.#eventListeners) {
@@ -98,6 +102,9 @@ export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
         // Remove visibility control from all elements inside the custom control
         const controlledElements = this.shadowRoot.querySelectorAll('[data-visibility-controlled="true"]');
         controlledElements.forEach(el => visibilityService.removeVisibility(el));
+        // Cleanup animations and effects
+        cleanupAnimations(this.shadowRoot);
+        cleanupEffects(this.shadowRoot);
     }
     _assignEvent(event, callback) {
         const arrayEl = [event, callback];