Forum: Haus & Smart Home schönes Webinterface für Hausbus


von KPL (Gast)


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

von Dominik T. (dom) Benutzerseite


Lesenswert?

Hallo Kai,

schau dir mal Ajax und json an.

Viele Grüße
Dominik

von Patrick (Gast)


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.

von KPL (Gast)


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? :-)

von Borislav B. (boris_b)


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 ;-)

von Hugo P. (portisch)


Lesenswert?

Boris B. schrieb:
> Als GUI kannst du auch sehr gut jQuery Mobile nehmen, dann sieht's nicht
> nur gut aus, sondern klappt auch mit Tablets&/Smartphones wunderbar ;-)

jQuery habe ich auch:
Beitrag "Re: Hausautomatisierung, aber womit?"

von Norbert S. (norbert)


Lesenswert?

Guten morgen,

schau dir doch mal OpenHab, Cometvisu und Konsorten an, das gibt's ja 
eigentlich alles schon fertig. Wenn du trotzdem alles selber machen 
willst, kannst Du dich ja vom Quellcode inspirieren lassen.

Gruss
Norbert

von Jürgen S. (Firma: privat) (jschmied)


Lesenswert?

Hallo!

Ich habe jQuery und Sencha ausprobiert und finde jQuery für den Einstieg 
viel einfacher. Ich beginne auch gerade eine GUI für eine Heizung und 
demnächst auch für meine Rollläden.

Beitrag "Re: Buderus EMS-"Gateway" mit PIC18F / Sammelbestellung"

bzw. aktueller unter

http://ems-gw.webege.com/

- ist erst der Anfang ;)

vg

Jürgen

von Nik D. (y2kicn)


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

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.