da es mich immer wieder gestört hat, dass ich keine einheitliche Bedienoberfläche nach meinem Geschmack für alle Endgeräte (iOS, Android, PC, Mac) finden konnte, habe ich mir selber eine gebaut
Da diese vielleicht für den einen oder anderen auch interessant ist, möchte ich sie hier als Version 1.0 veröffentlichen.Mein persönliches Ziel ist ein billiges Tablet in den Wohnbereich zu hängen und damit per Browser das Haus zu steuern, deswegen habe ich mit dem Projekt angefangen. Aber auch mit allen anderen Geräten (SmartPhones und PC) möchte ich darauf zugreifen zu können, also muss es kleine und große Auflösungen unterstützen können und touchfähig sein. Außerdem möchte ich keinen Extra Rechner dafür laufen lassen, also muss es schon auf der CCU laufen.
Rausgekommen ist dabei eine einfache Oberfläche, die meine Anforderungen abdeckt... und bei der ich während der Entwicklung noch viele Ideen für neues hatte
Danke an der Stelle an Dr.Bob für die ersten Tests, Feedback und Ideen, er hat doch einige Geräte mehr wie ich und so konnte ich schon mal einige abdecken. Es fehlen sicher noch welche, aber es werden dann trotzdem die Werte angezeigt, nur nicht so schön aufbereitet und nicht setzbar, da ich nicht weiß, welche Werte man setzen kann. Wenn ihr so was bei euch seht, dann einfach hier posten, dann kann ich das updaten.
So, hier erst mal der Download. Wie andere AddOns auch über die WebUI installieren:
So einen Installer habe ich noch nie gemacht, deswegen habe ich mir paar Addons angesehen und von da übernommen, vielleicht kann mal jemand der sich damit auskennt sagen, ob das so alles korrekt ist. Bei Dr.Bob und mir hats funktioniert.
Im nächsten Post folgen dann Screenshots, hier erst mal noch mehr Details.
Wen die Technik interessiert: Das ganze basiert auf jQuery Mobile. Das schöne daran ist, dass die CCU wenig dafür rechnen muss, weil die ganze Darstellung im Browser berechnet wird. Also kein HTML, das in CGIs zusammengesetzt wird. Die CGIs erstellen nur JSON Dateien, das ist ein schlankes Format, welches ich mit jQuery Mobile direkt lesen kann.
Ich habe kürzlich gesehen, dass hobbyquaker auch eine Oberfläche erstellt hat. Sogar mit fast der selben Technik, ist schon witzig
Ich dachte aber, ich poste jetzt meins auch mal, vielleicht ergänzen sich die beiden ja.Features:
- Installationspaket bringt alles mit, HTML Seite und CGIs für den Abruf der Daten von der CCU. Einfach installieren und dann diese URL aufrufen:
Code: Alles auswählen
http://<homematic-ip>/addons/webmatic- Visualisierungen der Werte für alle Geräte. Alle Geräte, die Dr. Bob oder ich haben, sind schön gemacht, d.h. mit Bedienelementen. Ein mir bisher unbekanntes Gerät zeigt dann zumindest die Datenpunkte an. Wenn das bei jemand von euch der Fall ist, bräuchte ich Infos dazu, wie das in der WebUI dargestellt wird, dann baue ich das ein.
- Anzeige der letzten Änderung zu jedem Datenpunkt. Das hat mir bisher in anderen GUIs immer gefehlt, und mir hilft das an vielen Stellen. So habe ich einen Schalter für die FBH und wenn der auf AN steht und letzte Änderung vor 3 Stunden, dann weiß ich, dass er vor 3 Stunden angeschaltet wurde.
- Automatischer Update alle 60 Sekunden. Wirds mal konfigurierbar geben, hoffe, das ist jetzt nicht zu oft.
- Desktop und Smartphone Layout. Das Layout schaltet automatisch um, wenn das Bild zu schmal wird. Dann wird das Menu über dem Inhalt angeordnet. Ist noch nicht so ganz, wie ich das wollte, aber die andere Lösung ist noch in Arbeit: So wie man es von Apps gewohnt ist, dass bei Klick auf den Menupunkt eine neue Seite aufgeht und man links oben mit "Zurück" wieder ins Menu kommt. Aber so kann man es zumindest schon mal auf dem SmartPhone bedienen, den Rest gibts dann mit Update.
- WebApp auf iOS. Die Webseiten beinhalten spezielle Informationen für das iOS. Dadurch kann man es im Safari mit "Senden -> Zum Home Bildschirm" auf den Desktop legen und beim Start geht es wie eine eigene App auf, also nicht im Browser. Es hat dann auch ein schönes eigenes Icon und ist in der Taskleiste zu sehen
- In der Titelleiste wird die Anzahl der offenen Servicemeldungen angezeigt. Bei Klick darauf gibt es Details.
- Read Only Variablen. Hier habe ich die Definition der HomeMatic Variablen etwas erweitert. Mein Problem war, dass ich Variablen in meiner Oberfläche immer setzen kann. Manche möchte ich aber nur zu Informationszwecken ausgeben, weil sie vom Script gesetzt werden. Z.B. logge ich die Laufzeiten meiner Heizung in Variablen mit, aber ich möchte sie nicht verändern. Dazu hängt man einfach an den Beschreibungstext der Variablen ein (r) an (es muss am Ende stehen). Dann zeige ich die Variable nur an, wenn sie in den Favoriten gezeigt wird. In dem Menupunkt Systemvariablen ist sie weiterhin änderbar, da gehen meine Nutzer eh nicht rein
Ein weiterer Anwendungsfall ist die Anzeige von Informationen anderer Webseiten oder Grafiken. Z.B. kann man den HTML Code eines Wetterdienstes einfügen (wetter24.de). Den setzt man bei den Variablen und wenn man die selbe Variablen in einem Favoriten anzeigt, wird das Wetter angezeigt
Beispiel siehe unten bei den Screenshots. Es gibt nur leider eine Einschränkung: Das HTML darf kein <SCRIPT> enthalten. Da weigert sich jQuery, das zu setzen... versuche ich aber noch was zu finden, weil das viele Wetterdienste haben.Vielleicht finden die User hier ja noch ein paar schöne Anwendungsfälle oder Links, die man einbinden könnte. <iframe> geht übrigens auch, man kann also auch andere Seiten aus dem Heimnetz oder von extern einbinden wenn die das zulassen.
So, jetzt aber erst mal zu den Screenshots im nächsten Post.
Grüße,
Kilam.
