# UI am Raspberry konfigurieren

**URL:** <https://community.openems.io/t/ui-am-raspberry-konfigurieren/72>\
**Category:** Deutsches Forum\
**Created:** [June 7, 2019, 8:40am UTC](https://community.openems.io/t/ui-am-raspberry-konfigurieren/72 "2019-06-07T08:40:53Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![windpower](https://community.openems.io/letter_avatar_proxy/v4/letter/w/bc79bd/32.png) [@windpower](https://community.openems.io/u/windpower)\
**Post date:** [June 7, 2019, 8:40am UTC](https://community.openems.io/t/ui-am-raspberry-konfigurieren/72/1 "2019-06-07T08:40:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![stefan.feilmeier](https://community.openems.io/user_avatar/community.openems.io/stefan.feilmeier/32/2585_2.png) [@stefan.feilmeier](https://community.openems.io/u/stefan.feilmeier)\
**Post date:** [June 7, 2019, 10:40am UTC](https://community.openems.io/t/ui-am-raspberry-konfigurieren/72/2 "2019-06-07T10:40:46Z")

</div>

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](https://angular.io/guide/deployment)

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

```auto
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";
    }
}

```

---

<div class="post-metadata">

**Author:** ![windpower](https://community.openems.io/letter_avatar_proxy/v4/letter/w/bc79bd/32.png) [@windpower](https://community.openems.io/u/windpower)\
**Post date:** [June 7, 2019, 1:23pm UTC](https://community.openems.io/t/ui-am-raspberry-konfigurieren/72/3 "2019-06-07T13:23:23Z")

</div>

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.

 ![Unbenannt](https://community.openems.io/uploads/default/original/1X/a748110119c60a5b86e788f533c1fbca3f3b70c3.png)

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

---

<div class="post-metadata">

**Author:** ![stefan.feilmeier](https://community.openems.io/user_avatar/community.openems.io/stefan.feilmeier/32/2585_2.png) [@stefan.feilmeier](https://community.openems.io/u/stefan.feilmeier)\
**Post date:** [June 7, 2019, 8:26pm UTC](https://community.openems.io/t/ui-am-raspberry-konfigurieren/72/4 "2019-06-07T20:26:01Z")

</div>

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](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](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](https://github.com/OpenEMS/openems/blob/develop/ui/angular.json#L109))

---

<div class="post-metadata">

**Author:** ![windpower](https://community.openems.io/letter_avatar_proxy/v4/letter/w/bc79bd/32.png) [@windpower](https://community.openems.io/u/windpower)\
**Post date:** [June 11, 2019, 9:58am UTC](https://community.openems.io/t/ui-am-raspberry-konfigurieren/72/5 "2019-06-11T09:58:57Z")

</div>

Funktioniert nun alles wie gewünscht.

Vielen Dank!  
Dominik

---

<div class="post-metadata">

**Author:** ![Harm](https://community.openems.io/letter_avatar_proxy/v4/letter/h/b4bc9f/32.png) [@Harm](https://community.openems.io/u/Harm)\
**Post date:** [July 8, 2020, 11:22pm UTC](https://community.openems.io/t/ui-am-raspberry-konfigurieren/72/6 "2020-07-08T23:22:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![stefan.feilmeier](https://community.openems.io/user_avatar/community.openems.io/stefan.feilmeier/32/2585_2.png) [@stefan.feilmeier](https://community.openems.io/u/stefan.feilmeier)\
**Post date:** [July 9, 2020, 7:34pm UTC](https://community.openems.io/t/ui-am-raspberry-konfigurieren/72/7 "2020-07-09T19:34:53Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![Harm](https://community.openems.io/letter_avatar_proxy/v4/letter/h/b4bc9f/32.png) [@Harm](https://community.openems.io/u/Harm)\
**Post date:** [July 9, 2020, 8:54pm UTC](https://community.openems.io/t/ui-am-raspberry-konfigurieren/72/8 "2020-07-09T20:54:48Z")

</div>

Hallo Stefan,  
Die Browser-Konsole:

 ![Console1](https://community.openems.io/uploads/default/original/1X/3321ceb2437991dd916eb10e45a317bd676dba9a.png)

Ich habe versucht die [Web Console Configuration](http://192.168.1.20:8080/system/console/configMgr) von der RaspberryPI in ein Browser auf mein PC zu starten. Ich konnte einloggen, aber danach blieb die Seite leer… 🤔

---

<div class="post-metadata">

**Author:** ![stefan.feilmeier](https://community.openems.io/user_avatar/community.openems.io/stefan.feilmeier/32/2585_2.png) [@stefan.feilmeier](https://community.openems.io/u/stefan.feilmeier)\
**Post date:** [July 9, 2020, 9:06pm UTC](https://community.openems.io/t/ui-am-raspberry-konfigurieren/72/9 "2020-07-09T21:06:10Z")

</div>

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](https://community.openems.io/t/ui-am-raspberry-konfigurieren/72/2))

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](https://openems.github.io/openems.io/openems/latest/edge/deploy.html) 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

```auto
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…

---

<div class="post-metadata">

**Author:** ![Harm](https://community.openems.io/letter_avatar_proxy/v4/letter/h/b4bc9f/32.png) [@Harm](https://community.openems.io/u/Harm)\
**Post date:** [July 16, 2020, 12:51pm UTC](https://community.openems.io/t/ui-am-raspberry-konfigurieren/72/10 "2020-07-16T12:51:16Z")

</div>

> 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! 🙂

---

<div class="post-metadata">

**Author:** ![ys2017rhein](https://community.openems.io/user_avatar/community.openems.io/ys2017rhein/32/1336_2.png) [@ys2017rhein](https://community.openems.io/u/ys2017rhein)\
**Post date:** [December 9, 2024, 8:23am UTC](https://community.openems.io/t/ui-am-raspberry-konfigurieren/72/11 "2024-12-09T08:23:33Z")

</div>

I got the same error: WebSocketSubject.js:91 WebSocket connection to ‘ws://192.168.3.105:8085/’ failed. After entering localhost:4200, the web page showed loading, then fixed it by starting websocket port: [http://192.168.3.105:8080/system/console/configMgr](http://192.168.3.105:8080/system/console/configMgr) → Controller Api Websocket → set port: 8085. Why can’t it load the page previously?
