Globale Farben in Home Assistant

Nur ein paar kurze Code-Schnipsel, weil ich plane, das Konzept sehr weit einzusetzen: Ich hätte in meiner Hausautomatisierung gerne eine globale Liste von Farben, die von verschiedenen Automatisierungen genutzt werden können, um dem ganzen Haus ein Farbschema zu geben. Diese sollen sich einerseits abhängig vom Datum selbst in verschiedene Konfigurationen bringen (z.B. Rot und Grün an Weihnachten), andererseits aber auch von Hand geändert werden können.

Um die Farbe zu speichern bediene ich mich eines kleine Tricks: Ich definiere sie im HSL-Farbraum, wo Farben anhand ihres Farbtons (Hue), ihrer Sättigung (Saturation) und ihrer Helligkeit (Lightness) definiert werden. Dieser wird vom Service light.turn_on sogar nativ unterstützt mit dem Parameter hs_color. Da ich mich nur für den Farbton interessiere und die Automatisierungen Sättigung und Helligkeit selbst festlegen können reicht mir für jede Farbe eine einzige Input Number zum Speichern:

global_hue_primary:
  name: Primärfarbe
  initial: 40
  min: 0
  max: 360
  step: 1
  unit_of_measurement: '°'
  
global_hue_secondary:
  name: Sekundärfarbe
  initial: 205
  min: 0
  max: 360
  step: 1
  unit_of_measurement: '°'
  
global_hue_tertiary:
  name: Tertiärfarbe
  initial: 90
  min: 0
  max: 360
  step: 1
  unit_of_measurement: '°'

Zum händischen Bearbeiten hätte ich gerne ein System gehabt, bei dem ich die Farbe sofort sehe und sie nicht über einen Slider einstellen muss. Leider habe ich auf die Schnelle keinen Color Picker oder etwas ähnliches gefunden, also habe ich es mir über ein Set von Button Cards selbst gebaut (weil das etwas komplizierter ist nehme ich es untendrunter nochmal kurz auseinander):

cards:
  - color_type: card
    entity: input_number.global_hue_primary
    hold_action:
      action: call-service
      repeat: 50
      service: input_number.increment
      service_data:
        entity_id:
          - input_number.global_hue_primary
    icon: 'mdi:palette'
    show_name: false
    show_state: false
    styles:
      card:
        - background-color: >
            [[[ return `hsl(${states["input_number.global_hue_primary"].state},
            100%, 50%)` ]]]
    type: 'custom:button-card'
  - color_type: card
    entity: input_number.global_hue_secondary
    hold_action:
      action: call-service
      repeat: 50
      service: input_number.increment
      service_data:
        entity_id:
          - input_number.global_hue_secondary
    icon: 'mdi:palette'
    show_name: false
    show_state: false
    styles:
      card:
        - background-color: >
            [[[ return
            `hsl(${states["input_number.global_hue_secondary"].state}, 100%,
            50%)` ]]]
    type: 'custom:button-card'
  - color_type: card
    entity: input_number.global_hue_tertiary
    hold_action:
      action: call-service
      repeat: 50
      service: input_number.increment
      service_data:
        entity_id:
          - input_number.global_hue_tertiary
    icon: 'mdi:palette'
    show_name: false
    show_state: false
    styles:
      card:
        - background-color: >
            [[[ return `hsl(${states["input_number.global_hue_tertiary"].state},
            100%, 50%)` ]]]
    type: 'custom:button-card'
title: Farben
type: horizontal-stack

Das ist ein Horizontal Stack um die Buttons nebeneinander darzustellen und jeweils ein Button pro Farbe. Die relevanten Teile für jeden Button sind die Action und der Style:

hold_action:
  action: call-service
  repeat: 50
  service: input_number.increment
  service_data:
    entity_id:
      - input_number.global_hue_primary

Mit dieser Action erhöht die Karte beim Gedrückt halten den Farbton alle 50 Millisekunden um jeweils ein Grad. Das kommt mir beinahe ein bisschen langsam vor, aber lässt sich ja auch sehr einfach anpassen. Tendenziell würde ich jetzt allerdings die Schrittweite erhöhen statt die Wiederholfrequenz zu senken, da alle Automatisierungen die das benutzen ja bei jeder Wiederholung anspringen.

styles:
  card:
    - background-color: >
      [[[ 
      return `hsl(${states["input_number.global_hue_primary"].state},
      100%, 50%)`
      ]]]

Mit dem Style lege ich das CSS-Attribut background-color für die Karte fest. Mit der CSS-Funktion hsl() kann ich das im HSL-Farbraum tun. Der zweite und dritte Wert sind immer fix 100% (Sättigung) und 50% (Helligkeit). Dynamisch ist nur der erste Wert, der Farbton, den ich mir aus dem Zustand des oben definierten Input Number hole.

Es bleibt nur noch ein kleines Problem: Beim Erreichen von 360° bleiben die Farben einfach stehen, weil der Maximalwert erreicht ist und ich nur den Service input_number.increment benutze. Zum Glück gibt es ein cooles System, um basierend auf dem Zustand irgendwelcher Sensoren ein Ereignis auszulösen. Home Assistant. Die Automatisierung ist sogar sehr einfach.

- alias: Clamp Global Hue Primary
  trigger:
    - platform: numeric_state
      entity_id: input_number.global_hue_primary
      above: 359
  action:
    - service: input_number.set_value
      data:
        entity_id: input_number.global_hue_primary
        value: 0
        
- alias: Clamp Global Hue Secondary
  trigger:
    - platform: numeric_state
      entity_id: input_number.global_hue_secondary
      above: 359
  action:
    - service: input_number.set_value
      data:
        entity_id: input_number.global_hue_secondary
        value: 0
        
- alias: Clamp Global Hue Tertiary
  trigger:
    - platform: numeric_state
      entity_id: input_number.global_hue_tertiary
      above: 359
  action:
    - service: input_number.set_value
      data:
        entity_id: input_number.global_hue_tertiary
        value: 0

Und voila: Mein Farbwechsler ist fertig!

Fehlen nur noch Automatisierungen, die das auch wirklich benutzen. Aber die sind ja schon in Arbeit. Oh, und noch ein wichtiger Bonustipp zum Schluss:

logbook:
  exclude:
    entities:
      - input_number.global_hue_primary
      - input_number.global_hue_secondary
      - input_number.global_hue_tertiary

1 Antwort zu “Globale Farben in Home Assistant”

Kommentare sind geschlossen.