[abreitenbach]

This is the istruction:

4. Setup Visual Studio Code for OpenEMS UI

Download node.js LTS and install it.

Download Visual Studio Code , install and start it.

Open OpenEMS UI source code in Visual Studio Code:

Menu: File → Open Folder…​ → Select the ui directory inside the downloaded source code (for example C:\Users\your.user\git\openems\ui) → Select directory

Open the integrated terminal:

Menu: Terminal → New Terminal

Install Angular CLI :

npm install -g @angular/cli
If you receive an error message that the command npm could not be found, make sure that node.js is installed and restart Visual Studio Code.

Resolve and download dependencies:

npm install

5. Run OpenEMS UI

In Visual Studios integrated terminal type…​

ng serve

The log shows:

NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/

Open a browser at http://localhost:4200

You should see OpenEMS UI. Log in as user “guest” by clicking on the tick mark. Alternatively type “admin” in the password field to log in with extended permissions.
OpenEMS UI Login screen
Figure 14. OpenEMS UI Login screen

Change to the Energymonitor by clicking on the arrow.
OpenEMS UI Overview screen
Figure 15. OpenEMS UI Overview screen

You should see the Energymonitor showing the same data as the DebugLog output on the console.
OpenEMS UI Energymonitor screen
Figure 16. OpenEMS UI Energymonitor screen
OpenEMS UI will complain that “no timedata source is available”. Because of this the historic chart is not yet functional.

6. Integrate OpenEMS Backend

Instead of having Edge and UI talk to each other directly, the communication can also be proxied via Backend.
6.1. Run and configure OpenEMS Backend

In Eclipse IDE open the project io.openems.backend.application and double click on BackendApp.bndrun.
io.openems.backend.application project in Eclipse IDE
Figure 17. io.openems.backend.application project in Eclipse IDE

Click on Run OSGi to run OpenEMS Backend. You should see log outputs on the console inside Eclipse IDE.
OpenEMS Backend initial log output
Figure 18. OpenEMS Backend initial log output

Configure the Backend

Open the Apache Felix Web Console Configuration .
Apache Felix Web Console for OpenEMS Backend is started on port 8079 by default. This is configured using the org.osgi.service.http.port setting in BackendApp.bndrun.

Login with username admin and password admin.
Apache Felix Web Console Configuration for OpenEMS Backend
Figure 19. Apache Felix Web Console Configuration for OpenEMS Backend

Configure Edge.Websocket
The Edge.Websocket service is responsible for the communication between OpenEMS Backend and OpenEMS Edge.

In the example we are configuring the Port 8081. This port needs to match with what we configure later in OpenEMS Edge.
Configuration of Backend Edge.Websocket
Figure 20. Configuration of Backend Edge.Websocket

Configure Ui.Websocket
The Ui.Websocket service is responsible for the communication between OpenEMS Backend and OpenEMS UI.

In the example we are configuring the Port 8082. This port needs to match with what we configure later in the OpenEMS UI environment file.
Configuration of Backend Ui.Websocket
Figure 21. Configuration of Backend Ui.Websocket

Configure Timedata
The Timedata service provider is responsible for holding the current and historic data of each connected Edge device.

In the example we are configuring the Timedata.Dummy service. It takes no configuration parameters, so just press Save. In a production system you would want to use a real implementation like Timedata.InfluxDB.
Configuration of Backend Timedata.Dummy
Figure 22. Configuration of Backend Timedata.Dummy

Configure Metadata
The Metadata service provider is responsible for authentication of Edge devices and Users connecting via UI.

In the example we are configuring the Metadata.Dummy service. It takes no configuration parameters, so just press Save. In a production system you would want to use a real implementation like Metadata.File or Metadata.Odoo.
Configuration of Backend Metadata.Dummy
Figure 23. Configuration of Backend Metadata.Dummy

6.2. Configure OpenEMS Edge

Next we will configure OpenEMS Edge to connect to the OpenEMS Backend Edge.Websocket service.

Switch back to the Apache Felix Web Console Configuration for OpenEMS Edge .

Configure the “Controller Api Backend” Component. The default values can be accepted without changes right now.
Configuration of Controller Api Backend
Figure 24. Configuration of Controller Api Backend

Some configuration parameters are still noteworthy here:

“Apikey” is used to authenticate this Edge at the Backend Metadata service.

“Uri” is set to ws://localhost:8081. This defines an unencrypted websocket (“ws://”) connection to the local computer on port “8081” like we configured before for the Edge.Websocket.

“Cycle Time” defines how often data is sent to Backend

Once you press save you should see logs in OpenEMS Backend

[ctrlBackend0] Connected to OpenEMS Backend

and OpenEMS Edge

[Edge.Websocket] Edge [edge0] connected

6.3. Connect OpenEMS UI with Backend

In Visual Studio Code open the file ui/src/environments/environment.ts and configure it as follows:

import { Environment } from “../app/shared/type/environment”;

export const environment: Environment = {
production: false,
debugMode: true,
url: “ws://localhost:8082”,
backend: “OpenEMS Backend”,
};

It is again noteworthy here, that:

“url” is set to ws://localhost:8082. This defines an unencrypted websocket (“ws://”) connection to the local computer on port “8082” like we configured before for the Ui.Websocket.

“backend” is set to “OpenEMS Backend”. This option is used in certain places inside OpenEMS UI that need to be treated differently for connections to OpenEMS Edge and OpenEMS Backend.

In Visual Studios integrated terminal type…​

ng serve

Open a browser at http://localhost:4200

You should see again OpenEMS UI, but this time you are not asked for a login (because Metadata.Dummy does not require any) and are directly forwarded to the Energy Monitor at http://localhost:4200/device/edge0/index. You are now seeing the data from OpenEMS Edge via OpenEMS Backend.
UI via Backend

openEMS Development

I have done already:
File – Open Projekts from file system
I have opened the directory with the project /ui “as Angular CLI”
Do I have to install Angular in the terminal and follow the instructions as for Visual Studio Code?

Can I get some help?

[support-swapna]

Hi，

Yes, you can follow the same steps in Angular IDE. Open the Terminal+ view (not Terminal) and run the command to install Angular CLI. For specific versions of NPM and Nodejs, you can click on the gear icon besides the project selection box in the Terminal+ view to open the CLI Tools preferences page. You can select the versions of your choice, save the changes and reopen the tab in the Terminal+ view to download and apply those versions. There is also an option to select the system installations if you have any.

Hope this helps. Please let us know if you see any issues.

–Swapna
Genuitec Support

[Author]

Posts