Anpassung der Lawn Mower Card mit card-mod

Einleitung
Die Anpassung von Benutzeroberflächen in Smart-Home-Anwendungen ist ein wichtiger Aspekt, um die Benutzererfahrung zu optimieren. Insbesondere die Verwendung von benutzerdefinierten Karten in Home Assistant ermöglicht es Nutzern, ihre Smart-Home-Systeme individuell zu gestalten. In diesem Artikel wird erläutert, wie die Lawn Mower Card mithilfe von card-mod angepasst werden kann, um das Erscheinungsbild zu verbessern.

Problem
Ein Benutzer möchte die Hintergrundfarbe seiner Lawn Mower Card ändern, hat jedoch Schwierigkeiten, die gewünschten Anpassungen vorzunehmen. Trotz der Verwendung von card-mod wird die Hintergrundfarbe nicht wie gewünscht angezeigt. Der Benutzer sucht nach einer Lösung, um die Karte korrekt zu stylen.

Lösung
Um die Hintergrundfarbe der Lawn Mower Card zu ändern, ist es notwendig, die Karte in einen vertical-stack zu packen. Dies ermöglicht es, die Hintergrundfarbe über die card-mod-Konfiguration korrekt anzuwenden. Hier ist ein Beispiel, wie die Konfiguration aussehen kann:

type: custom:vertical-stack-in-card
cards:
  - type: custom:lawn-mower-card
    entity: lawn_mower.turtle
    image: http://192.168.1.64:8124/local/Turtle.png
    battery: sensor.turtle_batterie
    show_toolbar: true
    show_shortcuts: true
    actions:
      start:
        action: mammotion.start_mow
        metadata: {}
        data:
          is_mow: false
          is_dump: false
          job_mode: 0
          speed: 0.3
          ultra_wave: 2
          channel_mode: 2
          channel_width: 23
          rain_tactics: 1
          blade_height: 40
          toward_mode: 2
          border_mode: 3
          obstacle_laps: 1
          start_progress: 0
          areas:
            - switch.turtle_bereich_rasen_oben
        target:
          entity_id: lawn_mower.turtle
      return_to_base:
        action: lawn_mower.dock
        target:
          entity_id: lawn_mower.turtle
        data: {}
    stats:
      default:
        - entity_id: number.turtle_schnitthohe
          unit: mm
          subtitle: Schnitthöhe
        - entity_id: number.turtle_aufgabengeschwindigkeit
          subtitle: Geschwindigkeit
          unit: m/s
    shortcuts:
      - name: Rasen oben
        action: mammotion.start_mow
        metadata: {}
        data:
          is_mow: false
          is_dump: false
          job_mode: 0
          speed: 0.3
          ultra_wave: 2
          channel_mode: 2
          channel_width: 23
          rain_tactics: 1
          blade_height: 40
          toward_mode: 2
          border_mode: 3
          obstacle_laps: 1
          start_progress: 0
          areas:
            - switch.turtle
        target:
          entity_id: lawn_mower.turtle
        icon: mdi:image-filter-hdr-outline
    grid_options:
      columns: 24
      rows: 6
card_mod:
  style: |
    ha-card {
      --ha-card-background: rgba(0,0,0,0.40) !important;
      box-shadow: 4px 5px 13px 0px rgba(217, 247, 250,0.66);
    }

In dieser Konfiguration wird die Lawn Mower Card in einen vertical-stack gepackt, was es ermöglicht, die Hintergrundfarbe und den Schatten der Karte über card-mod zu steuern.

Schritte zur Umsetzung
1. Installiere die card-mod-Integration in Home Assistant, falls noch nicht geschehen.
2. Erstelle eine neue YAML-Konfiguration für die Lawn Mower Card und packe sie in einen vertical-stack.
3. Füge die card_mod-Stile hinzu, um die Hintergrundfarbe und den Schatten anzupassen.
4. Teste die Konfiguration in der Benutzeroberfläche von Home Assistant und passe sie nach Bedarf an.

Hintergrundwissen
card-mod ist eine leistungsstarke Erweiterung für Home Assistant, die es ermöglicht, das Aussehen von Karten durch CSS-Anpassungen zu verändern. Die Verwendung von vertical-stack ist notwendig, um sicherzustellen, dass die Stile korrekt angewendet werden, da einige Karten möglicherweise nicht direkt modifiziert werden können.

Typische Fehler sind:
- Vergessen, die Karte in einen vertical-stack zu packen.
- Falsche CSS-Syntax oder fehlende !important-Deklarationen, die verhindern, dass die Stile angewendet werden.

Zusätzliche Infos

Hinweise & Best Practices
- Stelle sicher, dass die card-mod-Integration auf dem neuesten Stand ist, um Kompatibilitätsprobleme zu vermeiden.
- Teste Änderungen im Entwicklermodus des Browsers, um sofortige Rückmeldungen zu erhalten.
- Halte die YAML-Konfiguration gut strukturiert und kommentiere sie, um die Wartbarkeit zu erhöhen.
- Berücksichtige alternative Karten und Anpassungen, falls card-mod nicht die gewünschten Ergebnisse liefert.