Meinung zum Erscheinungsbild gefragt

Dashboard/Cards/Frontend
1

Hallo,
nach fast einem Jahr mit Home Assistant baue ich meine Dashboards jetzt gleich richtig auf – also auch optisch.
Ich habe eine Seite, die ich „Kontrollraum“ nenne. Dort möchte ich ein paar Presets für das Erscheinungsbild einstellen. Momentan ist es noch nicht viel.

Ich kann dort die Schattenfarbe und das Offset einstellen sowie speichern und laden.
Der Sinn dahinter ist, dass ich bei Fehlern einen optischen Hinweis bekomme:
Rot = Hier stimmt etwas nicht.

Nun bin ich mir bei einer Sache unsicher:
Welche Darstellung sieht besser aus?
– die schlichte Karte mit den Schiebereglern
oder
– die Variante, bei der die Regler selbst in den entsprechenden Farben dargestellt werden?

Ich bin mir da nicht ganz sicher – ich habe lange Zeit mit Airbrush-Grafiken gearbeitet, und das beeinflusst meinen Blick vermutlich etwas.

Das ist das Preset-Dashboard:

Presets
Presets1419×809 158 KB

So sehen die Dashboards im normalen Zustand aus:

Dashboard-normal
Dashboard-normal1920×810 94.8 KB

Und so, wenn eine Störung vorliegt:

Dashboard-stoerung
Dashboard-stoerung1920×805 102 KB

Ich freue mich über jedes Feedback!

2

Ganz eindeutig: Weniger ist mehr. Also Links. Rechts sind die viel zu aufdringlich.
Wobei mMn. Schieberegler oder Gauges sowieso nur dort verwendet werden sollten wo keine Präzise Eingabe gefragt ist. zb. für Dimmer.
Dort wo ich präzise Werte möchte (also fast überall) nur Buttons.

greez
bb

1 „Gefällt mir“
3

Am Ende muss du damit klar kommen und es dir gefallen, nicht uns.

Ich hab gerne klar und strukturiert und “weniger-ist-mehr”

1 „Gefällt mir“
4

Genau so ist es. :slightly_smiling_face:

Ich verstehe die Fragestellung auch nicht so ganz. Es geht ja um einen Vergleich, sprich den

und bei diesem Vergleich geht es um

Aber dann wird ein Dashboard mit einem Hinweis (alle Regler in rot) mit einem Dashboard ohne irgendeinen Hinweis (Dashboard in normalen Zustand) verglichen? :thinking: D.h. eigentlich sollten dann da doch zwei Dashboards mit unterschiedlichen Hinweisen verglichen werden.

Dto. :slightly_smiling_face: Irgendeinen Hinweis würde ich da in Form einer Warnung mit einem einzigen Element darstellen. Also im einfachsten Fall nur mit einer Benachrichtigung auf dem Dashboard, oder von mir aus mit einer “blinkenden Birne” oder was und wie auch immer. Einfach alle Regler auf dem Dashboard dann andersfarbig (hier rot) darzustellen würde ich nicht machen. Wobei wir wieder bei dem ersten Punkt sind: Es ist eine Form der Benachrichtung wie Du sie für Dich haben möchtest und nicht wir oder ich. :slightly_smiling_face:

VG Jim

1 „Gefällt mir“
5

Danke für euer Feedback!
Es geht hier nur um die Darstellung der Regler, mit denen ich das Aussehen der Schatten anpassen kann.
Da ich auf dieser Seite eventuell noch mehr Einstellmöglichkeiten einbauen möchte, wollte ich wissen, welche Darstellung besser aussieht.
Inzwischen denke ich auch, dass es insgesamt strukturierter wirkt, wenn ich die einzelnen Regler nicht in bunten Farben darstelle.

Im Dashboard selbst möchte ich eine Art Farbcode verwenden – ohne zusätzlichen Text.
Zum Beispiel soll Blau anzeigen, wenn es Schwierigkeiten mit dem Teichfilter gibt, und ähnliche Hinweise für andere Bereiche.

Die Regler habe ich erstellt, um mir die Arbeit zu erleichtern:
So kann ich die Schatten heller, dunkler oder farblich verändern, ohne den Code jedes einzelnen Elements im Dashboard anzupassen.

Gruß,
Christian

6

Hatte das schon so verstanden und finde ich im Prinzip eine clevere Idee.
Ist es denn möglich die Schatten für einzelne Objekte/Karten zu steuern ? Falls ja wäre cool wenn du kurz erklären könntest wie das geht.
Ein Problem was ich sehe ist das man ja nicht alle Karten immer im Blick hat weil die auf anderen Dashboards oder Unterseiten liegen. Also braucht man am Ende doch wieder ein Popup.

Alles auf “rot” setzen so wie in deinem Screenshot finde ich sinnfrei, weil ich dann ja immer noch nicht weiß wo es klemmt. - außerdem, “… Schatzi, da geht schon wieder nicht ist alles ist rot…” ne das kommt nicht gut.

schöne Grüße
Bernhard

7

Hi Bernhard,

dass man auch einzelne Karten steuern kann, geht – ich habe es aber vorerst nur für alle umgesetzt.
Ich habe die Schieberegler als input_number definiert und die Werte auch in den entsprechenden input_number abgespeichert.
Damit ich mir bei den Karten den YAML-Aufwand etwas spare, habe ich einen Template-Sensor eingerichtet, der mir immer die gesamten Einstellungen liefert.

{{ states('input_number.schatten_offset_x') }}px 
          {{ states('input_number.schatten_offset_y') }}px 
          {{ states('input_number.schatten_blur') }}px 
          {{ states('input_number.schatten_spread') }}px 
          rgba(
            {{ states('input_number.schatten_rot_r') }},
            {{ states('input_number.schatten_grun_g') }},
            {{ states('input_number.schatten_blau_b') }},
            {{ states('input_number.schatten_transparenz_a') }}
          )

Damit rufe ich in den Karten/Kachel es so auf:

card_mod:
  style: |
    ha-card {
      
      border-radius: 10px;
      background-color: #000000;
      color: white;
      box-shadow: {{ states('sensor.box_shadow') }};
          }
    }

So könnte man für verschieden Karten die Schatten einzeln einstellen und dann aufrufen

Gruß
Christian.

8

Also das 2.Bild sieht eigentlich gut aus, unabhängig davon ob es zu viele Elemente sind, der weisse Schatten wirkt ein bisschen wie eine Ambilight-Beleuchtung, eventuell ein leichten Fabverlauf als Hintergrund und die Transparenz der Cards auf 60-70% so das es leicht durch schimmert…

Aber zum eigentlichen Thema, ich empfehle dir ein Themes File anzulegen, dann kannst du mit Card-Mod auf Color-Variablen gehen, die je nach Zustand wechseln.

Ausschnitt meines Designs

ipad_dashboard_v3:
  
  # Card-Mod
  card-mod-theme: "ipad_dashboard_v3"
  card-mod-card: |
    ha-card {
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

  masonry-view-card-margin: 4px 4px 4px

  primary-color: rgba(85, 175, 255, 1)
  accent-color: rgba(85, 175, 255, 1)
  disabled-color: var(--grey-color)

  ha-card-border-radius: 4px
  ha-card-background: rgba(22, 65, 125, 0.2)
  ha-card-border-width: 2px
  ha-card-textalign: center

  state-icon-color: rgba(255, 255, 255, 1)
  border-color: rgba(255, 255, 255, 1)
  switch-checked-color: var(--accent-color)
  switch-checked-track-color: var(--accent-color)
  switch-checked-button-color: rgba(255, 255, 255, 1)

  more-info-header-background: var(--accent-color)
  paper-dialog-background-color: var(--accent-color)
  popup-border-radius: var(ha-card-border-width)

  state-active-color: var(--accent-color)
  state-inactive-color: rgba(128, 128, 128, 0.7)
  state-unavailable-color: rgba(128, 128, 128, 0.4)

  state-red-color: rgba(255, 60, 30, 1.0)
  state-green-color: rgba(0, 200, 100, 1.0)
  state-orange-color: rgba(220, 160, 70, 1.0)

und dann kann man das im Style nutzen

      style: |
        :host {
          {% if states('sensor.thug_lightthaussen_power') | float(0) > 1 %}
       # hier kann irgendeine Variable rein, die in deinem Themes File steht
            --card-mod-icon-color: var(--accent-color) !important; 
          {% else %}
            --card-mod-icon-color: white;
          {% endif %}
        }

und dann kann auch sowas rauskommen, wo deine Cards je nach Bedingung halt einen anderen Rand oder Schatten oder was auch bekommen

image
image1540×1156 150 KB

1 „Gefällt mir“