Meine Suche nach dem bevorzugten Schieberegler ist zwar noch nicht abgeschlossen, hier aber schon mal ein kurzer Zwischenbericht zu diesem Thema.
HA-Schiebe-Regler.png
Zur Referenz ist ganz oben die Standard tile card dargestellt. Das ist natürlich kein Schieberegler, aber diese sollen dann im Stil möglichst gut dazu passen.
Mit color: primary habe ich die Icon Farbe von orange auf blau geändert.
Ich werde in einem späteren Beitrag auch etwas zu den Themes und meinem geplanten Farbschema erzählen.
Die Standard light card geht mir in der Darstellung zu sehr in Richtung gauge card und nimmt auch zu viel Platz ein, daher ist sie hier nicht vertreten.
In Reihe 2 ist die Mushroom Light Card. Mir haben die Mushroom Cards von Anfang an sehr gut gefallen, da sie sich am besten mit den bestehenden cards kombinieren lassen. Hier funktioniert das Ändern der Farbe etwas anders, nämlich mit icon_color: primary statt mit color:
Diese Mushroom Card fügt sich wie immer am besten in das bestehende Look&Feel von HA ein, die Texte werden aber vor dem Balken abgeschnitten, sollten also kurz genug sein.
In Reihe 3 ist die Bubble Card mit card_type: button und button_type: slider
Wie sich hier die Farbe (über .bubble-range-fill) ändern lässt habe ich unten in die Liste der Beispiele aufgenommen.
Die Icon-Farbe hat sich von mir nicht zuverlässig ändern lassen, orange passt hier aber ohnehin besser zum blau als blau zu blau.
Optisch gefällt mir die Bubble Card recht gut. Wenn ich sie verwende, sollte ich es aber noch schaffen, den Dimmwert auch als Zahl anzuzeigen, das sollte mit etwas mehr Know-How machbar sein. Vor kurzem ist auch die überarbeitete Bubble-Card fertig geworden, da gibt es sicher viele neue Möglichkeiten.
In Reihe 4 ist die Slider Button Card, auch hier habe ich das orange Icon belassen, obwohl es eigentlich nicht in mein Farbschema passt. Optisch gefällt mit der Slider-Button etwa gleich gut wie die Bubble Card darüber. Hier ist der Einschalter sichtbar dargestellt, bei den anderen klickt man auf das Icon.
In Reihe 5 sind 3 Beispiele von Slider Entity Row, das ist keine eigene card sondern ein card-modifier für die Standard entities card.
Es gibt noch viele weitere card-modifier, ich werde ihnen mal einen eigenen Beitrag widmen.
Die erste Zeile zeigt das Default Aussehen der Standard Entities Card.
Die zweite Zeile zeigt den type: custom:slider-entity-row mit den Einstellungen toggle: true und hide_when_off: true
Die dritte Zeile zeigt den gleichen type mit den beiden Einstellungen auf false. Hier gibt es offensichtlich einen kleinen Bug, denn rechts sollte eigentlich (wie in der Vorschau gezeigt) der Dimmwert angezeigt werden.
Ohne diesen Bug würde mir der Schieberegler hier eigentlich recht gut gefallen, da er sehr kompakt ist.
In der Vorschau sieht die Card so aus, im Dashboard fehlt dann der Dimmwert von 40%, aber nur in manchen Fällen, nicht in allen.
slider-entity-row - Vorschau.png
Als letzte Card habe ich noch die hue-like-light-card in die Sammlung mit aufgenommen, da sie von vielen so hoch gelobt wird.
Was soll ich sagen? Ich plane ein KNX-System ohne Hue-Lights und bin auch nicht der Fan von einem über-buntem Dashboard, daher steht sie hier auch in der letzten Reihe.
In meinem vorigen Beitrag habe ich bereits darüber geschrieben, dass die Änderung der Icon-Farbe bei jeder Card anders funktioniert.
Hier ein paar Varianten, die mir bisher untergekommen sind, es gibt sicher noch viel mehr.
color: primary
icon_color: primary
Aktuell blicke ich da noch nicht voll durch und schaffe es daher auch nicht in allen Fällen.
Es scheinen aber auch viele andere ähnliche Probleme zu haben, das zeigen jedenfalls die unzähligen Fragen dazu im HA Forum: Customise-icon-color
card_mod ist sicherlich der beste Workaround, den es derzeit zum Thema Farboverrulung gibt.
Es werden aber immer mehr Cards, die bereits dedizierte Attribute oder CSS-Variablen für eine Farboverrulung besitzten.
In vielen Fällen geht es auch sehr einfach über ein selbst erstelltes Theme (theme: theme_name), dazu folgt später mal ein eigener Beitrag.
Vorab aber noch ein paar Worte zu meinem Farbschema, Details folgen dann im Themes-Beitrag.
Ich verwende, wie meine Screenshots zeigen, das Default dark Theme von HA, mit einer kleinen Ausnahme.
Das Standard Farbschema von HA wurde offensichtlich vor kurzem dahingehend geändert, dass Icons beim Umschalten auf Aktiv nicht mehr von Steel Blue auf Orange geändert werden,
sondern ihre Farbe beibehalten und nur das Icon selbst ändern, z.B. von durchgestrichen auf nicht durchgestrichen.
Viele Karten folgen aber noch der alten Regel oder haben immer schon ihre eigenen Regeln gehabt.
Mein Farbschema sieht verschiedene Farben für aktiv vor, je nachdem, wie interessant/wichtig für mich der aktiv Zustand ist.
Aktiv - wenig interessant: Umschalten des Icons von durchgestrichen auf nicht durchgestrichen und der Farbe von Steel Blue auf Dark Cyan (beide Farben sind fast gleich) oder Deep Sky Blue (ich bin mit beiden Lösungen noch nicht zufrieden)
Aktiv - medium interessant: aktuell verwende ich dafür noch die primary-color Medium Purple, das wird sich aber noch ändern, da mir der Kontrast zur vorigen noch nicht gefällt.
Generell möchte ich die Hintergrundfarben von schwarz/dunkelgrau auf ein Theme mit dunkel blaugrün ändern, und dann such ich mir auch 2 dazupassende Farben für aktiv mit Wichtigkeit gering/mittel.
Dim Gray verwende ich für alles inaktive, was sich auch nicht einschalten lässt (z.B. ein Rasenmäher im Winterschlaf)
Steel Blue wird für alles ausgeschaltete verwendet, was sich einschalten lässt.
Viele Cards verwenden als aktiv Color gelb oder orange.
Orange verwende ich nur dann, wenn ein aktiver Zustand Aufmerksamkeit erfordert, z.B. eine offen stehende Eingangstüre, das bekommt dann den Namen Aktiv - höchst interessant
Damit habe ich bis jetzt 5 Farben: deaktiviert | Aus (standby) | Ein mit Wichtigkeit gering / mittel / hoch
Der Vorteil davon ist, selbst wenn mein Dashboard 20 aktive Geräte anzeigt, dann sehe ich trotzdem anhand der Farben auf einen Blick die Wichtigkeit: 0x hoch / 1x mittel / 19x gering: Check ✔
Kommen noch 2 weitere Farben dazu, von denen ich hoffe, dass ich sie im Realbetrieb nie sehen werde.
gelb blinkend bedeutet, keine Zeit verlieren (z.B. Leckage-Melder)
rot blinkend bedeutet Gefahr (z.B. Rauchmelder)
Weitere Infos zu diesem Thema werde ich zusammenschreiben, wenn mein Farbschema ausgearbeitet ist. Das kann aber noch dauern, da ich anderes vorher machen möchte.
Weitere Beiträge dieser Serie:
HACS Wetterkarte
HACS Sonne & Mond (inkl. Tipps zur configuration.yaml)
HACS Gauges (Tachoanzeigen, inkl. senkrechte Balken-Cards)
HACS stack-in-card für Raum-Card (inkl. Beispiel-Prompt für ChatGPT)
HACS Graph-Cards
HACS Thermostat-Cards
HACS Entity Cards (inkl. stacking Beispiele mit der custom:button-card)
HACS Reminder (trash-card, atomic-calendar-revive)
HACS Person- & Öffi-Card (inkl. Geschichte zu ChatGPT)
HA-Behaglichkeits-Diagramm
HA Kurzeinführung
HACS Sidebar & Dashboard-Entwurf
HACS Bewässerung
HA & Node-Red
HA Notifications
HA Recorder, SQLite, InfluxDB, Grafana
HA Python Scripts
HA-Schiebe-Regler.png
Zur Referenz ist ganz oben die Standard tile card dargestellt. Das ist natürlich kein Schieberegler, aber diese sollen dann im Stil möglichst gut dazu passen.
Mit color: primary habe ich die Icon Farbe von orange auf blau geändert.
Ich werde in einem späteren Beitrag auch etwas zu den Themes und meinem geplanten Farbschema erzählen.
Die Standard light card geht mir in der Darstellung zu sehr in Richtung gauge card und nimmt auch zu viel Platz ein, daher ist sie hier nicht vertreten.
In Reihe 2 ist die Mushroom Light Card. Mir haben die Mushroom Cards von Anfang an sehr gut gefallen, da sie sich am besten mit den bestehenden cards kombinieren lassen. Hier funktioniert das Ändern der Farbe etwas anders, nämlich mit icon_color: primary statt mit color:
Diese Mushroom Card fügt sich wie immer am besten in das bestehende Look&Feel von HA ein, die Texte werden aber vor dem Balken abgeschnitten, sollten also kurz genug sein.
In Reihe 3 ist die Bubble Card mit card_type: button und button_type: slider
Wie sich hier die Farbe (über .bubble-range-fill) ändern lässt habe ich unten in die Liste der Beispiele aufgenommen.
Die Icon-Farbe hat sich von mir nicht zuverlässig ändern lassen, orange passt hier aber ohnehin besser zum blau als blau zu blau.
Optisch gefällt mir die Bubble Card recht gut. Wenn ich sie verwende, sollte ich es aber noch schaffen, den Dimmwert auch als Zahl anzuzeigen, das sollte mit etwas mehr Know-How machbar sein. Vor kurzem ist auch die überarbeitete Bubble-Card fertig geworden, da gibt es sicher viele neue Möglichkeiten.
In Reihe 4 ist die Slider Button Card, auch hier habe ich das orange Icon belassen, obwohl es eigentlich nicht in mein Farbschema passt. Optisch gefällt mit der Slider-Button etwa gleich gut wie die Bubble Card darüber. Hier ist der Einschalter sichtbar dargestellt, bei den anderen klickt man auf das Icon.
In Reihe 5 sind 3 Beispiele von Slider Entity Row, das ist keine eigene card sondern ein card-modifier für die Standard entities card.
Es gibt noch viele weitere card-modifier, ich werde ihnen mal einen eigenen Beitrag widmen.
Die erste Zeile zeigt das Default Aussehen der Standard Entities Card.
Die zweite Zeile zeigt den type: custom:slider-entity-row mit den Einstellungen toggle: true und hide_when_off: true
Die dritte Zeile zeigt den gleichen type mit den beiden Einstellungen auf false. Hier gibt es offensichtlich einen kleinen Bug, denn rechts sollte eigentlich (wie in der Vorschau gezeigt) der Dimmwert angezeigt werden.
Ohne diesen Bug würde mir der Schieberegler hier eigentlich recht gut gefallen, da er sehr kompakt ist.
In der Vorschau sieht die Card so aus, im Dashboard fehlt dann der Dimmwert von 40%, aber nur in manchen Fällen, nicht in allen.
slider-entity-row - Vorschau.png
Als letzte Card habe ich noch die hue-like-light-card in die Sammlung mit aufgenommen, da sie von vielen so hoch gelobt wird.
Was soll ich sagen? Ich plane ein KNX-System ohne Hue-Lights und bin auch nicht der Fan von einem über-buntem Dashboard, daher steht sie hier auch in der letzten Reihe.
In meinem vorigen Beitrag habe ich bereits darüber geschrieben, dass die Änderung der Icon-Farbe bei jeder Card anders funktioniert.
Hier ein paar Varianten, die mir bisher untergekommen sind, es gibt sicher noch viel mehr.
color: primary
icon_color: primary
HTML-Code:
styles:
icon:
- color: var(--primary-color)
HTML-Code:
styles: |
.bubble-range-fill {
background: var(--paper-item-icon-color) !important;
opacity: 1 !important;
}
HTML-Code:
card_mod:
style: |
:host {
--paper-item-icon-color: var(--primary-color);
}
HTML-Code:
card_mod:
style: |
ha-card {
--card-mod-icon-color: var(--primary-color);
}
Aktuell blicke ich da noch nicht voll durch und schaffe es daher auch nicht in allen Fällen.
Es scheinen aber auch viele andere ähnliche Probleme zu haben, das zeigen jedenfalls die unzähligen Fragen dazu im HA Forum: Customise-icon-color
card_mod ist sicherlich der beste Workaround, den es derzeit zum Thema Farboverrulung gibt.
Es werden aber immer mehr Cards, die bereits dedizierte Attribute oder CSS-Variablen für eine Farboverrulung besitzten.
In vielen Fällen geht es auch sehr einfach über ein selbst erstelltes Theme (theme: theme_name), dazu folgt später mal ein eigener Beitrag.
Vorab aber noch ein paar Worte zu meinem Farbschema, Details folgen dann im Themes-Beitrag.
Ich verwende, wie meine Screenshots zeigen, das Default dark Theme von HA, mit einer kleinen Ausnahme.
Das Standard Farbschema von HA wurde offensichtlich vor kurzem dahingehend geändert, dass Icons beim Umschalten auf Aktiv nicht mehr von Steel Blue auf Orange geändert werden,
sondern ihre Farbe beibehalten und nur das Icon selbst ändern, z.B. von durchgestrichen auf nicht durchgestrichen.
Viele Karten folgen aber noch der alten Regel oder haben immer schon ihre eigenen Regeln gehabt.
Mein Farbschema sieht verschiedene Farben für aktiv vor, je nachdem, wie interessant/wichtig für mich der aktiv Zustand ist.
Aktiv - wenig interessant: Umschalten des Icons von durchgestrichen auf nicht durchgestrichen und der Farbe von Steel Blue auf Dark Cyan (beide Farben sind fast gleich) oder Deep Sky Blue (ich bin mit beiden Lösungen noch nicht zufrieden)
Aktiv - medium interessant: aktuell verwende ich dafür noch die primary-color Medium Purple, das wird sich aber noch ändern, da mir der Kontrast zur vorigen noch nicht gefällt.
Generell möchte ich die Hintergrundfarben von schwarz/dunkelgrau auf ein Theme mit dunkel blaugrün ändern, und dann such ich mir auch 2 dazupassende Farben für aktiv mit Wichtigkeit gering/mittel.
Dim Gray verwende ich für alles inaktive, was sich auch nicht einschalten lässt (z.B. ein Rasenmäher im Winterschlaf)
Steel Blue wird für alles ausgeschaltete verwendet, was sich einschalten lässt.
Viele Cards verwenden als aktiv Color gelb oder orange.
Orange verwende ich nur dann, wenn ein aktiver Zustand Aufmerksamkeit erfordert, z.B. eine offen stehende Eingangstüre, das bekommt dann den Namen Aktiv - höchst interessant
Damit habe ich bis jetzt 5 Farben: deaktiviert | Aus (standby) | Ein mit Wichtigkeit gering / mittel / hoch
Der Vorteil davon ist, selbst wenn mein Dashboard 20 aktive Geräte anzeigt, dann sehe ich trotzdem anhand der Farben auf einen Blick die Wichtigkeit: 0x hoch / 1x mittel / 19x gering: Check ✔
Kommen noch 2 weitere Farben dazu, von denen ich hoffe, dass ich sie im Realbetrieb nie sehen werde.
gelb blinkend bedeutet, keine Zeit verlieren (z.B. Leckage-Melder)
rot blinkend bedeutet Gefahr (z.B. Rauchmelder)
Weitere Infos zu diesem Thema werde ich zusammenschreiben, wenn mein Farbschema ausgearbeitet ist. Das kann aber noch dauern, da ich anderes vorher machen möchte.
Weitere Beiträge dieser Serie:
HACS Wetterkarte
HACS Sonne & Mond (inkl. Tipps zur configuration.yaml)
HACS Gauges (Tachoanzeigen, inkl. senkrechte Balken-Cards)
HACS stack-in-card für Raum-Card (inkl. Beispiel-Prompt für ChatGPT)
HACS Graph-Cards
HACS Thermostat-Cards
HACS Entity Cards (inkl. stacking Beispiele mit der custom:button-card)
HACS Reminder (trash-card, atomic-calendar-revive)
HACS Person- & Öffi-Card (inkl. Geschichte zu ChatGPT)
HA-Behaglichkeits-Diagramm
HA Kurzeinführung
HACS Sidebar & Dashboard-Entwurf
HACS Bewässerung
HA & Node-Red
HA Notifications
HA Recorder, SQLite, InfluxDB, Grafana
HA Python Scripts
Kommentar