Plan domu jak to zrobić

W tym temacie nie podpowiem nie próbowałem.

font-size: xxpx

  - type: state-badge
    entity: sensor.xxxx
    style:
        color: '#808080'
        top: 50%
        left: 50%
        transform: 'translate(-50%, -50%) scale(0.5, 0.5)'
        font-size: 27px
1 Like

No tak u mnie wyglada to ta

Światło zgaszone

Światło zapalone są cienie i rozbłyski więc moja ikona zabierze więcej miejsca nić tylko mały kawałek.
Więc tą fotkę zapalenie chciałem potraktować jako ikonę a nie jako aktywne pole w które klikając wywołuje się zapalenie światła
Zapalać światło chciałem ogarnąć umieszczonym na planie dodatkowym przyciskiem (ikoną) odpowiadającą danej lampce.

Ok dałem sobie radę :slight_smile: po prostu top_action i hold_action załatwiły sprawę. Teraz to rozświetlenie działa jak tapeta a nie button

type: picture-elements
image: /local/plan_domu/szeroka.png
elements:
  - type: image
    entity: light.listwa_komputer
    tap_action:
      action: none
    hold_action:
      action: none
    state_image:
      'on': /local/plan_domu/komputermiki_on.png
      'off': /local/plan_domu/transparent.png
    style:
      top: 50%
      left: 50%
      width: 100%
      padding: 18px
  - type: image
    entity: light.swiatlo_kuchnia_3
    tap_action:
      action: none
    hold_action:
      action: none
    state_image:
      'on': /local/plan_domu/kuchnia_on.png
      'off': /local/plan_domu/transparent.png
    style:
      top: 50%
      left: 50%
      width: 100%
      padding: 18px
  - type: state-icon
    entity: light.swiatlo_kuchnia_3
    tap_ation:
      action: togle
    source: icon
    style:
      top: 30%
      left: 76%
      '--mdc-icon-size': 30px
      '--paper-tape= icon-color': white
  - type: state-icon
    entity: light.listwa_komputer
    tap_ation:
      action: togle
    source: icon
    style:
      top: 13%
      left: 20%
      '--mdc-icon-size': 30px
      '--paper-tape= icon-color': white

1 Like

Też się zawziąłem za ten plan, posiedziałem dzisiaj ze 2h i udało mi się wyrzeźbić to:

W planach tak jak kolega wyżej zrobił - dynamiczne oświetlenie, dołożenie kilku ikon sterujących klimatyzacją, radiem i oświetleniem.

1 Like

Możesz

  1. Dostosować płożenie w przestrzeni (state-label,image…) za pomocą - “transform:”
      left: 37%
      font-size: 18px
      transform: rotate(-63deg) rotateX(-1deg) skewX(-23deg)
  1. Zastosować animacje (gif)
    state_image:
      'on': /local/kłodka-otwarta.png
      'off': /local/zielona-kłodka.gif 

Np.
zielona-kłudka

  1. Jak dawno temu encji zmieniła status (30s,17m,2h)
  - type: custom:last-changed-element
    entity: binary_sensor.xxxxxxx
    style:
      left: 64%
      top: 47%

Hej
Jak napisać kod pod ikonę (na planie domu - screen post wyżej) która będzie włączała/wyłączała konkretną akcję związaną z media_player? np pod radio internetowe (z załącznika)?

To jest w karcie “Encje” ?
/
Ten temat dotyczy picture-elements, floorplan
Po prostu dopisuj następne encje, skrypty

type: entities
entities:
  - entity: input_select.radio_station
###################################################
  - entity: media_player.living_room
    name: Salon
  - entity: script.xxxx
    name: xxxxx
    icon: mdi:speaker-wireless
###################################################
show_header_toggle: null
title: Radio i Muzyka

/

Może na tej zasadzie:


   - type: service-button
     title: Graj 
     service: script.turn_on
     service_data:
       entity_id: script.radio_play
     style:
       top: 50%
       left: 50%
   - type: image
     entity: media_player.glosnik_kuchnia
     tap_action:
       action: call-service
       service: media_player.media_play_pause
       service_data:
         entity_id: media_player.glosnik_kuchnia
     state_image:
       'playing': /local/radio_on.png
       'idle': /local/radio_off.png
       'paused': /local/xxx.png
     style:
       top: 40%
       left: 50%
       width: 12% 

Ta karta po lewej stronie (z rozwijalnymi listami) ma taki kod:

type: entities
entities:
  - entity: input_select.radio_station
  - entity: input_select.audio_select
  - entity: input_number.volume_radio
  - action_name: PLAY
    entity: script.radio_play
  - action_name: ZATRZYMAJ
    entity: script.radio_stop
show_header_toggle: null
title: Radio i Muzyka

Zgadza się. Chciałbym na planie domu umieścić ikonę/przycisk którym włączę/wyłączę radio (bez opcji wyboru stacji) i dlatego podpytuję jaki kod umieścić pod tą ikonę aby wyzwalała akcję włączania i wyłączania radia (i miała możliwość zmiany ikony zależnie od stanu włączone/wyłączone).
EDIT: ikonę status ogarnąłem ale włączanie/wyłączanie dalej coś nie hula…:

  - type: image
    entity: media_player.glosnik_kuchnia
    tap_action:
      action_name: script.radio_play
    hold_action:
      action: script.radio_stop
    state_image:
      playing: /local/radio_on.png
      'off': /local/radio_off.png
    style:
      top: 35%
      left: 19%
      width: 3%
      padding: 18px

Witam. Wiecie co może być przyczyną, że jedno zdjęcie się uruchania planu domu a jak chce inne wstawić to się już nie uruchania. Oby dwa zdjęcia mają tą samą wielkość, format PNG i są w tym samym miejscu

Zacznij od wyczyszczenia cache przeglądarki.

ok jak wrócę do domu to to zrobię. Czy wielkość liter ma znaczenie formatu czyli
PNG to jest to samo co png?
jak klikam w zdjęcie to takie hieroglify są

Dla Linuxa ma znaczenie zasadnicze.
Linus Torvalds skrytykował systemy plików ignorujące wielkość liter │ DOU Linus Torvalds skrytykował systemy plików ignorujące wielkość liter │ DOU

o widzisz to może być to przyczyną jak później to pozmieniam i zobaczę czy coś się zmieni

Wystarczy. że w odniesieniu/odwołaniu do pliku będą dokładnie takie litery jakie ma w nazwie.
czyli dobre.PNG

PS to nie hieroglify tylko (mniej więcej) faktyczna zawartość tego pliku, którą otwierasz edytorem tekstowym…
Mniej-więcej, bo w edytorze tekstowym zwykle nie da się wyświetlić realnej zawartości pliku binarnego (poza wyjątkami gdy dany format mapuje wszystkie znaki na znaki drukowalne, ale chyba to nie jest taki przypadek).

ok to zdjęcie poszło jak zmieniłem na png ale z kolejnym mam problem zdjęcie jest w tym samym folderze ale się nie otwiera na planie


zdjęcie rg działa ale no już nie

Wklej tu cały swój kod.
ścieżka powinna wyglądać local/images/floorplan/no.png nie wpisujemy www

Wyczyścić cache przeglądarki (F5 lub Ctrl+F5),
Sprawdzić, czy przeglądarka widzi obraz. ( podmień adres HA)
http://192.168.68.141:8123/local/images/floorplan/no.png

type: picture-elements
elements:
  - type: image
    action: none
    entity: sun.sun
    state_image:
      above_horizon: local/www/images/floorplan/rg.png
      below_horizon: local/www/images/floorplan/6.png
    style:
      height: 200%
      left: 50%
      width: 100%
  - type: image
    entity: switch.sonoff_1000b51d08
    name: niebieski
    style:
      top: 53%
      left: 50%
      width: 100%
      mix-blend-mode: lighten
    state_image:
      "on": local/www/images/floorplan/nie.png
      "off": local/www/images/floorplan/6.png
  - type: image
    entity: switch.sonoff_1000b60086
    name: kib
    style:
      top: 50%
      left: 50%
      width: 100%
      mix-blend-mode: lighten
    state_image:
      "on": local/www/images/floorplan/kib2.png
      "off": local/www/images/floorplan/6.png
  - type: image
    entity: switch.sonoff_1000b70df2
    mane: mamy
    style:
      top: 53%
      left: 50%
      width: 100%
      mix-blend-mode: lighten
    state_image:
      "on": local/www/images/floorplan/m12.png
      "off": local/www/images/floorplan/6.png
  - type: state-icon
    size: 50%
    icon: mdi:lightbulb
    name: niebieski
    style:
      left: 29%
      top: 45%
    tap_action:
      action: toggle
    entity: switch.sonoff_100215243f
  - type: state-icon
    size: 50%
    icon: mdi:lightbulb
    name: kibel
    style:
      left: 27%
      top: 56%
    tap_action:
      action: toggle
    entity: switch.sonoff_1000b60086
  - type: state-icon
    size: 50%
    icon: mdi:ceiling-light
    name: mamy
    style:
      left: 35%
      top: 77%
    tap_action:
      action: toggle
    entity: switch.sonoff_1000b70df2
  - type: state-icon
    size: 50%
    icon: mdi:lightbulb
    name: Dzwi
    style:
      left: 50%
      top: 80%
    tap_action:
      action: toggle
    entity: binary_sensor.0x00124b00246c9565_contact
image: local/www/images/floorplan/6.png

w przeglądarce uruchamia mi się to zdjęcie jeśli chodzi o ścieżkę to nie ma folderu image w głownym katalogu tylko jest w folderze www

Literówka

  - type: image
    entity: switch.sonoff_1000b70df2
    mane: mamy

Powinno być

name: mamy

/
Brakuje top

    style:
      height: 200%
      left: 50%
      width: 100%
1 Like

Tak wygląda struktura katalogów o których mówisz

/config/www/images/
A tak podajemy ścieżkę dostępu /config/images/ nie piszemy www w ścieżce dostępu.

quote=“andrzej04, post:41, topic:277”]
eśli chodzi o ścieżkę to nie ma folderu image w
[/quote]

Może nie masz ale tak pokazujesz na zrzucie ekranu.