Visualisierung im Kachel-Layout/HomeScreen – wie organisiert ihr zentrale Funktionen und Raumsteuerung?

[Ghostraider]

Hallo zusammen,

ich bin gerade dabei, meine Visualisierung für den HomeScreen bzw. das Kachel-Layout in Symcon neu zu denken und hänge etwas fest.

Ausgangslage:
Im Erdgeschoss hängt bei uns ein 24"-Tablet, über das wir im Alltag vor allem Licht und Rollläden im EG steuern. Gleichzeitig soll darüber aber auch das ganze Haus erreichbar sein. Der Homescreen muss also zwei Dinge gleichzeitig leisten:

• das EG schnell und praktisch bedienbar machen

• trotzdem zentrale Hausfunktionen direkt sichtbar bzw. erreichbar halten

Wichtig wären auf der Startseite daher idealerweise:

• EG mit schneller Licht-/Rollladensteuerung

• Energieübersicht

• schnelle Zugriffe auf Garten, Bewässerung, E-Auto, Staubsauger usw.

Genau da komme ich gerade ins Grübeln.
Ich teste verschiedene Ansätze, bin aber mit keinem wirklich zufrieden.

Bild 1 zeigt meinen aktuellen Stand.

Bild 2 ist ein Versuch, stärker mit MultiTiles zu arbeiten.

Mich würde interessieren, wie ihr das gelöst habt:

• Wie baut ihr euren HomeScreen auf?

• Eher nach Etagen, nach Funktionen oder als Mischform?

• Was liegt bei euch direkt auf der Startseite und was nur eine Ebene tiefer?

• Gerade bei fest montierten Tablets: Was hat sich im Alltag bewährt und was sah nur in der Planung gut aus?

Ich suche vor allem praktische Inspirationen aus echten Setups.

[pitti]

Das soll jetzt keine Wertung sein:

Ich finde es zu bunt um Infos schnell erfassen zu können. Darum arbeite ich gern mit kleinen Kacheln die den Zustand zentral darstellen und wenn ich sie maximiere dann detailierte Infos bekomme. Wahrscheinlich willst Du das mit den MultiTiles auch erreichen, aber wie gesagt - zu unruhig - nicht schnell genug fürs Auge erfassbar.

Hier mal ein (vielleicht bekannter) Teil meines Startbildschirms

Da sehe ich sofort was los ist!

Viel Spaß beim weiteren experimentieren. Viele Wege führen nach Rom!

Gruß Heiko

[Ghostraider]

Danke Heiko!
Ich gebe dir recht, die zweit Visu ist viel zu unruhig. Das ist mit der Grund warum Ich das nicht weiter verfolge
Bei meiner vorherigen Smarthome Lösung basierte die Steuerung auf einem Grundriss des Gebäudes. Das wäre wohl mit IPSView möglich, bin mir aber nicht sicher ob dass der richtig Ansatz ist.

[Ghostraider]

Auch wenn es bisher nicht so viel Resonanz auf das Thema gab, möchte ich euch trotzdem kurz auf dem Laufenden halten, was ich in der Zwischenzeit gemacht habe.

Dank eurer Hinweise und etwas „Claude Code“ habe ich mich inzwischen intensiver mit dem Thema Modulentwicklung beschäftigt und mir ein eigenes Modul gebaut, das ziemlich genau meine Anforderungen erfüllt.

Mein Ziel war weiterhin eine schnell erfassbare Übersichtsseite für den Home Screen, aber ohne Grundriss, ohne Hintergrundbild und ohne zu viel visuelle Unruhe. Herausgekommen ist jetzt eine recht kompakte Kachelansicht, bei der jeder Raum als eigene kleine Kachel dargestellt wird.

Pro Raum sehe ich aktuell:

• Temperatur

• Lichtstatus

• Fensterstatus

• Luftfeuchtigkeit

• CO₂-Wert

Die Zustände werden farblich hervorgehoben, zum Beispiel ob Licht an oder aus ist oder ob Fenster offen oder geschlossen sind. Zusätzlich gibt es oben noch eine kleine Wetterübersicht für außen.

Die Räume lassen sich beliebig auf Stockwerke bzw. Bereiche gruppieren. In meinem Fall sind das aktuell Erdgeschoss, Obergeschoss und Außenbereich. Damit bekomme ich auf dem 24"-Tablet jetzt ziemlich platzsparend eine gute Übersicht über das Haus, ohne dass die Seite überladen wirkt.

Was für mich ebenfalls wichtig war: Die Räume und auch die Stockwerke sind per OpenObject hinterlegt. Das heißt, wenn ich auf einen Raum klicke, öffnet sich direkt die entsprechende Raum-Kategorie im Hintergrund bzw. in der Visu. Dadurch bleibt die Startseite eine reine Übersicht, ist aber gleichzeitig der Einstiegspunkt in die Detailsteuerung.

Für meinen Anwendungsfall ist das aktuell der beste Kompromiss aus Übersicht, Bedienbarkeit und Informationsdichte.

[lungo]

So was suche ich schon länger.
Übersichtliche Einstiegseite => Klick => Details des Raum / Gewerk
Das ist wirklich eine sehr schöne und coole Lösung.

[pitti]

Erstmal freue ich mich, dass du für dich eine optimale Lösung gefunden hast – das ist das Allerwichtigste. Denn die Visu macht man ja für sich und nicht für andere.

Trotzdem möchte ich dir Feedback aus meiner Sicht geben, da ich jetzt schon im Verlauf mit drin bin

Ich finde die Lösung nur semi-optimal, weil sie mir einfach zu weit vom Standard entfernt ist. Natürlich kann man alle Kacheln mit HTML-Boxen und Modulen mit SDK-Support so gestalten, wie man möchte, aber dann verliert die Visu für mich ihren Mehrwert. Dann kann ich auch gleich auf IPSView oder Ähnliches umsteigen und alles selbst machen.

Ich weiß nicht, ob meine Module diesem Anspruch entsprechen (das müssen andere bewerten), aber mein Ziel ist es immer, mich nahtlos in die bestehenden „Kachel-Module“ zu integrieren. Das heißt: Verzicht auf zusätzliche Farben, zusätzliche Rahmen usw. Das Energiemodul ist da ein gutes Vorbild. Es ist grafisch ansprechend (auch farblich), dominiert aber nicht alle anderen Kacheln. Deswegen tue ich mich auch sehr schwer damit, die Raumkacheln zu nutzen, obwohl das modultechnisch eine wirklich tolle Arbeit ist. Bei der To-do-Liste zum Beispiel ist aus meiner Sicht die Integration wieder sehr gut gelungen.

Das nur mal so meine Sicht der Dinge

Pitti der Liebe

[da8ter]

Falls du etwas näher ans Symcon Layout möchtest:

Sag Claude einfach er soll diese CSS Variablen für die Farben verwenden:

  --accent-color 
  --content-color
  --card-color

mit dem Hinweis dass diese von Symcon automatisch bereitgestellt werden.

Genau wie die Schriften und der Body Margin:

/* Poppins Regular */

@font-face {
    font-family: "Poppins";
    src: url("/tile/assets/google_fonts/Poppins-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Poppins italic */

@font-face {
    font-family: "Poppins";
    src: url("/tile/assets/google_fonts/Poppins-Italic.ttf") format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* Poppins bold */

@font-face {
    font-family: "Poppins";
    src: url("/tile/assets/google_fonts/Poppins-Bold.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
}

body {
    font-family: 'Poppins';
    color: var(--content-color);
    font-size: ${queryParameters.get('fontsize')}px;
    margin-top: ${queryParameters.get('margintop')}px;
    margin-left: ${queryParameters.get('marginside')}px;
    margin-right: ${queryParameters.get('marginside')}px;
    margin-bottom: ${queryParameters.get('marginbottom')}px;
    user-select: none;
}

Bei den Kästen alle Effekte entfernen wie Schlagschatten. Rahmen einfach nur 1px breit und z.B. in der --accent-color Farbe.

Bei den Icon müsste man noch die Fontawesome Icon einbinden. Das ist aber leider etwas komplexer.

Viele Grüße
Stephan

[Ghostraider]

Danke Stephan, dass macht es nochmal deutlich Harmonischer

Sobald Claude wieder erreichbar ist gibt es noch ein paar Änderungen.
@pitti Ich kann deine Argumente absolut nachvollziehen und bin auch immer wieder am überlegen auf IPSView umzusteigen. Eigentlich gefällt mir aber die Kachel Visu, so versuche Ich einen Kompromiss zu finden.