HomeMatic CCU2 bei ELV bestellen

WebMatic 1.0 (AddOn): Neue, webbasierte Bedienoberfläche

alternative Weboberfläche für die HomeMatic-Zentrale (CCU)

Werbung


WebMatic 1.0 (AddOn): Neue, webbasierte Bedienoberfläche

Beitragvon KilamMalik » 04.12.2012, 02:08

Hi,

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:

webmatic.tar.gz
(324.34 KiB) 971-mal heruntergeladen


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


- Menu mit Favoriten, Räumen, Gewerken, Programmen und Variablen. Die Grafiken im Menu kann man mit eigenen Bildern versehen. Dafür muss man allerdings per FTP die Bilder in das WebMatic Addons Verzeichnis kopieren. Wie das geht ist beim Menupunkt "Grafik IDs" beschrieben, dort steht auch für jeden Menupunkt die ID dabei, so muss die Grafik dann auch heißen.

- 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.
KilamMalik
 
Beiträge: 152
Registriert: 31.12.2011, 12:12
Wohnort: Augschburg

Re: WebMatic 1.0 (AddOn): Neue, webbasierte Bedienoberfläche

Beitragvon KilamMalik » 04.12.2012, 02:22

Hier seht ihr jetzt diverse Screenshots von den Funktionen.

Raumansicht:
raeume.png
Raumansicht


Servicemeldungen:
servicemeldungen.png
Servicemeldungen
servicemeldungen.png (18.34 KiB) 16239-mal betrachtet


Programme anstarten:
programme.png
Programme


Variablen:
varaiblen.png
Variablen


Diverse Geräte:
geraete.png
Diverse Geräte


Hier findet man die IDs um eigene Grafiken anzulegen:
grafikids.png
Grafik IDs zum anlegen eigener Grafiken


ReadOnly Beispiel Wetter in der Favoritenanzeige:
read_only.png
Wetter als ReadOnly Variable


ReadOnly Beispiel Radar in der Favoritenanzeige:
read_only_radar.png
Radar als ReadOnly Variable


Falls ihr das mit dem Wetter probieren wollt, das ist der Link:

Code: Alles auswählen
<div style="width: 200px; font-family:verdana; background-color: #fff; color: #111;border:1px solid #ccc;">
  <a href="http://www.niederschlagsradar.de" target="_blank">
    <img style="border:none;margin-bottom: 4px;" src="http://www.niederschlagsradar.de/include/images/htmltool/ns-logo.png" title="Niederschlagsradar.de" alt="Niederschlagsradar.de" />
    <br />
    <iframe src="http://www.niederschlagsradar.de/htmltool/g-location.aspx?bc=fff&l=M&#252;nchen&fc=111&ft=verdana&fs=10px" frameborder="0" scrolling="no" width="190" height="40"></iframe>
    <span>
      <a href="http://www.niederschlagsradar.de">
        <img style="border-left:none;border-bottom: solid 2px #fff;border-top: solid 2px #fff;border-right: solid 2px #fff; float: left;" alt="" src="http://niederschlagsradar.mobi/ImageHandler.ashx?k=muc&teller=-3&w=110&h=110" />
      </a>
    </span>
    <iframe src="http://www.niederschlagsradar.de/htmltool/g-temperature.aspx?bc=fff&l=M&#252;nchen&fc=111&ft=verdana&fs=10px" style="float: left;" frameborder="0" scrolling="no" height="50" width="88"></iframe>
    <iframe src="http://www.niederschlagsradar.de/htmltool/g-wind.aspx?bc=fff&l=M&#252;nchen&fc=111&ft=verdana&fs=10px" style="float: left;" frameborder="0" scrolling="no" height="50" width="88"></iframe>
    <iframe src="http://www.niederschlagsradar.de/htmltool/g-forecast.aspx?bc=fff&ac=ccc&l=M&#252;nchen&fc=111&ft=verdana&fs=10px" style="clear: both;" frameborder="0" scrolling="no" height="159" width="200"></iframe>
    <iframe src="http://www.niederschlagsradar.de/htmltool/g-suchen.aspx?bc=fff&ac=ccc&l=M&#252;nchen&fc=111&ft=verdana&fs=10px" style="clear: both;" frameborder="0" scrolling="no" height="20" width="200"></iframe>     
  </a>
</div>


Oder für Radar habe ich das rausgezogen:

Code: Alles auswählen
<img src="http://niederschlagsradar.mobi/ImageHandler.ashx?k=muc&teller=-3&w=500&h=500"/>


Für andere Orte, einfach Code auf niederschlagsradar.de erzeugen lassen.
KilamMalik
 
Beiträge: 152
Registriert: 31.12.2011, 12:12
Wohnort: Augschburg

Re: WebMatic 1.0 (AddOn): Neue, webbasierte Bedienoberfläche

Beitragvon KilamMalik » 04.12.2012, 02:25

Und so siehts dann auf dem SmartPhone mit kleiner Auflösung aus:
mobile.png
Mobile Ansicht
KilamMalik
 
Beiträge: 152
Registriert: 31.12.2011, 12:12
Wohnort: Augschburg

Re: WebMatic 1.0 (AddOn): Neue, webbasierte Bedienoberfläche

Beitragvon KilamMalik » 04.12.2012, 02:29

So, das wars erst mal für heute.

Bin gespannt auf euer Feedback :-)

Meine Pläne für die Zukunft sind:

- SmartPhone Layout mit zwei Seiten.
- Mit Icons die Geräte noch aufhübschen.
- Diverse kleine Unschönheiten beseitigen.
- Fehlermeldungen von allen Geräten anzeigen.
- Eigene Grafiken über Upload hochladen, wenn das geht.
- Evtl. PIN Schutz.

und noch vieles mehr...

Grüße,
Kilam.
KilamMalik
 
Beiträge: 152
Registriert: 31.12.2011, 12:12
Wohnort: Augschburg

Re: WebMatic 1.0 (AddOn): Neue, webbasierte Bedienoberfläche

Beitragvon baufuzzis » 04.12.2012, 08:14

Wow, die Screenshots und die Funktionen sehen Top aus!! Heute abend will es getestet werden :-)

Da ich im Moment meinen Homematic-"Neubau" quasi in Betrieb nehme, bin ich auch noch auf der Suche nach einer feinen UI dazu, die meine Tablets & Handys (angefangen bei China-Kracher und anderen Androiden, Apfel etc) ordentlich darstellen können.

Greets
baufuzzi
327 Kanäle in 44 Geräten und 41 CUxD-Kanäle in 15 CUxD-Geräten / ArtDMX / 1wire -> LXCCU & iobroker
14x HMW-IO-12-Sw7-DR, 16x HMW-LC-Bl1-DR, 1x HMW-IO-12-Sw14-DR, 1x HM-Sec-MDIR, 1x HM-Sen-MDIR-O-2, 1x HM-CC-SCD, 2x CUX02, 1x HM-Sec-SC-2, 1x CUX06, 1x HM-CC-TC, 10x CUX28, 6x HM-Sec-SD, 1x HM-Sec-SD-Team, 2x CUX13
Benutzeravatar
baufuzzis
 
Beiträge: 94
Registriert: 16.01.2012, 08:22

Re: WebMatic 1.0 (AddOn): Neue, webbasierte Bedienoberfläche

Beitragvon hobbyquaker » 04.12.2012, 08:45

Hallo Kilam!

Sieht sehr sehr gut aus, werde ich bei Gelegenheit auch testen. Ist das mit KendoUI erstellt? Was tun die CGI auf der CCU? Stellen die nur Daten (Json? Xml?) bereit oder generieren die auch HTML? Hast Du mein Projekt HQ WebUI schon angeschaut? Das verfolgt ganz ähnliche Ziele, ist aber eher auf für den Homematic-Entwickler gedacht als für die alltägliche Bedienung. Denke trotzdem dass wir uns da Gegenseitig 1a als Inspiration dienen können ;-)

Viele Grüße,
Bassti
hobbyquaker
 
Beiträge: 2336
Registriert: 12.07.2009, 20:01

Re: WebMatic 1.0 (AddOn): Neue, webbasierte Bedienoberfläche

Beitragvon KilamMalik » 04.12.2012, 09:21

Hi Basti,

habe nur Deine Screenshots und kurz den Thread überflogen. Werde ich mir definitiv installieren, sieht Klasse aus. Ich habs auch als Admin Tool gesehen, sonst hätte ich mit meinem aufgehört :-) Drum denke ich auch, die beiden könnten sich super ergänzen, weil Admin Tool ist nicht mein Ziel, mir geht es nur um die Bedienung.

Zur Technik: Ich habe mich da von Quick Access inspirieren lassen, indem ich cgis fuer diverse Operationen erstellt habe: Raumliste, Favoritenliste, alle Kanäle eines Raums lesen etc. Allerdings erzeugen die Cgis nur json Dateien mit den Werten, und das Html wird dynamisch mit jquery mobile erzeugt. der Vorteil an den cgis mit vielen Inhalten auf einmal ist, dass es schneller geht als viele Abfragen Hintereinander. Man kann das einfach probieren durch direktaufruf der cgis:

/cgi/rooms.cgi gibt die liste der raeume mit ids. dann
/cgi/list.cgi?list=<roomnr> gibt alle geraete des raums mit datenpunkten.

Ist nicht so frei fuer den entwickler wie jeden dp einzeln zu lesen, ich muss also fuer neue funktionen oder änderungen am ui auch mal die cgis anpassen, dafür denke ich ist es schnell.

json habe ich gewählt weil kleiner als xml und da gabs gleich jquery funktion zum lesen.

ui ist von hand erstellt, ist ja eh alles dynamisch, die html ist sehr klein.

Wir können unsere uis ja mal mit buttons gegenseitig verlinken :-)

Grüße,
Kilam.
KilamMalik
 
Beiträge: 152
Registriert: 31.12.2011, 12:12
Wohnort: Augschburg

Re: WebMatic 1.0 (AddOn): Neue, webbasierte Bedienoberfläche

Beitragvon grissli1 » 04.12.2012, 11:11

WOW!!!
Schaut ja richtig super aus! Werde ich mir auf jeden Fall auch mal installieren!!!

Danke und viele Grüße
Chris
System: RaspberryMatic 2.31.25.20180225 auf RPi3, ReverseProxy auf RPi3, mehrere Harmony Hubs
grissli1
 
Beiträge: 2176
Registriert: 22.06.2012, 17:46
Wohnort: Tirol/Austria

Re: WebMatic 1.0 (AddOn): Neue, webbasierte Bedienoberfläche

Beitragvon Dr.Bob » 04.12.2012, 12:38

Ja, Kilam hat hier ne tolle Arbeit geleistet und ich war froh den Testhasen zu spielen :mrgreen:

Hier mal paar Screens da ich in den letzten Wochen paar Icons erstellt habe für meine Liste der Räume.
Dateianhänge
2012-12-04_112247.jpg
2012-12-04_112246.jpg
2012-12-04_112215.jpg
2012-12-04_112100.jpg
2012-12-04_111949.jpg
2012-12-04_111833.jpg
Viele Grüße,
Dr.Bob

HM SmartHome im Neubau:
http://www.elv.de/Von-Anfang-an-%E2%80% ... tail_49648

HM SmartGarten mit GARDENA 24V Bewässerung:
http://www.elv.de/HomeMatic-bringt-Wass ... tail_51154
Video: https://www.youtube.com/watch?v=QUTTix0 ... e=youtu.be

Homematic Usertreffen 2017, Review: https://www.homematic-inside.de/blog/ev ... re-sue-mee

RaspberryMatic 2.29.23: 554 Kanäle in 112 Geräten
Zusatz-Addons: CUxD 1.1a + VPN cloudmatic + Amazon Alexa + XML-API
HW-Zubehör: IRTrans + IPswitch S0 + Raspi B (Photovoltaik)
GUI: CloudMatic + iOS PocketControl
[system.Exec durch CUxD.Exec ersetzt]
Benutzeravatar
Dr.Bob
 
Beiträge: 445
Registriert: 12.05.2011, 10:55

Re: WebMatic 1.0 (AddOn): Neue, webbasierte Bedienoberfläche

Beitragvon BxA » 04.12.2012, 14:15

Wow, sieht echt spitze aus. Muss ich auch mal ausprobieren!

Aber: wie sieht es denn mit der Performance aus? Wenn ich "von QuickAccess inspiriert" lese, sehe ich da Probleme?
QA ist ja schon echt praktisch, aber doch seeehr lahm (Raumwechsel >2 Sekunden, Aktor Einschalten gern mal >5 Sekunden...). Das ist der Hauptgrund, warum ich nun doch mit Geräte-individuellen Apps liebäugel.

Bist "du" da fixer oder ist das einfach ein unlösbares Problem der Web-basierten Tools?
Homematic System im Aufbau...
317 Kanäle in 45 Geräten:
2x HM-Sec-SC, 7x HM-CC-VD, 7x HM-CC-TC, 1x HM-EM-CCM, 14x HMW-IO-12-Sw7-DR, 1x HM-RC-Key3-B, 1x HM-Sec-Key, 8x HMW-LC-Bl1-DR, 1x HM-Sec-TiS, 1x HM-WDS100-C6-O, 1x HM-LC-Sw4-WM, 1x HM-CCU-1
BxA
 
Beiträge: 167
Registriert: 15.03.2012, 18:34

Nächste

Zurück zu WebMatic

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste

cron






© homematic-forum.de & Lizenzgebern. Alle Rechte vorbehalten. Alle Bilder & Texte auf dieser Seite sind Eigentum
der jeweiligen Besitzer und dürfen ohne deren Einwilligung weder kopiert noch sonstwie weiter verwendet werden.