Dashboard interaktywny 3D

próbuję stworzyć Dashboard z rysunkiem domu i na razie podstawowe funkcje są proste, ale chciałbym aby na ikonach włączników działało także podwójne kliknięcie i przytrzymanie (oświetlanie w jadali - 3 żarówki - pojedyncze zmienia staj jednej, podwójne 2 pozostałe, przytrzymanie wyłącza wszystko) i o ile z działaniem nie mam problemu i po kliknięciu raz ikona żarówki zmienia kolor oraz podmienia się obraz na rozświetlone pomieszczenie to w przypadku podwójnego już niestety nie i nie wiem jak to zmienić.

type: picture-elements
elements:
  - type: image
    entity: switch.oswietlenie_jadalnia_l1
    style:
      top: 50%
      left: 50%
      width: 100%
      mix-blend-mode: lighten
    state_image:
      'on': local/images/floorplan/dom-noc-jadalnia.png
      'off': local/images/floorplan/transparent.png
  - type: state-icon
    entity: switch.oswietlenie_jadalnia_l1
    icon: mdi:lightbulb
    tap_action:
      action: toggle
    double_tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: 
        - switch.oswietlenie_jadalnia_l2
    hold_action:
      action: call-service
      service: switch.turn_off
      service_data:
        entity_id:
          - switch.oswietlenie_jadalnia_l1
          - switch.oswietlenie_jadalnia_l2
    style:
      left: 75%
      top: 48%    
image: local/images/floorplan/dom-noc.png

Macie jakiś pomysł?

:thinking: Dodatkowy sensor template , 4 zmienne

...
swiatlo_jadalnia:>
  {% if is_state('switch.oswietlenie_jadalnia_l1', 'on') and is_state('switch.oswietlenie_jadalnia_l2', 'on') %}
    2_on       # 2 są włączone
  {% elif is_state('switch.oswietlenie_jadalnia_l1', 'on') %}
    l1_on    # tylko l1 włączone 
  {% elif is_state('switch.oswietlenie_jadalnia_l2', 'on') %}
    l2_on   # tylko l2 włączone 
  {% else %}
    all_off # wszystkie wyłączone
  {% endif %}

A w karcie:
4 obrazy (rozświetlania) na podstawie stanu “nowego” sensora

type: picture-elements
elements:
  - type: image
    entity: sensor.swiatlo_jadalnia # nazwa nowego sensora
    style:
      top: 50%
      left: 50%
      width: 100%
      mix-blend-mode: lighten
    state_image:
      'l1_on': local/images/floorplan/jadalnia-l1.png # dostosować
      'l2_on': local/images/floorplan/jadalnia-l2.png # dostosować
      '2_on': local/images/floorplan/jadalnia-L1+L2.png # dostosować
      'all_off': local/images/floorplan/jadalnia_off.png # dostosować
      ...

Dzięki, troszkę mi zajęło bo wpierw na urlopie walczyłem i próbowałem ogarnąć to z telefonu, ale nie szło, teraz z kompa i też coś nie tak.

dodałem sensor w confirguration.yaml i zrestartowałem ha.

  sensor:
  - platform: template
    sensors:
      swiatlo_jadalnia:
        friendly_name: "Swiatlo Jadalnia"
        value_template: >
          {% if is_state('switch.oswietlenie_jadalnia_l1', 'on') and is_state('switch.oswietlenie_jadalnia_l2', 'on') %}
            2_on       # 2 są włączone
          {% elif is_state('switch.oswietlenie_jadalnia_l1', 'on') %}
            l1_on    # tylko l1 włączone 
          {% elif is_state('switch.oswietlenie_jadalnia_l2', 'on') %}
            l2_on   # tylko l2 włączone 
          {% else %}
            all_off # wszystkie wyłączone
          {% endif %}

potem zmodyfikowałem kod który w 3 przypadkach wskazywał ten sam obrazek a all_off na transparent. Jednakże to nie zadziałało i nadal podwójne kliknięcie nie wyświetlało obrazka.
dodałem zatem obrazków z rozszerzeniem l1, l2, l1-l2 i zmieniłem to w kodzie aby wglądał dokładnie jak zaproponowałeś:

type: picture-elements
elements:
  - type: image
    entity: sensor.swiatlo_jadalnia
    style:
      top: 50%
      left: 50%
      width: 100%
      mix-blend-mode: lighten
    state_image:
      'l1_on': local/images/floorplan/dom-noc-jadalnia-l1.png
      'l2_on': local/images/floorplan/dom-noc-jadalnia-l2.png
      '2_on': local/images/floorplan/dom-noc-jadalnia-l1-l2.png
      'all_off': local/images/floorplan/transparent.png
  - type: state-icon
    entity: switch.oswietlenie_jadalnia_l1
    icon: mdi:lightbulb
    tap_action:
      action: toggle
    double_tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id:
          - switch.oswietlenie_jadalnia_l2
    hold_action:
      action: call-service
      service: switch.turn_off
      service_data:
        entity_id:
          - switch.oswietlenie_jadalnia_l1
          - switch.oswietlenie_jadalnia_l2
    style:
      left: 75%
      top: 48%
image: local/images/floorplan/dom-noc.png

Jednakże nadal coś jest nie tak, na podglądzie kręci się kółko że coś z kodem nie tak i nie pomienia obrazka przy podwójnym kliknięciu. Same kliknięcia działają i włączają oświetlenie zgodnie z założeniem. W logach nic się nie pokazuje po wykonaniu włączenia i wyłączenia.

Jak kręci kółko, to znaczy że masz źle zdefiniowaną którąś ścieżkę do obrazu lub encję.

dzięki, chyba problem jest tu:


bo zmiana entity: sensor.swiatlo_jadalnia
od razu powoduje kręcenie się kółeczka.
ale szczerze to nie wiem co tam jest nie tak.

W historii HA sprawdź czy zmienia się stan sensora sensor.swiatlo_jadalnia pomiędzy l1_on,l2_on, 2_on, all_off ( po przełączeniu switch.oswietlenie_jadalnia_l1 itp.) jeśli się zmienia sensor działa poprawnie.

dzięki za podpowiedź, przełącznik działa


zaczynam kombinować z odnośnikami do obrazów, jeszcze nie jestem pewny apostrofów bo mi znikają w HA:
image
choć jak kopiuję to one są.

Jest źle, sensor nie przyjmuje zakładanych stanów przez komentarze, które wchodzą w string (nie chcę się mądrzyć, bo nie jestem specjalistą, ale w jinja2 nie można komentować wewnątrz wielolinijkowego kodu tak samo jak w YAMLu)

usuwam komentarze
wydaje mi się że jest ok.
jak nacisnę raz to l1_on tylko włączona linia 1
jak nacisnę 2 razy dodatkowo to są 2 włączone więc już sam nie wiem o co chodzi…

wywal komentarze z kodu
albo poszukaj jaką figurę trzeba zrobić w jinja by wstawić komentarz (# - płotek nie wystarcza!)

Jakbyś wstawiał kod jak Bóg przykazał, a nie screenshoty to bym przekleił.
https://forum.arturhome.pl/t/jak-prawidlowo-zamieszczac-yaml-inny-kod-lub-logi-w-postach-na-forum/11455

w każdym razie zamiast stanu 2on masz stan 2on i tu jakieś śmieci

jeśli chcesz komentować wewnątrz bloku jinja
{# jakiś komentarz #}

Po wywaleniu komentarzy zaczęło działać, dzięki bardzo za pomoc.
teraz jeszcze muszę zmusić ikonę aby zmieniała kolor przy podwójnym kliknięciu tak jak przy pojedynczym

Sensor:
Ilość zapalonych świateł w danym pomieszczeniu

sensors:
      kuchnia_lights_on:
        friendly_name: "Kuchnia Lights On"
        value_template: >
       
          {% set lights = [
          states.light.tx_ultimate_tx_ultimate_l1,
          states.light.kuchnia_rgbw,
          states.light.tx_ultimate_tx_ultimate_l2,
          states.light.tx_ultimate_tx_ultimate_l3,
          states.light.okap_lights,
          states.light.test_light,
          states.light.szafki,
          states.light.pir_lights,
          ] %}
          {{ lights | selectattr('state','eq','on') | list | count }}    

Inny sensor

platform: template
sensors:
      aktywne_oswietlenie:
        value_template: >-
          {% set lights = [states.light.downlight_z_komputer, states.switch.sw_kuchnia, states.light.led_board_4_1, states.switch.gniazdko_z_korytarz_left,
          states.switch.psw2, states.light.led_board_3, states.light.kuchnia_rgbw, states.switch.psw3, states.switch.psw1, states.light.downlight_z_lazienka] %}
          {% set lights_on = lights | selectattr('state','eq','on') | list %}
          {% set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
          {% if (lights_on | length ==1)%}
          {{ lights_name }} jest włączone
          {% elif (lights_on | length >1 )%}
          {{ lights_on | length}} lights are on
          {% else %}
          Wszystko Wyłączone
          {% endif %}

Tu masz kilka przykładów jak utrzymać porządek w pliku confirguration.yaml

https://forum.arturhome.pl/t/porzadki-w-configuration-yaml/6306

Zastosowanie Packages

https://forum.arturhome.pl/t/package-w-home-assistant/707

Przykład:

######## INCLUDES ########

group: !include groups.yaml
automation: !include automations.yaml
#automation yaml: !include_dir_merge_list automations
sensor: !include_dir_merge_list sensors/
script: !include scripts.yaml
script yaml: !include_dir_merge_named scripts
input_select: !include input_select.yaml
#input_boolean: !include_dir_named input_boolean/
input_boolean: !include input_boolean.yaml
#input_number: !include_dir_named input_number/
input_number: !include input_number.yaml
scene: !include scenes.yaml
template: !include_dir_merge_list templates
shell_command: !include_dir_named shell/
#rest_command: !include rest_command.yaml
#zakres logów
system_log: !include system_log.yaml
#logbook: !include logging/logbook.yaml
logger: !include logging/logger.yaml
recorder: !include logging/recorder.yaml
mqtt: !include mqtt_include.yaml

1 polubienie

na razie większość tego co chciałem działa, jednakże nie wiem jak zrobić aby przy podwójnym kliknięciu także zmieniał się kolor ikony żarówki na żółty, działa to przy pojedynczym, ale przy podwójnym niestety nie. Ma ktoś jakiś pomysł? bo bawiłem się stylami ale to nic nie wychodzi.
zamieszczam jeszcze kod który mam na chwilę obecną:

type: picture-elements
elements:
  - type: image
    action: none
    entity: sun.sun
    state_image:
      above_horizon: local/images/floorplan/dom-dzien.png
      below_horizon: local/images/floorplan/dom-noc.png
    style:
      height: 100%
      left: 50%
      top: 50%
      width: 100%
  - type: image
    entity: sensor.swiatlo_jadalnia
    style:
      top: 50%
      left: 50%
      width: 100%
      mix-blend-mode: lighten
    state_image:
      l1_on: local/images/floorplan/dom-noc-jadalnia-l1.png
      l2_on: local/images/floorplan/dom-noc-jadalnia-l2.png
      2_on: local/images/floorplan/dom-noc-jadalnia-l1-l2.png
      all_off: local/images/floorplan/transparent.png
  - type: state-icon
    entity: switch.oswietlenie_jadalnia_l1
    icon: mdi:lightbulb
    tap_action:
      action: toggle
    double_tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id:
          - switch.oswietlenie_jadalnia_l2
    hold_action:
      action: call-service
      service: switch.turn_off
      service_data:
        entity_id:
          - switch.oswietlenie_jadalnia_l1
          - switch.oswietlenie_jadalnia_l2
    style:
      left: 75%
      top: 48%
image: local/images/floorplan/dom-noc.png

Prawdopodobnie uzyskasz to przez custom:button-card

Wtedy zamiast
- type: state-icon
Wstawiasz:

...
   - type: custom:button-card
    entity: switch.oswietlenie_jadalnia_l1
    icon: mdi:lightbulb
    tap_action:
      action: toggle
    double_tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.oswietlenie_jadalnia_l2
    hold_action:
      action: call-service
      service: switch.turn_off
      service_data:
        entity_id:
          - switch.oswietlenie_jadalnia_l1
          - switch.oswietlenie_jadalnia_l2
    styles:
      icon:
        - color: >
            [[[
              if (entity.state === 'on') return 'yellow';
              return 'grey';
            ]]]
      card:
        - left: 75%
        - top: 48%
image: local/images/floorplan/dom-noc.png

W styles: fragment kodu odpowiada za dynamiczną zmianę koloru ikony w zależności od stanu encji switch.oswietlenie_jadalnia_l1:

Nie testowałem tego ale mam nadzieje że zadziała
/
custom:button-card można pobrać przez HACS

Jeszcze też nie testowałem ale piszesz że zmieni kolor przy zmianie stanu switch.oswietlenie_jadalnia_l1
A co z switch.oswietlenie_jadalnia_l2?
Przy moich ustawieniach zmienia na l1 ale już nie na l2
A może zrobić tak że stan przełącznika nie jest zmieniany przez encje switch tylko przez sensor światła jadalnia kotlety utworzyłem. To do niego odwołują się przełączniki? Ale może źle myślę.

Może w ten sposób
Zamiast entity: switch.oswietlenie_jadalnia_l1 zmień na sensor entity: entity:switch.oswietlenie_jadalnia

    styles:
      icon:
        - color: >
            [[[
              if (entity.state === 'l1_on' || entity.state === 'l2_on' || entity.state === '2_on') return 'yellow';
              return 'grey';
            ]]]

Jeśli stan sensora to l1_on, l2_on, lub 2_on, ikona będzie żółta (yellow).
Jeśli stan sensora to all_off, ikona będzie szara (grey).

Kurczę na razie nie mam możliwości sprawdzenia tego co Ci podaję i robię to w ciemno i po omacku.
Więc jest możliwość, że poprowadzę Cię w złym kierunku.

ikona się zmieniła:
image
ale nie do końca o taka chodziło, po kliknięciu na nią nie ma reakcji, ani nie zmienia stanu ani nie zapala światła. Gdzieś jest błąd, ale nie wiem gdzie.

Kod wygląda tak:

type: picture-elements
elements:
  - type: image
    action: none
    entity: sun.sun
    state_image:
      above_horizon: local/images/floorplan/dom-dzien.png
      below_horizon: local/images/floorplan/dom-noc.png
    style:
      height: 100%
      left: 50%
      top: 50%
      width: 100%
  - type: image
    entity: sensor.swiatlo_jadalnia
    style:
      top: 50%
      left: 50%
      width: 100%
      mix-blend-mode: lighten
    state_image:
      l1_on: local/images/floorplan/dom-noc-jadalnia-l1.png
      l2_on: local/images/floorplan/dom-noc-jadalnia-l2.png
      2_on: local/images/floorplan/dom-noc-jadalnia-l1-l2.png
      all_off: local/images/floorplan/transparent.png
  - type: custom:button-card
    entity: entity:switch.oswietlenie_jadalnia
    icon: mdi:lightbulb
    tap_action:
      action: toggle
    double_tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id:
          - switch.oswietlenie_jadalnia_l2
    hold_action:
      action: call-service
      service: switch.turn_off
      service_data:
        entity_id:
          - switch.oswietlenie_jadalnia_l1
          - switch.oswietlenie_jadalnia_l2
    style:
      icon:
        - color: >
            [[[
              if (entity.state === 'l1_on' || entity.state === 'l2_on' || entity.state === '2_on') return 'yellow';
              return 'pink';
            ]]]
      left: 75%
      top: 48%
      
image: local/images/floorplan/dom-noc.png

wymyśliłem takie rozwiązanie aby nie bawić się w ikony żarówek że wystarczy kliknąć na obszar danego pomieszczenia i wtedy przełączy się przełącznik, działać działa, ale niestety kręci się kółeczko które wskazuje na barak czegoś…, ale nie wiem jak o obejść lub naprawić
mój kod poniżej:

type: picture-elements
elements:
  - type: image
    entity: sun.sun
    state_image:
      above_horizon: local/images/floorplan/dom-dzien.png
      below_horizon: local/images/floorplan/dom-noc.png
    style:
      height: 100%
      left: 50%
      top: 50%
      width: 100%
  - type: image
    entity: switch.shelly1pmmini_543204adbf34_switch_0
    style:
      top: 50%
      left: 50%
      width: 100%
      mix-blend-mode: lighten
    state_image:
      'on': local/images/floorplan/dom-noc-garage.png
      'off': local/images/floorplan/transparent.png
  - type: image
    tap_action:
      action: toggle
    entity: switch.shelly1pmmini_543204adbf34_switch_0
    icon: mdi:lightbulb
    style:
      left: 25%
      top: 40%
      width: 35%
      height: 35%
      background-color: rgba(0, 0, 0, 0.0) 
      cursor: pointer 
image: local/images/floorplan/dom-noc.png

Nie wiem, ale ja na twoim miejscu zacząłbym od sprawdzenia zgodności kodu z dokumentacją i wywalenia elementów których ona nie przewiduje (chyba, że wiesz z jakiej paki je tam umieściłeś i skąd one się faktycznie biorą - mam np. na myśli cursor: pointer)

ale też nie rozumiem taktyki, w której wyświetlasz zawsze

a następnie i tak nakrywasz go takim samym obrazkim lub innym

    state_image:
      above_horizon: local/images/floorplan/dom-dzien.png
      below_horizon: local/images/floorplan/dom-noc.png

zmiany obrazu w zależności od tego czy jest dzień czy noc, regulowane wschodem i zachodem słońca:
state_image:
above_horizon: local/images/floorplan/dom-dzien.png
below_horizon: local/images/floorplan/dom-noc.png

wyświetlam zawsze dom noc, bo to jest obraz w nocy plus nakładki jak się światło zapali w poszczegónych pomieszczeniach, w moim przypadku akurat garaż.
To czy wiem co robię…
raczej testuję i próbuję coś osiągnąć