Moderneres Design von Dashboards möglich?

[Neuling]

hallo zusammen,

ich denke über ein redesign meiner kompletten dashboards nach. ziel soll ein moderneres, fresheres design sein, welches auf den ersten blick mehr infos bieten soll. derzeitig nutze ich größtenteils die bubble-card.

ich dachte da etwa an so etwas klick.

oder sowas klick

oder so klick.

ist sowas ÄHNLICH mit ha überhaupt möglich.

ich habe insgesamt derzeitig 5 tablets mit verschiedenen dashboards.

-home (hängt im wohnzimmer)

• bildschirmschoner mit anzeige von solarleistung, akkustand und derzeitigem strompreis und wetter
• übersicht der zustände des hauses
• statistiken und einstellungen für solar
• statistiken und einstellungen für den akku
• strompreisvorschau, zählerstand und statistiken zum stromverbrauch und autoladung

-apartment (hängt im flur apartment)

• gleiche sachen, wie im home, nur mit den daten von der solaranlage und des akkus

-türen und fenster (hängt neben der eingangstür)

• hier werden alle türen und fenster von home und apartment angezeigt
• farbliche und visuelle änderung bei öffnung

-kalender (hängt auf dem flur vom schlafzimmer zum bad)

• kalender mit anzeige der termine von beiden personen und müllentsorgung
• wetteranzeige

wie sehen denn eure masterdashboards aus? ich möchte auf jeden fall weiterhin themenbezogene dashboards, nicht alles auf einem. nach möglichkeit möchte ich auch nicht scrollen müssen. referenz ist bei mir 3x fire hd 10“ und 2x ipad air2.

[MarzyHA]

Die Idee gefällt mir sehr sehr gut! Theoretisch ist sehr viel mit HA möglich, da es Images und custom cards untersützt! Die freie Anordnung der Karten könnte nur ziemlich ziemlich schwierig werden, vor allem wenn es responsiv (also auf allen Geräten gut aussehen soll). Ich glaube da müssen einige Abstrichte gemacht werden. Ich denke der 1. Vorschlag müsste ganz gut umsetzbar sein, da hier das card layout der neuen Section-Dashboard-View ähnelt. Die passendes Karten zu Erstellen, ist aber glaube ich sehr kompliziert.
Vielleicht haben hier ja andere User Ideen zur Umsetzung solcher Karten

VG

[MarzyHA]

Zu der 1. Idee nochmal:
Den Style der Karten könnte man vielleicht mit diesem VisionOS-Theme erreichen:

GitHub - Nezz/homeassistant-visionos-theme: Theme inspired by visionOS for Home Assistant

→ Dann noch einen dunklen HIntergrund als Image einfügen und das Theme in den Dashboard-Einstellungen auswählen und dann müsste das schon sehr ähnlich aussehen.

Ich habe das mal ganz schnell ausprobiert:

Ich glaube damit könnte man schon was machen

[Neuling]

hui das kannte ich noch gar nicht. danke dafür. wird natürlich gestestet

[Neuling]

@MarzyHA

Ich habe das mal ganz schnell ausprobiert:

sieht schon sehr gut aus. aber hier sieht man das problem sehr gut. kein zusammenhang zwischen den einzelnen kacheln. etwas mehr mittig würde edler aussehen. aber es geht tatsächlich in die richtige richtung.

das aussehen soll nur pro tablet gleich aussehen, nicht tabletübergreifend.

derzeitig sehen meine dashboards so aus

die automatische umschaltung (inkl. hintergrundbild) wäre die königsdisziplin, an der ich vor monaten schon gescheitert bin und daher aufgegeben habe und mich eher für ein dunkles erscheinungsbild entschieden habe.

[MarzyHA]

Automatische Umschaltung ist tatsächlich schwierig… Vielleicht hat da ein anderer User noch einen Tipp.

P.S. ich habe jetzt auch noch einbisschen weiter probiert:

Vielleicht muss ich meine Dashboards auch nochmal umstellen
Denn mein aktuelles Dashboard sieht noch so aus:

[MarzyHA]

@Neuling

kein zusammenhang zwischen den einzelnen kacheln

Wie meinst du das genau?

[Neuling]

@MarzyHA

Wie meinst du das genau?

wie man in meinem ersten link sehen kann, ist um die kacheln nochmals ein halbtransparenter rahmen drumrum. dadurch sieht das alles nicht so nebeneinander geklatscht aus, sondern zusammenhängend.

[MarzyHA]

Ah, ich verstehe! Theoretisch müssten so Container auch mit HA umsetzbar sein… zum Beispiel mit der grid Card. Aber da bräuchte man noch zusätzliches Styling…

Am besten wäre es natürlich, wenn man die ganze Section/ Abschnitt stylen könnte? Weiß jemand, ob das möglich ist? @jayjojayson Du bist doch unser Dashboard Experte, hast du eine Idee?

[Neuling]

ja. er hat mir letztens schon weiter geholfen. da wollte ich ähnliches für button realisieren.

[jayjojayson]

@Neuling

kein zusammenhang zwischen den einzelnen kacheln. etwas mehr mittig würde edler aussehen. aber es geht tatsächlich in die richtige richtung.

HI, wenn ihr mit den Abschnitten im neuen Dashboard arbeitet, könnte man sich drei oder 5 Abschnitte erstellen und dann nur das mittlere bzw. die beiden mittleren Abschnitte füllen. So wären die Kacheln immer mittig.

Wenn mehrere einzelne Cards zusammengefasst dargestellt werden sollen, bietet sich die custom-stack-card an. Darin kann man alle möglich Cards in einer zusammenfassen. Mit der grid-Card zusammen, kann man ganz gut einstellen, wann das Layout gebrochen werden soll, wegen Handy und Co.

[MarzyHA]

@jayjojayson

Wenn mehrere einzelne Cards zusammengefasst dargestellt werden sollen, bietet sich die custom-stack-card an

Ja, genau an soetwas hatte ich auch gedacht. Aber kann man dann so stylen?

[Neuling]

hab jetzt auch mal was auf die schnelle gebaut:

die rote linie soll der halbtransparente rahmen sein. wie man sieht, sind die gauge anzeigen bereits dunkler, als die button drüber. da lässt sich aber bestimmt noch was mit dem card-mod machen.

wie könnte jetzt der halbtransparente rahmen realisiert werden?

[jayjojayson]

Na so wie du ihn schon bei den gauge card und dem aquara gemacht hast. Das ist doch eine custom-stack-in-card? So eine nimmst du und packst dualle Karten rein die du haben möchtest. Dann muss mit card-mod bei allen inneren cards der background entfernt werden. Die Anordnung in den stack-in-card erfolgt dann über horizontal und vertical stack cards.

[Neuling]

eigentlich sollte es schon so in etwa aussehen:

ein großer rahmen, ein rahmen um gemeinsame kacheln und dann erst die kacheln.

[jayjojayson]

Ja so hatte ich es auch beschrieben, ist nur eine Sache der Verschachtelung der cards.

Hier ein Beispiel wie die Aufteilung sein könnte.

stack-in-card
  -cardmod
     -stack-in-card
        -cardmod
          -vertical-stack
            -cardmod
          -vertical-stack
            -cardmod

[Neuling]

ah ok. danke dafür. werde ich ausprobieren

[Neuling]

auf die schnelle getestet:

type: custom:vertical-stack-in-card
card_mod:
  style: |
    ha-card {
      --ha-card-border-width: 10;
      --ha-card-background: red
      }
cards:
  - type: custom:vertical-stack-in-card
    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 10;
          --ha-card-background: blue
        }
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              - type: gauge
                entity: sensor.aqara_temp_humidity_sensor_batterie_3
                theme: visionos
              - type: gauge
                entity: sensor.aqara_temp_humidity_sensor_spannung_3
                theme: visionos
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-width: 10;
                  --ha-card-background: grey
                }

[Neuling]

noch was mehr getestet……

type: entities
style:
  .: |
    ha-card {
      --ha-card-box-shadow: none;
      background-color: transparent;
      border-radius: none;

    }
  "#states > div > mini-graph-card":
    $: |
      ha-card {
        background-color: transparent;
      }
entities:
  - type: custom:mini-graph-card
    entities:
      - sensor.02_akku_delta_2_max_battery_level
    hours_to_show: 48
    more_info: false
    hour24: true
    align_state: center
    height: 110
    color_thresholds:
      - value: 75
        color: green
      - value: 45
        color: yellow
      - value: 20
        color: red
    line_width: 8
    font_size: 120
    show:
      graph: bar
      name: false
      icon: true
      extrema: true
      labels: false
  - type: custom:mini-graph-card
    entities:
      - sensor.01_solar_home_smart_plug_loads
    hours_to_show: 48
    more_info: false
    hour24: true
    align_state: center
    height: 110
    color_thresholds:
      - value: 75
        color: green
      - value: 45
        color: yellow
      - value: 20
        color: red
    line_width: 8
    font_size: 120
    show:
      graph: bar
      name: false
      icon: true
      extrema: true
      labels: false

vielleicht ist es noch für weitere user interessant

quelle: community.home-assistant.io

so wird es langsam

[Dreckfresse]

@Neuling

vielleicht ist es noch für weitere user interessant

Jup, Danke schön

gleich umgesetzt (Grenzwerte erst grob gesetzt)