Picture Elements 카드


Picture elements 카드는 가장 다양한 유형의 카드 중 하나입니다.

좌표를 기준으로 한 이미지 위에 이 카드를 사용하면 아이콘이나 텍스트, 심지어 서비스까지 배치할 수 있습니다! 평면도(floorplan)를 그려보세요! picture-glance로 어떤 제한도 없이 그려보세요 !

A functional floorplan powered by picture elements Picture Elements로 구현된 기능적인 평면도(floorplan)

Configuration Variables

type

(string)(Required)

picture-elements

image

(string)(Required)

이미지의 URL.

elements

(list)(Required)

요소 목록

title

(string)(Optional)

카드 제목

state_filter

(map)(Optional)

상태기반 CSS filters

theme

(string)(Optional)

내 테마로 설정 themes.yaml

요소들 (Elements)

상태 뱃지 (State Badge)

Configuration Variables

type

(string)(Required)

state-badge

entity

(string)(Required)

엔터티 ID

style

(map)(Required)

CSS를 사용하여 요소를 배치하고 스타일을 지정.

Default value:

position: absolute, transform: translate(-50%, -50%)

title

(string)(Optional)

상태 뱃지 툴팁(tooltip). 숨기려면 null로 설정

tap_action

(map)(Optional)

탭할시 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

toggle

navigation_path

(string)(Optional)

actionnavigate로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io)

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

hold_action

(map)(Optional)

길게 누를때 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

actionnavigate로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io)

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

double_tap_action

(map)(Optional)

터블탭 누를때 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

actionnavigate로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io)

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

엔티티 상태를 나타내는 아이콘

Configuration Variables

type

(string)(Required)

state-icon

entity

(string)(Required)

사용할 엔티티 ID.

icon

(string)(Optional)

아이콘을 덮어씁니다.

title

(string)(Optional)

아이콘 툴팁(tooltip). 숨기려면 null로 설정.

tap_action

(map)(Optional)

탭할 때 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

actionnavigate로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

hold_action

(map)(Optional)

길게 누를 때 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

actionnavigate로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io)

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

double_tap_action

(map)(Optional)

더블탭 할때 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

actionnavigate로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io)

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

style

(string)(Required)

CSS를 사용하여 요소를 배치하고 스타일을 지정

Default value:

position: absolute, transform: translate(-50%, -50%)

상태 텍스트가 있는 라벨 (Label with state text)

Configuration Variables

type

(string)(Required)

state-label

entity

(string)(Required)

엔터티 ID

prefix

(string)(Optional)

엔터티 상태 이전의 텍스트.

suffix

(string)(Optional)

엔터티 상태 이후의 텍스트.

title

(string)(Optional)

라벨 tooltip. 숨기려면 null로 설정.

tap_action

(map)(Optional)

탭할 때 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

actionnavigate로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

hold_action

(map)(Optional)

길게 누를 때 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

actionnavigate 로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io)

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

double_tap_action

(map)(Optional)

더블탭 할때 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

actionnavigate로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io)

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

style

(string)(Required)

CSS를 사용하여 요소를 배치하고 스타일을 지정

Default value:

position: absolute, transform: translate(-50%, -50%)

서비스 콜 버튼 (Service Call Button)

Configuration Variables

type

(string)(Required)

service-button

title

(string)(Required)

버튼 라벨

service

(string)(Required)

light.turn_on

service_data

(map)(Optional)

사용할 서비스 데이터.

style

(string)(Required)

CSS를 사용하여 요소를 배치하고 스타일을 지정.

Default value:

position: absolute, transform: translate(-50%, -50%)

아이콘 요소

Configuration Variables

type

(string)(Required)

icon

icon

(string)(Required)

보여줄 아이콘 (예: mdi:home)

title

(string)(Optional)

아이콘 툴팁(tooltip). 숨기려면 null로 설정.

entity

(string)(Optional)

추가 정보/토글에 사용할 엔티티

tap_action

(map)(Optional)

탭할 때 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

actionnavigate로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

hold_action

(map)(Optional)

길게 누를 때 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

actionnavigate로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io)

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

double_tap_action

(map)(Optional)

더블탭 할때 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

actionnavigate로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io)

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

style

(string)(Required)

CSS를 사용하여 요소를 배치하고 스타일을 지정

Default value:

position: absolute, transform: translate(-50%, -50%)

이미지 요소

Configuration Variables

type

(string)(Required)

image

entity

(string)(Optional)

state_image과 state_filter에 사용할 엔티티이며 액션의 대상이기도 함

title

(string)(Optional)

이미지 tooltip. 숨기려면 null로 설정.

tap_action

(map)(Optional)

탭할 때 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

actionnavigate로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

hold_action

(map)(Optional)

길게 누를 때 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

actionnavigate로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io)

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

double_tap_action

(map)(Optional)

더블탭 할때 액션

action

(string)(Required)

액션 수행 (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

actionnavigate로 정의된 경우 탐색할 경로 (예: /lovelace/0/)

Default value:

none

url_path

(string)(Optional)

actionurl로 정의된 경우 (예: https://www.home-assistant.io)

Default value:

none

service

(string)(Optional)

actioncall-service로 정의된 경우 호출할 서비스 (예: media_player.media_play_pause)

Default value:

none

service_data

(string)(Optional)

actioncall-service로 정의된 경우 포함할 서비스 데이터 (예: entity_id: media_player.bedroom)

Default value:

none

confirmation

(boolean | map)(Optional)

작업을 컨펌하는 확인 대화 상자를 표시. 아래 confirmation 개체 참조

Default value:

false

image

(string)(Optional)

표시할 이미지.

camera_image

(string)(Optional)

카메라 엔티티.

camera_view

(string)(Optional)

stream이 활성화된 경우 “live”는 라이브 뷰를 표시합니다.

Default value:

auto

state_image

(map)(Optional)

State-based images

filter

(string)(Optional)

Default CSS filter

state_filter

(map)(Optional)

State-based CSS filters

aspect_ratio

(string)(Optional)

높이 너비 비율.

Default value:

50%

style

(string)(Required)

CSS를 사용하여 요소를 배치하고 스타일을 지정.

Default value:

position: absolute, transform: translate(-50%, -50%)

조건부 요소 (Conditional Element)

조건부(conditional) 카드와 마찬가지로 이 요소를 사용하면 엔터티 상태를 기반으로 하위 요소를 표시할 수 있습니다.

Configuration Variables

type

(string)(Required)

conditional

conditions

(list)(Required)

엔터티 ID 및 일치하는 상태 목록.

entity

(string)(Required)

HA 엔티티 ID.

state

(string)(Optional)

엔티티 상태는 이 값과 같습니다.*

state_not

(string)(Optional)

엔티티 상태는 이 값과 다릅니다.*

elements

(list)(Required)

조건이 충족될 때 표시할 모든 유형의 하나 이상의 요소입니다. 예는 아래를 참조하십시오.

확인 옵션 (Options For Confirmation)

boolean 대신 객체로 확인을 정의하면 더 많은 사용자 정의와 설정을 추가할 수 있습니다.:

Configuration Variables

text

(string)(Optional)

확인 대화 상자에 표시할 텍스트.

exemptions

(list)(Optional)

exemption 리스트 개체. 아래 참조

면제 옵션 (Options For Exemptions)

Configuration Variables

user

(string)(Required)

보기 탭을 볼 수 있는 사용자 ID.

커스텀 요소 (Custom Elements)

Configuration Variables

type

(string)(Required)

카드 이름 custom: 접두어 (예: custom:my-custom-card)

style

(string)(Required)

CSS를 사용하여 요소를 배치하고 스타일을 지정.

Default value:

position: absolute, transform: translate(-50%, -50%)

사용자 정의 요소를 만들고 참조하는 프로세스는 사용자 정의 카드와 동일합니다. 보다 자세한 정보를 위해 developer docs on creating custom cards를 참조하십시오.

스타일 객체 사용법

CSS를 사용하여 요소 배치와 스타일 지정. 더 많은/다른 키도 가능합니다.

style:
  # Positioning of the element
  left: 50%
  top: 50%
  # Overwrite color for icons
  "--paper-item-icon-color": pink

state_image 사용법

엔티티의 상태에 따라 표시할 다른 이미지를 지정.

state_image:
  "on": /local/living_room_on.jpg
  "off": /local/living_room_off.jpg

state_filter 사용법

다른 CSS 필터 지정

state_filter:
  "on": brightness(110%) saturate(1.2)
  "off": brightness(50%) hue-rotate(45deg)

클릭 앤 홀드를 사용하는 방법 (How to use click-and-hold)

hold_action 옵션이 지정되면, 엔티티를 클릭하여 0.5 초 이상 유지하면 해당 액션이 수행됩니다.

tap_action:
  action: toggle
hold_action:
  action: call-service
  service: light.turn_on
  service_data:
    entity_id: light.bed_light
    brightness_pct: 100

예시

type: picture-elements
image: /local/floorplan.png
elements:
  - type: state-icon
    tap_action:
      action: toggle
    entity: light.ceiling_lights
    style:
      top: 47%
      left: 42%
  - type: state-icon
    tap_action:
      action: toggle
    entity: light.kitchen_lights
    style:
      top: 30%
      left: 15%
  - type: state-label
    entity: sensor.outside_temperature
    style:
      top: 82%
      left: 79%
  - type: service-button
    title: Turn lights off
    style:
      top: 95%
      left: 60%
    service: homeassistant.turn_off
    service_data:
      entity_id: group.all_lights
  - type: icon
    icon: mdi:home
    tap_action:
      action: navigate
      navigation_path: /lovelace/0
    style:
      top: 10%
      left: 10%

이미지 예시

type: picture-elements
image: /local/floorplan.png
elements:
  # state_image & state_filter - toggle on click
  - type: image
    entity: light.living_room
    tap_action:
      action: toggle
    image: /local/living_room.png
    state_image:
      "off": /local/living_room_off.png
    filter: saturate(.8)
    state_filter:
      "on": brightness(120%) saturate(1.2)
      style:
        top: 25%
        left: 75%
        width: 15%
  # Camera, red border, rounded-rectangle - show more-info on click
  - type: image
    entity: camera.driveway_camera
    camera_image: camera.driveway_camera
    style:
      top: 5%
      left: 10%
      width: 10%
      border: 2px solid red
      border-radius: 10%
  # Single image, state_filter - call-service on click
  - type: image
    entity: media_player.living_room
    tap_action:
      action: call-service
      service: media_player.media_play_pause
      service_data:
        entity_id: media_player.living_room
    image: /local/television.jpg
    filter: brightness(5%)
    state_filter:
      playing: brightness(100%)
    style:
      top: 40%
      left: 75%
      width: 5%

조건부 예시

type: picture-elements
image: /local/House.png
elements:
  # conditionally show TV off button shortcut when dad's away and daughter is home
  - type: conditional
    conditions:
      - entity: sensor.presence_daughter
        state: 'home'
      - entity: sensor.presence_dad
        state: 'not_home'
    elements:
      - type: state-icon
        entity: switch.tv
        tap_action:
          action: toggle
        style:
          top: 47%
          left: 42%