Configuração Personalizada do Mapa

O alinhamento, a escala e a imagem de fundo podem ser configurados de forma independente para cada mapa salvo no dispositivo.

Essas configurações podem ser ajustadas no editor visual selecionando um mapa na lista de mapas ou usando a propriedade map_config na configuração YAML.

Opções de Configuração de Mapa

As configurações dentro de map_config são aplicadas por índice de mapa usando chaves como map_1, map_2, etc. Qualquer uma das seguintes opções pode ser definida sob um mapa específico:

Aviso

Os índices de mapas são atribuídos com base na ordem de criação, sendo o mapa mais antigo o que recebe o índice mais baixo, começando do 1. No entanto, se o recurso de múltiplos andares estiver desativado em um dispositivo que possui vários mapas e suas configurações, o mapa atualmente ativo é automaticamente reatribuído ao índice 1. Isso significa que um mapa previamente configurado sob um índice diferente adotará repentinamente a configuração de map_1.

• rotation: Substitui a rotação configurada nos dados do mapa para desenhar o mapa em uma rotação personalizada específica para este cartão, aceitando valores de 0, 90, 180 ou 270.
• scale: Substitui o cálculo automático de escala com base na diferença entre o tamanho original do mapa e o tamanho do cartão, aceitando valores entre 0.1 e 20.
• object_scale: Substitui o tamanho automaticamente calculado dos objetos do mapa, como ícones de salas e obstáculos, permitindo que eles apareçam maiores ou menores.
• opacity: Transparência global do mapa desenhado. O valor inicial é 1 e aceita valores até 0.
• object_opacity: Transparência dos objetos desenhados no mapa, como ícones de salas ou obstáculos. O valor inicial é 1 e aceita valores até 0.
• font_size: Tamanho da fonte para bolhas de texto exibidas sobre objetos ativados. Aceita valores entre 0 e 12.
• hidden_objects: Substitui os objetos ocultos do mapa definidos no Configuração Avançada global para este mapa específico.

Centralização e Escala

Os parâmetros abaixo são usados para substituir o tamanho e as coordenadas centrais que o cartão calcula automaticamente para desenhar o mapa.

Aviso

Os valores fornecidos para esses parâmetros são relativos às dimensões brutas e não escaladas do mapa, e não aos pixels absolutos na tela. Como calcular essas coordenadas relativas manualmente é altamente complexo, os valores exatos necessários podem ser extraídos usando a seção Informações do Mapa ao Vivo do editor visual.

• left: Substitui o centro horizontal do mapa calculado automaticamente. Por exemplo, definir este valor como 0 coloca a coordenada 0 do mapa no eixo X exatamente no centro horizontal do cartão. Esse ponto normalmente está localizado bem em frente ao cais.
• top: Substitui o centro vertical do mapa calculado automaticamente. Por exemplo, definir este valor como 0 coloca a coordenada 0 do mapa no eixo Y exatamente no centro vertical do cartão. Esse ponto normalmente está localizado bem em frente ao cais.
• width: Substitui a largura real do mapa usada para o cálculo de ajuste. Como o cartão dimensiona o mapa com base na maior dimensão que se ajusta, inserir um valor maior que a largura real do mapa reduzirá o mapa dentro do cartão, enquanto um valor menor irá ampliá-lo.
• height: Substitui a altura real do mapa usada para o cálculo de ajuste. Semelhante à propriedade width, inserir um valor maior que a altura real do mapa reduzirá o mapa dentro do cartão, enquanto um valor menor irá ampliá-lo.

Exemplo 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

Imagens de Fundo e Sobreposição

O cartão suporta a renderização de uma imagem de fundo personalizada atrás do mapa, o que é particularmente útil para criar dashboards imersivos de plantas 3D. Esse comportamento é configurado usando a propriedade background_image.

Para melhorar ainda mais o efeito 3D, um overlay_image opcional também pode ser fornecido. A imagem sobreposta é desenhada diretamente sobre o percurso de limpeza do robô e seu objetivo principal é obscurecer visualmente os caminhos que passam atrás de paredes físicas ou móveis no projeto do piso. Combinar uma imagem de fundo e uma imagem sobreposta é altamente recomendado para alcançar uma sensação realista de profundidade em dashboards 3D.

Criando um Projeto 3D de Piso

Ao criar gráficos personalizados para um projeto 3D de piso, o design deve ser exportado como duas imagens separadas com fundos transparentes: uma camada base contendo os pisos e móveis baixos e uma camada superior contendo apenas as paredes superiores.

As imagens de exemplo abaixo, mostradas sobre um padrão de tabuleiro de xadrez para destacar suas áreas transparentes, foram geradas usando o aplicativo gratuito de design de interiores Sweet Home 3D e posteriormente processadas em um software de edição de imagens padrão para remover as áreas do piso e criar as partes transparentes necessárias.

Imagem de fundo

Sobreposição imagem

Os background_image e overlay_image suportam as seguintes propriedades para alinhar o layout do piso:

• url: Caminho da imagem, como /local/first_floor_bg.
• opacity: Transparência da imagem. O valor inicial é 1 e aceita valores até 0.

Centralizando e Redimensionando Imagens

As propriedades left, top, width e height para imagens operam usando a mesma lógica de coordenadas relativas que a própria configuração Centralização e Escala do mapa. Essas propriedades são totalmente opcionais.

Mesmo que a imagem personalizada corresponda perfeitamente ao tamanho do mapa, é altamente recomendável fornecer pelo menos os valores de top e left. Isso garante que, se o tamanho total do mapa mudar no futuro, a imagem personalizada permaneça fixada com segurança na mesma localização relativa.

Valores Padrão

Quando esses valores não são fornecidos, o cartão automaticamente iguala o tamanho e o centro da imagem personalizada com os dados do mapa. Essas propriedades são totalmente opcionais e existem apenas para substituir esse comportamento, impedindo que a imagem personalizada se mova ou que sua escala mude caso o mapa se expanda ou contraia ao longo do tempo.

• left: Define o centro horizontal da imagem em relação ao centro do mapa. Por exemplo, definir esse valor como 0 coloca a coordenada 0 do mapa no eixo X exatamente no centro horizontal da imagem. Esse ponto normalmente está localizado bem em frente ao cais.
• top: Define o centro vertical da imagem em relação ao centro do mapa. Por exemplo, definir esse valor como 0 coloca a coordenada 0 do mapa no eixo Y exatamente no centro vertical da imagem. Esse ponto normalmente está localizado bem em frente ao cais.
• width: Define a largura da imagem em relação ao sistema de coordenadas original e não escalonado do mapa, em vez de pixels absolutos da tela. Por exemplo, definir este valor para coincidir com a largura bruta do mapa garante que a imagem seja escalada proporcionalmente para cobrir exatamente a mesma área horizontal que os dados do mapa.
• height: Define a altura da imagem em relação ao sistema de coordenadas original e não escalonado do mapa. Por exemplo, definir este valor para coincidir com a altura bruta do mapa garante que a imagem seja escalada proporcionalmente para cobrir exatamente a mesma área vertical que os dados do mapa.

Rotação Nativa

Imagens personalizadas não possuem uma propriedade de rotação independente; sua rotação está inherentemente ligada à rotação do mapa. Para garantir alinhamento em todas as visualizações, a orientação base da imagem projetada deve coincidir exatamente com a orientação inicial do mapa quando definida para 0 graus.

Razão de Pixels do Dispositivo (DPR)

O cartão renderiza o mapa de acordo com a proporção de pixels da tela do dispositivo. Para evitar que as imagens de fundo e sobreposição apareçam borradas em telas de alta resolução, como em telefones celulares, é altamente recomendável fornecer essas imagens com, no mínimo, o dobro do tamanho necessário no painel de desktop.

Determinando o Tamanho da Imagem

Os dados do mapa incluem uma propriedade grid_size que indica quantos milímetros um único pixel representa no mundo real. Esse valor pode ser encontrado na seção Informações do Mapa ao Vivo. Por exemplo, um grid_size de 50 significa que cada pixel corresponde a 50 mm, ou 5 cm. Dividindo as dimensões reais da casa por este grid_size, os valores exatos de width e height a serem inseridos na configuração podem ser calculados com precisão, garantindo que uma imagem de planta baixa em escala 1:1 se ajuste perfeitamente ao tamanho real da casa.

Exemplo 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