iobroker.mywebui 1.38.2 → 1.38.4

package/io-package.json

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

package/package.json

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

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

@@ -1229,7 +1229,9 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 ['slideInTop','Slide In Top'],['slideInBottom','Slide In Bottom'],
                 ['bounce','Bounce'],['pulse','Pulse'],['shake','Shake'],
                 ['glow','Glow'],['blur','Blur'],['spin','Spin'],['flip','Flip 3D'],
-                ['pulseRing','Pulse Ring']
+                ['pulseRing','Pulse Ring'],
+                ['flowDash','Flow Dash (SVG)'],
+                ['pathFlow','Path Flow Shapes (SVG)']
             ], cfg.type || '');
 
             const triggerSel = sel([
@@ -1252,6 +1254,19 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             const blurInp        = inp(cfg.blurAmount || 5, 'number');
             const pulseScaleInp  = inp(cfg.scale ?? 2.5, 'number');
             const pulseOpacityInp= inp(cfg.opacityFrom ?? 1, 'number');
+            // flowDash inputs
+            const flowDashLenInp = inp(cfg.dashLen ?? 10, 'number');
+            const flowGapLenInp  = inp(cfg.gapLen ?? 20, 'number');
+            const flowColorInp   = inp(cfg.color || '#0066ff', 'color');
+            const flowDirSel     = sel([['normal','Forward'],['reverse','Reverse']], cfg.direction || 'normal');
+            // pathFlow inputs
+            const pathFlowShapeSel = sel([
+                ['triangle','Triangle'],['arrow','Arrow'],['circle','Circle'],
+                ['square','Square'],['star','Star'],['dash','Dash']
+            ], cfg.shape || 'triangle');
+            const pathFlowCountInp = inp(cfg.count ?? 5, 'number');
+            const pathFlowSizeInp  = inp(cfg.size ?? 8, 'number');
+            const pathFlowColorInp = inp(cfg.color || '#0066ff', 'color');
 
             body.appendChild(field('Type', 'type', typeSel));
             body.appendChild(field('Trigger', null, triggerSel));
@@ -1300,6 +1315,26 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             body.appendChild(pulseRingSection);
             typeSel.addEventListener('change', () => { pulseRingSection.style.display = typeSel.value === 'pulseRing' ? '' : 'none'; });
 
+            // Flow Dash section
+            const flowDashSection = document.createElement('div');
+            flowDashSection.style.display = cfg.type === 'flowDash' ? '' : 'none';
+            flowDashSection.appendChild(field('Dash Length', 'dashLen', flowDashLenInp));
+            flowDashSection.appendChild(field('Gap Length', 'gapLen', flowGapLenInp));
+            flowDashSection.appendChild(field('Color', 'color', flowColorInp));
+            flowDashSection.appendChild(field('Direction', 'direction', flowDirSel));
+            body.appendChild(flowDashSection);
+            typeSel.addEventListener('change', () => { flowDashSection.style.display = typeSel.value === 'flowDash' ? '' : 'none'; });
+
+            // Path Flow section
+            const pathFlowSection = document.createElement('div');
+            pathFlowSection.style.display = cfg.type === 'pathFlow' ? '' : 'none';
+            pathFlowSection.appendChild(field('Shape', 'shape', pathFlowShapeSel));
+            pathFlowSection.appendChild(field('Count', 'count', pathFlowCountInp));
+            pathFlowSection.appendChild(field('Size', 'size', pathFlowSizeInp));
+            pathFlowSection.appendChild(field('Color', 'color', pathFlowColorInp));
+            body.appendChild(pathFlowSection);
+            typeSel.addEventListener('change', () => { pathFlowSection.style.display = typeSel.value === 'pathFlow' ? '' : 'none'; });
+
             // _collect: read current UI values back into a plain object
             cfg._collect = () => {
                 const out = {};
@@ -1313,6 +1348,8 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 if (typeSel.value === 'glow') { out.glowColor = glowColorInp.value; out.glowSize = parseInt(glowSizeInp.value) || 10; }
                 if (typeSel.value === 'blur') out.blurAmount = parseInt(blurInp.value) || 5;
                 if (typeSel.value === 'pulseRing') { out.scale = parseFloat(pulseScaleInp.value) || 2.5; out.opacityFrom = parseFloat(pulseOpacityInp.value) ?? 1; }
+                if (typeSel.value === 'flowDash') { out.dashLen = parseFloat(flowDashLenInp.value) || 10; out.gapLen = parseFloat(flowGapLenInp.value) || 20; out.color = flowColorInp.value; out.direction = flowDirSel.value; }
+                if (typeSel.value === 'pathFlow') { out.shape = pathFlowShapeSel.value; out.count = parseInt(pathFlowCountInp.value) || 5; out.size = parseFloat(pathFlowSizeInp.value) || 8; out.color = pathFlowColorInp.value; }
                 for (const [k, v] of Object.entries(cfg)) { if (k.endsWith('_bind') && v) out[k] = v; }
                 return out;
             };

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

@@ -58,6 +58,13 @@ function svgShapeToPathData(el) {
         const h = parseFloat(el.getAttribute('height') || 0);
         return `M ${x},${y} H ${x+w} V ${y+h} H ${x} Z`;
     }
+    if (tag === 'line') {
+        const x1 = el.getAttribute('x1') || 0;
+        const y1 = el.getAttribute('y1') || 0;
+        const x2 = el.getAttribute('x2') || 0;
+        const y2 = el.getAttribute('y2') || 0;
+        return `M ${x1},${y1} L ${x2},${y2}`;
+    }
     if (tag === 'polyline' || tag === 'polygon') {
         const pts = (el.getAttribute('points') || '').trim().split(/[\s,]+/);
         if (pts.length < 2) return null;
@@ -663,10 +670,87 @@ async function _applyEffect(el, cfg) {
                     { scale, opacity: 0, duration: dur, ease: ringEase, repeat: pulseRepeat, delay, transformOrigin: '50% 50%' }
                 ); break;
             }
+            case 'flowDash': {
+                const dashLen = parseFloat(cfg.dashLen) || 10;
+                const gapLen  = parseFloat(cfg.gapLen)  || 20;
+                const flowColor = cfg.color || null;
+                const flowDir = cfg.direction === 'reverse' ? 'reverse' : 'normal';
+                el.style.strokeDasharray = `${dashLen} ${gapLen}`;
+                if (flowColor) el.style.stroke = flowColor;
+                _flowDashAnim = el.animate(
+                    [{ strokeDashoffset: dashLen + gapLen }, { strokeDashoffset: 0 }],
+                    { duration: dur * 1000, iterations: Infinity, easing: 'linear', direction: flowDir, delay: delay * 1000 }
+                );
+                break;
+            }
+            case 'pathFlow': {
+                const count     = parseInt(cfg.count)  || 5;
+                const shapeType = cfg.shape            || 'triangle';
+                const flowColor = cfg.color            || '#0066ff';
+                const size      = parseFloat(cfg.size) || 8;
+                const svg       = el.ownerSVGElement || el.closest('svg');
+                if (!svg) break;
+                // Convert line/polyline/circle/rect → <path> so GSAP MotionPath works
+                const { pathEl: motionPathEl, tempEl: tempMotionEl } = ensurePathEl(el);
+                if (tempMotionEl) _pathFlowEls.push(tempMotionEl);
+                const svgNS = 'http://www.w3.org/2000/svg';
+                const makeShape = () => {
+                    let s;
+                    switch (shapeType) {
+                        case 'triangle':
+                            s = document.createElementNS(svgNS, 'polygon');
+                            s.setAttribute('points', `${size},0 0,${-size/2} 0,${size/2}`);
+                            break;
+                        case 'arrow':
+                            s = document.createElementNS(svgNS, 'path');
+                            s.setAttribute('d', `M${size},0 L0,${-size/2} L${size*0.35},0 L0,${size/2} Z`);
+                            break;
+                        case 'circle':
+                            s = document.createElementNS(svgNS, 'circle');
+                            s.setAttribute('r', String(size / 2));
+                            break;
+                        case 'square':
+                            s = document.createElementNS(svgNS, 'rect');
+                            s.setAttribute('width', String(size)); s.setAttribute('height', String(size));
+                            s.setAttribute('x', String(-size/2)); s.setAttribute('y', String(-size/2));
+                            break;
+                        case 'star': {
+                            s = document.createElementNS(svgNS, 'polygon');
+                            const pts = [];
+                            for (let i = 0; i < 10; i++) {
+                                const r = i % 2 === 0 ? size : size * 0.4;
+                                const a = (i * Math.PI / 5) - Math.PI / 2;
+                                pts.push(`${r * Math.cos(a)},${r * Math.sin(a)}`);
+                            }
+                            s.setAttribute('points', pts.join(' '));
+                            break;
+                        }
+                        default:
+                            s = document.createElementNS(svgNS, 'rect');
+                            s.setAttribute('width', String(size * 2)); s.setAttribute('height', String(size / 3));
+                            s.setAttribute('x', String(-size)); s.setAttribute('y', String(-size / 6));
+                            break;
+                    }
+                    s.setAttribute('fill', flowColor);
+                    svg.appendChild(s);
+                    _pathFlowEls.push(s);
+                    return s;
+                };
+                for (let i = 0; i < count; i++) {
+                    const shape = makeShape();
+                    gsap.to(shape, {
+                        motionPath: { path: motionPathEl, align: motionPathEl, autoRotate: true, alignOrigin: [0.5, 0.5], start: i / count, end: (i / count) + 1 },
+                        duration: dur, repeat: -1, ease: 'none', delay: delay
+                    });
+                }
+                break;
+            }
         }
     };
 
     let _hoverFn = null, _clickFn = null;
+    let _flowDashAnim = null;
+    const _pathFlowEls = [];
     const effectSubs = [];
 
     if (cfg.trigger === 'load') {
@@ -701,5 +785,7 @@ async function _applyEffect(el, cfg) {
         if (_hoverFn) el.removeEventListener('mouseenter', _hoverFn);
         if (_clickFn) el.removeEventListener('click', _clickFn);
         _cleanupSubs(effectSubs);
+        if (_flowDashAnim) _flowDashAnim.cancel();
+        for (const e of _pathFlowEls) { gsap.killTweensOf(e); e.remove(); }
     };
 }