Dynamisches Dashboard: Clean und simple besonders für Smartphone

[LordOfWar]

Moin zusammen,

über den letzten Winter habe ich die View meines Dashboards für Smartphone Nutzung optimiert.

Dazu habe ich viel bei anderen Usern “abgeguckt” und für mich das Beste draus gemacht.
wie z.B. die vertikale Karte, wenn man auf Lampen oder Fenster/Türen drückt kommt von Simon, gerade erst aktualisiert. Hier hatte ich früher ein BrowserMod.

Für meine Frau war sehr wichtig so wenig wie möglich zu klicken. Nicht erst den Raum öffnen oder so. Ebenfalls zu sehen, ob ein Thermostat gerade inaktiv oder auf heizen steht, darum gibt es um jeden Raum einen schimmernden roten Rahmen, wenn gerade geheizt wird. Ebenso, dass ein Klick eine Lampe sofort ein/ausschaltet und nicht erst das Menü für Farbe, Helligkeit etc. angezeigt wird: Auf Raumicon tippen.
Möchte man dennoch Farbe, Helligkeit ändern, reicht ein Drücken auf den Namen des Raums.
Zusätzlich wird im Raum z.B. ein Fenster oder Tür rot und offen angezeigt.

Sonst werden z.B. motion Sensoren als Badge im Icon eingeblendet, wenn Bewegung erkannt.

Innerhalb der Icons wird angezeigt wenn z.B. ein TV eingeschaltet ist, die Spülmaschine läuft, jemand vom PIR erfasst wurde etc.
Bei mehreren Sachen, wechseln die Symbole ab z.B. 5 Sekunden Kühlschrank Symbol, dann 5 Sekunden Spülmaschinen Symbol etc.

Auch ganz nett verschiedene Farben/Rahmen für z.B. Wärmepumpe
Modus Eco grün, abhängig der Leistungsaufnahme dann auf gelb oder rot.
Oder eben die Restzeit von z,B, Trockner bzw. Aktivität von Pumper etc. durch den schimmernden Hintergrund.

Im Ursprung hatte ich noch Kamera Symbol zum Anklicken, für überall dort wo es Kameras gibt. Das habe ich aber mittlerweile über eine eigene View gelöst.

Hier ein paar Screenshots dazu, wie das bei uns aussieht. Jedes Element ist “antippbar” und schaltet um wie z.B. die Treppe das Licht, Stehlampe etc. bzw. öffnet die Eigenschaften oder eine Historie bei z.B. Energieverlauf

Für Die Nutzung auf breitem Screen, skaliert sich alles und wird in zwei Spalten angezeigt.
Sonst noch die typischen Dashboards, wie sie vermutlich jeder verwendet. Nur mal quick&dirty Screenshot

by HarryP: Zusammenführung Mehrfachpost

[Schlumperdix]

Na dann mal willkommen hier im Forum.
Das sieht doch alles sehr schick aus!

[chrisKi]

Finde ich auch sehr schick.
Eine konkrete Rückfrage hierzu:

@LordOfWar

einen schimmernden roten Rahmen

Wie setzt man sowas um?

[Dobsen]

Hi,

weiss jetzt ned wie er das bei sich gelöst hat, aber ich mache das bei mir mit Card Mod.

card_mod:
  style: |
    ha-card {
      {% if is_state("climate.heizung_buro_bt", "heat") %}
        box-shadow: 4px 4px 4px 2px rgba(255,0,0,0.66);
      {% else %}
        none
      {% endif %}   
    }

Allerdings mit einem Schatten. Heizung an (heat) roter Schatten.

[chrisKi]

Vielen Dank!
Das hilft mir schon weiter.

[LordOfWar]

Bei mir ist es eine Animation, so ein Schimmer von dunkel zu hell und zurück. Zeit und Farbe lässt sich natürlich konfigurieren, so ist es je nach Zustand ggf grün bei Geräten im eco Modus oder so. Kreativ sein

Stack-in-Card und card_mod

 type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
mode: horizontal
card_mod:
  style: |
    ha-card {
      border: none;
      {% if state_attr('climate.raum_eg_kaminzimmer', 'hvac_action') == 'heating' %}
        animation: breathing-shadow 1.5s infinite alternate ease-in-out;
      {% else %}
        animation: none;
      {% endif %}
    }

    @keyframes breathing-shadow {
      0% {
        box-shadow: 0px 0px 10px 1px #FF8C00;
      }
      100% {
        box-shadow: 0px 0px 13px 3px #FF8C00;
      }
    }