facebook

How can I use ME for an instruction made for Visual Studio and Angular

  1. CodeMix & Angular IDE
  2.  > 
  3. Getting Help
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #674133 Reply

    abreitenbach
    Participant

    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?

    #674139 Reply

    support-swapna
    Moderator

    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

Viewing 2 posts - 1 through 2 (of 2 total)
Reply To: How can I use ME for an instruction made for Visual Studio and Angular

You must be logged in to post in the forum log in