Statische Dashboard Aufteilung mit lovelace-layout-card ?

[HaUsr23]

Hallo zusammen,

ich möchte mein Dashboard gerne in mehrere Teile fester Größe unterteilen und gleichzeitig im größten Teil die lovelace-state-switch card nutzen.
Prinzipiell funktioniert es ja, aber ich habe das Problem: Die Inhalte der state-switch "Umschalt" Karten sind nicht gleich groß, was nicht das Problem wäre, wenn diese z.B. oben links, oder sonst wo fix platziert würden.
Bei mir schrumpfen aber alle Rows und überlappen sich teilweise ???
Ich hatte die Hoffnung, die % Angaben bei grid-template-rows würden für ein statisches Dashboard sorgen, wahrscheinlich verstehe ich da mal wieder was nicht richtig :-(

Dazu habe ich folgenden Code Ausschnitt:

views:
  - title: Home
    type: custom:grid-layout
    layout:
      reflow: false
      grid-template-columns: 100%
      grid-template-rows: 33.5% 4% 66% 4% 7%
      grid-template-areas: |
        "Solar"
        "TopLine"
        "Main"
        "BottomLine"
        "Navigation"
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
              :
              v ( noch einiges an code :-)  )

Falls jemand eine Idee hat wie ich ein Dashboard mit fester Aufteilung ohne die dynamische Anpassung hin bekomme, würde ich mich sehr über Hilfe freuen.

 

[Nival]

Also nur mal rein aus CSS-Sicht - Dein Code besagt, dass jede Spalte 100% breit sein soll (also nur eine Spalte pro Reihe), und die Reihen verschiedene Höhen in Prozent (von was? das benötigt auf jeden Fall eine fixe Höhe vom Container, ich weiß nicht ob das bei dem Dashboard gegeben ist) haben sollen. Entspricht das wirklich Deinem Ziel?

 

[HaUsr23]

Ich bin mal ganz naiv daran gegangen und habe gehofft, dass die Prozent Angaben sich auf die Gesamt Höhe/Breite des auf einem Gerät sichtbaren Bereiches beziehen. Dabei wäre es dann egal ob das ein PC oder wie bei mir ein Tablet ist. Die Aufteilung wäre auf beiden Systemen gleich, die Karten würden entsprechend darin skaliert.
Aber das ist wahrscheinlich nicht so ?

In meinem Fall sollte nur eine Spalte (Volle sichtbare Breite) mit 5 Zeilen (entsprechend der Prozente) zu sehen sein.
Die Breite stimmt immer, nur die Höhe variiert, abhängig vom Inhalt der state-switch card.

Mir wäre es auch egal wenn das Dashboard fest aufgeteilt so nur auf dem Tablet wäre, alle anderen Geräte bekämen dann ein eigenes Dashboard.

Nur so, wie es derzeit umskaliert, ist das nicht zu gebrauchen, geschweige zu bedienen.

 

[Nival]

In der Breite wird die Gesamtbreite verwendet, in der Höhe (wie so oft, wenn etwas mit CSS gemacht wird) leider nicht.

In der Höhe mit festen Pixelwerten zu arbeiten (und ggf. mit mediaquery, um verschiedene Geräte abzudecken) ist keine Option?

 

[HaUsr23]

Mit festen Pixelwerten ist bestimmt kein Problem, nach ein wenig "gefummel" sollte es ja dann passen, muss aber gestehen das ich mediaquery komplett übersehen habe und da erst mal verstehen muss wie die Parameter gesetzt werden müssen.
Ich denke dann könnte es funktionieren.

Hast Du ggf. Ein Beispiel wie das mediaquery für eine bestimmte Pixel Höhe anzugeben ist, muss man sonst noch was beachten ?

 

[Nival]

Hast Du ggf. Ein Beispiel wie das mediaquery für eine bestimmte Pixel Höhe anzugeben ist

Ja, ist nicht so anders als bei CSS ansich, nur die Einrückungen... hier mal für drei Reihen:

    type: custom:grid-layout
    layout:
      reflow: false
      grid-template-columns: 100%
      grid-template-rows: 350px 300px 300px
      mediaquery:
        "(max-width: 600px)":
          grid-template-rows: 150px 100px 100px
        "(max-width: 1000px)":
          grid-template-rows: 250px 200px 200px

Also "grundsätzlich 350, 300, 300 hoch, aber bei maximaler Breite von 1000 um 100 reduzieren und bei maximaler Breite von 600 nochmal um 100 reduzieren. Brauchst also die Anzeigebreite der verschiedenen Geräte, um davon dann eine anzunehmende Höhe abzuleiten und diese auf die Reihen aufzuteilen.

Kannst es auch komplett andersherum machen mit min-width und mobile first (das wäre ansich korrekter, spielt hier aber schlicht keine Rolle) - hab nur die Erfahrung gemacht, dass max-width für die meisten Menschen einfacher zu denken zu sein scheint. Suchs Dir aus

 

[HaUsr23]

Ahh, wenn ich das richtig verstehe "prüft" mediaquery (hätte man bei dem Namen auch drauf kommen können ) die, in dem Fall Breite, und benutzt dann die entsprechenden Höhen für die Zeilen.

Ich habe mal Deinem Beispiel folgend meine "Pixel" angepaßt und nun bleibt jeder Bereich gleich groß, egal welcher Inhalt darin gezeichnet wird, top !!!
Jetzt geht's ans gefrimmel um die richtigen Pixelhöhen zu finden, Fleißarbeit halt...

Besten Dank ! Und einen schönen Abend noch.

 

[Nival]

Genau richtig. Du kannst bei sowas immer nur mit der Breite arbeiten, wenn sich nicht ein entsprechender Container drumherum realisieren lässt. Grundregel bei CSS, leider.

Jetzt geht's ans gefrimmel um die richtigen Pixelhöhen zu finden, Fleißarbeit halt...

Rein theoretisch (jetzt nicht probiert) sollte es machbar sein, ein JS kurz reinzuwerfen, das bei initialem Aufruf verwendbare Breite (auf jeden Fall) und Höhe (mit vorhandener Wahrscheinlichkeit) ausgibt, damit Du weniger raten musst. Wäre das so sehr in Deinem Interesse, dass ich mir das anschau und ggf. nen Script dafür mache, oder bist Du mit try&error vollkommen zufrieden?

 

[HaUsr23]

Hab mich schon gewundert, dass es nur immer die width gab, aber wenn das
normal ist brauch ich ja nicht verzweifelt nach ner height zu suchen

Danke Dir für Dein Angebot mit dem Script, habe es doch recht schnell mit ein „paar“ Versuchen in Form bringen können.
Ein Script ist sicher die elegante Lösung, aber für ein Dashboard geht auch mal quick and dirty.

Nochmals vielen Dank und bis zum nächsten Problem