Schlagwort: dynamische icons

Home Assistant: Dein Dashboard mit Card-Mod 3 individueller gestalten

admin

Entdecke, wie du mit Home Assistant und Card-Mod dein Smart Home Dashboard individualisierst! Dieses Tutorial führt dich durch die Anpassung deiner Oberfläche an deine Bedürfnisse, von Geräten bis hin zum Erscheinungsbild. Das Video zeigt dir Schritt für Schritt die Verwendung der HACS Erweiterung Card-Mod in Kombination mit Templates um das Beste aus deinem Setup herauszuholen.

Links: Card-Mod3 : https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins

Wie du HACS installierst wird dir in diesem Video erklärt:

YAML Code:

Farbe Namen:

type: entities
entities:
  - entity: input_boolean.schalter1
    card_mod:
      style: |
        :host {
         color: red;
        }
  - entity: input_boolean.schalter1
    card_mod:
      style: |
        :host {
         color: green;
        }
  - entity: input_boolean.schalter1
title: Farbe von Entitätsnamen

Farbe Icons:

type: entities
entities:
  - entity: input_boolean.schalter1
    card_mod:
      style: |
        :host {
         --card-mod-icon-color: red;
        }
  - entity: input_boolean.schalter1
    card_mod:
      style: |
        :host {
         --card-mod-icon-color: blue;
         color: yellow
        }
  - entity: input_boolean.schalter1
title: Icon Farbe
card_mod:
  style: |
    ha-card {
    background: gray;
    }

Farbe Hintergrund:

type: entities
entities:
  - entity: input_boolean.schalter1
  - entity: input_boolean.schalter1
  - entity: input_boolean.schalter1
title: Background Color
card_mod:
  style: |
    ha-card {
    background: orange;
    }

Farbe , Icon, Schriftfarbe nach Zustand:

type: entities
entities:
  - entity: input_boolean.schalter1
    card_mod:
      style: |
        :host {
         {% if is_state('input_boolean.schalter1', 'on') %}
          --card-mod-icon: mdi:light-switch;
          --card-mod-icon-color: red;
          {% else %}
          --card-mod-icon: mdi:garage;
          --card-mod-icon-color: green;
          {% endif %}
         
        }
  - entity: input_boolean.schalter1
    card_mod:
      style: |
        :host {
         {% if is_state('input_boolean.schalter1', 'on') %}
          --card-mod-icon: mdi:light-switch;
          --card-mod-icon-color: red;
          {% else %}
          --card-mod-icon: mdi:light-switch-off;
          --card-mod-icon-color: green;
          {% endif %}
         
        }
  - entity: input_boolean.schalter1
title: Icon, Schrift, Background

Farbe, Icon, Schriftfarbe nach numerischen Zustand:

type: entities
entities:
  - entity: input_number.number1
    card_mod:
      style: |
        :host {  {% if states('input_number.number1') | int <=50  %}
          background: green;
          --card-mod-icon: mdi:light-switch;
          --card-mod-icon-color: orange
          {% elif states('input_number.number1') | int >50 and states('input_number.number1') | int < 80   %}
          background: yellow;
          --card-mod-icon: mdi:garage-open;
          {% elif states('input_number.number1') | int >= 80  %}
          background: red;
          {% endif %}

        }

Für eine “Tile” Card müssen ein paar andere Variablen verwendet werden. An dieser Stelle herzlichen Dank an @chrannen für diese super Ergänzung 💙 

type: tile
entity: ENTITÄT
card_mod:
  style: |
    ha-card {
      {% if is_state("ENTITÄT", "on") %}
        --tile-color:crimson !important;
        --card-mod-icon: mdi:arrow-left-bold-box;
      {% else %}  
        --tile-color:darkgreen !important;
        --card-mod-icon: mdi:arrow-right-bold-box;
      {% endif %}  
    }

die wichtigsten Unterschiede sind:

– statt “:host” lautet der style “ha-card”

– hinter jede farbe muss der zusatz “!important;”

– statt “card-mod-icon-color” muss “tile-color” geschrieben werden

Zeit sparen mit Home Assistant: Kalenderereignisse für Smart-Home-Automatisierungen nutzen

admin

Optimiere deine täglichen Abläufe, indem du Kalenderereignisse als Trigger für Automatisierungen in Home Assistant einsetzt. Verpasse nie wieder wichtige Termine – sei es ein Meeting oder ein Geburtstag. Dein Smart Home passt sich intelligent an deine Pläne an, sei es mit gedimmten Lichtern für ein Abendessen oder aktivierter Heizung bei deiner Rückkehr von der Arbeit. Entdecke eine neue Dimension des Wohnkomforts und spare Zeit mit Home Assistant.

Beispielautomatisierung aus Video:

alias: Kalender_Video
description: ""
trigger:
  - platform: calendar
    event: start
    offset: "0:0:0"
    entity_id: calendar.smarthomeandmore
    id: StartEvent
  - platform: calendar
    event: end
    offset: "0:0:0"
    entity_id: calendar.smarthomeandmore
    id: StopEvent
condition:
  - condition: trigger
    id:
      - StartEvent
action:
  - choose:
      - conditions:
          - condition: and
            conditions:
              - condition: template
                value_template: "{{ '@Licht' in trigger.calendar_event.summary }}"
        sequence:
          - service: light.turn_on
            metadata: {}
            data: {}
            target:
              device_id: fbb93a7f058686a3b2f0591978fb3497
      - conditions:
          - condition: and
            conditions:
              - condition: template
                value_template: "{{ '@Licht' in trigger.calendar_event.summary }}"
              - condition: trigger
                id:
                  - StopEvent
        sequence:
          - service: light.turn_off
            target:
              device_id:
                - fbb93a7f058686a3b2f0591978fb3497
            data: {}
mode: single

Mit Home Assistant Icons nach Zustand dynamisch ändern

admin

Entdecken Sie die Vielfalt von Home Assistant in der Gestaltung dynamischer Icons basierend auf Zuständen. Erleben Sie die Vielseitigkeit mit zwei Beispielen: einem binären Templatesensor für eine variable Icon-Anzeige und einem Sensor, der den Zustand eines Garagentors mit integrierter Dienstausführungsfunktion enthält.

Links aus dem Video:

Pictogrammers Website mit Icons: https://pictogrammers.com/library/mdi/

Home Assistant Template Integration: https://www.home-assistant.io/integrations/template/

Home Assistant Template Cover : https://www.home-assistant.io/integrations/cover.template/

Beispiel Template Sensor (binary_sensor):

binary_sensor:
  - platform: template
    sensors:
      garage:
        friendly_name: Garage
        value_template: "{{ states('binary_sensor.garagentorsensor_contact') }}"
        unique_id: garage_id
        icon_template: >
          {% if is_state('binary_sensor.garagentorsensor_contact', 'on') %} mdi:garage-open
          {% else %} mdi:garage
          {% endif %}

Beispiel Template Sensor (cover):

cover:
- platform: template
  covers:
    garagen_tor:
      friendly_name: Garagentor
      unique_id: garagentor_id
      value_template: "{{is_state('binary_sensor.garagentorsensor_contact', 'on' )}}"
      open_cover:
        service: input_boolean.toggle
        data:
          entity_id: input_boolean.garage_test
      close_cover:
        service: input_boolean.toggle
        data:
          entity_id: input_boolean.garage_test
      icon_template: >
          {% if is_state('binary_sensor.garagentorsensor_contact', 'on') %} mdi:garage-open
          {% else %} mdi:garage
          {% endif %}