사용자 정의 지도 구성

정렬, 크기 및 배경 이미지는 장치에 저장된 각 지도별로 독립적으로 구성할 수 있습니다.

이러한 설정은 지도 목록에서 지도를 선택하거나 YAML 구성에서 map_config 속성을 사용하여 시각적 편집기에서 구성할 수 있습니다.

지도 구성 옵션

map_config 내의 설정은 map_1, map_2 등과 같은 키를 사용하여 지도 인덱스별로 적용됩니다. 특정 지도 아래에서 다음 옵션 중 어느 것이든 정의할 수 있습니다.

경고

지도 인덱스는 생성 순서에 따라 할당되며, 가장 오래된 지도는 1번부터 시작하여 가장 낮은 인덱스를 받습니다. 그러나 복수 지도가 있고 그 구성들이 있는 장치에서 다층 지도 기능이 비활성화되면, 현재 활성화된 지도가 자동으로 인덱스 1로 재할당됩니다. 이는 이전에 다른 인덱스에서 구성된 지도가 갑자기 해당 구성으로 채택된다는 것을 의미합니다. map_1.

• rotation: 이 카드에 특정한 사용자 정의 회전으로 지도를 그리기 위해 지도 데이터에 설정된 회전을 재정의하며, 0, 90, 180, 또는 270 값을 허용합니다.
• scale: 지도 원본 크기와 카드 크기 사이의 차이를 기반으로 한 자동 축척 계산을 재정의하며, 0.1과 20 사이의 값을 허용합니다.
• object_scale: 방과 장애물 아이콘과 같은 지도 객체의 자동 계산 크기를 재정의하여 더 크게 또는 작게 표시할 수 있습니다.
• opacity: 그려진 지도의 전체 투명도입니다. 초기 값은 1이며, 0까지의 값을 허용합니다.
• object_opacity: 방이나 장애물 아이콘과 같은 지도에 그려진 객체의 투명도입니다. 초기 값은 1이며, 0까지의 값을 허용합니다.
• font_size: 활성화된 객체 위에 표시되는 텍스트 말풍선의 글꼴 크기입니다. 0와 12 사이의 값을 허용합니다.
• hidden_objects: 특정 지도에 대해 전역 고급 구성에서 정의된 숨겨진 지도 객체를 재정의합니다.

중앙 배치 및 축척

아래 매개변수는 카드가 지도를 그리기 위해 자동으로 계산하는 크기와 중심 좌표를 재정의하는 데 사용됩니다.

경고

이러한 매개변수에 제공된 값은 화면의 절대 픽셀이 아니라 지도의 원시 비확장 치수에 상대적입니다. 이러한 상대 좌표를 수동으로 계산하는 것은 매우 복잡하기 때문에, 필요한 정확한 값은 시각적 편집기의 실시간 지도 정보 섹션을 사용하여 추출할 수 있습니다.

• left: 지도의 자동 계산된 수평 중심을 재정의합니다. 예를 들어, 이 값을 0로 설정하면 지도의 0 좌표가 X축에서 카드의 수평 중심에 정확히 위치하게 됩니다. 이 지점은 일반적으로 방파제 바로 앞에 위치합니다.
• top: 지도의 자동 계산된 수직 중심을 재정의합니다. 예를 들어, 이 값을 0로 설정하면 지도의 0 좌표가 Y축에서 카드의 수직 중심에 정확히 위치하게 됩니다. 이 지점은 일반적으로 방파제 바로 앞에 위치합니다.
• width: 맞춤 계산에 사용되는 지도 실제 너비를 덮어씁니다. 카드가 가장 적합한 치수를 기준으로 지도를 조정하기 때문에, 지도 실제 너비보다 큰 값을 입력하면 카드 안에서 지도가 축소되고, 작은 값을 입력하면 확대됩니다.
• height: 맞춤 계산에 사용되는 지도 실제 높이를 덮어씁니다. width 속성과 유사하게, 지도 실제 높이보다 큰 값을 입력하면 카드 안에서 지도가 축소되고, 작은 값을 입력하면 확대됩니다.

YAML 예제

type: custom:dreame-vacuum-card
entity: vacuum.l10s_gen2
map_config:
  map_1:
    rotation: 90
    scale: 1.2
    object_scale: 1.5
    left: 10
    top: -20
    hidden_objects:
      - name
      - virtual_wall
  map_2:
    rotation: 180
    opacity: 0.8

배경 및 오버레이 이미지

카드는 지도 뒤에 맞춤 배경 이미지를 렌더링하는 것을 지원하며, 이는 몰입형 3D 평면도 대시보드를 만드는 데 특히 유용합니다. 이 동작은 background_image 속성을 사용하여 구성됩니다.

3D 효과를 더욱 향상시키기 위해 선택적으로 overlay_image를 제공할 수도 있습니다. 오버레이 이미지는 로봇의 청소 경로 위에 직접 그려지며, 주요 목적은 평면도에서 벽이나 가구 뒤를 지나가는 경로를 시각적으로 가리는 것입니다. 배경 이미지와 오버레이 이미지를 모두 결합하는 것은 3D 대시보드에서 현실적인 깊이감을 얻는 데 매우 권장됩니다.

3D 평면도 디자인하기

3D 평면도를 위한 맞춤 그래픽을 만들 때, 디자인은 투명 배경을 가진 두 개의 별도 이미지로 내보내야 합니다: 바닥과 낮은 가구를 포함하는 기본 레이어와 상단 벽만 포함하는 상단 레이어입니다.

아래의 예제 이미지들은 투명 영역을 강조하기 위해 체커보드 패턴 위에 표시되었으며, 무료 인테리어 디자인 애플리케이션 Sweet Home 3D을 사용하여 생성된 후, 바닥 영역을 제거하고 필요한 투명 부분을 만들기 위해 일반 이미지 편집 소프트웨어에서 후속 처리되었습니다.

배경 이미지

오버레이 이미지

background_image과 overlay_image은 다음과 같은 속성을 지원하여 평면도를 정렬할 수 있습니다:

• url: 이미지 경로, 예를 들어 /local/first_floor_bg.
• opacity: 이미지의 투명도. 초기 값은 1이며 0까지의 값을 허용합니다.

이미지 중심 정렬 및 크기 조정

이미지의 left, top, width 및 height 속성은 지도 자체의 중앙 배치 및 축척 설정과 동일한 상대 좌표 논리를 사용하여 작동합니다. 이러한 속성은 전적으로 선택 사항입니다.

커스텀 이미지가 지도 크기와 완벽하게 일치하더라도, 최소한 top과 left 값을 제공하는 것이 강력히 권장됩니다. 이는 향후 지도의 전체 크기가 변경되더라도 커스텀 이미지가 동일한 상대 위치에 안전하게 고정되도록 보장합니다.

기본 값

이러한 값이 제공되지 않으면, 카드는 자동으로 맞춤 이미지의 크기와 중심을 지도 데이터에 맞춥니다. 이 속성들은 전적으로 선택 사항이며, 이 동작을 재정의하여 지도가 시간에 따라 확대되거나 축소될 때 맞춤 이미지가 이동하거나 크기가 변경되는 것을 방지하는 용도로 존재합니다.

• left: 이미지의 수평 중심을 지도의 중심에 대해 정의합니다. 예를 들어, 이 값을 0로 설정하면 지도상의 0 좌표가 이미지의 수평 중심에 정확히 위치하게 됩니다. 이 지점은 일반적으로 부두 바로 앞에 위치합니다.
• top: 이미지의 수직 중심을 지도의 중심에 대해 정의합니다. 예를 들어, 이 값을 0로 설정하면 지도상의 0 좌표가 이미지의 수직 중심에 정확히 위치하게 됩니다. 이 지점은 일반적으로 부두 바로 앞에 위치합니다.
• width: 지도 원본의 스케일이 적용되지 않은 좌표계에 상대적인 이미지의 너비를 정의합니다. 예를 들어, 이 값을 지도 원본의 너비와 맞추면 이미지가 지도 데이터와 정확히 동일한 수평 영역을 가리도록 비율에 맞게 조정됩니다.
• height: 지도 원본의 스케일이 적용되지 않은 좌표계에 상대적인 이미지의 높이를 정의합니다. 예를 들어, 이 값을 지도 원본의 높이와 맞추면 이미지가 지도 데이터와 정확히 동일한 수직 영역을 가리도록 비율에 맞게 조정됩니다.

기본 회전

사용자 정의 이미지는 자체적인 독립 회전 속성이 없으며, 회전은 본질적으로 지도 회전에 따라 결정됩니다. 모든 뷰에서 정렬을 보장하려면, 설계된 이미지의 기본 방향이 0도로 설정된 지도 초기 방향과 정확히 일치해야 합니다.

디바이스 픽셀 비율 (DPR)

카드는 기기의 화면 픽셀 비율에 따라 지도를 렌더링합니다. 모바일과 같은 고해상도 디스플레이에서 배경 및 오버레이 이미지가 흐리게 표시되는 것을 방지하려면, 데스크톱 대시보드에서 필요한 크기의 최소 두 배 크기 이미지 제공을 강력히 권장합니다.

이미지 크기 결정

지도 데이터에는 단일 픽셀이 실제 세계에서 몇 밀리미터를 나타내는지 나타내는 grid_size 속성이 포함되어 있습니다. 이 값은 실시간 지도 정보 섹션에서 확인할 수 있습니다. 예를 들어, grid_size가 50라면 각 픽셀이 50mm, 즉 5cm에 해당함을 의미합니다. 집의 실제 세계 크기를 이 grid_size로 나누면 구성에 입력할 정확한 width 및 height 값을 정확히 계산할 수 있으며, 1:1 평면도 이미지가 실제 집 크기와 완벽하게 일치하도록 보장할 수 있습니다.

YAML 예제

type: custom:dreame-vacuum-card
entity: vacuum.l10s_gen2

map_config:
  map_1:
    object_scale: 7
    width: 250
    height: 183
    opacity: 0.45
    hidden_objects:
      - customized_cleaning
      - floor
      - name
      - name_background
      - no_go
      - no_mop
      - order
      - walls
    background_image:
      url: /local/home.png
      left: 77
      top: 10.3
      width: 250
      height: 183
      opacity: 0.75
    overlay_image:
      url: /local/home_overlay.png
      opacity: 0.9
  map_2:
    left: 41
    top: -12
    width: 269
    height: 171
    background_image:
      url: /local/second_floor_bg.png