Hi,
I’m trying to show a new UI Flat Widget in live view following this tutorial:
Create a new module [Live-View]
- Copy an existing Module e.g. FixActivePower and paste it inside the Live-View.
/openems-develop/ui/src/app/edge/live/Controller/Ess/FixActivePower
/openems-develop/ui/src/app/edge/live/Controller/Ess/FixActivePower2
- Change the @Component selector
/openems-develop/ui/src/app/edge/live/Controller/Ess/FixActivePower2/flat/flat.ts
@Component({
selector: “Controller_Ess_FixActivePower2”,
templateUrl: “./flat.html”,
standalone: false,
})
- and use it inside LiveComponent.
/openems-develop/ui/src/app/edge/live/live.component.html
<ion-col size=“12” *ngSwitchCase=“‘Controller.Ess.FixActivePower’” size-lg=“6” class=“ion-no-padding”>
<Controller_Ess_FixActivePower [componentId]=“widget.componentId”></Controller_Ess_FixActivePower>
<ion-col size="12" *ngSwitchCase="'Controller.Ess.FixActivePower2'" size-lg="6" class="ion-no-padding">
<Controller_Ess_FixActivePower2 [componentId]="widget.componentId"></Controller_Ess_FixActivePower2>
</ion-col>
- Rename the Module
/openems-develop/ui/src/app/edge/live/Controller/Ess/FixActivePower2/Ess_FixActivePower2.ts
export class Controller_Ess_FixActivePower2 { }
- and import it in LiveModule under imports.
/openems-develop/ui/src/app/edge/live/live.module.ts
import { Controller_Ess_FixActivePower } from “./Controller/Ess/FixActivePower/Ess_FixActivePower”;
import { Controller_Ess_FixActivePower2 } from “./Controller/Ess/FixActivePower2/Ess_FixActivePower2”;
@NgModule({
imports: [
Controller_Ess_FixActivePower,
Controller_Ess_FixActivePower2,
- To be able to see the module in action, you need to create a new switchCase Statement with your controllers factoryId.
/openems-develop/ui/src/app/edge/live/live.component.html
<ion-col size=“12” *ngSwitchCase=“‘Controller.Ess.FixActivePower2’” size-lg=“6” class=“ion-no-padding”>
<Controller_Ess_FixActivePower2 [componentId]=“widget.componentId”></Controller_Ess_FixActivePower2>
The Live and History View are designed to show UI-Widgets dependent on the EdgeConfig, except of widgets listed in Common.
If you implemented a controller or component, that is part of an EdgeConfig, you have to use the factoryId as a switchCase statement.
7) If thats not the case, go into widget.ts and add a identifier to the classes array inside parseWidgets().
/openems-develop/ui/src/app/shared/type/widget.ts
“Controller.Ess.FixActivePower”,
“Controller.Ess.FixActivePower2”,
but I can’t see the new widget
Someone may help me?
Thanks