UI: FlatWidget for Storage

ui/src/app/edge/live/common/storage/storage.component.html

@@ -0,0 +1,23 @@
+<ng-container *ngIf="isInitialized">
+    <oe-flat-widget [img]="storageItem" [title]="'General.storageSystem'| translate" (click)="presentModal()">
+        <ng-container *ngFor="let component of essComponents, let i = index">
+            <ng-container *ngIf="essComponents.length > 1">
+                <oe-flat-widget-line [name]="component.alias">
+                </oe-flat-widget-line>
+            </ng-container>
+            <ng-container *ngIf="checkStateOfCharge(component.id)">
+                <oe-flat-widget-percentagebar [channelAddress]="component.id + '/Soc'">
+                </oe-flat-widget-percentagebar>
+                <oe-flat-widget-line [name]="'General.chargePower' | translate"
+                    [channelAddress]="component.id + '/ActivePower'" [converter]="convertChargePower">
+                </oe-flat-widget-line>
+                <oe-flat-widget-line [name]="'General.dischargePower' | translate"
+                    [channelAddress]="component.id + '/ActivePower'" [converter]="convertDischargePower">
+                </oe-flat-widget-line>
+                <div *ngIf="essComponents.length > 1 && i != (essComponents.length -1)"
+                    style="border-bottom: 1px solid lightgray; width: 110%; margin-top: 2%; margin-bottom: 2%; margin-left: -5%;">
+                </div>
+            </ng-container>
+        </ng-container>
+    </oe-flat-widget>
+</ng-container>

ui/src/app/edge/live/common/storage/storage.component.ts

@@ -0,0 +1,131 @@
+import { ChannelAddress, EdgeConfig } from '../../../../shared/shared';
+import { Component } from '@angular/core';
+import { StorageModalComponent } from './modal/modal.component';
+import { AbstractFlatWidget } from '../../flat/abstract-flat-widget';
+import { CurrentData } from "src/app/shared/shared";
+
+@Component({
+    selector: 'storage',
+    templateUrl: './storage.component.html'
+})
+export class StorageComponent extends AbstractFlatWidget {
+
+    public essComponents: EdgeConfig.Component[] = [];
+    public chargerComponents: EdgeConfig.Component[] = [];
+    public storageItem: string = null;
+    public stateOfCharge: number[] = [];
+
+    protected getChannelAddresses() {
+        let channelAddresses: ChannelAddress[] = [];
+        channelAddresses.push(
+            new ChannelAddress('_sum', 'EssSoc'),
+            new ChannelAddress('_sum', 'EssActivePower'),
+            // channels for modal component, subscribe here for better UX
+            new ChannelAddress('_sum', 'EssActivePowerL1'),
+            new ChannelAddress('_sum', 'EssActivePowerL2'),
+            new ChannelAddress('_sum', 'EssActivePowerL3'),
+            new ChannelAddress('_sum', 'EssCapacity'),
+        )
+        this.chargerComponents = this.config.getComponentsImplementingNature("io.openems.edge.ess.dccharger.api.EssDcCharger").filter(component => component.isEnabled);
+        for (let component of this.chargerComponents) {
+            channelAddresses.push(
+                new ChannelAddress(component.id, 'ActualPower'),
+            )
+        }
+        this.essComponents = this.config.getComponentsImplementingNature("io.openems.edge.ess.api.SymmetricEss").filter(component => !component.factoryId.includes("Ess.Cluster") && component.isEnabled);
+        for (let component of this.essComponents) {
+            channelAddresses.push(
+                new ChannelAddress(component.id, 'Soc'),
+                new ChannelAddress(component.id, 'Capacity'),
+            );
+            if (this.config.factories[component.factoryId].natureIds.includes("io.openems.edge.ess.api.AsymmetricEss")) {
+                channelAddresses.push(
+                    new ChannelAddress(component.id, 'ActivePowerL1'),
+                    new ChannelAddress(component.id, 'ActivePowerL2'),
+                    new ChannelAddress(component.id, 'ActivePowerL3')
+                );
+            }
+        }
+        return channelAddresses
+    }
+    /**
+     * Use 'checkStateOfCharge' to check, if a Storage-System has a State of Charge
+     * 
+     * @param componentID componentID of essComponents
+     * @returns boolean
+     */
+    public checkStateOfCharge(componentID: string): boolean {
+        if (this.stateOfCharge[componentID] != null) {
+            return true;
+        }
+    }
+    protected onCurrentData(currentData: CurrentData) {
+        // Check State_of_Charge for every component of essComponents
+        for (let component of this.essComponents) {
+            this.stateOfCharge[component.id] = currentData.allComponents[component.id + '/Soc'];
+        }
+        // Check total State_of_Charge for dynamical icon in widget-header
+        let soc = currentData.allComponents['_sum' + '/EssSoc'];
+        if (soc < 20) {
+            this.storageItem = 'assets/img/storage_20.png'
+        } else if (soc < 40 || soc == 20) {
+            this.storageItem = 'assets/img/storage_40.png'
+        } else if (soc < 60 || soc == 40) {
+            this.storageItem = 'assets/img/storage_60.png'
+        } else if (soc < 80 || soc == 60) {
+            this.storageItem = 'assets/img/storage_80.png'
+        } else if (soc < 100 || soc == 80) {
+            this.storageItem = 'assets/img/storage_100.png'
+        } else {
+            this.storageItem = 'assets/img/storage_100.png'
+        }
+    }
+    /**
+      * Use 'convertChargePower' to convert/map a value, to be only showed when not negative
+      * 
+      * @param value takes @Input value or channelAddress for chargePower
+      * @returns only positive value
+      */
+    public convertChargePower = (value: any): string => {
+        let thisValue = (value / 1000 * -1).toFixed(1);
+        if (value <= 0) {
+            if (thisValue.endsWith('0')) {
+                return parseInt(thisValue).toString() + ' kW';
+            } else {
+                return thisValue + ' kW';
+            }
+        } else {
+            return '-'
+        }
+    }
+    /**
+     *  Use 'convertDischargePower' to convert/map a value, to be only showed when not negative
+      * 
+      * @param value takes @Input value or channelAddress for dischargePower
+      * @returns only positive value
+      */
+    public convertDischargePower = (value: any): string => {
+        let thisValue = (value / 1000).toFixed(1);
+        if (value > 0) {
+            if (thisValue.endsWith('0')) {
+                return parseInt(thisValue).toString() + ' kW';
+            } else {
+                return thisValue + ' kW';
+            }
+        } else {
+            return '-'
+        }
+    }
+    async presentModal() {
+        const modal = await this.modalController.create({
+            component: StorageModalComponent,
+            componentProps: {
+                edge: this.edge,
+                config: this.config,
+                essComponents: this.essComponents,
+                chargerComponents: this.chargerComponents,
+            }
+        });
+        return await modal.present();
+    }
+}

ui/src/app/edge/live/flat/abstract-flat-widget.ts

@@ -21,7 +21,6 @@ export abstract class AbstractFlatWidget implements OnInit, OnDestroy {
     public config: EdgeConfig = null;
     public component: EdgeConfig.Component = null;
     public stopOnDestroy: Subject<void> = new Subject<void>();
-
     private selector: string = UUID.UUID().toString();
 
     constructor(
@@ -32,8 +31,8 @@ export abstract class AbstractFlatWidget implements OnInit, OnDestroy {
         @Inject(TranslateService) protected translate: TranslateService
     ) {
     }
-
     public ngOnInit() {
+        // this.convert = this.changeWattInKiloWatt;
         this.service.setCurrentComponent('', this.route).then(edge => {
             this.service.getConfig().then(config => {
                 // store important variables publically

ui/src/app/edge/live/flat/flat-widget-line/abstract-flat-widget-line.ts

@@ -28,6 +28,10 @@ export abstract class AbstractFlatWidgetLine implements OnDestroy {
      */
     private selector: string = UUID.UUID().toString();
 
+    /** 
+     * displayName is the displayed @Input value in html
+     */
+    public displayName: string;
     /** 
      * displayValue is the displayed @Input value in html
      */
@@ -42,15 +46,20 @@ export abstract class AbstractFlatWidgetLine implements OnDestroy {
         @Inject(ModalController) protected modalCtrl: ModalController
     ) {
     }
-
+    protected setName(value: any) {
+        this.displayName = value;
+        this.isInitialized = true;
+    }
     protected setValue(value: any) {
-        this.displayValue = this.converter(value);
-
+        if (this.converter != null) {
+            this.displayValue = this.converter(value);
+        } else {
+            this.displayValue = value;
+        }
         // announce initialized
         this.isInitialized = true;
     }
-
-    protected subscribe(channelAddress?: ChannelAddress) {
+    protected subscribe(channelAddress: ChannelAddress) {
         this.service.setCurrentComponent('', this.route).then(edge => {
             this.edge = edge;
 
@@ -62,7 +71,6 @@ export abstract class AbstractFlatWidgetLine implements OnDestroy {
             });
         });
     }
-
     public ngOnDestroy() {
         // Unsubscribe from OpenEMS
         if (this.edge != null) {

ui/src/app/edge/live/flat/flat-widget-line/flat-widget-line.html

@@ -3,7 +3,7 @@
         <tr>
             <!-- Name of Parameter on the left side -->
             <td style="width:65%">
-                <ng-container *ngIf="name">{{ name }}</ng-container>
+                <ng-container *ngIf="displayName">{{ displayName }}</ng-container>
             </td>
 
             <!-- Value of Parameter on the right side -->

ui/src/app/edge/live/flat/flat-widget-line/flat-widget-line.ts

@@ -10,7 +10,9 @@ export class FlatWidgetLine extends AbstractFlatWidgetLine {
 
     /** Name for parameter, displayed on the left side*/
     @Input()
-    name: string;
+    set name(value: any) {
+        this.setName(value);
+    }
 
     /** value defines value of the parameter, displayed on the right */
     @Input()

ui/src/app/edge/live/flat/flat-widget-line/flat-widget-percentagebar.html

@@ -3,7 +3,8 @@
         <rect width="100%" rx="5" ry="5" height="20" style="fill:#f4f4f4" />
         <rect *ngIf="displayValue" x="1" y="2" rx="5" ry="5" attr.width="{{displayValue}}%" height="16"
             style="fill:#2d8fab" />
-        <text x="50%" y="58%" dominant-baseline="middle" text-anchor="middle" style="font-weight: 500">{{ displayValue |
+        <text x="50%" y="58%" dominant-baseline="middle" text-anchor="middle" style="font-weight: 500">{{ displayValue
+            || 0 |
             number:'1.0-0' }}&nbsp;%</text>
     </svg>
 </ng-container>

ui/src/app/edge/live/live.module.ts

@@ -49,8 +49,8 @@ import { SelfconsumptionModalComponent } from './selfconsumption/modal/modal.com
 import { SelfConsumptionComponent } from './selfconsumption/selfconsumption.component';
 import { SinglethresholdModalComponent } from './singlethreshold/modal/modal.component';
 import { SinglethresholdComponent } from './singlethreshold/singlethreshold.component';
-import { StorageModalComponent } from './storage/modal/modal.component';
-import { StorageComponent } from './storage/storage.component';
+import { StorageModalComponent } from './common/storage/modal/modal.component';
+import { StorageComponent } from './common/storage/storage.component';
 
 @NgModule({
   imports: [