schönes Webinterface für Hausbus

KPL Gast #3416320
Lesenswert?
• ▲
▼ 
Hallo!

Ich habe einen Zentralen Hausbus entwickelt, an dem mittlerweile einige 
Rolladen angeschlossen sind. Weitere Erweiterungen kommen später 
(Stromzähler, etc...).

Das ganze wird von einem Raspberry PI über eine lokale TCP-IP socket 
angesteuert/abgefragt, die dann mittels UART auf den Hausbus zugreift. 
Die TCP/IP Socket ermöglicht mir mehrere "tasks" gleichzeitig auf den 
Bus zuzugreifen zu lassen. Besonders wichtig, wenn man z.B. den 
Stromverbrauch mitloggen will und gleichzeitig über das Webinterface 
drauf zugreifen will.


Die dazugehörige Webseite für die Rolladen ist einfach über 
submit-knöpfe realisiert und als Hidden value wird der Name des Raums 
mitgeschickt. Im zugehörigen PHP Script wird dann eine TCP/IP socket 
aufgemacht und ein Kommando rausgeschickt.

Mein Problemkind ist das Webinterface:
Wenn man z.B. mehrere Rolladen betätigen will, dann muss man immer kurz 
warten bis die seite neu geladen ist. Andernfalls kann es passieren, 
dass der request noch garnicht rausgeschickt ist, bevor man den neuen 
knopf drückt und somit events verschluckt werden.

Weiterhin würde ich gerne z.B. in einem DIV ständig den aktuellen 
Zustand (0-100%) anzeigen lassen. Entweder als Grafik (Vertikale 
Skalierung 0-100%), oder auch erstmal nur als numerischer Wert.

Da meine Webprogrammierkenntnisse in den letzten 13 Jahren nicht mehr 
wirklich genutzt und auf dem laufenden gehalten wurden, wollt ich mich 
mal erkundigen, wie man sowas "smart" realisieren kann.

"Früher" hät ich z.B. einen Frame realisiert, wovon einer versteckt ist 
(z.B. nur 1 pixel hoch). Der frame hätte dann mit dem webserver 
kommuniziert und der Frame mit den knöpfen per javascript ein Kommando 
in die queue des 1 pixel frames geschoben.
Ein weiterer versteckter frame hätte sich selbst kontinuierlich 
gerefreshed (z.B. 1 mal pro sekunde) und die aktuellen Zustandsdaten per 
javascript im User interface upgedated.
Das erscheint mir bei dem was webseiten heute so alles dynamisch machen 
allerdings etwas steinzeitlich.

Darum: Wie macht man "heute" sowas?

Viele Grüße,

Kai
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Patrick Gast #3416343
Lesenswert?
• ▲
▼ 
AJAX war schon das richtige Stichwort, da solche Sachen asynchron (d. h. 
ohne die Seite neu zu laden) passieren sollten.
JSON ist für solche Calls auch eine gut geeignete Sprache zur 
Datenübertragung, da Du höchstwahrscheinlich clientseitig JavaScript 
einsetzen wirst.
Beim geplanten Vorhaben würde ich zudem über eine RESTful Architektur 
nachdenken - macht IMHO das Ganze übersichtlicher und einfacher zu 
warten und zu erweitern (d. h. auch Nutzbarkeit durch andere Frontends, 
z. B. Windows-Programm).
Schau Dir mal Sencha Ext JS an; würde ich als HTML5-Framework empfehlen. 
Die Wahl des serverseitigen Frameworks hängt hauptsächlich von der 
gewünschten Skriptsprache ab.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
KPL Gast #3416356
Lesenswert?
• ▲
▼ 
Danke, super tipps. Hab ich schonmal gehört, konnte aber nie was mit dem 
Namen anfangen.

AJAX ist soweit ich es sehe eine rein request/response pasierte 
geschichte. Einen großteil der Anforderungen werd ich wohl damit direkt 
umsetzen können.

Wie würd man da aber z.B. das updaten von dem Rollostatus realisieren?
Würd man kontinuierlich pollen (javascript timer), oder gibt es da noch 
einen Trick? :-)
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Borislav B. #3417791
Lesenswert?
• ▲
▼ 
KPL schrieb:
> Wie würd man da aber z.B. das updaten von dem Rollostatus realisieren?
> Würd man kontinuierlich pollen (javascript timer), oder gibt es da noch
> einen Trick? :-)

Für sowas gibt es WebSockets. Da kann das Frontend Funktionen im Backend 
aufrufen und umgekehrt.

Als GUI kannst du auch sehr gut jQuery Mobile nehmen, dann sieht's nicht 
nur gut aus, sondern klappt auch mit Tablets&/Smartphones wunderbar ;-)
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Nik D. #3419256
Lesenswert?
• ▲
▼ 
Die oben schon angesprochenen Websockets eignen sich super, um Werte in 
einer one-page App kontinuierlich nachzuladen (bzw. vom Server gepusht 
zu bekommen)

Ich empfehle die http://socket.io/ , eine Client- sowie Serverseitige 
library, welche auf Websockets setzt.
Auf der Serverseite läuft die Library in node.js. Node.js gibts für den 
raspberry Pi als binary Package, die Installation ist demnach ein 
Kinderspiel; die benoetigten server libraries koennen einfach mit dem 
node packaget manager nachgeladen werden ("npm install socket.io")

Ein paar Einsatzbsp. : http://socket.io/#how-to-use

Lg

Nik
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren