Ogólne: Własne ikony

Przedstawiony sposób tworzy nową encje typu Switch do której można zastosować własne ikony które będą zmieniały się wraz ze jej stanem.
Dla mnie nie jest to optymalne rozwiązanie, wolałbym zmienić ikonę (oczywiście wraz z jej stanem) dla istniejącej już encji.
Materiał źródłowy:


dzięki @ mariusz_70 :wink:

Tak jak wspomniałem na podstawie istniejącej encji tworzymy nową, efekt jest jak niżej.
Ta u góry (Łazienka) to bazowa encja, na podstawie której tworzymy wirtualną encje z podmienioną ikonką (ta na dole Light)
1
i tak samo dla wyłaczonego światła.
image
W tym przykładzie użyłem ikonek do darmowego pobrania z:


ich format to plik .png o wymiarach 512x512 @32bit/121dpi

Opis:

Na bramce, w folderze AIS:

  • w pliku configuration.yaml robimy wpis:
    switch: !include switch.yaml

  • tworzymy plik switch.yaml i dodajemy do niego następując wpis

    - platform: template
      switches:
        light:
          value_template: "{{ is_state('light.incan_lazienka', 'on') }}"
          turn_on:
            service: light.turn_on
            data:
              entity_id: light.incan_lazienka
          turn_off:
            service: light.turn_off
            data:
              entity_id: light.incan_lazienka
          entity_picture_template: >-
            {% if is_state('light.incan_lazienka', 'off') %}
              /local/img/big-light.png
            {% else %}
              /local/img/light-bulb.png
            {% endif %}
    

następnie w kodzie podmieniamy:
light.incan_lazienka = nasz encja bazowa, na podstawie której tworzymy wirtualną encje, jak widać występuje 4 razy, więc podmieniamy wszędzie
/local/img/big-light.png - adres naszej ikony OFF z galerii na bramce AIS
/local/img/light-bulb.png - adres naszej ikony ON z galerii na bramce AIS

O galerii więcej informacji tutaj:


Zapisujemy, sprawdzamy konfiguracje i uruchamiamy bramkę ponownie.

Przykład z inną ikonką na filmie poniżej:

2lajki

@Tomasz bardzo fajne :slight_smile: możemy wrzucić Twoje video na FB? :slight_smile:

1lajk

@Celina oczywiście, że tak

2lajki

Uzupełnienie tematu - ikony dla bram.
Opisze dwa sposoby:
1 - z wykorzystaniem dedykowanych ikon do HA
2 - własne ikony.

Tworzymy w pliku cover.yaml dodatkowy wirtualny kanał do sterowania naszą bramą:

- platform: template
  covers:
    door1:
      friendly_name: 'BRAMA 1'
      device_class: door
      open_cover:
        service: cover.open_cover
        entity_id: cover.brama_wjazd
      close_cover:
        service: cover.close_cover
        entity_id: cover.brama_wjazd
      stop_cover:
        service: cover.stop_cover
        entity_id: cover.brama_wjazd
      value_template: "{{is_state('cover.brama_wjazd', 'open')}}"
      icon_template: >-
        {% if is_state('cover.brama_wjazd', 'open') %}
          mdi:gate-arrow-right
        {% else %}
          mdi:gate
        {% endif %}

“icon_template:” to parametr w którym definiujemy jakie ikony będą wyświetlane w interfejsie naszej bramki, a dokładnie wskazujemy to w lini “mdi:”.
Przechodzimy do strony https://materialdesignicons.com/tag/home-automation gdzie wyszukujemy interesującą nas ikonę, po kliknięciu w wybraną przez nas ikonę pojawi się nowe okno z którego kopiujemy nazwę danej ikony.

skopiowaną nazwe ikony wklejamy do lini “mdi:” - mdi:gate-arrow-right

Brama zamknięta:

brama_zam

Brama otwarta:

brama_otw

Przy tworzeniu encji z własnymi ikonami musimy zmienić parametr “icon_template:” na “entity_picture_template:”.

- platform: template
  covers:
    door2:
      friendly_name: 'BRAMA 2'
      device_class: door
      open_cover:
        service: cover.open_cover
        entity_id: cover.brama_wjazd
      close_cover:
        service: cover.close_cover
        entity_id: cover.brama_wjazd
      stop_cover:
        service: cover.stop_cover
        entity_id: cover.brama_wjazd
      value_template: "{{is_state('cover.brama_wjazd', 'open')}}"
      entity_picture_template: >-
        {% if is_state('cover.brama_wjazd', 'open') %}
          /local/icon/gate-open.png
        {% else %}
          /local/icon/gate-close.png
        {% endif %}

W “entity_picture_template:” definiujemy ścieżkę do naszych ikon.
Umieszczając ikony w galerii ścieżka do naszych ikon to: /local/img/nazwa_ikony.png
w/w przykładzie jest inna: /local/icon/nazwa_ikony.png
Dlaczego taka różnica, ponieważ swoje ikony umieściłem w nowo utworzonym katalogu o nazwie “icon”.
Uważam że w galerii powinny być umieszczone fotki które “cieszą oko” a ikony do nich nie należą.
Procedura:
Na komputerze z windowsem tworzymy folder o nazwie “icon” w którym umieszczamy nasze ikony.
Łączymy się z bramką za pomocą programu np: WinSCP i otwieramy katalog “www” do którego kopiujemy wcześniej utworzony na komputerze folder “icon”.

Brama zamknięta:

brama_zam_kolor

Brama otwarta:

brama_otw_kolor

4lajki

Na oficjalnej stronie z ikonami do HA jest zakładka “Advancer Export”, dzięki której możemy dostosować kolorystyczne ikony do naszych potrzeb, pobrać je i umieścić na naszej bramce.



A to efekt końcowy:
brama-otw

brama-zamk

2lajki