Dashboard - Flexibles Layout: Zeilen mit 1, 2 und 3 Spalten mischen

Zeilen mit 1, 2 und 3 Spalten in einem Dashboard mischen

Beschreibung

Derzeit ist es bei der Konfiguration eines Gladys-Dashboards möglich, die Anzahl der verwendeten Spalten zu wählen: 1, 2 oder 3.

Diese Funktionsweise ist sehr praktisch, insbesondere um bestimmte Widgets in voller Breite anzuzeigen. Allerdings gilt die Wahl der Spaltenanzahl für das gesamte Dashboard.

Ich würde gerne die Möglichkeit haben, die Anzahl der Spalten zeilenweise zu definieren, um verschiedene Layouts innerhalb eines Dashboards zu mischen.

Beispiel

Das Ziel wäre es, ein Dashboard wie folgt zu erstellen:

┌─────────────────────────────────────────────┐
│                                             │
│          Widget volle Breite              │
│                                             │
└─────────────────────────────────────────────┘

┌───────────────────────┬─────────────────────┐
│                       │                     │
│       Widget 1        │       Widget 2      │
│                       │                     │
└───────────────────────┴─────────────────────┘

┌───────────────┬───────────────┬─────────────┐
│               │               │             │
│   Widget 1    │   Widget 2    │   Widget 3  │
│               │               │             │
└───────────────┴───────────────┴─────────────┘

┌─────────────────────────────────────────────┐
│                                             │
│          Grafik volle Breite              │
│                                             │
└─────────────────────────────────────────────┘

Daher könnte eine Zeile enthalten:

  • 1 Spalte → 100 % Breite

  • 2 Spalten → 50 % / 50 %

  • 3 Spalten → 33 % / 33 % / 33 %

Und diese verschiedenen Zeilentypen könnten nacheinander im selben Dashboard verwendet werden.

Warum?

Dadurch könnten viel lesbarere und an den Inhalt angepasste Dashboards erstellt werden.

Zum Beispiel in einem „Energie“-Dashboard:

  • eine Verbrauchslinie könnte die gesamte Breite einnehmen;

  • die verschiedenen Leistungen oder Verbräuche könnten in 3 Spalten angezeigt werden;

  • eine andere Grafik könnte erneut die gesamte Breite einnehmen;

  • dann könnten einige Befehle in 2 Spalten angezeigt werden.

Heute muss man sich für ein Dashboard mit 1, 2 oder 3 Spalten entscheiden und kann daher die Breite nicht an jeden Inhalttyp anpassen.

Ergonomie-Vorschlag

Beim Bearbeiten des Dashboards könnte jede Zeile einfach einen Parameter haben, mit dem die Anzahl der Spalten gewählt werden kann:

Zeile 1   [ 1 Spalte ▼ ]

Zeile 2   [ 2 Spalten ▼ ]

Zeile 3   [ 3 Spalten ▼ ]

Zeile 4   [ 1 Spalte ▼ ]

Eine andere Möglichkeit wäre, die Breite eines Blocks zu ändern und Gladys die anderen Widgets der Zeile automatisch neu anzuordnen zu lassen.

Wichtig ist meiner Meinung nach vor allem, eine einfache Logik zu bewahren: die Anzahl der Spalten muss unabhängig für jede Zeile definiert werden können.

Responsiv

Das responsive Verhalten könnte natürlich weiterhin auf kleinen Bildschirmen angewendet werden.

Zum Beispiel könnte eine auf dem Computer auf 3 Spalten konfigurierte Zeile automatisch auf 1 oder 2 Spalten auf Mobilgeräten/Tablets je nach verfügbarer Breite umschalten.

Interesse

Diese Entwicklung würde die aktuelle Funktionsweise der Dashboards nicht infrage stellen.

Die globale Wahl von 1, 2 oder 3 Spalten könnte einfach zum Standardverhalten werden, mit der Möglichkeit, bestimmte Zeilen anzupassen.

Dadurch würde viel mehr Freiheit für den Aufbau komplexer Dashboards gegeben, während die aktuelle Einfachheit für Benutzer, die keine Anpassung benötigen, beibehalten wird.

Meiner Meinung nach wäre dies eine recht natürliche Weiterentwicklung des aktuellen Dashboard-Systems.

Was denken Sie?

Hallo @PhilippeMA! :waving_hand:

Vielen Dank für dein gut strukturiertes Feedback. Der Anwendungsfall des Energie-Dashboards ist überzeugend, und es handelt sich um eine häufige Anforderung: Heute gilt die Anzahl der Spalten für das gesamte Dashboard, und es stimmt, dass eine Verbrauchskurve in einer Spalte mit nur 33 % Breite nicht ideal ist. :slightly_smiling_face:

Ich bin grundsätzlich für die Idee. Einige technische Hintergründe, um zu erklären, warum es nicht einfach nur ein Dropdown-Menü hinzuzufügen ist:

Das aktuelle Dashboard ist in Spalten organisiert, nicht in Zeilen. In der Datenbank ist ein Dashboard eine Liste von Spalten, jede enthaltend einen Stapel von Boxen, die dicht gepackt sind (ohne Lücken, selbst wenn die Boxen unterschiedliche Höhen haben). Dein Vorschlag beschreibt eine Organisation in Zeilen, was eine Änderung des Datenmodells bedeutet, mit Migration der bestehenden Daten, Überarbeitung des Drag-&-Drop-Editors usw. Das ist ein erhebliches Projekt, kein schneller Gewinn.

Die Lösung, die ich bevorzugen würde: „Abschnitte“. Statt einer zeilenweisen Einstellung würde das Dashboard eine Liste von gestapelten Abschnitten werden, wobei jeder Abschnitt seine eigene Anzahl von Spalten (1, 2 oder 3) hat und intern wie das aktuelle Dashboard funktioniert. Dein Beispiel wäre also: ein Abschnitt mit 1 Spalte (die Kurve), ein Abschnitt mit 3 Spalten (die Metriken), ein Abschnitt mit 1 Spalte (das Diagramm), ein Abschnitt mit 2 Spalten (die Befehle). Das deckt genau deinen Bedarf ab und hat zwei große Vorteile:

  • Vollständige Abwärtskompatibilität: Ein bestehendes Dashboard wird einfach zu einem einzigen Abschnitt mit seinen aktuellen Spalten, keine visuelle Änderung für jemanden.
  • Wiederverwendung des bestehenden Codes für die Darstellung und Bearbeitung innerhalb eines Abschnitts.

Responsive-Design: Gute Nachricht: Dieses Modell verbessert sogar die mobile Darstellung. Heute stapeln sich auf kleinen Bildschirmen die Spalten Spalte für Spalte (die gesamte Spalte 1, dann die gesamte Spalte 2…), was manchmal die Leselogik unterbricht. Mit Abschnitten würde das Stapeln der Lesereihenfolge folgen: die Kurve, dann die Metriken, dann die Befehle. Auf kleinen Bildschirmen würde alles wie heute in 1 Spalte angezeigt werden, wobei die Reihenfolge der Abschnitte beibehalten wird.

Ein Kompromiss, den man im Hinterkopf behalten sollte: In einem Abschnitt mit mehreren Spalten, wenn die Boxen unterschiedliche Höhen haben, beginnt der nächste Abschnitt unter der höchsten Box, sodass etwas leerer Raum entstehen kann, während das aktuelle Stapeln perfekt dicht ist. Das ist inhärent in jedem „zeilenbasierten“ Layout und der Preis, den man für die Möglichkeit zahlt, die Breiten zu mischen.

Was denkt die Community dazu? :smiley:

Ich hatte vor einiger Zeit etwas in diese Richtung begonnen, ich könnte einen Vorschlag posten, wie das aussehen könnte. Aber natürlich, wie @pierre-gilles erklärt, gibt es Lücken, die wir nicht füllen können.

Tatsächlich wäre das für ein effektiveres und lesbareres Layout sehr gut

NB:
@PhilippeMA ein großes Dankeschön an dich, denn ich habe gerade erfahren, dass man Spalten löschen kann!!
Da ich immer im Dunklen Modus arbeite, hatte ich das „Mülleimer“-Symbol nicht bemerkt, das man im Hellmodus sehr gut sieht! Und ich denke (sofern ich mich nicht irre), dass diese Möglichkeit nicht dokumentiert ist


Hier ein wirklich sehr schneller Überblick, da ich in meinem Test-Gladys, den ich schnell zusammengestellt habe, keine Daten habe.

Im Bearbeitungsmodus befinden sich die Widgets in ihrem echten Zustand, was das Verschieben und das Bewerten des Erscheinungsbildes erleichtert.

Mit einem Button, der erscheint, wenn man über das Widget fährt, kann man es bearbeiten oder löschen. Man könnte sich vorstellen, einen Duplizieren-Button hinzuzufügen (Anfrage im Forum)

Wenn man Bearbeiten auswählt, öffnet sich das Einstellungsmenü des Widgets

Danke, dass du es getestet hast! Das ist nett, aber man sieht tatsächlich dieses Problem:

Ich frage mich, ob man die Widgets nicht dynamisch anpassen könnte, damit sie zu 100% gefüllt werden.

zum Testen. Ich werde in den nächsten 4 Tagen nicht verfügbar sein, aber sobald ich kann, werde ich Claude darauf ansetzen.

Ich konnte nicht widerstehen, mit Fable 5 eine Spezifikation zu beginnen (von meinem Handy aus, am Strand :joy:) :grin:

Ich habe andere Themen einbezogen, die ich als verbunden erachte (insbesondere die Anzeige eines 3D-Hausbildes auf dem Dashboard).

Das sind Themen, bei denen mit KI alles möglich wird und die daher klar ihren Platz in Gladys haben!

Interessanter Vorschlag von Fable :grin:

Es gibt Anpassungen vorzunehmen, aber es ist ein super interessanter Vorschlag.

Also ich mag die oberen Benachrichtigungen:
image

Hallo zusammen,

Ich habe gezögert, dieses Thema fortzusetzen oder ein neues zu erstellen, aber es passt perfekt zusammen.

Wäre es möglich, in einem einzigen Widget oder einer Box mehrere Aktionen unterzubringen?

Ich erkläre es: Auf HA gab es vertikale und horizontale Stapel, bei denen man die Anzahl der Aktionen pro Box wählen konnte. Ich habe gerade meine 12 Profalux Zigbee Rollläden installiert, und da ich drei Etagen habe, hätte ich gerne in einer einzigen Box drei Aktionen oder Schaltflächen, um nur die Rollläden pro Etage hochzufahren; dasselbe gilt für das Herunterfahren.

Ich finde, dass eine einzige Aktion in einer großen Box viel Platz auf dem Dashboard verschwendet. Dasselbe gilt für meine Temperaturen, ich hätte gerne mehrere auf einer einzigen Box.

Ich habe heute meine Gladys-Installation abgeschlossen und mich abonniert. Ich bin sehr zufrieden mit dem Ergebnis bisher :slight_smile: - alles hat sehr schnell funktioniert.

Hier ist mein erster Dashboard in der Hoffnung, ihn im Laufe der Zeit verbessern zu können

Hier sind einige Vorschläge für Fable von letzter Nacht!

  1. Mit der Ausrichtung sieht es besser aus:

  1. Ein selbstgemachtes Widget:

  1. ein neues Thema „Horizont“

Hast du einen Screenshot dieser Möglichkeit auf HA? :slight_smile:

Danke für dein Feedback und deine Unterstützung :raising_hands:

Man sieht, wenn Arbeit zum Spiel wird, weiß man nicht mehr, wann man aufhören soll! :sweat_smile:


Das ist eigentlich ganz gut gelungen, ich liebe das Ergebnis.

Hallo!

Neben dem ästhetischen Layout, das tatsächlich eine echte Arbeit verdient, geht es auch um die Flexibilität und die Zusammensetzung der Widgets selbst!

Ha ist extrem gut darin, man kann eigene Widgets zusammenstellen, was wirklich sehr angenehm ist. Und trotzdem gibt es vorkonfigurierte Widgets, damit man sich nicht unnötig aufhalten muss.

Aber bei der Zusammensetzung kann man Interaktionselemente hinzufügen, festlegen, was beim Klicken auf das Widget selbst passiert, mehrere Geräte und mehrere Informationen gleichzeitig anzeigen lassen, kurz gesagt, die Möglichkeiten sind wirklich enorm. Und für jemanden, der etwas ganz Besonderes will, ist das super cool und vor allem super einfach (keine komplizierte YAML-Konfiguration mehr nötig).

Ich denke, selbst wenn alle Anmerkungen berechtigt sind, ist eine Sache, die Gladys von HA unterscheidet, der bewusste Anspruch einer einfachen und leichten Oberfläche.
Ich habe immer gefunden, dass die Dashboards und Widgets von HA schnell zu unübersichtlich und unleserlich werden.

Die Widgets zu sehr anpassbar zu machen, ist vielleicht nicht der richtige Ansatz? Ich sage das, aber ich habe auch keine Lösung zu bieten. :sweat_smile:

Davon müssen wir mit @pierre-gilles reden, wenn er seine Füße aus dem Sand gezogen hat! :grinning_face:

Ich stimme dir inhaltlich zu: Die Widgets müssen reicher und zusammensetzbarer werden. Allerdings werden wir nicht denselben Weg wie HA einschlagen, und ich habe dir ausführlich auf dem anderen Thema geantwortet, um die Diskussion nicht zu duplizieren :slightly_smiling_face:

Zusammengefasst: Ja, es wird Zusammensetzung geben, aber deklarativ und vom Core gerahmt, damit das Dashboard für alle kohärent und einfach bleibt. Dieses Thema (die Abschnitte) ist übrigens der erste Baustein in diese Richtung!

Ja, ich habe dir auch im anderen Thema geantwortet.

Was diese erste Komponente betrifft, gibt es jede Menge Bibliotheken, die das können!

Es lohnt sich nicht, sich mit etwas hyperindividuellen und komplizierten zu beschäftigen. Mit der richtigen Bibliothek wird der Nutzer schon viel freier sein. dnd-kit, Gridstack, die von Trello/Atlassian (deren Name mir gerade nicht einfällt) oder auch SortableJS.

Damals glaube ich, habe ich mit dieser hier herumgespielt, die enorm viele Möglichkeiten bietet. Ich müsste mal schauen, ob ich den POC wiederfinde, den ich gemacht habe :thinking:

Ich sehe, dass es schöne Bilder von Fable gibt. Wenn das Ziel auch ein kleines Redesign ist, sollten wir Tabler vielleicht aktualisieren, oder? Ich weiß nicht, wann die im Projekt integrierte Version ist, aber mir scheint, dass sie jetzt grafische Elemente haben, die abgerundeter und angenehmer fürs Auge sind.

Je nachdem, was du vorhast, kann ich vielleicht helfen! Es ist jetzt ein bisschen kompliziert mit meiner Firma, aber ich kann ein paar Stunden hier und da für die gute Sache (altmodisch) investieren :smiley: