Bilder eurer erstellten Remotes/Oberflächen
Moderator: Co-Administratoren
-
- Beiträge: 141
- Registriert: 04.04.2019, 18:26
- Hat sich bedankt: 14 Mal
- Danksagung erhalten: 13 Mal
Re: Bilder eurer erstellten Remotes/Oberflächen
Danke, das freut mich.
Ich lasse das ganze immer durch meine Mutter testen (Grund: keine Ahnung von Technik...)
Wenn sie das bedienen kann, dann bin ich auf dem richtigen Weg.
Hatte mich hier im Forum inspirieren lassen, aber auch durch die Stilrichtung von Loxone.
Ich lasse das ganze immer durch meine Mutter testen (Grund: keine Ahnung von Technik...)
Wenn sie das bedienen kann, dann bin ich auf dem richtigen Weg.
Hatte mich hier im Forum inspirieren lassen, aber auch durch die Stilrichtung von Loxone.
-
- Beiträge: 176
- Registriert: 20.12.2017, 18:10
- Hat sich bedankt: 11 Mal
- Danksagung erhalten: 1 Mal
Re: Bilder eurer erstellten Remotes/Oberflächen
Hallo zusammen,
ich möchte Euch gerne meine Oberfläche zeigen. Diese läuft auf einem iPAD Air2. Via Pocket Control schalten zwei Bewegungsmelder das Display des iPADs ein. Die Mediola App selbst läuft im Kiosk Modus.
In der nächsten Version, werde ich die Rubrik Heizung überarbeiten.
Gruß
ABC
ich möchte Euch gerne meine Oberfläche zeigen. Diese läuft auf einem iPAD Air2. Via Pocket Control schalten zwei Bewegungsmelder das Display des iPADs ein. Die Mediola App selbst läuft im Kiosk Modus.
In der nächsten Version, werde ich die Rubrik Heizung überarbeiten.
Gruß
ABC
-
- Beiträge: 141
- Registriert: 04.04.2019, 18:26
- Hat sich bedankt: 14 Mal
- Danksagung erhalten: 13 Mal
Mediola
Moin.
Hier noch mal ein Update meiner Benutzeroberfläche. Wird ständig weiterentwickelt mit der Hilfe von Personen, die mit der Technik eigentlich nichts zu tun haben, aber dennoch alles im Griff haben möchten.
Zur Aufteilung des Bildschirms:
Oberer Bereich: Beinhaltet Uhrzeit, Datum und den aktuellen Duty Cycle der CCU3.
In der Bildmitte: Die quadratischen Schaltflächen sind Bedienelemente, mit denen die Geräte/Modi bedient werden können. Die jeweiligen Zustände werden über "Kontrollleuchten" in den Schaltflächen angezeigt. Blau bedeutet (je nach Gerät) Eingeschaltet/Aktiv/Vollautomatik, Gelb bedeutet Standby/Handbedienung/Teilautomatik usw. und Schwarz bedeutet: Aus/nicht aktiv. Zudem gibt es auch noch Rot für Fehlermeldungen, z.B. bei Rasenmäher und Staubsauger. Alle Meldungen und Infos zum jeweiligen Status sind direkt in der Schaltfläche zu sehen (im Beispiel beim Rasenmäher die nächste Startzeit).
Beleuchtung, Rollläden und Heizkörper können direkt bedient werden, sowohl zentral als auch einzeln per Untermenü. Fernseher, Staubsauger und Rasenmäher können in ihren Grundfunktionen bedient werden. Zudem gibt es noch den direkten Link zum Vertretungsplan der Schule und eine Schaltfläche für den Garagentoröffner. Die beiden letzten Schaltflächen dienen zum Aktivieren des Urlaubsmodus (stellt die Heizungssteuerung und die Rollladensteuerung entsprechend um) und zum Ein/Ausschalten von Lautsprecherdurchsagen ("Waschmaschine fertig", "Briefeinwurf", usw.)
Die Symbole in der unteren Reihe sind rein informativ und zeigen (v.l.n.r): Außentemperatur, Waschmaschine fertig, Trockner fertig, Tank Luftentfeuchter voll, Müllabfuhr, Fensterstatus, CCU3-Meldungen. Gelb bedeutet hier: Warnung und Rot bedeutet Handlungsbedarf (z.B. Fenster schließen, Mülltonne rausstellen, Waschmaschine ausräumen, Luftentfeuchter leeren usw.)
Im Beispiel zu sehen: Das Hauptmenü, sowie im zweiten Bild die Auswahlmöglichkeit für den Staubsauger und im dritten Bild die kommenden Abfalltermine.
Das Dashboard steuert die Geräte per CCU3-Plugin, ioBroker-Plugin und Philips hue-Plugin.
Viele Grüße
Michael
Hier noch mal ein Update meiner Benutzeroberfläche. Wird ständig weiterentwickelt mit der Hilfe von Personen, die mit der Technik eigentlich nichts zu tun haben, aber dennoch alles im Griff haben möchten.
Zur Aufteilung des Bildschirms:
Oberer Bereich: Beinhaltet Uhrzeit, Datum und den aktuellen Duty Cycle der CCU3.
In der Bildmitte: Die quadratischen Schaltflächen sind Bedienelemente, mit denen die Geräte/Modi bedient werden können. Die jeweiligen Zustände werden über "Kontrollleuchten" in den Schaltflächen angezeigt. Blau bedeutet (je nach Gerät) Eingeschaltet/Aktiv/Vollautomatik, Gelb bedeutet Standby/Handbedienung/Teilautomatik usw. und Schwarz bedeutet: Aus/nicht aktiv. Zudem gibt es auch noch Rot für Fehlermeldungen, z.B. bei Rasenmäher und Staubsauger. Alle Meldungen und Infos zum jeweiligen Status sind direkt in der Schaltfläche zu sehen (im Beispiel beim Rasenmäher die nächste Startzeit).
Beleuchtung, Rollläden und Heizkörper können direkt bedient werden, sowohl zentral als auch einzeln per Untermenü. Fernseher, Staubsauger und Rasenmäher können in ihren Grundfunktionen bedient werden. Zudem gibt es noch den direkten Link zum Vertretungsplan der Schule und eine Schaltfläche für den Garagentoröffner. Die beiden letzten Schaltflächen dienen zum Aktivieren des Urlaubsmodus (stellt die Heizungssteuerung und die Rollladensteuerung entsprechend um) und zum Ein/Ausschalten von Lautsprecherdurchsagen ("Waschmaschine fertig", "Briefeinwurf", usw.)
Die Symbole in der unteren Reihe sind rein informativ und zeigen (v.l.n.r): Außentemperatur, Waschmaschine fertig, Trockner fertig, Tank Luftentfeuchter voll, Müllabfuhr, Fensterstatus, CCU3-Meldungen. Gelb bedeutet hier: Warnung und Rot bedeutet Handlungsbedarf (z.B. Fenster schließen, Mülltonne rausstellen, Waschmaschine ausräumen, Luftentfeuchter leeren usw.)
Im Beispiel zu sehen: Das Hauptmenü, sowie im zweiten Bild die Auswahlmöglichkeit für den Staubsauger und im dritten Bild die kommenden Abfalltermine.
Das Dashboard steuert die Geräte per CCU3-Plugin, ioBroker-Plugin und Philips hue-Plugin.
Viele Grüße
Michael
Re: Bilder eurer erstellten Remotes/Oberflächen
Dank der vielen Informationen in diesem Forum und diverse Scripte etc. möchte ich euch meine Visu zeigen. EIn paar Sachen fehlen noch.
Benutze ein CCU3 und ioBroker.
Benutze ein CCU3 und ioBroker.
Re: Bilder eurer erstellten Remotes/Oberflächen
Hab mich über die Feiertage auch mal an die Visualiserung gemacht
Und hier das Ergebnis Bin nur mit dem Design noch nicht ganz zufrieden... weiß nur nicht warum
Und beim Schreiben von Scripten bzw einbinden in Neo scheiterts noch etwas, wie z.b. beim Batteriezustand.
Und hier das Ergebnis Bin nur mit dem Design noch nicht ganz zufrieden... weiß nur nicht warum
Und beim Schreiben von Scripten bzw einbinden in Neo scheiterts noch etwas, wie z.b. beim Batteriezustand.
-
- Beiträge: 141
- Registriert: 04.04.2019, 18:26
- Hat sich bedankt: 14 Mal
- Danksagung erhalten: 13 Mal
Re: Bilder eurer erstellten Remotes/Oberflächen
Wenn ich mir eine Bemerkung zum Design erlauben darf: Am allerwichtigsten ist sicherlich in den meisten Fällen: Weniger ist mehr. Daher würde ich vorschlagen, zunächst mal grundsätzlich alles, was angezeigt wird, in Frage zu stellen. Beispielsweise: Wie viele Personen im Haushalt müssen wissen, wann genau Sonnenaufgang- und Untergang ist? Braucht man tatsächlich alle dargestellten Bedienelemente (z.B. Boots-Funktion beim Heizkörper)? Braucht man bei der Temparaturanzeige unbedingt die Nachkommastelen? Und so weiter.chv1989 hat geschrieben: ↑03.01.2021, 13:56Hab mich über die Feiertage auch mal an die Visualiserung gemacht
Und hier das Ergebnis Bin nur mit dem Design noch nicht ganz zufrieden... weiß nur nicht warum
Und beim Schreiben von Scripten bzw einbinden in Neo scheiterts noch etwas, wie z.b. beim Batteriezustand.
Unser Professor hat damals immer gesagt: Die Steigerung von "Intelligent" ist "Einfach".
Mein Design ist sicherlich auch noch weit entfernt von Perfektion, aber ich habe bisher bei jeder Überarbeitung versucht, die Symbole nochmals einfacher zu gestalten, und nochmals weniger Bedienelemente und Informationen darzustellen.
- Yosh
- Beiträge: 90
- Registriert: 24.07.2021, 23:30
- System: CCU
- Hat sich bedankt: 21 Mal
- Danksagung erhalten: 11 Mal
Re: Bilder eurer erstellten Remotes/Oberflächen
Moin zusammen,
hier meine Visualisierung auf einem Samsung Tab A6 an der Wand im Arbeitszimmer zwischen den Schreibtischen meiner Frau und mir.
Eine fundamentale Erkenntnis beim Erstellen war, dass alles groß sein muss, wenn man aus einem halben Meter Entfernung noch Text lesen will. Deshalb gibt es auch für alle Textinfos auf der Homepage Popups mit dem Text in Größe 45.
Das Design ist (bis auf eine Ausnahme) einfarbig gehalten. Hintergrund ist, dass ich einen Arbeitskollegen habe, der farbenblind ist und der kann nichts damit anfangen, ob ein Button rot, grün oder blau leuchtet. Außerdem bevorzuge ich selbst eher ein klares, ruhiges Design.
Bei der Bedingung ist mein Ansatz, den aktuellen Status im „Überschrift-Bereich“ anzuzeigen. Aktionsbuttons sind als „Toggle Taster“ realisiert deren Beschriftung jeweils anzeigen, was passiert, wenn man den Button drückt. Ist also aktuell eine Lampe an, zeigt der entsprechende Schalter das „Aus“ Symbol. Ist die Lame aus, zeigt er das „An“ Symbol; steht die Heizung auf Automatik, zeigt der entsprechende Schalter ein „M“ usw.
Bis auf wenige Ausnahmen habe ich ausschließlich die Icons benutzt, die mit dem Neo Creator kommen. Das Ventilsymbol in der Heizungssteuerung ist z.B. aus beiden „nächster Track“ und „vorheriger Track“ Icons aus der Bedienungsgruppe zusammengesetzt. Die grafische Anzeige der Ventile und Temperatur sind Standard Slider, bei denen ich mit den CSS Eigenschaften ein wenig gespielt habe. Die wenigen anderen Icons sind meist von mir modifizierte Icons vom Neo Creator (Tür gespiegelt, Kalender Icon auf Wochenende geändert, Batterie Status auf Weiß gemacht). Die einzigen wirklich fremden Icons sind die Spülmaschine und die AccuWeather Icons.
Die Homepage zeigt uns die Informationen, die wir morgens nach dem Aufstehen brauchen:
Wetter, Fahrzeiten in die Firma und aktuelle Spritpreise, meine nächsten 10 Termine, Status von Licht und Rollos, Status der „weißen Ware“ und Müll. Über jedem Bereich liegt ein „unsichtbarer“ Schalter der das oben erwähnte Pop-Up mit Schriftgröße 45 hervorbringt. Außerdem sind links unten noch die vier Buttons zu den anderen Seiten.
.
Es gibt die folgenden Nebenseiten:
Licht
Heizung
Rollos
Batterien (wobei hier in der Hompage auf dem Schalter als Status der aktuelle Akkustand des Tablet angezeigt wird und ob es geladen wird)
.
Außerdem kommt man über den "unsichtbaren" Schalter über dem Wetter auf der Hompage noch auf ein PopUp von der Größe der Seite mit der Vorhersage, das sich nach 10 Sekunden wieder schließt.
Gruß,
Yosh
hier meine Visualisierung auf einem Samsung Tab A6 an der Wand im Arbeitszimmer zwischen den Schreibtischen meiner Frau und mir.
Eine fundamentale Erkenntnis beim Erstellen war, dass alles groß sein muss, wenn man aus einem halben Meter Entfernung noch Text lesen will. Deshalb gibt es auch für alle Textinfos auf der Homepage Popups mit dem Text in Größe 45.
Das Design ist (bis auf eine Ausnahme) einfarbig gehalten. Hintergrund ist, dass ich einen Arbeitskollegen habe, der farbenblind ist und der kann nichts damit anfangen, ob ein Button rot, grün oder blau leuchtet. Außerdem bevorzuge ich selbst eher ein klares, ruhiges Design.
Bei der Bedingung ist mein Ansatz, den aktuellen Status im „Überschrift-Bereich“ anzuzeigen. Aktionsbuttons sind als „Toggle Taster“ realisiert deren Beschriftung jeweils anzeigen, was passiert, wenn man den Button drückt. Ist also aktuell eine Lampe an, zeigt der entsprechende Schalter das „Aus“ Symbol. Ist die Lame aus, zeigt er das „An“ Symbol; steht die Heizung auf Automatik, zeigt der entsprechende Schalter ein „M“ usw.
Bis auf wenige Ausnahmen habe ich ausschließlich die Icons benutzt, die mit dem Neo Creator kommen. Das Ventilsymbol in der Heizungssteuerung ist z.B. aus beiden „nächster Track“ und „vorheriger Track“ Icons aus der Bedienungsgruppe zusammengesetzt. Die grafische Anzeige der Ventile und Temperatur sind Standard Slider, bei denen ich mit den CSS Eigenschaften ein wenig gespielt habe. Die wenigen anderen Icons sind meist von mir modifizierte Icons vom Neo Creator (Tür gespiegelt, Kalender Icon auf Wochenende geändert, Batterie Status auf Weiß gemacht). Die einzigen wirklich fremden Icons sind die Spülmaschine und die AccuWeather Icons.
Die Homepage zeigt uns die Informationen, die wir morgens nach dem Aufstehen brauchen:
Wetter, Fahrzeiten in die Firma und aktuelle Spritpreise, meine nächsten 10 Termine, Status von Licht und Rollos, Status der „weißen Ware“ und Müll. Über jedem Bereich liegt ein „unsichtbarer“ Schalter der das oben erwähnte Pop-Up mit Schriftgröße 45 hervorbringt. Außerdem sind links unten noch die vier Buttons zu den anderen Seiten.
.
Es gibt die folgenden Nebenseiten:
Licht
Heizung
Rollos
Batterien (wobei hier in der Hompage auf dem Schalter als Status der aktuelle Akkustand des Tablet angezeigt wird und ob es geladen wird)
.
Außerdem kommt man über den "unsichtbaren" Schalter über dem Wetter auf der Hompage noch auf ein PopUp von der Größe der Seite mit der Vorhersage, das sich nach 10 Sekunden wieder schließt.
Gruß,
Yosh
Umgebung: CCU3 (FW 3.69.7) / FB 7590 / Hue Bridge mit 17 Lampen (Hue, TRÅDFRI, Osram) / 6x Amazon Echo
Geräte: 505 Kanäle in 83 Geräten // 42 Kanäle in 6 Heizgruppen // 140 CUxD-Kanäle in 20 CUxD-Geräten
Addons: NEO Server 2.12.2 / CUx-Daemon 2.10.1 / CUxD-Highcharts 1.4.5 / Programme drucken 2.6 / HM Pdetect 1.15 / Philips Hue 3.2.5 / HQ WebUI 2.5.9
API Keys: Google (Script , Maps, Calendar) / AccuWeather / Tankerkönig / PushOver
Sonstige: SDV v4.09.04G / AIO Creator NEO v3.0.3 mit 2x Samsung S20FE und 1x Tab A6 / Mediola Cloud / Alexa.sh
Geräte: 505 Kanäle in 83 Geräten // 42 Kanäle in 6 Heizgruppen // 140 CUxD-Kanäle in 20 CUxD-Geräten
Addons: NEO Server 2.12.2 / CUx-Daemon 2.10.1 / CUxD-Highcharts 1.4.5 / Programme drucken 2.6 / HM Pdetect 1.15 / Philips Hue 3.2.5 / HQ WebUI 2.5.9
API Keys: Google (Script , Maps, Calendar) / AccuWeather / Tankerkönig / PushOver
Sonstige: SDV v4.09.04G / AIO Creator NEO v3.0.3 mit 2x Samsung S20FE und 1x Tab A6 / Mediola Cloud / Alexa.sh
-
- Beiträge: 141
- Registriert: 04.04.2019, 18:26
- Hat sich bedankt: 14 Mal
- Danksagung erhalten: 13 Mal
Re: Bilder eurer erstellten Remotes/Oberflächen
Hallo.
Sicherlich ist es toll, wenn sehr viele Informationen zum Darstellen zur Verfügung stehen. Aber hilft das weiter?
Ich frage mich jedoch beim Gestalten von Bedienoberflächen regelmäßig:
Ich glaube, die wahre Kunst im Gestalten von Benutzeroberflächen ist das Weglassen.
Frei nach dem Motto: Die Steigerung von "intelligent" ist "einfach".
Sicherlich ist es toll, wenn sehr viele Informationen zum Darstellen zur Verfügung stehen. Aber hilft das weiter?
Ich frage mich jedoch beim Gestalten von Bedienoberflächen regelmäßig:
- Welche Informationen bringen einen echten Mehrwert im täglichen Gebrauch der Visualisierung?
- Welche Informationen sind im täglichen Gebrauch nicht relevant oder sogar überflüssig?
- Tue ich den Benutzern meiner UI einen Gefallen mit überfrachteten Oberflächen oder verwirre ich sie nur?
- Welche Informationen/Schaltflächen kann ich bei meiner nächsten Überarbeitung vereinfachen oder entfernen?
Ich glaube, die wahre Kunst im Gestalten von Benutzeroberflächen ist das Weglassen.
Frei nach dem Motto: Die Steigerung von "intelligent" ist "einfach".
- Yosh
- Beiträge: 90
- Registriert: 24.07.2021, 23:30
- System: CCU
- Hat sich bedankt: 21 Mal
- Danksagung erhalten: 11 Mal
Re: Bilder eurer erstellten Remotes/Oberflächen
Moin,
Ich kann nur für mich sprechen und da ist es so, dass auf der Hompage evtl. Luftdruck, Windgeschwindigkeit und Sonnen Auf- und Untergang "überflüssig" wären. Die restlichen Informatationen werden sowohl von meiner Frau, als auch von mir als angenehm zu haben und nützlich empfunden, insbesondere die AccuWeather 12 Stunden Vorhersage mit den Icons.
Übrigens, die hier wichtigste Visualisierung ist ein HM-OU-LED16 direkt neben der Wohnungstür Linke Seite alles Grün = Wir können beruhigt aus dem Haus gehen und den Alarm einschalten...
Gruß,
Yosh
Zunächst: Ich bin bei Dir, was das "nicht überladen" und insbesondere Dein Schlusswort angeht! Irgendwo in diesem Forum habe ich auch den Spruch gelesen: "Ein Smarthome, das mit einer App bedient werden muss, ist nicht Smart". Gefällt mir auch sehr gut.romeoalfa1975 hat geschrieben: ↑14.12.2021, 10:56Hallo.
Sicherlich ist es toll, wenn sehr viele Informationen zum Darstellen zur Verfügung stehen. Aber hilft das weiter?
Ich kann nur für mich sprechen und da ist es so, dass auf der Hompage evtl. Luftdruck, Windgeschwindigkeit und Sonnen Auf- und Untergang "überflüssig" wären. Die restlichen Informatationen werden sowohl von meiner Frau, als auch von mir als angenehm zu haben und nützlich empfunden, insbesondere die AccuWeather 12 Stunden Vorhersage mit den Icons.
Ich überarbeite gerade die Handyversion, welche ich vor der Tablet Version gestaltet habe und mit der ich quasi den Neo Creator "gelernt" habe. Sind eher Kleinigkeiten, aber genau dieser Deiner Punkte ist da ein Thema.
- Welche Informationen/Schaltflächen kann ich bei meiner nächsten Überarbeitung vereinfachen oder entfernen?
De gustibus non est disputandumNatürlich ist alles eine Frage des Geschmacks - aber auch der Ästhetik.
Übrigens, die hier wichtigste Visualisierung ist ein HM-OU-LED16 direkt neben der Wohnungstür Linke Seite alles Grün = Wir können beruhigt aus dem Haus gehen und den Alarm einschalten...
Gruß,
Yosh
Umgebung: CCU3 (FW 3.69.7) / FB 7590 / Hue Bridge mit 17 Lampen (Hue, TRÅDFRI, Osram) / 6x Amazon Echo
Geräte: 505 Kanäle in 83 Geräten // 42 Kanäle in 6 Heizgruppen // 140 CUxD-Kanäle in 20 CUxD-Geräten
Addons: NEO Server 2.12.2 / CUx-Daemon 2.10.1 / CUxD-Highcharts 1.4.5 / Programme drucken 2.6 / HM Pdetect 1.15 / Philips Hue 3.2.5 / HQ WebUI 2.5.9
API Keys: Google (Script , Maps, Calendar) / AccuWeather / Tankerkönig / PushOver
Sonstige: SDV v4.09.04G / AIO Creator NEO v3.0.3 mit 2x Samsung S20FE und 1x Tab A6 / Mediola Cloud / Alexa.sh
Geräte: 505 Kanäle in 83 Geräten // 42 Kanäle in 6 Heizgruppen // 140 CUxD-Kanäle in 20 CUxD-Geräten
Addons: NEO Server 2.12.2 / CUx-Daemon 2.10.1 / CUxD-Highcharts 1.4.5 / Programme drucken 2.6 / HM Pdetect 1.15 / Philips Hue 3.2.5 / HQ WebUI 2.5.9
API Keys: Google (Script , Maps, Calendar) / AccuWeather / Tankerkönig / PushOver
Sonstige: SDV v4.09.04G / AIO Creator NEO v3.0.3 mit 2x Samsung S20FE und 1x Tab A6 / Mediola Cloud / Alexa.sh