iobroker.mywebui 1.37.70 → 1.37.72

package/io-package.json

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

package/package.json

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

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

@@ -889,8 +889,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 +950,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;
                 }
@@ -979,11 +979,12 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             block.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'; });
+            effectSel.addEventListener('change', () => { colorRows.style.display = isColorEffect(effectSel.value) ? '' : 'none'; });
 
             const motionRows = document.createElement('div');
             motionRows.style.display = cfg.effect === 'motionPath' ? '' : 'none';

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

@@ -87,10 +87,12 @@ function buildTweenConfig(cfg, value) {
         case 'scale':
             config.scale = cfg.valueTo != null ? parseFloat(cfg.valueTo)
                 : (typeof normalVal === 'boolean' ? (normalVal ? 1.5 : 1) : numVal);
+            if (cfg.valueFrom != null) config.startAt = { scale: parseFloat(cfg.valueFrom) };
             break;
         case 'opacity':
             config.opacity = cfg.valueTo != null ? parseFloat(cfg.valueTo)
                 : (typeof normalVal === 'boolean' ? (normalVal ? 1 : 0) : numVal);
+            if (cfg.valueFrom != null) config.startAt = { opacity: parseFloat(cfg.valueFrom) };
             break;
         case 'translateX':
             config.x = cfg.valueTo != null ? parseFloat(cfg.valueTo)
@@ -135,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);
@@ -265,6 +274,8 @@ class AnimationInstance {
     _play() {
         const gsap = window.gsap;
         if (!gsap) return;
+        // If element is display:none, make it visible so GSAP can animate it
+        if (this.element.style.display === 'none') this.element.style.display = '';
         if (this.tween) this.tween.kill();
         const effect = this.cfg.effect;