OpenEMS · da-Kai · Oct 20, 2025 · Oct 22, 2025 · Oct 22, 2025 · Oct 22, 2025
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -4,7 +4,6 @@
   "license": "AGPL-3.0",
   "private": true,
   "dependencies": {
-    "@angular/animations": "20.3.6",
     "@angular/common": "20.3.6",
     "@angular/core": "20.3.6",
     "@angular/forms": "20.3.6",

diff --git a/ui/src/app/edge/live/energymonitor/chart/animation.scss b/ui/src/app/edge/live/energymonitor/chart/animation.scss
@@ -0,0 +1,83 @@
+$animation-duration: 600ms;
+$opacity-low: 0.1;
+$opacity-medium: 0.4;
+
+%provide-power-show {
+    opacity: $opacity-medium;
+    transition: opacity 0ms none, transform 0ms none;
+}
+
+%provide-power-hide {
+    opacity: $opacity-low;
+    transition: opacity $animation-duration ease-in, transform $animation-duration ease-in;
+}
+
+%consume-power-show {
+    opacity: $opacity-low;
+    transition: opacity 0ms none, transform 0ms none;
+}
+
+%consume-power-hide {
+    opacity: $opacity-medium;
+    transition: opacity $animation-duration ease-out, transform $animation-duration ease-out;
+}
+
+.grid-buy-show {
+    @extend %provide-power-show; 
+    transform: translateX(0%);
+}
+
+.grid-buy-hide {
+    @extend %provide-power-hide;
+    transform: translateX(17%);
+}
+
+.grid-sell-show {
+    @extend %consume-power-show;
+    transform: translateX(0%);
+}
+
+.grid-sell-hide {
+    @extend %consume-power-hide;
+    transform: translateX(-17%);
+}
+
+.consumption-show {
+    @extend %consume-power-show;
+    transform: translateX(0%);
+}
+
+.consumption-hide {
+    @extend %consume-power-hide;
+    transform: translateX(17%);
+}
+
+.production-show {
+    @extend %provide-power-show;
+    transform: translateY(0%);
+}
+
+.production-hide {
+    @extend %provide-power-hide;
+    transform: translateY(17%);
+}
+
+.storage-discharge-show {
+    @extend %provide-power-show;
+    transform: translateY(0);
+}
+
+.storage-discharge-hide {
+    @extend %provide-power-hide;
+    transform: translateY(-17%);
+}
+
+.storage-charge-show {
+    @extend %consume-power-show; 
+    transform: translateY(0);
+}
+
+.storage-charge-hide {
+    @extend %consume-power-hide;
+    transform: translateY(17%);
+}
diff --git a/ui/src/app/edge/live/energymonitor/chart/section/abstractsection.component.ts b/ui/src/app/edge/live/energymonitor/chart/section/abstractsection.component.ts
@@ -127,7 +127,6 @@ export abstract class AbstractSection {
     public name: string = "";
     public sectionId: string = "";
     public isEnabled: boolean = false;
-    public animationSpeed: number = 500;
 
     protected valueText: string = "";
     protected innerRadius: number = 0;

diff --git a/ui/src/app/edge/live/energymonitor/chart/section/animation.service.ts b/ui/src/app/edge/live/energymonitor/chart/section/animation.service.ts
@@ -0,0 +1,21 @@
+import { Injectable } from "@angular/core";
+import { BehaviorSubject, interval, Observable } from "rxjs";
+
+@Injectable({
+    providedIn: "root",
+})
+export class AnimationService {
+    public readonly toggleAnimation$: Observable<boolean>;
+
+    private readonly animationSpeed = 605;
+    private toggleAnimSubject = new BehaviorSubject(true);
+    private value: boolean = true;
+
+    constructor() {
+        this.toggleAnimation$ = this.toggleAnimSubject.asObservable();
+        interval(this.animationSpeed).subscribe(() => {
+            this.value = !this.value;
+            this.toggleAnimSubject.next(this.value);
+        });
+    }
+}
diff --git a/ui/src/app/edge/live/energymonitor/chart/section/consumption.component.html b/ui/src/app/edge/live/energymonitor/chart/section/consumption.component.html
@@ -1,38 +1,39 @@
 <svg:path [attr.d]="outlinePath" fill="var(--ion-color-light)" stroke="var(--ion-color-medium-soft)"></svg:path>
-  @if (isEnabled) {
+@if (isEnabled) {
     <svg:path [attr.d]="valuePath" fill="var(--ion-color-warning)" stroke="var(--ion-color-warning)">
-      </svg:path>
-    }
-    @if (isEnabled && energyFlow) {
-      <svg:g>
+    </svg:path>
+}
+@if (isEnabled && energyFlow) {
+    <svg:g>
         <svg:defs>
-          <svg:linearGradient [attr.id]="sectionId" [attr.x1]="energyFlow.gradient.x1" [attr.y1]="energyFlow.gradient.y1"
-            [attr.x2]="energyFlow.gradient.x2" [attr.y2]="energyFlow.gradient.y2">
-            <svg:stop offset="0%" stop-color="var(--ion-item-background)" />
-            <svg:stop offset="100%" stop-color="var(--ion-color-warning)" />
+            <svg:linearGradient [attr.id]="sectionId" [attr.x1]="energyFlow.gradient.x1"
+                [attr.y1]="energyFlow.gradient.y1" [attr.x2]="energyFlow.gradient.x2"
+                [attr.y2]="energyFlow.gradient.y2">
+                <svg:stop offset="0%" stop-color="var(--ion-item-background)" />
+                <svg:stop offset="100%" stop-color="var(--ion-color-warning)" />
             </svg:linearGradient>
-            </svg:defs>
-            <svg:polygon [attr.points]="energyFlow.points" attr.fill="{{ fillRef }}" />
-            <svg:polygon [@Consumption]="stateName" [attr.points]="energyFlow.animationPoints"
-              style="fill: var(--ion-item-background)" />
-            </svg:g>
-          }
-          @if (isEnabled && squarePosition && square) {
-            <svg:g
-              attr.transform="translate({{squarePosition.x}},{{squarePosition.y}})">
-              <svg:text [attr.x]="square.valueText.x" [attr.y]="square.valueText.y" [attr.text-anchor]="square.valueText.anchor"
-                font-family="sans-serif" font-size="square.valueText.fontsize" fill="var(--ion-text-color)">
-                <!-- Adjusting the color of the Text to be flexiable with Light and Dark mode -->
-                @if (valueText) {
-                  <ng-container>{{valueText}}</ng-container>
-                } @else {
-                  <ng-template [ngTemplateOutlet]="no_text"></ng-template>
-                }
-                <ng-template #no_text>-</ng-template>
-                </svg:text>
-                <svg:use style="color: var(--ion-color-warning)" [attr.x]="square.image.x" [attr.y]="square.image.y"
-                  [attr.width]="square.image.length" [attr.height]="square.image.length"
-                  [attr.href]="square.image.image + '#root'">
-                  </svg:use>
-                  </svg:g>
-                }
+        </svg:defs>
+        <svg:polygon [attr.points]="energyFlow.points" attr.fill="{{ fillRef }}" />
+        <svg:polygon [class]="getAnimationClass()" [attr.points]="energyFlow.animationPoints"
+            style="fill: var(--ion-item-background)" />
+    </svg:g>
+}
+@if (isEnabled && squarePosition && square) {
+    <svg:g attr.transform="translate({{squarePosition.x}},{{squarePosition.y}})">
+        <svg:text [attr.x]="square.valueText.x" [attr.y]="square.valueText.y"
+            [attr.text-anchor]="square.valueText.anchor" font-family="sans-serif" font-size="square.valueText.fontsize"
+            fill="var(--ion-text-color)">
+            <!-- Adjusting the color of the Text to be flexiable with Light and Dark mode -->
+            @if (valueText) {
+                <ng-container>{{valueText}}</ng-container>
+            } @else {
+                <ng-template [ngTemplateOutlet]="no_text"></ng-template>
+            }
+            <ng-template #no_text>-</ng-template>
+        </svg:text>
+        <svg:use style="color: var(--ion-color-warning)" [attr.x]="square.image.x" [attr.y]="square.image.y"
+            [attr.width]="square.image.length" [attr.height]="square.image.length"
+            [attr.href]="square.image.image + '#root'">
+        </svg:use>
+    </svg:g>
+}
diff --git a/ui/src/app/edge/live/energymonitor/chart/section/consumption.component.ts b/ui/src/app/edge/live/energymonitor/chart/section/consumption.component.ts
@@ -1,45 +1,33 @@
 // @ts-strict-ignore
-import { animate, state, style, transition, trigger } from "@angular/animations";
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { TranslateService } from "@ngx-translate/core";
+import { Subscription } from "rxjs";
 import { UnitvaluePipe } from "src/app/shared/pipe/unitvalue/unitvalue.pipe";
 import { Service, Utils } from "../../../../../shared/shared";
 import { DefaultTypes } from "../../../../../shared/type/defaulttypes";
 import { AbstractSection, EnergyFlow, Ratio, SvgEnergyFlow, SvgSquare, SvgSquarePosition } from "./abstractsection.component";
+import { AnimationService } from "./animation.service";
 
 @Component({
     selector: "[consumptionsection]",
     templateUrl: "./consumption.component.html",
-    animations: [
-        trigger("Consumption", [
-            state("show", style({
-                opacity: 0.1,
-                transform: "translateX(0%)",
-            })),
-            state("hide", style({
-                opacity: 0.6,
-                transform: "translateX(17%)",
-            })),
-            transition("show => hide", animate("650ms ease-out")),
-            transition("hide => show", animate("0ms ease-in")),
-        ]),
-    ],
+    styleUrls: ["../animation.scss"],
     standalone: false,
 })
 export class ConsumptionSectionComponent extends AbstractSection implements OnInit, OnDestroy {
 
     private unitpipe: UnitvaluePipe;
     private showAnimation: boolean = false;
-    private animationTrigger: boolean = false;
     // animation variable to stop animation on destroy
-    private startAnimation = null;
+    private subShow?: Subscription;
 
     constructor(
         unitpipe: UnitvaluePipe,
         translate: TranslateService,
         service: Service,
+        private animationService: AnimationService,
     ) {
-        super("GENERAL.CONSUMPTION", "right", "#FDC507", translate, service, "Consumption");
+        super("GENERAL.CONSUMPTION", "right", "var(--ion-color-warning)", translate, service, "Consumption");
         this.unitpipe = unitpipe;
     }
 
@@ -49,17 +37,17 @@ export class ConsumptionSectionComponent extends AbstractSection implements OnIn
 
     ngOnInit() {
         this.adjustFillRefbyBrowser();
+        this.subShow = this.animationService.toggleAnimation$.subscribe((show) => {
+            this.showAnimation = !show;
+        });
     }
 
-    toggleAnimation() {
-        this.startAnimation = setInterval(() => {
-            this.showAnimation = !this.showAnimation;
-        }, this.animationSpeed);
-        this.animationTrigger = true;
+    getAnimationClass(): string {
+        return this.showAnimation ? "consumption-show" : "consumption-hide";
     }
 
     ngOnDestroy() {
-        clearInterval(this.startAnimation);
+        this.subShow?.unsubscribe();
     }
 
     protected getStartAngle(): number {
@@ -78,9 +66,6 @@ export class ConsumptionSectionComponent extends AbstractSection implements OnIn
         let arrowIndicate: number;
         // only reacts to kW values (50 W => 0.1 kW rounded)
         if (sum.consumption.activePower > 49) {
-            if (!this.animationTrigger) {
-                this.toggleAnimation();
-            }
             arrowIndicate = Utils.divideSafely(sum.consumption.activePower, sum.system.totalPower);
         } else {
             arrowIndicate = 0;

diff --git a/ui/src/app/edge/live/energymonitor/chart/section/grid.component.html b/ui/src/app/edge/live/energymonitor/chart/section/grid.component.html
@@ -1,46 +1,47 @@
 <svg:path [attr.d]="outlinePath" fill="var(--ion-color-light)" stroke="var(--ion-color-medium-soft)"></svg:path>
-  @if (isEnabled) {
+@if (isEnabled) {
     <svg:path [attr.d]="valuePath" fill="var(--ion-color-dark)" stroke="var(--ion-color-dark)"></svg:path>
-    }
-    @if (isEnabled && energyFlow) {
-      <svg:g>
+}
+@if (isEnabled && energyFlow) {
+    <svg:g>
         <svg:defs>
-          <svg:linearGradient [attr.id]="sectionId" [attr.x1]="energyFlow.gradient.x1" [attr.y1]="energyFlow.gradient.y1"
-            [attr.x2]="energyFlow.gradient.x2" [attr.y2]="energyFlow.gradient.y2">
-            <svg:stop offset="0%" stop-color="var(--ion-item-background)" />
-            <svg:stop offset="100%" stop-color="var(--ion-color-dark)" />
+            <svg:linearGradient [attr.id]="sectionId" [attr.x1]="energyFlow.gradient.x1"
+                [attr.y1]="energyFlow.gradient.y1" [attr.x2]="energyFlow.gradient.x2"
+                [attr.y2]="energyFlow.gradient.y2">
+                <svg:stop offset="0%" stop-color="var(--ion-item-background)" />
+                <svg:stop offset="100%" stop-color="var(--ion-color-dark)" />
             </svg:linearGradient>
-            </svg:defs>
-            <svg:polygon [attr.points]="energyFlow.points" attr.fill="{{ fillRef }}" />
-            @if (buyAnimationTrigger) {
-              <ng-container>
-                <svg:polygon [@GridBuy]="stateNameBuy" [attr.points]="energyFlow.animationPoints"
-                  style="fill: var(--ion-item-background)" />
-              </ng-container>
+        </svg:defs>
+        <svg:polygon [attr.points]="energyFlow.points" attr.fill="{{ fillRef }}" />
+        @if (buyAnimationTrigger) {
+            <ng-container>
+                <svg:polygon [class]="getBuyAnimationClass()" [attr.points]="energyFlow.animationPoints"
+                    style="fill: var(--ion-item-background)" />
+            </ng-container>
+        }
+        @if (sellAnimationTrigger) {
+            <ng-container>
+                <svg:polygon [class]="getSellAnimationClass()" [attr.points]="energyFlow.animationPoints"
+                    style="fill: var(--ion-item-background)" />
+            </ng-container>
+        }
+    </svg:g>
+}
+@if (isEnabled && squarePosition && square) {
+    <svg:g attr.transform="translate({{squarePosition.x}},{{squarePosition.y}})">
+        <svg:text [attr.x]="square.valueText.x" [attr.y]="square.valueText.y"
+            [attr.text-anchor]="square.valueText.anchor" font-family="sans-serif" font-size="square.valueText.fontsize"
+            fill="var(--ion-text-color)">
+            @if (valueText) {
+                <ng-container>{{valueText}}</ng-container>
+            } @else {
+                <ng-template [ngTemplateOutlet]="no_text"></ng-template>
             }
-            @if (sellAnimationTrigger) {
-              <ng-container>
-                <svg:polygon [@GridSell]="stateNameSell" [attr.points]="energyFlow.animationPoints"
-                  style="fill: var(--ion-item-background)" />
-              </ng-container>
-            }
-            </svg:g>
-          }
-          @if (isEnabled && squarePosition && square) {
-            <svg:g
-              attr.transform="translate({{squarePosition.x}},{{squarePosition.y}})">
-              <svg:text [attr.x]="square.valueText.x" [attr.y]="square.valueText.y" [attr.text-anchor]="square.valueText.anchor"
-                font-family="sans-serif" font-size="square.valueText.fontsize" fill="var(--ion-text-color)">
-                @if (valueText) {
-                  <ng-container>{{valueText}}</ng-container>
-                } @else {
-                  <ng-template [ngTemplateOutlet]="no_text"></ng-template>
-                }
-                <ng-template #no_text>-</ng-template>
-                </svg:text>
-                <svg:use style="color: var(--ion-color-dark)" [attr.x]="square.image.x" [attr.y]="square.image.y"
-                  [attr.width]="square.image.length" [attr.height]="square.image.length"
-                  [attr.href]="square.image.image + '#root'">
-                  </svg:use>
-                  </svg:g>
-                }
+            <ng-template #no_text>-</ng-template>
+        </svg:text>
+        <svg:use style="color: var(--ion-color-dark)" [attr.x]="square.image.x" [attr.y]="square.image.y"
+            [attr.width]="square.image.length" [attr.height]="square.image.length"
+            [attr.href]="square.image.image + '#root'">
+        </svg:use>
+    </svg:g>
+}