Material Design

[Michael K]

Ich lese in dem Forum immer wieder mit Interesse die einzelnen Beiträge und frage mich, wie das wohl dann beim jeweiligen Fragesteller aussehen mag. Leider gibt es hier nur wenige Beiträge mit konkreten Screenshots. Nachdem ich jetzt nach einigem Basteln die erste Version meiner Anzeige fertig habe, gehe ich mal mit gutem Beispiel voran.

Zweck meiner Anzeige: Wetterhäuschen und Statusanzeige, außerdem Schaltzentrale für automatisierte Funktionen. Vorgabe war: Muss meiner Frau gefallen. Design-mäßig habe ich mich dabei vom "material design" der neuen Android-Versionen und von den Karten von "google now" inspirieren lassen. Die Anzeige klebt auf der Wand vom Wohnzimmer, wo man ständig vorbei kommt.

Die Anzeige besteht aus drei Abschnitten:

• Die obere Hälfte zeigt Informationen an, die permanent sichtbar sind (Uhrzeit, Innen- und Außentemperatur, Wettervorhersage). Min/Max Werte kann man zurücksetzen, in dem man darauf "touched"
• Die untere Hälfte zeigt Status-Meldungen an. Im Normalfall (wenn alles im Haus ist wie es sein soll), ist die Anzeige leer. Sind z.B. im Dach Fenster offen, oder brennt das Licht, dann wird das hier angezeigt. Das Licht kann man auch von hier gleich ausschalten. Ebenfalls wird hier angezeigt, wenn die Anwesenheits-Simulation läuft. Außerdem gibt es eine Reihe von zeitgesteuerten Meldungen, von "Die Hasen sind hungrig" (kommt jeden Tag um 11:00) bis zu "Kaffemaschine entkalken" (kommt alle 2 Monate). Diese Meldungen bleiben, bis man sie abhakt. Es werden bis zu 5 Meldungen angezeigt, die wichtigsten zuerst.
• Ganz unten gibt es noch eine Aktionsleiste mit 5 Knöpfen, wo derzeit nur eine Taste belegt ist - das Aktivieren der Anwesenheitssimulation

Die Idee an dem Design ist, dass ich durch den unteren Bereich relativ einfach und flexibel zusätzliche Anzeigen erweitern kann, ohne die Grundanzeige verändern zu müssen. "Licht im Keller eingeschaltet" steht auf der Liste, aber auch "Sauna aufgeheizt" oder "Garage offen" oder "Batteriewarnung in Sensor 15", usw. Und was auch noch fehlt: Den Temperatur-Sensor für das Dachgeschoss muss ich noch zusammenlöten.

Vielleicht ist ja für den einen oder anderen eine Anregung für ein eigenes Design dabei.

Michael

Screenshot-01.jpg (60.6 KiB) 18066 mal betrachtet

Reguläre Anzeige, wenn im Haus alles in Ordnung ist.

Screenshot-02.jpg (79.57 KiB) 18066 mal betrachtet

Zusätzliche Anzeigen. Das wichtigste ist, das eines der fünf Fenster im Dach offen ist, deshalb steht das als erstes.

Screenshot-03.jpg (66.8 KiB) 18066 mal betrachtet

Das Fenster ist jetzt zu, deshalb rückt das Licht im Dach an die oberste Stelle. Und die Anwesenheitssimulation ist auch nicht aktiv, daher verschwindet auch diese Anzeige.

[riconr1]

Hi Michael,

sehr schönes Design. Gefällt mir wirklich gut. Sag mal bitte, wie hast Du diese Schöne Wetterzeile mit Vorschau eingebunden? Woher holst Du die Daten? Woher die Bilder?
Hast Du da eventuell einen Link oder soager eine kleine Anleitung zum Nachbauen für mich?

MfG Enrico

[Michael K]

Danke für das nette Feedback.

Zur Wetter-Grafik: Das ist ein Ausschnitt eines Screenshots von den ORF Wetterseiten. Gibt es für jedes Bundesland, z.B. http://wetter.orf.at/wien/prognose

Ich nutze einen ausgeschnittenen Screenshot. Freundlicherweise ist die orf.at Seite passend zu meinem Farbschema.

wetter.jpg (39.61 KiB) 17814 mal betrachtet

Der Weg das im Homestatus zu zeigen geht leider nur über einen Umweg:

• Ich lasse auf meinem Linux Server durch einen cronjob stündlich einen Screenshot von orf.at erzeugen und zuschneiden. Das ergibt ein jpg, so wie es im Display angezeigt wird. Konkret nutze ich "wkhtmltoimage", das ist ein commandline tool, das alles macht (1 Aufruf, Du übergibst html-Adresse und Koordinaten des Bildausschnitts (oben, links, Höhe, Breite) und das Tool liefert ein fertiges .jpg

  Code: Alles auswählen

  # Läuft auf Ubuntu Server und wird über Cronjob stündlich aufgerufen
wkhtmltoimage --format jpg --zoom 1.5 --crop-x 275 --crop-y 289 --crop-h 190 --crop-w 714 http://wetter.orf.at/wien/prognose /usr/share/webserver/html/images/wetter.jpg

• Auf meinem Server läuft zusätzlich ein Webserver, der das Bild über html im lokalen Netz zur Verfügung stellt, d.h. ich kann in meinem Netzwerk über http://meinserver.local/html/images/wetter.jpg darauf zugreifen.
• in der Zelle von Homestatus verweise ich nur auf das externe Bild "{img:http://meinserver.local/html/images/wetter.jpg,3600}{align:center}". Innerhalb von HomeMatic oder Homestatus mache ich da gar nichts mehr.

Eigentlich ganz einfach (wenn man einen eigenen Linux Server hat...). Sollte orf.at mal sein Farbschema ändern, habe ich ein echtes Problem...