Hoanoho Frontend

dansch · 20 Juli 2014, 01:35:29

Hallo liebe Automatisierungsfreunde,

ich möchte euch gerne einmal mein Frontend vorstellen, an dem ich seit ca. einem Jahr arbeite.
Leider konnte ich meiner besseren Hälfte das Standard FHEM Frontend nicht auf die Nase binden, sodass ich mir etwas eigenes programmiert habe.

Das ganze besteht aus PHP, Javascript/JQuery und HTML.
Es gibt eine Clientapplikationen für den Desktop, das Tablet und für das Smartphone.
Diese Clientapplikationen sind immer aktuell, d.h. wenn auf einer Instanz dieser Clients z.B. ein Licht eingeschaltet wird, wird dieses Licht auch auf allen anderen aktiven Instanzen aktualisiert. So ist sichergestellt, das alle Clients immer den gleichen "Stand" haben, denn nichts ist blöder, als auf seinem Client das Licht angeschaltet zu haben, und auf einem anderen Client bekommt das meine Frau nicht mit -> sie schaltet mir dann das Licht wieder aus obwohl sie denkt es angeschaltet zu haben.

Die Desktop Version kann weit mehr als nur Aktoren zu schalten, es gibt eine Benutzerverwaltung, Importe für Abfallkalender, Unwetterwarnungen, Virtuelle Notizzettel, Rezeptverwaltung, Webcam Anbindung, Anzeige neuer EMails, Anzeige verpasster Anrufe, Push Nachrichten, Ansteuerung der GPIO Pins eines lokalen oder entfernten Raspberry Pi, und noch vieles vieles mehr.

Das ganze läuft auf einem Raspberry Pi.

Bilder sagen mehr als tausend Worte, deshalb seht selbst:

Desktop Version

(http://www.schaefer2.de/homie/desktop1.png)
Login

(http://www.schaefer2.de/homie/desktop2.png)
Hautpseite (Pinnwand), Notizzettel, Überblick über Aktoren und Sensoren (komplett konfigurierbar), neue Mails, Unwetterwarnungen, Erinnerungen zum Müll rausstellen usw.

(http://www.schaefer2.de/homie/desktop3.png)
So sieht das Menu aus.

(http://www.schaefer2.de/homie/desktop4.png)
Haussteuerung ansich, es gibt Ebenen die mit einem Bild hinterlegt werden können, jedes Gerät kann mit einem eigenen Icon hinterlegt werden.
Alle vom Benutzer importierten Grafiken werden in der Datenbank gespeichert.

(http://www.schaefer2.de/homie/desktop5.png)
Steuerung einer Webcam

(http://www.schaefer2.de/homie/desktop7.png)
Detailanzeige eines Gerätes bei Maushover

(http://www.schaefer2.de/homie/desktop8.png)
Licht Schalter

(http://www.schaefer2.de/homie/desktop9.png)
Anrufliste

(http://www.schaefer2.de/homie/desktop10.png)
Datei bereitstellen, automatische Linkgenerierung zum einfachen teilen mit Freunden und Bekannten. Bei Bedarf kann auch ein Passwort vergeben werden. Links werden automatisch nach einer Woche ungültig, und können dann verlängert werden.

(http://www.schaefer2.de/homie/desktop11.png)
Zeitplaner

(http://www.schaefer2.de/homie/desktop12.png)
freie Konfiguration der Pinnwand

(http://www.schaefer2.de/homie/desktop13.png)
Konfiguration von Ebenen und Geräten der Haussteuerung. Geräte können per Drag and Drop auf dem Grundriss platziert werden.

(http://www.schaefer2.de/homie/desktop14.png)
Beispielhafte Auswertung. Hier: Sensor von Udo Schake vom Volkszähler Projekt, zum automatischen erfassen der Parameter im Stromzähler.

(http://www.schaefer2.de/homie/desktop15.png)
Weitere Auswertung, diesmal Wetterdaten.

Tablet Version

(http://www.schaefer2.de/homie/tablet1.png)
Übersichtsseite, Wetterwarnungen, Abfalltermine werden bei bedarf automatisch eingeblendet und ausgeblendet.
Die gesamte Tabletversion reagiert ohne nachladen der Seite auf Änderungen. Ideal um Steuerungstablets an der Wand zu befestigen und einfach laufen zu lassen.

(http://www.schaefer2.de/homie/tablet2.png)
Übersicht aller Geräte auf einer Ebene. Man kann natürlich auch direkt in Räume wechseln, je nachdem was man gerade benötigt.

(http://www.schaefer2.de/homie/tablet3.png)
Wetter

(http://www.schaefer2.de/homie/tablet4.png)
Wetter

(http://www.schaefer2.de/homie/tablet5.png)
Wetter

Smartphone Version

(http://www.schaefer2.de/homie/smart1.png)
Übersichtsseite wie bei der Pinnwand der Desktopversion

(http://www.schaefer2.de/homie/smart2.png)
Raumübersicht nach Ebenen gruppiert

(http://www.schaefer2.de/homie/smart3.png)
Geräte in einem Raum

(http://www.schaefer2.de/homie/smart4.png)
Jalousiesteuerung

(http://www.schaefer2.de/homie/smart5.png)
Temperatur

(http://www.schaefer2.de/homie/smart6.png)
Licht

(http://www.schaefer2.de/homie/smart7.png)
Webcam

(http://www.schaefer2.de/homie/smart8.png)
Wetter

(http://www.schaefer2.de/homie/smart9.png)
Wetter

Immer her mit dem Feedback!

Grüße
Daniel

Rince · 20 Juli 2014, 07:11:49

Sieht sehr beeindruckend aus,

Dr. Boris Neubert · 20 Juli 2014, 07:41:31

Hallo,

optisch sehr ansprechend - wie kann ich das mal ausprobieren?

Viele Grüße
Boris

punker · 20 Juli 2014, 09:27:53

Wow, schaut super aus! Kommt halt drauf an, wie einfach es umzusetzen wäre!

der-Lolo · 20 Juli 2014, 11:41:46

Wirklich beeindruckend... Schön und Ideenreich gemacht.

peterchen89 · 20 Juli 2014, 11:52:33

Ein echt schönes Frontend! Ich glaube auch meine Freundin würde das sehr gut gefallen. Habe das Frontend schon vor ein paar Wochen auf deinem Blog gefunden (http://www.bauimtal.de/?page_id=82) und kann es kaum erwarten dass man es irgendwie mal selbst ausprobieren kann.

Wie hast du die Anbindung an FHEM gestaltet?

dansch · 20 Juli 2014, 12:00:33

Danke für die Blumen!

Ich werde bald einen Demo Zugang bereitstellen, an dem jeder testen und Bugreporten kann wenn er möchte.
Anschließend wird das Frontend veröffentlicht, die Basis (die Steuerung) wird es umsonst, weitere Module dann für wirklich kleines Geld dann dazu zu kaufen geben. Modulentwickler werden Module umsonst bekommen. Wenn sich eine breite Community daraus entwickeln würde, die das ganze auch weiterprogrammieren will, würde ich es vermutlich auch als OpenSource veröffentlichen.

Die Ansteuerung der Geräte ist ein simpler HTTP call an FHEM.
Zumindest für die Geräte die ich per FHEM Angebunden habe. Die GPIO Pins von den Raspberrys z.B. werden von mir direkt angesprochen, da ich ja auch entfernte Rasperberrys ansprechen kann. Das ist z.B. ganz cool wenn man eine Rasensprenger-Steuerung an einem Pi per GPIO in der Garage angeschlossen hat

Ich würde gerne künftig noch die FHEM Konfiguration auslesen und schreiben können, damit dies für die Allgemeinheit einfacher wird und am Ende dann auch eine runde Sache wird.

peterchen89 · 20 Juli 2014, 12:08:06

Zitat von: dansch am 20 Juli 2014, 12:00:33
Die Ansteuerung der Geräte ist ein simpler HTTP call an FHEM.
Zumindest für die Geräte die ich per FHEM Angebunden habe. Die GPIO Pins von den Raspberrys z.B. werden von mir direkt angesprochen, da ich ja auch entfernte Rasperberrys ansprechen kann. Das ist z.B. ganz cool wenn man eine Rasensprenger-Steuerung an einem Pi per GPIO in der Garage angeschlossen hat

Hast du dir mal angesehen ob es nicht vielleicht robuster sein könnte das über das Telnet-Interface anzusprechen?

Zu der direkten Ansteuerung von GPIO Pins: FHEM bringt doch schon den Code dazu mit und ermöglicht auf der Ebene auch das Verknüpfen von Ereignissen. Wenn du das Ausführen in Richtung des Frontends ziehst müsstest du konsequenterweise die notifies etc. auch auf diese Ebene ziehen. Ist das sinnvoll?

Hollo · 20 Juli 2014, 12:10:07

Da hast Du Dir aber wirklich viel Arbeit gemacht; von der Optik und dem WAF spitze.
Gerade mit den zusätzlichen Optionen wie Notizzettel und freier Anordnung ideal für ein grosses Anzeigedisplay in der Küche oder so.
Interesse ist geweckt, die Basis schon super, da geht bestimmt noch was.

dansch · 20 Juli 2014, 12:12:35

Zitat von: peterchen89 am 20 Juli 2014, 12:08:06
Hast du dir mal angesehen ob es nicht vielleicht robuster sein könnte das über das Telnet-Interface anzusprechen?

Zu der direkten Ansteuerung von GPIO Pins: FHEM bringt doch schon den Code dazu mit und ermöglicht auf der Ebene auch das Verknüpfen von Ereignissen. Wenn du das Ausführen in Richtung des Frontends ziehst müsstest du konsequenterweise die notifies etc. auch auf diese Ebene ziehen. Ist das sinnvoll?

Danke für den Tip mit dem Telnet, werde ich mir ansehen.

Soweit ich gesehen habe kann FHEM nur GPIO Pins am gleichen Pi ansteuern aber nicht von entfernten.
Die Rückmeldung (die meinst du ja mit dem Notify oder ?) erfolgt, der gesteuerte PI meldet das schalten zurück und der Websocket schickt dann die Nachricht an alle Clients raus, erst dann wird im Frontend auch das Gerät als Eingeschaltet gekennzeichnet.

peterchen89 · 20 Juli 2014, 12:17:10

Zitat von: dansch am 20 Juli 2014, 12:12:35
Danke für den Tip mit dem Telnet, werde ich mir ansehen.

Gerne!

Zitat von: dansch am 20 Juli 2014, 12:12:35
Soweit ich gesehen habe kann FHEM nur GPIO Pins am gleichen Pi ansteuern aber nicht von entfernten.
Die Rückmeldung (die meinst du ja mit dem Notify oder ?) erfolgt, der gesteuerte PI meldet das schalten zurück und der Websocket schickt dann die Nachricht an alle Clients raus, erst dann wird im Frontend auch das Gerät als Eingeschaltet gekennzeichnet.

Das müsste mit dem Modul FHEM2FHEM eigentlich funktionieren. Dabei installierst du noch mal eine FHEM Instanz auf dem entfernten Pi und kannst die Devices von dort aus dann in deiner Hauptinstanz nutzen. Habe das aktuell schon für Text to Speech im Einsatz und kann nicht darüber klagen.

Mit einem Notify kannst du z.b. auch darauf reagieren wenn deine Bewässerung eingeschaltet wird und z.b. in FHEM einen timer starten der diese automatisch nach definierter Zeit wieder ausschaltet.

Zu dem "der Websocket schickt dann die Nachricht an alle Clients raus" ich glaube per telnet müsste man auch den Eventmonitor auslesen können. Damit kriegt man dann mit was FHEM macht und kann das Frontend entsprechend aktualisieren.

dansch · 20 Juli 2014, 12:20:37

Zitat von: peterchen89 am 20 Juli 2014, 12:17:10
Gerne!
Das müsste mit dem Modul FHEM2FHEM eigentlich funktionieren. Dabei installierst du noch mal eine FHEM Instanz auf dem entfernten Pi und kannst die Devices von dort aus dann in deiner Hauptinstanz nutzen. Habe das aktuell schon für Text to Speech im Einsatz und kann nicht darüber klagen.

Mit einem Notify kannst du z.b. auch darauf reagieren wenn deine Bewässerung eingeschaltet wird und z.b. in FHEM einen timer starten der diese automatisch nach definierter Zeit wieder ausschaltet.

Zu dem "der Websocket schickt dann die Nachricht an alle Clients raus" ich glaube per telnet müsste man auch den Eventmonitor auslesen können. Damit kriegt man dann mit was FHEM macht und kann das Frontend entsprechend aktualisieren.

Probiere ich mal aus, die Anforderung mit dem Timer ist bei mir nämlich noch offen

justme1968 · 20 Juli 2014, 12:22:41

schau dir mal die verschiedenen varianten von inform an. das ist auch die grundlagen von longpoll und dem eventmonitor und das was z.b. readingsHistory macht.

gruss
andre

dansch · 20 Juli 2014, 12:26:13

Ich habe mal noch ein paar Screenshots geschossen.

(http://www.schaefer2.de/homie/desktop16.png)
Pinnwand mit Unwetterwarnung und ungelesenen Mails für den angemeldeten User.

(http://www.schaefer2.de/homie/desktop17.png)
Lesen der bereitgestellten Datei, hier ein Bild. (nur diese Seite ist von extern erreichbar, alle anderen Seiten des Frontends haben einen IP-Filter verpasst bekommen, welcher in der Konfiguration eingestellt werden kann).

(http://www.schaefer2.de/homie/desktop20.png)
Das Bild kann vergrößert werden.

(http://www.schaefer2.de/homie/desktop18.png)
Passwortdialog

(http://www.schaefer2.de/homie/desktop21.png)
Syntaxhighlighting für Quellcodes

peterchen89 · 20 Juli 2014, 12:31:11

Zitat von: justme1968 am 20 Juli 2014, 12:22:41
schau dir mal die verschiedenen varianten von inform an. das ist auch die grundlagen von longpoll und dem eventmonitor und das was z.b. readingsHistory macht.

Vielleicht könnte man auf der Basis ein FHEM-Modul bauen, dass die Events in eine message queue wie rabbit mq einfügt. Dann könnte man etwas eleganter aus Node/PHP darauf zugreifen. Die Kommunikation in die andere Richtung könnte dann vielleicht auch über eine MQ laufen, sodass man für Hin- und Rückrichtung die selbe Technik verwenden kann.