iobroker.mywebui 1.37.71 → 1.37.73

package/io-package.json

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

package/package.json

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

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

@@ -866,18 +866,39 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             const block = document.createElement('div');
             block.style.cssText = 'border:2px solid #c8d6e0;border-radius:5px;padding:8px;margin-bottom:10px;background:#f7fafc;';
 
-            // Header: "Animation #N" + delete button
+            // Collapsible body — collapsed by default
+            const body = document.createElement('div');
+            body.style.display = 'none';
+
+            // Header: toggle arrow + "Animation #N (effect)" + delete button
             const hdr = document.createElement('div');
-            hdr.style.cssText = 'display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;';
+            hdr.style.cssText = 'display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none;';
+            const hdrLeft = document.createElement('div');
+            hdrLeft.style.cssText = 'display:flex;align-items:center;gap:5px;';
+            const arrow = document.createElement('span');
+            arrow.textContent = '▶';
+            arrow.style.cssText = 'font-size:9px;color:#3a6a8a;transition:transform 0.15s;';
             const hdrTitle = document.createElement('span');
-            hdrTitle.textContent = `Animation #${index + 1}`;
+            const effectLabel = cfg.effect || 'none';
+            hdrTitle.textContent = `#${index + 1} — ${effectLabel}`;
             hdrTitle.style.cssText = 'font-size:12px;font-weight:700;color:#3a6a8a;';
+            hdrLeft.appendChild(arrow); hdrLeft.appendChild(hdrTitle);
             const delBtn = document.createElement('button');
-            delBtn.textContent = '✕ Remove';
-            delBtn.style.cssText = 'font-size:10px;padding:2px 6px;cursor:pointer;border:1px solid #c66;border-radius:3px;background:#fff;color:#c33;';
-            delBtn.onclick = () => { cfgList.splice(index, 1); saveAndRefresh(); };
-            hdr.appendChild(hdrTitle); hdr.appendChild(delBtn);
+            delBtn.textContent = '✕';
+            delBtn.title = 'Remove animation';
+            delBtn.style.cssText = 'font-size:10px;padding:1px 5px;cursor:pointer;border:1px solid #c66;border-radius:3px;background:#fff;color:#c33;';
+            delBtn.onclick = (e) => { e.stopPropagation(); cfgList.splice(index, 1); saveAndRefresh(); };
+            hdr.appendChild(hdrLeft); hdr.appendChild(delBtn);
+
+            hdr.onclick = () => {
+                const collapsed = body.style.display === 'none';
+                body.style.display = collapsed ? '' : 'none';
+                arrow.style.transform = collapsed ? 'rotate(90deg)' : '';
+                hdr.style.marginBottom = collapsed ? '8px' : '0';
+            };
+
             block.appendChild(hdr);
+            block.appendChild(body);
 
             const sec = (title) => {
                 const d = document.createElement('div');
@@ -889,8 +910,8 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 ['','— none —'],['opacity','Opacity'],['rotation','Rotation'],['scale','Scale'],
                 ['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']
+                ['skew','Skew'],['fill','Fill (SVG)'],['color','Color (HTML text)'],['backgroundColor','Background Color (HTML)'],
+                ['transform','Transform (CSS)'],['svg','SVG Attribute'],['morphSVG','MorphSVG'],['motionPath','Motion Path']
             ], cfg.effect || '', save);
 
             const svgAttrSel = mkSel([
@@ -950,7 +971,7 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                     out.transformOriginX = originXInp.value;
                     out.transformOriginY = originYInp.value;
                 }
-                if (e === 'fill' || e === 'svg') {
+                if (e === 'fill' || e === 'color' || e === 'backgroundColor' || e === 'svg') {
                     if (fillFromInp.value) out.fillColorFrom = fillFromInp.value;
                     if (fillToInp.value) out.fillColorTo = fillToInp.value;
                 }
@@ -966,51 +987,52 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 return out;
             };
 
-            // Build block DOM
-            block.appendChild(sec('Effect'));
-            block.appendChild(mkField('Type', 'effect', effectSel, cfg));
+            // ── All content goes into collapsible body ──
+            body.appendChild(sec('Effect'));
+            body.appendChild(mkField('Type', 'effect', effectSel, cfg));
 
             const svgAttrRow = mkField('SVG Attr', 'svgAttr', svgAttrSel, cfg);
             svgAttrRow.style.display = cfg.effect === 'svg' ? '' : 'none';
-            block.appendChild(svgAttrRow);
+            body.appendChild(svgAttrRow);
             effectSel.addEventListener('change', () => { svgAttrRow.style.display = effectSel.value === 'svg' ? '' : 'none'; });
 
-            block.appendChild(mkField('Value From', 'valueFrom', valueFromInp, cfg));
-            block.appendChild(mkField('Value To', 'valueTo', valueToInp, cfg));
+            body.appendChild(mkField('Value From', 'valueFrom', valueFromInp, cfg));
+            body.appendChild(mkField('Value To', 'valueTo', valueToInp, cfg));
 
             const colorRows = document.createElement('div');
-            colorRows.style.display = (cfg.effect === 'fill' || cfg.effect === 'svg') ? '' : 'none';
+            const isColorEffect = e => ['fill','color','backgroundColor','svg'].includes(e);
+            colorRows.style.display = isColorEffect(cfg.effect) ? '' : 'none';
             colorRows.appendChild(mkField('Color From', 'fillColorFrom', fillFromInp, cfg));
             colorRows.appendChild(mkField('Color To', 'fillColorTo', fillToInp, cfg));
-            block.appendChild(colorRows);
-            effectSel.addEventListener('change', () => { colorRows.style.display = (effectSel.value === 'fill' || effectSel.value === 'svg') ? '' : 'none'; });
+            body.appendChild(colorRows);
+            effectSel.addEventListener('change', () => { colorRows.style.display = isColorEffect(effectSel.value) ? '' : 'none'; });
 
             const motionRows = document.createElement('div');
             motionRows.style.display = cfg.effect === 'motionPath' ? '' : 'none';
             motionRows.appendChild(mkField('Path ID', 'pathId', pathIdInp, cfg));
             motionRows.appendChild(alignToPathChk);
             motionRows.appendChild(orientToPathChk);
-            block.appendChild(motionRows);
+            body.appendChild(motionRows);
             effectSel.addEventListener('change', () => { motionRows.style.display = effectSel.value === 'motionPath' ? '' : 'none'; });
 
-            block.appendChild(sec('Timing'));
-            block.appendChild(mkField('Duration (s)', 'duration', durationInp, cfg));
-            block.appendChild(mkField('Ease', 'ease', easeSel, cfg));
-            block.appendChild(mkField('Repeat', 'repeat', repeatInp, cfg));
-            block.appendChild(yoyoChk);
+            body.appendChild(sec('Timing'));
+            body.appendChild(mkField('Duration (s)', 'duration', durationInp, cfg));
+            body.appendChild(mkField('Ease', 'ease', easeSel, cfg));
+            body.appendChild(mkField('Repeat', 'repeat', repeatInp, cfg));
+            body.appendChild(yoyoChk);
 
             const originRows = document.createElement('div');
             originRows.style.display = (cfg.effect === 'rotation' || cfg.effect === 'scale') ? '' : 'none';
             originRows.appendChild(sec('Transform Origin'));
             originRows.appendChild(mkField('Origin X (%)', 'transformOriginX', originXInp, cfg));
             originRows.appendChild(mkField('Origin Y (%)', 'transformOriginY', originYInp, cfg));
-            block.appendChild(originRows);
+            body.appendChild(originRows);
             effectSel.addEventListener('change', () => { originRows.style.display = (effectSel.value === 'rotation' || effectSel.value === 'scale') ? '' : 'none'; });
 
-            block.appendChild(sec('Controls (OID triggers)'));
-            block.appendChild(playCtrl); block.appendChild(pauseCtrl);
-            block.appendChild(resumeCtrl); block.appendChild(stopCtrl);
-            block.appendChild(reverseCtrl);
+            body.appendChild(sec('Controls (OID triggers)'));
+            body.appendChild(playCtrl); body.appendChild(pauseCtrl);
+            body.appendChild(resumeCtrl); body.appendChild(stopCtrl);
+            body.appendChild(reverseCtrl);
 
             return block;
         };

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

@@ -137,9 +137,16 @@ function buildTweenConfig(cfg, value) {
             break;
         }
         case 'fill':
-            config.fill = typeof normalVal === 'boolean'
-                ? (normalVal ? (cfg.fillColorTo || '#ff0000') : (cfg.fillColorFrom || '#000000'))
-                : (cfg.fillColorTo || '#ff0000');
+            config.fill = cfg.fillColorTo || '#ff0000';
+            if (cfg.fillColorFrom) config.startAt = { fill: cfg.fillColorFrom };
+            break;
+        case 'color':
+            config.color = cfg.fillColorTo || '#ff0000';
+            if (cfg.fillColorFrom) config.startAt = { color: cfg.fillColorFrom };
+            break;
+        case 'backgroundColor':
+            config.backgroundColor = cfg.fillColorTo || '#ff0000';
+            if (cfg.fillColorFrom) config.startAt = { backgroundColor: cfg.fillColorFrom };
             break;
         case 'transform':
             config.transform = cfg.valueTo || String(value);