iobroker.mywebui 1.37.75 → 1.37.76

package/io-package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.37.75",
+  "version": "1.37.76",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413",
   "type": "module",
   "main": "dist/backend/main.js",
@@ -74,20 +74,20 @@
     "@alcalzone/release-script-plugin-iobroker": "^4.0.0",
     "@alcalzone/release-script-plugin-license": "^4.0.0",
     "@blockly/zoom-to-fit": "^7.0.3",
-    "@iobroker/socket-client": "^5.0.2",
-    "@iobroker/testing": "^5.1.1",
-    "@iobroker/webcomponent-selectid-dialog": "^1.0.12",
     "@gokturk413/base-custom-webcomponent": "*",
-    "@node-projects/lean-he-esm": "^3.4.1",
-    "@node-projects/node-html-parser-esm": "^6.4.1",
     "@gokturk413/propertygrid.webcomponent": "*",
     "@gokturk413/splitview.webcomponent": "^1.0.1",
     "@gokturk413/web-component-designer": "*",
     "@gokturk413/web-component-designer-codeview-monaco": "*",
     "@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser": "*",
-    "@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.11",
     "@gokturk413/web-component-designer-visualization-addons": "*",
     "@gokturk413/web-component-designer-widgets-wunderbaum": "*",
+    "@iobroker/socket-client": "^5.0.2",
+    "@iobroker/testing": "^5.1.1",
+    "@iobroker/webcomponent-selectid-dialog": "^1.0.12",
+    "@node-projects/lean-he-esm": "^3.4.1",
+    "@node-projects/node-html-parser-esm": "^6.4.1",
+    "@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.11",
     "@types/json-schema": "^7.0.15",
     "@web/dev-server": "^0.4.6",
     "blockly": "^12.3.1",
@@ -107,10 +107,12 @@
     "gulp-replace": "^1.1.4",
     "javascript-obfuscator": "^5.3.0",
     "long": "^5.3.2",
+    "marked": "^18.0.3",
     "mobile-drag-drop": "^3.0.0-rc.0",
     "mocha": "^11.7.4",
     "monaco-editor": "^0.50.0",
     "nyc": "^17.1.0",
+    "puppeteer": "^24.42.0",
     "sinon-chai": "^4.0.1",
     "toastify-js": "^1.12.0",
     "ts-node": "^10.9.2",

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

@@ -1115,154 +1115,192 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         const designItem = items[0];
         const element = designItem.element;
 
-        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') {
-                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;
+        let raw = null;
+        try { raw = JSON.parse(element.getAttribute('data-effects') || 'null'); } catch (e) {}
+        let cfgList = Array.isArray(raw) ? raw : (raw ? [raw] : []);
+
+        content.innerHTML = '';
+
+        const saveAll = () => {
+            const data = cfgList.filter(c => c._collect).map(c => c._collect()).filter(c => c.type);
+            if (data.length === 0) designItem.removeAttribute('data-effects');
+            else if (data.length === 1) designItem.setAttribute('data-effects', JSON.stringify(data[0]));
+            else designItem.setAttribute('data-effects', JSON.stringify(data));
         };
+        const saveAndRefresh = () => { saveAll(); this._updateEffectsPanel(); };
 
-        const save = () => {
-            const c = collectEffectsCfg();
-            if (!c.type) designItem.removeAttribute('data-effects');
-            else designItem.setAttribute('data-effects', JSON.stringify(c));
+        // ── Add Effect button ─────────────────────────────────────────────────
+        const addBtn = document.createElement('button');
+        addBtn.textContent = '+ Add Effect';
+        addBtn.style.cssText = 'width:100%;font-size:11px;padding:4px;cursor:pointer;border:1px solid #4caf50;border-radius:3px;background:#e8f5e9;color:#2e7d32;margin-bottom:8px;';
+        addBtn.onclick = () => {
+            const existing = cfgList.filter(c => c._collect).map(c => c._collect()).filter(c => c.type);
+            existing.push({ type: 'fadeIn', trigger: 'load', duration: 0.5, ease: 'power2.out' });
+            const val = existing.length === 1 ? existing[0] : existing;
+            designItem.setAttribute('data-effects', JSON.stringify(val));
+            this._updateEffectsPanel();
         };
+        content.appendChild(addBtn);
 
-        const saveAndRefresh = () => { save(); this._updateEffectsPanel(); };
+        if (cfgList.length === 0) {
+            const ph = document.createElement('p');
+            ph.style.cssText = 'color:#999;font-style:italic;font-size:11px;text-align:center;margin-top:12px;';
+            ph.textContent = 'No effects. Click "+ Add Effect".';
+            content.appendChild(ph);
+            return;
+        }
 
-        const field = (label, propKey, inputEl) => {
-            const row = document.createElement('div');
-            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:78px;font-size:11px;color:#555;';
-            row.appendChild(lbl); row.appendChild(inputEl);
-            return row;
-        };
+        // ── Build one collapsible block per effect ────────────────────────────
+        const buildEffectBlock = (cfg, index) => {
+            const wrapper = document.createElement('div');
+            wrapper.style.cssText = 'border:1px solid #ddd;border-radius:4px;margin-bottom:6px;overflow:hidden;';
+
+            // Header
+            const header = document.createElement('div');
+            header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;background:#f0f4ff;padding:4px 6px;cursor:pointer;user-select:none;';
+            const headerLeft = document.createElement('span');
+            headerLeft.style.cssText = 'font-size:11px;font-weight:600;color:#1a237e;';
+            headerLeft.textContent = `▶ #${index + 1} — ${cfg.type || 'none'} (${cfg.trigger || 'load'})`;
+            const delBtn = document.createElement('button');
+            delBtn.textContent = '✕';
+            delBtn.title = 'Remove this effect';
+            delBtn.style.cssText = 'font-size:10px;padding:1px 5px;cursor:pointer;border:1px solid #e57373;border-radius:3px;background:#ffebee;color:#c62828;';
+            delBtn.onclick = (e) => {
+                e.stopPropagation();
+                const data = cfgList.filter(c => c._collect).map(c => c._collect()).filter(c => c.type);
+                data.splice(index, 1);
+                if (data.length === 0) designItem.removeAttribute('data-effects');
+                else if (data.length === 1) designItem.setAttribute('data-effects', JSON.stringify(data[0]));
+                else designItem.setAttribute('data-effects', JSON.stringify(data));
+                this._updateEffectsPanel();
+            };
+            header.appendChild(headerLeft);
+            header.appendChild(delBtn);
 
-        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;';
-            i.onchange = save; return i;
-        };
+            // Body (collapsed by default)
+            const body = document.createElement('div');
+            body.style.cssText = 'padding:8px;display:none;';
+            header.onclick = () => {
+                body.style.display = body.style.display === 'none' ? '' : 'none';
+                headerLeft.textContent = (body.style.display === 'none' ? '▶' : '▼') + ` #${index + 1} — ${cfg.type || 'none'} (${cfg.trigger || 'load'})`;
+            };
 
-        const sel = (options, val) => {
-            const s = document.createElement('select');
-            s.style.cssText = 'flex:1;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;';
-            options.forEach(([v, t]) => {
-                const o = document.createElement('option');
-                o.value = v; o.textContent = t; o.selected = v === val;
-                s.appendChild(o);
-            });
-            s.onchange = save; return s;
-        };
+            // ── helpers scoped to this block ──────────────────────────────────
+            const makeBindSq = (propKey) => this._makeBindSquare(propKey, cfg, designItem, 'data-effects', saveAndRefresh);
+
+            const field = (label, propKey, inputEl) => {
+                const row = document.createElement('div');
+                row.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:6px;';
+                row.appendChild(propKey ? makeBindSq(propKey) : (() => { const sp = document.createElement('div'); sp.style.cssText = 'width:11px;min-width:11px;flex-shrink:0;'; return sp; })());
+                const lbl = document.createElement('span');
+                lbl.textContent = label;
+                lbl.style.cssText = 'min-width:78px;font-size:11px;color:#555;';
+                row.appendChild(lbl); row.appendChild(inputEl);
+                return row;
+            };
 
-        const typeSel = sel([
-            ['','— none —'],['fadeIn','Fade In'],['fadeOut','Fade Out'],
-            ['slideInLeft','Slide In Left'],['slideInRight','Slide In Right'],
-            ['slideInTop','Slide In Top'],['slideInBottom','Slide In Bottom'],
-            ['bounce','Bounce'],['pulse','Pulse'],['shake','Shake'],
-            ['glow','Glow'],['blur','Blur'],['spin','Spin'],['flip','Flip 3D']
-        ], cfg.type || '');
-
-        const triggerSel = sel([
-            ['load','On Load'],['hover','On Hover'],['click','On Click'],['oid','OID State']
-        ], 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 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']
-        ], cfg.ease || 'power2.out');
-
-        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');
-
-        // ── Build UI ──────────────────────────────────────────────────────────
-        content.innerHTML = '';
+            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;';
+                i.onchange = saveAll; return i;
+            };
+
+            const sel = (options, val) => {
+                const s = document.createElement('select');
+                s.style.cssText = 'flex:1;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;';
+                options.forEach(([v, t]) => { const o = document.createElement('option'); o.value = v; o.textContent = t; o.selected = v === val; s.appendChild(o); });
+                s.onchange = saveAll; return s;
+            };
+
+            const typeSel = sel([
+                ['','— none —'],['fadeIn','Fade In'],['fadeOut','Fade Out'],
+                ['slideInLeft','Slide In Left'],['slideInRight','Slide In Right'],
+                ['slideInTop','Slide In Top'],['slideInBottom','Slide In Bottom'],
+                ['bounce','Bounce'],['pulse','Pulse'],['shake','Shake'],
+                ['glow','Glow'],['blur','Blur'],['spin','Spin'],['flip','Flip 3D']
+            ], cfg.type || '');
+
+            const triggerSel = sel([
+                ['load','On Load'],['hover','On Hover'],['click','On Click'],['oid','OID State']
+            ], 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 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']
+            ], cfg.ease || 'power2.out');
+
+            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');
+
+            body.appendChild(field('Type', 'type', typeSel));
+            body.appendChild(field('Trigger', null, triggerSel));
+            body.appendChild(field('Duration (s)', 'duration', durationInp));
+            body.appendChild(field('Delay (s)', 'delay', delayInp));
+            body.appendChild(field('Repeat', 'repeat', repeatInp));
+            body.appendChild(field('Ease', 'ease', easeSel));
+
+            // OID section
+            const oidSection = document.createElement('div');
+            oidSection.style.display = cfg.trigger === 'oid' ? '' : 'none';
+            const oidLabel = document.createElement('div');
+            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(makeBindSq('oid'));
+            const oidLabelText = document.createElement('span'); oidLabelText.textContent = 'OID'; oidLabel.appendChild(oidLabelText);
+            const condRowDiv = document.createElement('div');
+            condRowDiv.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:4px;padding-left:4px;';
+            condRowDiv.appendChild(makeBindSq('condition')); 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(makeBindSq('conditionValue')); condValRowDiv.appendChild(condValInp);
+            oidSection.appendChild(oidLabel); oidSection.appendChild(condRowDiv); oidSection.appendChild(condValRowDiv);
+            body.appendChild(oidSection);
+            triggerSel.addEventListener('change', () => { oidSection.style.display = triggerSel.value === 'oid' ? '' : 'none'; });
+
+            // Glow section
+            const glowSection = document.createElement('div');
+            glowSection.style.display = cfg.type === 'glow' ? '' : 'none';
+            glowSection.appendChild(field('Glow Color', 'glowColor', glowColorInp));
+            glowSection.appendChild(field('Glow Size', 'glowSize', glowSizeInp));
+            body.appendChild(glowSection);
+            typeSel.addEventListener('change', () => { glowSection.style.display = typeSel.value === 'glow' ? '' : 'none'; });
+
+            // Blur section
+            const blurSection = document.createElement('div');
+            blurSection.style.display = cfg.type === 'blur' ? '' : 'none';
+            blurSection.appendChild(field('Blur (px)', 'blurAmount', blurInp));
+            body.appendChild(blurSection);
+            typeSel.addEventListener('change', () => { blurSection.style.display = typeSel.value === 'blur' ? '' : 'none'; });
+
+            // _collect: read current UI values back into a plain object
+            cfg._collect = () => {
+                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') { 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;
+                for (const [k, v] of Object.entries(cfg)) { if (k.endsWith('_bind') && v) out[k] = v; }
+                return out;
+            };
+
+            wrapper.appendChild(header);
+            wrapper.appendChild(body);
+            return wrapper;
+        };
 
-        const clearBtn = document.createElement('button');
-        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', '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 oidLabel = document.createElement('div');
-        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;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'; });
-
-        const glowSection = document.createElement('div');
-        glowSection.style.display = cfg.type === 'glow' ? '' : 'none';
-        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'; });
-
-        const blurSection = document.createElement('div');
-        blurSection.style.display = cfg.type === 'blur' ? '' : 'none';
-        blurSection.appendChild(field('Blur (px)', 'blurAmount', blurInp));
-        content.appendChild(blurSection);
-        typeSel.addEventListener('change', () => { blurSection.style.display = typeSel.value === 'blur' ? '' : 'none'; });
+        cfgList.forEach((cfg, i) => content.appendChild(buildEffectBlock(cfg, i)));
     }
 
     /* Move to a Dock Spawn Helper */

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

@@ -489,11 +489,17 @@ export async function scanAndApplyEffects(root) {
     const elements = (root || document).querySelectorAll('[data-effects]');
     for (const el of elements) {
         try {
-            const cfg = JSON.parse(el.getAttribute('data-effects'));
-            const existing = _activeEffects.get(el);
-            if (existing?.cleanup) existing.cleanup();
-            const cleanup = await _applyEffect(el, cfg);
-            _activeEffects.set(el, { cleanup });
+            const raw = JSON.parse(el.getAttribute('data-effects'));
+            const cfgList = Array.isArray(raw) ? raw : [raw];
+            const existing = _activeEffects.get(el) || [];
+            for (const inst of existing) if (inst?.cleanup) inst.cleanup();
+            const instances = [];
+            for (const cfg of cfgList) {
+                if (!cfg || typeof cfg !== 'object') continue;
+                const cleanup = await _applyEffect(el, cfg);
+                instances.push({ cleanup });
+            }
+            _activeEffects.set(el, instances);
         } catch (e) {
             console.warn('[AnimationService] data-effects parse error on element:', el, e);
         }
@@ -503,8 +509,9 @@ export async function scanAndApplyEffects(root) {
 export function cleanupEffects(root) {
     const elements = (root || document).querySelectorAll('[data-effects]');
     for (const el of elements) {
-        const inst = _activeEffects.get(el);
-        if (inst?.cleanup) { inst.cleanup(); _activeEffects.delete(el); }
+        const instances = _activeEffects.get(el) || [];
+        for (const inst of instances) if (inst?.cleanup) inst.cleanup();
+        _activeEffects.delete(el);
     }
 }
 

package/www/node_modules/@gokturk413/web-component-designer-visualization-addons/dist/helpers/BindingsHelper.js

@@ -698,6 +698,7 @@ export class BindingsHelper {
         let valuesObject = new Array(signals.length);
         for (let i = 0; i < signals.length; i++) {
             const s = signals[i];
+            if (s == null) continue; // ?prop resolved to undefined — skip, re-apply fires when property changes
             if (s[0] === '?') {
                 if (root) {
                     const nm = s.substring(1);