UI am Raspberry konfigurieren

Hallo zusammen,
Ich möchte nun auch die Konfiguration der Benutzeroberfläche über den Raspberry laufen lassen.
Hierzu habe ich bereits Angular CLI und node.js installiert.
Ist es nun notwendig das UI_Verzeichnis auf meinen Raspberry zu verschieben,
um von dort aus mit ng serve das Projekt zu starten?

Grüße,
Dominik

Hallo,

das ist leider in der Doku noch nicht dokumentiert. ng serve ist nur für die Entwicklung. Um das Projekt zu deployen musst du es mit ng build bauen, das Ergebnis auf den Raspbi kopieren und dort mit einem Webserver (z. B. NGINX) anzeigen.

Mehr Informationen findest du hier: https://angular.io/guide/deployment

Hier als Beispiel eine NGINX-Konfiguration wie wir sie verwenden:

server {
    listen 80;
    server_name openems;
    
    # OpenEMS Web-Interface
    location / {
        root    /usr/share/openems-fems/www;
        index    index.html index.htm;

        error_page    404    200    /index.html;
    }

    # Proxy for OpenEMS REST-Api
    location /rest/ {
        proxy_pass        http://127.0.0.1:8084/rest/;

        proxy_set_header    Host $host;
        proxy_set_header    X-Real-IP $remote_addr;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Proto https;
    }

    # Proxy for OpenEMS Websocket
    location /websocket {
        proxy_pass    http://127.0.0.1:8085;

        proxy_http_version    1.1;
        proxy_set_header    Upgrade $http_upgrade;
        proxy_set_header    Connection "upgrade";
    }
}

Hallo Stefan,

Da auf meinem Raspberry bereits Apache2 über Port 80 läuft,
habe ich einfach einen anderen Port gewählt und nun läuft das UI über NGINX.

server {
listen 70;
server_name openems;

# OpenEMS Web-Interface
location / {
    root    /usr/share/openems-fems/www;
    index    index.html index.htm;

    error_page    404    300    /index.html;
}

Das gebaute Projekt habe ich in /usr/share/openems-fems/www abgelegt.
Nun gibt es anscheinend Schwierigkeiten zwischen der Kommunkation des UI mit Edge,
da die Weboberfäche nicht geladen wird.

Anscheinend scheitert die Verbindung zum Backend.
Browser-Console:

WebSocket connection to ‘ws://localhost:8082/’ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
websocket.ts:85 Websocket connection closed

Ja, dein Problem ist die falsche websocket URL. ws://localhost:8082 würde das Edge an deinem lokalen PC erwarten und nicht auf das Edge am Raspbi zugreifen.

Die Standard-URL wird hier festgelegt: https://github.com/OpenEMS/openems/blob/develop/ui/src/environments/environment.ts. Besser ist aber, wenn du dem Build sagst, er soll eine andere “Environment”-Datei verwenden, dann musst du die Standard-Datei nicht immer ändern. Wir bauen die UI von dieser Environment für FEMS: https://github.com/OpenEMS/openems/blob/develop/ui/src/environments/openems-edge.ts

Der Befehl zum Bauen lautet dann wie folgt:
ng build -c edge
(Konfiguriert wird das “-c” übrigens hier: https://github.com/OpenEMS/openems/blob/develop/ui/angular.json#L109)

1 Like

Funktioniert nun alles wie gewünscht.

Vielen Dank!
Dominik

1 Like

Hallo zusammen,
Ich habe die openems.jar kopiert nach: /usr/lib/openems/
und die service activiert.

$ sudo systemctl status openems
● openems.service - OpenEMS
Loaded: loaded (/etc/systemd/system/openems.service; disabled; vendor preset: enabled)
Active: active (running) since Sun 2020-05-24 16:13:39 CEST; 1 months 14 days ago

Habe die UI mit “ng build -c edge” gebaut, NginX installiert, und die NginX-Konfiguration wie hier oben als Beispiel steht verwended.
Aber in der browser auf der PC sagt er:

Verbindung unterbrochen. Versuche die Verbindung wiederherzustellen. [OK]

Was könnte ich falsch gemacht haben?

Hallo,

interessant wäre der Log in der Browser-Konsole, dort sollte es eine detailliertere Fehlermeldung geben (https://developer.mozilla.org/de/docs/Tools/Web_Konsole).

Auf jeden Fall muss auf dem OpenEMS Edge der “Websocket Api Controller” konfiguriert sein, so wie das auch im Getting Started-Guide beschrieben ist.

Gruß,
Stefan

Hallo Stefan,
Die Browser-Konsole:

Ich habe versucht die Web Console Configuration von der RaspberryPI in ein Browser auf mein PC zu starten. Ich konnte einloggen, aber danach blieb die Seite leer… :thinking:

Ok, zumindest wissen wir jetzt, dass das UI versucht, sich mit dem Edge auf 192.168.1.20:81/websocket zu verbinden.

Ich gehe davon aus, dass das die IP-Adresse des Raspberry Pi ist und NGINX auf Port 81 konfiguriert ist, oder? /websocket verweist am Gerät auf Port 8085 (laut meiner NGINX Konfiguration oben)

Apache Felix sollte sich mit der URL eigentlich öffnen lassen, das ist seltsam.

Notfalls kann auch manuell eine Konfiguration für den Websocket Api Controller erstellt werden. Gemäß Systemd-Konfiguration wurde ja das -Dfelix.cm.dir=/etc/openems.d/ festgelegt. Dort legt der Apache Felix Configuration Admin seine Konfigurationsdateien ab.

  • Erstelle einen Ordner für die Konfiguration
    mkdir -p /etc/openems.d/Controller/Api/Websocket/

  • Lege die Konfigurationsdatei manuell an

cat >/etc/openems.d/Controller/Api/Websocket/b53e19a0-0947-41d2-aefc-cb3dedfe48be.config <<EOL                                                                                                                             
alias=""
apiTimeout=I"60"
enabled=B"true"
id="ctrlApiWebsocket0"
port=I"8085"
service.factoryPid="Controller.Api.Websocket"
service.pid="Controller.Api.Websocket.b53e19a0-0947-41d2-aefc-cb3dedfe48be"
EOL
  • Dann noch den openems service neu starten
    systemctl restart openems

Im OpenEMS Log (journalctl -lu openems) sollte dann der Start des Controllers gemeldet werden. Danach sollte sich auch das UI verbinden…

Ich gehe davon aus, dass das die IP-Adresse des Raspberry Pi ist und NGINX auf Port 81 konfiguriert ist

Stimmt.

Vielleicht war etwas nicht in ordnung mit der browser auf mein PC, aber jetzt kann ich die Apache Felix Web Console öffnen. Ich habe die Controller Api Websocket hinzugefügt, und jetzt functioniert (obwohl noch leer) die OpenEMS UI.

Danke! :slightly_smiling_face: