eigene Webseite im Stil der Status Seite erstellen

[Becker]

Hallo,
ich würde mir gern eine eigene php Seite bauen, so ähnlich wie die Status Seite von openwb.
Es sollen alle Live Werte von meinen Haus Daten (Heizung, WR-Strings, Hausanschluss) auf einer Seite sichtbar sein.
Leider finde ich überhaupt keinen Ansatz, wie ich so etwas bauen könnte.
Bisher verwende ich Node-Red mit seinem Dashboard, hier habe ich weit über 10 Tabs mit wiederum zig Spalten und Werten.
Alles wichtige würde ich mir gern auf eine Seite bauen, schön klein natürlich, so ähnlich wie die Status Seite.

Wenn mir Jemand einen Schups in die richtige Richtung geben könnte, wäre ich dankbar.
Konkret: Wie kriege ich MQTT-Live Werte auf eine eigens erstellte php oder html Seite (ohne Datenbank) ?

Das ganze soll natürlich nicht auf openwb Software laufen, nicht dass das jemand falsch versteht.

MfG

[openWB]

Php -> z.B. mit https://github.com/php-mqtt/client
HTML (js) -> https://github.com/mqttjs/MQTT.js/

Alternativ auf ein SmartHome System wie openHAB oder „deinFavorit“ setzen, die Daten per MqTT dahin holen und deren UI / Dashboard Lösung nutzen.

[Becker]

danke für die Tipps.

Was wäre denn für mein Vorhaben einfacher ?

Apache / html oder lighttpd / php ?

bin leider auf dem Gebiet absoluter Neuling.

[LutzB]

PHP kannst Du dafür vergessen. Die ganze Aktualisierung der Daten muss im Browser laufen, nicht auf dem Server. Daher auf HTML mit JavaScript setzen.

Für Dein erstes Projekt legst Du die Messlatte aber ganz schön hoch. In "Handarbeit" wird das viel Code. Ich würde da eher auf ein Framework setzen. Dadurch ergibt sich aber noch mehr Einarbeitungszeit, wenn Du wirklich bei Null anfängst.

[Becker]

genau das habe ich beim einlesen und ausprobieren auch festgestellt.

Wie funktioniert denn die Status Seite von openwb? So wie du schreibst html mit Javascript?

Ich wollte eigentlich noch nach einem Editor fragen, womit ich so eine Seite erstelle. Welches Framework würdest du denn empfehlen?

[LutzB]

Welche Kenntnisse im Programmieren hast Du denn schon?

Der Status von openWB 1.9 ist noch "handgeschrieben". Kannst Dir das ja mal im Quellcode ansehen. Das lässt sich vermutlich relativ einfach mit Copy/Paste anpassen, wenn man den Code lesen kann.

Ansonsten kann man z.B. mit Vue.js (wird von 2.x genutzt) relativ schnell etwas Umsetzen, wenn man sich bereits mit HTML, JavaScript und objektorientierter Programmierung im Allgemeinen auskennt.

In allen Varianten musst Du aber immer die Enden MQTT und Anzeige selber zusammen kriegen. Etwas fertiges gibt es da nicht.

[Becker]

Ok danke, ich hatte es mir doch etwas einfacher erhofft
das übersteigt meine Kompetenzen leider.
Den Code der Status Seite hatte ich mir schon mehrmals angeschaut, jedoch habe ich dort nichts gefunden zu den live Werten.

Wie kriegt denn das Node-Red Dashboard oder die Victron Konsole die Live Werte in den Browser ?
edit: mit socket.io.js - was einen riesigen Code enthält sehe ich gerade.

[Becker]

ich habe heute einen RPi2 genommen und dort Nginx mit php8.2 installiert, anschließend noch MQTT.js.

Mit MS-Word kann ich eine einfache Status Seite als html erstellen, nur wie kriege ich einen (MQTT) Live Wert mit Hilfe von "MQTT.js" dort rein

[Gero]

Miitels Javascript, welches im Browser interpretiert - oder von mir aus auch ausgeführt - wird. Musst mal nach „javascript in html“ googeln.

[Becker]

wenn mir eine Demo Zeile niederschreiben würdest
also einen MQTT Wert vom lokalen Broker