Ogólne: Własne ikony (AI-Speaker - Home Assistant)

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:

3 polubienia

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

1 polubienie

@Celina oczywiście, że tak

2 polubienia

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

4 polubienia

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

4 polubienia
  • 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 %}
    witam stworzyłem plik cover wkleiłem ten kod do niego i nadal mam stare ikonki pomoże ktoś? Może ten kod ma być wklejony do config.yaml

Czy to normalne, że nie mogę zmienić ikony midi?
Czy należy coś zmienić ręcznie w konfiguracji bramki aby zmieniały się ikony dedykowane?
Na przykład dopisać adres strony Material Design Icons - Icon Library - Pictogrammers w pliku customize.yaml?
Czy po podaniu nazwy ikony np midi:fan muszę zrestartować serwer?

obraz

Dodaję na pasku widoku midi:fan ale bez rezultatu.

Źle wpisujesz, powinno być

mdi:fan

1 polubienie

Dzięki Tomasz. Jednak zmęczenie :sleeping: materiału o tej porze w piątek nie sprzyja modernizacji HA, zwłaszcza jak się równolegle robi inne rzeczy. Na przykład przy stawianiu Win bez sterowników.

1 polubienie

Ta strona juz chyba nie działa

Więc polecam tą stronę Material Design Icons • Iconify gdyż po prostu wystarczy skopiować fragment który jest w cudzysłowie zaczynający sie od “mdi…” I od razu wkleić do ha

1 polubienie

Czyżby wyłączyli stronę ?

Bo mam błąd: DNS_PROBE_FINISHED_NXDOMAIN

Poczekać aż ponownie zacznie działać.

Bardzo proszę o podpowiedź gdzie mam błąd. Otóż mam w pliku switch.yaml wpisy, za pomocą których steruję bramą wjazdową i garażową. Chciałem pozmieniać ikony na swoje i w pliku covers.yaml dodałem odpowiednie wpisy.
Efekt jest taki, że widzę swoje ikony jednak sterowanie nie działa. Poniżej wpisy w pliku switch.yaml oraz cover.yaml

Switch.yaml

cover.yaml

Gdzie popełniłem błąd?

W cover próbujesz sterować urządzeniem cover a domyślam się że zamiar był taki żeby sterować switchem.

No pewnie, że tak… Teraz działa. Dzięki za podpowiedź :slight_smile:

jak używać ikon google ? chodzi mi o to jaki mają skrót przed dwukropkiem bo “mdi:” nie działa

Nie kojarzę żeby ikonki google były dodane do HA.
Ikonki MDI możesz obejrzeć wszystkie tutaj:
https://pictogrammers.github.io/@mdi/font/5.3.45/

1 polubienie

Nie wiem czy w samym ha są ale jak sie wejdzie w konfigurację potem w informacje to jest o tym wzmianka na bramce

Hm… przejrzałem kilka ikon i wyglądają tak samo tutaj:

i tutaj:
https://pictogrammers.github.io/@mdi/font/5.3.45/

Jak zaczniesz szukać jak użyć ikon Google to dojdziesz np. do takiego polecenia:

npm install material-design-icons

Może spora część tak

Ale są tam też ikony których nie ma