Ich nutze ein Card Mod für Farbliche darstellung von Zuständen meiner Geräte die ich so eingestellt habe das wenn sie Laufen Rot angezeigt werden und wenn nicht in Betrieb dan eben Grün.
Dafür Nutze ich lovelace-card-mod . Dieser wird leider nicht mehr gewartet. Daher suche ich eine Alternaitve zu diesem und wolte euch fragen ob es vlt sogar was bessere gibt?
geht das nur über YAML? Hat es keine Benuzeroberfläche?
Korrekt, dort gibt es keine Benutzeroberfläche uix (ehm. card_mod) läuft nur über yaml.
Für dich könnte vielleicht das Card Mod Studio interessant sein. Nach Installtion hast du in jeder Card im Editor unten links einen Button „Style“. Darüber kannst du dann schon viele Einstellungen der Farben und Co vornehmen, ohne yaml schreiben zu müssen.
Visual style editor for card-mod in Home Assistant. Color pickers, sliders, animation presets, and per-entity row styling — generates card_mod YAML automatically.
Kann ich damit auch Status veränderungen Farblich Einstellen? WIe huer auf dem Bild.
Ja das geht auch, so schaut das aus:
Hier kannst du noch mehr zum Thema nachlesen:
card-mod wird mit den neuesten HA Versionen nicht mehr unterstützt und wird auch nicht mehr weiterentwickelt. UIX ist praktisch der Nachfolger von card-mod, der im Moment auch noch den card-mod Syntax unterstützt. Die Frage ist nur wie lange noch. Deshalb ist es sinnvoll jetzt alles auf uix umzustellen.
Ich finde es immer praktisch, wenn man den Gerätestatus direkt an den Farben erkennen kann. Schade, dass Card-Mod nicht mehr gepflegt wird. Vielleicht lässt sich das inzwischen auch mit den nativen Home-Assistant-Karten und etwas CSS umsetzen, ohne dass man wieder von einer zusätzlichen Erweiterung abhängig ist.
Bei Card-Mod Studio habe ich denn Bug aber dass die einstellungen gelöscht werden sobal ich es gespeichert, wieder öffne und Beareiten will. Es wird sozusagen wieder zurück gesetz.
Hi und erstmal herzlich willkommen. Das funktioniert so leider nicht mit dem CSS. Die Cards müssten alle das css Styling mit integrieren, also die CSS-Selektoren (Klassen) die angesprochen werden können. Viele Cards machen das heute auch schon, aber halt noch lange nicht alle und meist sind die Klassen dann spezifischer. Daher gibt es auch Card_Mod bzw. jetzt UIX. UIX ist die Weiterentwicklung von Card_Mod und der eigentliche Author von Card_Mod ist beim UIX Projekt auch dabei. Installiere dir einfach UIX und du kannst deine Card_Mod Settings komplett übernehmen. Besser ist natürlich du tauscht das card_mod überall gegen uix im Code aus, aber es funktioniert erstmal auch mit deinen card_mod Konfigurationen.
@Thunder-Eagle ich habe es gerade mal mit eine vertical stack in card versucht, dort wurden die Textwerte nicht korrekt angepasst. Wenn ich aber eine standard Entitäten Card auch HA nutze, dann funktioniert das korrekt.
also ich habe Card-Mod Entfernt und UIX Installiert aber nun Funktioniert es überhaupt nicht mehr. Farben werden nicht geändert und Fehlermeldung bekomme ich auch: card-mod/UIX not detected — install one of them first or styles won’t apply.
Ich hatte nur zwei eingestellt zum Testen und dies auch wieder Entfernt, damit der umstieh sauber ist.
Und ich nutze ja die Standart Cards von HA
Hast du nach dem Entfernen von Card_mod und nach der Installtion von UIX jeweils einen Neustart gemacht? Der Fehler sagt ja, installiere eins der beiden, damit deine styles korrekt angezeigt werden.
Viele von uns haben die Umstellung schon gemacht. Wir mussten alle nur UIX installieren und Card_Mod entfernen. Danach haben wir noch über den Raw-Konfigurator alle card_mod Stellen gegen uix ausgetauscht. Das war es gewesen und dann lief wieder alles korrekt. Mein Dashboard verwendet viel UIX.
Im Code Fenster dann „Strg + F“ drücken und dort wie im Bild die beiden Sachen eintragen und „Replace all“ drücken.
Nur zur Info, das Card Mod Studio ist sowohl mit card_mod wie mit UIX kompatibel.
jayjojayson:
Neustart gemacht?
Ja habe ich.
Wie gesagt, UIX ist Installiert.
Ich arbeite kaum mit YAML und mehr mit der UI. Daher weis ich nicht ob da noch reste sind die da quer schiesen.
views:
- title: Home
icon: mdi:home
cards: []
type: sections
subview: false
sections:
- type: grid
cards:
- type: heading
heading: Neuer Abschnitt
- type: vertical-stack
cards:
- type: entities
entities:
- entity: person.****
secondary_info: last-updated
- entity: person.****
secondary_info: last-updated
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
- type: entities
entities:
- entity: sensor.aussen_sensor_temperature
secondary_info: last-updated
header:
type: graph
entity: sensor.aussen_sensor_temperature
detail: 1
- type: entities
entities:
- entity: sensor.aussen_sensor_humidity
secondary_info: last-updated
header:
type: graph
entity: sensor.aussen_sensor_humidity
detail: 1
- type: vertical-stack
cards:
- type: tile
entity: cover.shelly2pmg3_b08184a7afdc_cover_0
features_position: bottom
vertical: false
- type: markdown
content: |-
<table width="100%">
<tr>
<td><b>Müllart</b></td>
<td><b>Nächste Abholung</b></td>
<td><b>Status</b></td>
</tr>
<tr>
<td>Restmüll</td>
<td>
{{ states('sensor.restmull') | replace('Hausmüll', '') | replace('(verlegt)', '') | trim }}
</td>
<td>
{{ 'Verlegt' if 'verlegt' in states('sensor.restmull').lower() else 'Regulär' }}
</td>
</tr>
<tr>
<tr>
<td>Gelber Sack</td>
<td>
{{ states('sensor.gelber_sack') | replace('Gelber Wertstoffbehälter', '') | replace('(verlegt)', '') | trim }}
</td>
<td>
{{ 'Verlegt' if 'verlegt' in states('sensor.gelber_sack').lower() else 'Regulär' }}
</td>
</tr>
<tr>
<td>Papier</td>
<td>
{{ states('sensor.papier') | replace('Papier', '') | replace('(verlegt)', '') | trim }}
</td>
<td>
{{ 'Verlegt' if 'verlegt' in states('sensor.papier').lower() else 'Regulär' }}
</td>
</tr>
</table>
- type: vertical-stack
cards:
- graph: line
type: sensor
entity: sensor.thermometer_bad_og_temperature
detail: 2
grid_options:
columns: 6
rows: auto
column_span: 4
max_columns: 4
dense_section_placement: false
- title: ⚡ Strom
path: strom
cards: []
type: sections
max_columns: 10
dense_section_placement: true
sections:
- type: grid
cards:
- type: heading
heading: PV Anlage
heading_style: title
badges:
- type: entity
entity: weather.forecast_home
- type: entity
show_state: true
show_icon: true
entity: sensor.aussen_sensor_temperature
color: red
tap_action:
action: more-info
- type: entity
show_state: true
show_icon: true
entity: sensor.aussen_sensor_humidity
color: primary
tap_action:
action: more-info
- type: vertical-stack
cards:
- type: gauge
entity: sensor.battery_inverter_fems_sum_esssoc
needle: true
severity:
green: 25
yellow: 10
red: 0
name: Stromspeicher
tap_action:
action: none
- graph: line
type: sensor
entity: sensor.battery_inverter_fems_sum_esssoc
detail: 2
icon: mdi:battery
hours_to_show: 24
name: ' Ladezustand des Stromspeichers'
- type: entities
entities:
- entity: sensor.battery_inverter_fems_sum_productionactivepower
icon: mdi:solar-power-variant
name: Aktuelle Produktion der PV Anlage
- entity: sensor.power_haus_momentanverbrauch_korrektur
name: Haus Momentanverbrauch
secondary_info: none
icon: mdi:home
- entity: sensor.power_stromspeicher_korrektur
name: Stromspeicher Be/Entladung
icon: mdi:battery
- entity: sensor.verfugbare_solarenergie
icon: mdi:flash
- graph: line
type: sensor
detail: 2
hours_to_show: 6
icon: mdi:solar-power-variant
name: Aktuelle Produktion der PV Anlage
entity: sensor.battery_inverter_fems_sum_productionactivepower
unit: kW
- graph: line
type: sensor
entity: sensor.battery_inverter_fems_sum_consumptionactivepower
detail: 2
hours_to_show: 6
icon: mdi:home
name: Haus Momentanverbrauch
unit: kW
- type: grid
cards:
- type: heading
heading: Verbraucher
heading_style: title
- type: entities
entities:
- entity: sensor.steckdose_pc_pc_steckdose
- entity: sensor.steckdose_beuler_kuche_eg_power
- entity: sensor.steckdose_beuler_og_power
- entity: sensor.steckdose_geschirrspuler_eg_power
- entity: sensor.steckdose_geschirrspuler_power
- entity: sensor.steckdose_kuhlschrank_kuche_eg_power
- entity: sensor.heizraum_pelletsofen_dose_steckdose_draussen_pumpe_leistung
- color: none
entity: sensor.steckdose_waschmaschine_power
- color: none
entity: sensor.steckdose_trockner_power
- entity: sensor.fritz_dect_200_13_leistung
- entity: sensor.steckdose_mini_backofen_power
- entity: sensor.steckdose_mikrowelle_power
- entity: sensor.steckdose_3d_drucker_power
name: 3D Drucker
icon: mdi:printer-3d-nozzle
- entity: sensor.flur_og_fussbodenheizung_og_leistung
- entity: sensor.netzwerk_und_server_power
visibility:
- condition: numeric_state
above: 1
entity: sensor.steckdose_pc_pc_steckdose
- type: grid
cards:
- type: heading
heading: Akkus der Geräte
heading_style: title
- type: custom:battery-state-card
- title: 🔥 Heizung
path: heizung
icon: ''
type: sections
max_columns: 10
dense_section_placement: true
sections:
- type: grid
cards:
- type: heading
heading: 🔥AHC OG
heading_style: title
layout_options:
grid_columns: 40
grid_rows: 1
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.aussen_sensor_temperature
name: Außen
color: pink
state_content:
- name
- state
tap_action:
action: more-info
- type: entity
show_state: true
show_icon: true
entity: sensor.aussen_sensor_humidity
icon: mdi:water-percent
color: primary
tap_action:
action: more-info
- type: vertical-stack
cards:
- type: heading
icon: mdi:bed
heading: Schlafzimmer
heading_style: subtitle
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_schlafzimmer_og_temperature
color: pink
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_schlafzimmer_og_humidity
color: light-blue
- type: thermostat
entity: climate.thermostat_schlafzimmer_og_2
show_current_as_primary: false
name: Schlafzimmer
- type: entities
entities:
- entity: climate.thermostat_schlafzimmer_og_2
secondary_info: last-updated
- entity: sensor.thermometer_schlafzimmer_og_temperature
secondary_info: last-updated
name: Thermometer Schlafzimmer
show_header_toggle: false
header:
type: graph
entity: sensor.thermometer_schlafzimmer_og_temperature
detail: 2
state_color: true
layout_options:
grid_columns: 4
grid_rows: auto
- type: vertical-stack
cards:
- type: heading
icon: mdi:sofa
heading: Wohnzimmer
heading_style: subtitle
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_wohnzimmer_og_temperature
color: pink
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_wohnzimmer_og_humidity
color: light-blue
- type: thermostat
entity: climate.thermostat_wohnzimmer_og_2
show_current_as_primary: false
name: 'Wohnzimmer '
- type: entities
entities:
- entity: climate.thermostat_wohnzimmer_og_2
secondary_info: last-updated
- entity: sensor.thermometer_wohnzimmer_og_temperature
secondary_info: last-updated
name: Thermometer Wohnzimmer
show_header_toggle: false
state_color: true
header:
type: graph
entity: sensor.thermometer_wohnzimmer_og_temperature
detail: 2
layout_options:
grid_columns: 4
grid_rows: auto
- type: vertical-stack
cards:
- type: heading
icon: mdi:laptop
heading: PC Raum
heading_style: subtitle
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_pc_zimmer_temperature
color: pink
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_pc_zimmer_humidity
color: light-blue
tap_action:
action: more-info
- type: thermostat
entity: climate.thermostat_pc_raum
show_current_as_primary: false
name: PC Raum
- type: entities
entities:
- entity: climate.thermostat_pc_raum
secondary_info: last-updated
- entity: sensor.thermometer_pc_zimmer_temperature
secondary_info: last-updated
name: Thermometer PC Raum
show_header_toggle: false
header:
type: graph
entity: sensor.thermometer_pc_zimmer_temperature
detail: 2
state_color: true
layout_options:
grid_columns: 4
grid_rows: auto
- type: vertical-stack
cards:
- type: heading
icon: mdi:faucet-variant
heading: Küche
heading_style: subtitle
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_kuche_og_temperature
color: pink
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_kuche_og_humidity
color: light-blue
- type: thermostat
entity: climate.thermostat_kuche_og_2
show_current_as_primary: false
name: Küche
- type: entities
entities:
- entity: climate.thermostat_kuche_og_2
secondary_info: last-updated
- entity: sensor.thermometer_kuche_og_temperature
secondary_info: last-updated
name: Thermometer Küche
show_header_toggle: false
header:
type: graph
entity: sensor.thermometer_kuche_og_temperature
detail: 2
state_color: true
layout_options:
grid_columns: 4
grid_rows: auto
- type: vertical-stack
cards:
- type: heading
icon: mdi:blinds-vertical-closed
heading: Flur
heading_style: subtitle
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_flur_og_temperature
color: pink
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_flur_og_humidity
color: light-blue
- type: thermostat
entity: climate.thermostat_flur_og
show_current_as_primary: false
name: Flur
- type: entities
entities:
- entity: climate.thermostat_flur_og
secondary_info: last-updated
- entity: climate.thermostat_eingang_og
secondary_info: last-updated
- entity: sensor.thermometer_flur_og_temperature
secondary_info: last-updated
name: Thermometer Flur
show_header_toggle: false
header:
type: graph
entity: sensor.thermometer_flur_og_temperature
detail: 2
state_color: true
layout_options:
grid_columns: 4
grid_rows: auto
- type: entity
entity: input_boolean.heizung_aus
column_span: 10
- type: grid
cards:
- type: heading
heading: 🔥AHC EG
heading_style: title
layout_options:
grid_columns: 40
grid_rows: 1
- type: vertical-stack
cards:
- type: heading
icon: mdi:bathtub
heading_style: subtitle
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_bad_eg_temperature
color: pink
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_bad_eg_humidity
color: light-blue
heading: Bad
- type: thermostat
entity: climate.thermostat_bad_eg
show_current_as_primary: false
name: Bad
- type: entities
entities:
- entity: climate.thermostat_bad_eg
icon: ''
secondary_info: last-updated
- entity: sensor.thermometer_bad_eg_temperature
secondary_info: last-updated
name: Thermometer Bad
show_header_toggle: false
header:
type: graph
entity: sensor.thermometer_bad_eg_temperature
detail: 2
state_color: true
layout_options:
grid_columns: 4
grid_rows: auto
- type: vertical-stack
cards:
- type: heading
icon: mdi:sofa
heading_style: subtitle
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_wohnzimmer_eg_temperature
color: pink
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_wohnzimmer_eg_humidity
color: blue
heading: 'Wohnzimmer '
- type: thermostat
entity: climate.thermostat_wohnzimmer_eg
show_current_as_primary: false
name: Wohnzimmer
- type: entities
entities:
- entity: climate.thermostat_wohnzimmer_eg
icon: ''
secondary_info: last-updated
- entity: sensor.thermometer_wohnzimmer_eg_temperature
secondary_info: last-updated
name: Thermometer Wohnzimmer
show_header_toggle: false
header:
type: graph
entity: sensor.thermometer_wohnzimmer_eg_temperature
detail: 2
state_color: true
layout_options:
grid_columns: 4
grid_rows: auto
- type: vertical-stack
cards:
- type: heading
icon: mdi:countertop
heading_style: subtitle
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_kuche_eg_temperature
color: pink
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_kuche_eg_humidity
color: light-blue
heading: Küche
- type: thermostat
entity: climate.thermostat_kuche_eg
show_current_as_primary: false
name: Küche
- type: entities
entities:
- entity: climate.thermostat_kuche_eg
icon: ''
secondary_info: last-updated
- entity: sensor.thermometer_kuche_eg_temperature
secondary_info: last-updated
name: Thermometer Küche
show_header_toggle: false
header:
type: graph
entity: sensor.thermometer_kuche_eg_temperature
detail: 2
state_color: true
layout_options:
grid_columns: 4
grid_rows: auto
- type: vertical-stack
cards:
- type: heading
icon: mdi:bed
heading_style: subtitle
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.thermomenter_schlafzimmer_eg_temperature
color: pink
- type: entity
show_state: true
show_icon: true
entity: sensor.thermomenter_schlafzimmer_eg_humidity
color: light-blue
heading: Schlafzimmer
- type: thermostat
entity: climate.thermostat_flur_oben_og
show_current_as_primary: false
name: Schlafzimmer
- type: entities
entities:
- entity: climate.thermostat_flur_oben_og
icon: ''
secondary_info: last-updated
- entity: sensor.thermomenter_schlafzimmer_eg_temperature
secondary_info: last-updated
name: Thermometer Schlafzimmer
show_header_toggle: false
header:
type: graph
entity: sensor.thermomenter_schlafzimmer_eg_temperature
detail: 2
state_color: true
layout_options:
grid_columns: 4
grid_rows: auto
- type: vertical-stack
cards:
- type: heading
icon: ''
heading: Flur
heading_style: subtitle
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_flur_eg_temperature
color: pink
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_flur_eg_humidity
color: light-blue
- type: thermostat
entity: climate.thermostat_flur_eg
show_current_as_primary: false
name: Flur
- type: entities
entities:
- entity: climate.thermostat_flur_eg
- entity: sensor.thermometer_flur_eg_temperature
secondary_info: last-updated
name: Thermometer Flur
show_header_toggle: false
header:
type: graph
entity: sensor.thermometer_flur_eg_temperature
detail: 2
state_color: true
layout_options:
grid_columns: 4
grid_rows: auto
- type: vertical-stack
cards:
- type: heading
icon: mdi:bed
heading_style: subtitle
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_gastezimmer_eg_temperature
color: pink
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_gastezimmer_eg_humidity
color: light-blue
heading: Gästezimmer
- type: thermostat
entity: climate.thermostat_gasstezimmer_eg
show_current_as_primary: false
name: Gässtezimmer
- type: entities
entities:
- entity: climate.thermostat_gasstezimmer_eg
icon: ''
secondary_info: last-updated
- entity: sensor.thermometer_gastezimmer_eg_temperature
secondary_info: last-updated
name: Thermometer Gässtezimmer
show_header_toggle: false
header:
type: graph
entity: sensor.thermometer_gastezimmer_eg_temperature
detail: 2
state_color: true
layout_options:
grid_columns: 4
grid_rows: auto
- type: entity
entity: input_boolean.eg_heizung_aus
column_span: 10
- type: grid
cards:
- type: heading
heading: 🔥AHC Keller
heading_style: title
- type: vertical-stack
cards:
- type: heading
icon: mdi:washing-machine
heading_style: subtitle
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_waschraum_keller_temperature
color: pink
- type: entity
show_state: true
show_icon: true
entity: sensor.thermometer_waschraum_keller_humidity
color: light-blue
heading: Waschküche
- type: thermostat
entity: climate.thermostat_wohnzimmer_og
show_current_as_primary: false
name: Waschküche
- color: state
type: entities
entities:
- entity: climate.thermostat_wohnzimmer_og
icon: ''
secondary_info: last_updated
- entity: sensor.thermometer_waschraum_keller_temperature
name: Thermometer Waschküche
secondary_info: last_updated
show_header_toggle: false
header:
type: graph
entity: sensor.thermometer_waschraum_keller_temperature
detail: 2
layout_options:
grid_columns: 4
grid_rows: auto
cards: []
- type: sections
max_columns: 10
title: 'Licht '
path: licht
dense_section_placement: true
icon: mdi:ceiling-light
sections:
- type: grid
cards:
- type: heading
heading_style: title
heading: OG Licht
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.wled
show_state: true
- type: light
entity: light.pc_zimmer_stehlampe
- type: light
entity: light.lampe_flur_og
- type: light
entity: light.lampe_eingang_og
- type: light
entity: light.lampe_kuche_link_og
- type: light
entity: light.lampe_kuche_rechts_og
column_span: 1
- type: grid
cards:
- type: heading
heading: Neuer Abschnitt
- type: horizontal-stack
cards:
- type: light
entity: light.lampe_flur_eg
- type: light
entity: light.lampe_kellertreppe
- type: light
entity: light.lampe_keller_wechselrichter
- type: light
entity: light.lampe_eingang_eg
- type: entity
entity: light.lampe_wohnzimmer_eg
- type: sections
max_columns: 4
title: Alles Andere
path: alles-andere
sections:
- type: grid
cards:
- type: heading
heading: Neuer Abschnitt
- type: entity
entity: input_boolean.schichtwechsel_heike
grid_options:
columns: 6
rows: 2
- type: tile
entity: switch.fritz_dect_200_13
- type: tile
entity: input_boolean.fusbodenheizung_an_aus
features:
- type: toggle
Ersetzen kann ich garnicht so wie du auf dem Bild. Ich kann nur Suchen. Ich habe nichts gefunden mit card_mod
Eine Sache ist mit aufgefallen, einmal ist eine Tabellenspalte zuviel gesetzt.
Ansonsten sieht das für mich erstmal gut aus und card_mod ist da ja auch nicht weiter enthalten. Es muss also mit der Installation/Deinstallation von UIX bzw. Card_Mod zu tun haben.
wolte gerade das ändern, jetz hast du es gelöscht. Was gibt es nicht mehr?
„Entity gibt es nicht mehr“, aber habe gerade nochmal im Card Editor geschaut und es gibt entity oder entities für die Entitäten Liste. Daher hatte ich mich geirrt und es gelöscht.
gut, dann brauche ich das nicht überarbeiten.
Muss ich in denn Dateiordern gehen und dort vlt reste löschen?
Ich habe den Browser Cach geleert und nun war es erst mal Bereinigt. Nun wolte ich UIX und Card Mod Studio neu instalieren und bekomme denn Fehler:
Edit:
Dazu kommt das mir jetzt meine Verbraucher vom Haus als Karte nicht mehr angezeigt werden.