Neste post vamos tentar explicar como podemos fazer uma planta da nossa casa e integrá-la ao Home Assistant, com a intenção de integrar os dispositivos que já temos em Hassio e dar vida ao avião. É algo muito atraente e acima de tudo visual, é algo que eles apreciarão em casa, pois com uma imagem podemos ver o estado da nossa casa e podemos interagir a partir dela com os dispositivos que adicionamos.

Este é o exemplo que faremos no post, Teremos o mapa da nossa casa com informações em tempo real, Veremos as luzes acesas, Com suas sombras, O que vemos na TV, valores de qualquer métrica em que estejamos interessados… e podemos até interagir com cada um deles, Silenciar alto-falantes, Levante ou abaixe as persianas, Ver câmeras de segurança, O estado de nossas fábricas, Temperaturas, Umidade, Consumo, pessoas se nos colocarmos…

Em primeiro lugar, Antes de começar, será o mais trabalhoso, Teremos que fazer um plano de nossa casa, a coisa mais fácil do mundo será usar uma ferramenta como Sweet Home 3D, Uma ferramenta gratuita e super intuitiva que não explicaremos o uso neste post, já que com 5 minutos que você dedica a ele, tenho certeza que você saberá como usá-lo e poderá fazer seu plano, Isso levará tempo para torná-lo bonito, mas isso vai depender de cada um de nós o nível de detalhe que queremos. Você começará desenhando as paredes, Em seguida, você adicionará seus objetos que você tem que deixá-lo o mais próximo possível da realidade.

Como ajuda, deixo-vos o site da 3D WareHouse de Sketchup como um banco de imagens importáveis, que é uma boa ideia procurar os móveis que temos, Objetos, Sofás, Lâmpadas… E também depende de quão fino você quer deixá-lo igual, você precisa importar alguma textura para torná-lo mais realista, para isso eu escrevi para usar Texturas de arquivo. Trabalharemos na vista superior e na inferior veremos os resultados como eles aparecem em 3D, Essa é a ideia, deixe-o o mais próximo possível de casa. Quando você tiver o plano mais ou menos concluído, A ideia é que teremos que tirar diferentes fotografias aéreas do que queremos ver, Pessoalmente, recomendo que você tire várias fotos em momentos diferentes, desde então podemos colocá-los no Home Assistant e que a foto geral mude as sombras do sol dependendo da hora, ou no final do dia e a noite chega, Bem, deixe a casa ficar escura. É muito simples, realmente, Gaste alguns minutos nele e você o terá sugado. Outra dica, Faça as imagens com a mais alta qualidade possível, No meu caso, eu uso 1920×1080 Resolução de pixels (ambas nas propriedades do documento/desenho, Como quando você tira a foto).

Posterior, com qualquer editor de tipos PhotoShop, ou Paisagem do Inkscape (Código aberto) Teremos que fazer todas as imagens que vamos precisar da casa. Eu explico meu exemplo, Ter 3 Imagens de todo o avião, Um com a luz da manhã, outro à tarde e outro à noite, Fotos tiradas às 12 horas, 17h e 22h respectivamente. Além da foto da noite, você terá que tirar outra foto, Mas desta vez com todas as luzes acesas, Eu tenho algo como:

• planta_baja_manana.png 01/08/2020 às 12 horas
• planta_baja_tarde.png 01/08/2020 às 5h
• planta_baja_noche.png 01/08/2020 em 21:27h
• planta_baja_noche_luz.png 01/08/2020 em 21:27h

E na imagem da noite com luzes, teremos que cortar as áreas com luz com esses editores, por exemplo, a cozinha, O Salão, corredor, Quartos… Às vezes teremos que fazer um gradiente no caso de lâmpadas ou se tivermos várias luzes em uma cabine… As seguintes imagens permanecem (Repetir, Ele é meu exemplo) em formato PNG com transparências:

• hall_luz.png
• lampara_sala_luz.png
• sala_luz.png
• cocina_luz.png
• comedor_luz.png

Nada mau, Quando tivermos esta parte pronta, podemos começar com o Home Assistant, onde teremos que criar um plano e adicionar gradualmente todas as imagens que geramos. Em primeiro lugar, A primeira coisa que vamos criar na área dos sensores (Sensores:), É algo que a elevação do sol nos diz, e assim podemos usá-lo mais tarde, quando começarmos e que o fundo da foto mude se for de manhã, Meio-dia, à tarde ou à noite, e com isso colocamos diferentes fundos com as sombras correspondentes do sol, e escurecendo a imagem mais à medida que a noite chega. Vamos criar um sensor, que eu o chamei brillo_sol, Deixo-vos o código que colocaríamos em nosso configuration.yaml:

sensor:
...
  - Plataforma: Sensores de modelo:
      brillo_sol:
        friendly_name: "Luz solar"
        value_template: >-
          {% se state_attr('sun.sun', 'elevation') > 20  %}
            brilhante
          {% Elif state_attr('sun.sun', 'elevation') > 9 %}
            Meados
          {% Elif state_attr('sun.sun', 'elevation') > -3 %}
            Escuro
          {% mais %}
            preto
          {% Fim %}
...

Lembre-se de reiniciar o Home Assistant para que ele recarregue a alteração que acabamos de inserir (Toda vez que tocamos no arquivo de configuração, Você sabe). Finalmente, Podemos começar com o mapa! Começou!!! Na interface do usuário do Lovelace, poderemos criar um cartão manual. Deixo-vos o código abaixo como exemplo de que o que faz é o que foi dito, lerá a partir do sensor 'Sunshine’ seu estado e depende do estado que você tem, porque vai colocar uma imagem de fundo ou outra. Exemplo do nosso primeiro cartão:

Elementos:
  - entidade: sensor.brillo_sol imagem: /local/planta_baja/planta_baja_negro.png state_image:
      preto: /Local/planta_baja/planta_baja_noche.png Brilhante: /local/planta_baja/planta_baja_mediodia.png escuro: /local/planta_baja/planta_baja_tarde.png meio: /estilo local/planta_baja/planta_baja_manana.png:
      Esquerda: 50%
      Início: 50%
      Largura: 100%
    tap_action:
      Ação: tipo none: imagem imagem: /tipo local/planta_baja/planta_baja_tarde.png: elementos de imagem

Caso alguém tenha dúvidas sobre o resultado, Aqui está o que vamos conseguir, (No meu caso) are 4 Imagens, o seguinte, E você vê as sombras mudarem, luz do dia e a última à noite. Como você pode ver, você terá que salvar cada imagem PNG no diretório que você cria em sua máquina Hassio, No meu caso, eu o tenho em um contêiner docker, e dentro teremos criado uma pasta e por exemplo copiado as imagens lá com WinSCP.

Nada mau, Para onde vamos a partir daqui? Adicionamos uma lâmpada?? Que quando pressionado também acende a luz correspondente, Não? Vamos!!! Aqui e aqui Você tem duas imagens que serão de grande ajuda para nós, A ideia é colocá-los onde estivermos interessados, neste exemplo, vamos colocá-los no centro do Salão, com o próximo código que adicionarmos ao cartão Lovelace anterior, nós o teremos, É claro, cada um terá que movê-lo e redimensioná-lo ao seu gosto, e, claro, selecione a identidade correspondente à luz do salão:

- entidade: light.luz_hall state_image:
    'off': /local/planta_baja/liteoff.png
    'on': /estilo local/planta_baja/lite.png:
    Esquerda: 45%
    Início: 65%
    Largura: 10%
  tap_action:
    Ação: tipo de alternância: imagem

E esse seria o resultado, teríamos no Hall se você olhar para uma lâmpada, que se estiver desligado é um ponto vermelho, e se clicarmos nele dará a luz e também o ponto mudará para verde e com um lindo branco borrado ao redor. Pronto? Nós!

Vamos iluminar a cabine, neste caso, o Hall, e que quando a lâmpada está acesa, Mude a imagem do salão e saia iluminado. Também será legal para as lâmpadas usarem as imagens degradadas com luz apenas na medida em que brilham… Para fazer isso,, Primeiro teremos que Baixe este arquivo e salve-o em nossa pasta '/config/www/js/’ e então devemos adicionar “Configuração” > “Painéis de controle Lovelace” > ” Recursos”:

URL: /Tipo local/js/color-lite-card.js: Js[/Código-fonte]

Agora sim, podemos voltar ao nosso cartão, e continue a alimentá-lo. Se nos lembrarmos, no início do Post, indicamos que temos que ter cada quarto com luz aparada, gostaríamos de adicioná-lo com o seguinte código ao nosso cartão:

- entidade: light.luz_hall imagem: /estilo local/planta_baja/hall_luz.png:
    Esquerda: 50%
    Início: 50%
    Largura: 100%
  tap_action:
    Ação: tipo none: 'custom:color-lite-card'

Se tivermos uma faixa de LED, Podemos mostrar a cor que você está usando agora, no meu caso, gostaria de lembrá-lo pela enésima vez do WLED que são maravilhosos, Precisaremos de uma imagem com a área iluminada e transformada apenas com vermelho, Como faço para deixar este Meu exemplo Renomeado como _color. E com o código a seguir, podemos começar a visualizar nossa faixa de LED integrada à planta baixa.

- color_image: /entidade local/planta_baja/wled_cocina_color.png: light.wled_cocina imagem: /estilo local/planta_baja/wled_cocina_normal.png:
    Esquerda: 50%
    Início: 50%
    Largura: 100%
  tipo: 'custom:color-lite-card'

O que mais? Você usa o Kodi para assistir TV? Bem, também é bom poder adicionar o que você está assistindo na TV ou na parede se tiver um projetor… então ele vai mostrar o que você está vendo 🙂 A primeira coisa será Baixe este arquivo e deixá-lo como antes, em '/config/www/js/'. E novamente de “Configuração” > “Painéis de controle Lovelace” > ” Recursos” Adicionar:

URL: /Tipo local/js/now-playing-card.js: Js[/Código-fonte]

Okey, agora, para moldar a TV ou projeção na parede, Teremos que fazer um trapézio, Por que, claro,, todos terão em perspectiva o que querem ver, e para torná-lo mais realista, você deve fazer a figura com o que vê no Kodi. Para tal, dispõe de uma Ferramenta de design O que você vai ver, é besteira usá-lo, basta baixá-lo, Abra o site que ele traz e jogue, Adicione nosso fundo e retire rapidamente as medidas que precisamos para girá-lo ou torcê-lo. Total, que em nosso cartão adicionaremos a entidade Kodi e colocaremos o código que gerou a saída desta ferramenta maravilhosa, Nós pareceríamos algo como:

- entidade: media_player.kodi_sala estilo:
    Esquerda: 64%
    Início: 11%
    Transformar: >-
      Girar(46.5Graus) rotateX(29Graus) girar Y(-38Graus) skewX(10Graus)
      Distorcido(-30Graus)
    Largura: 8%
  tipo: 'custom:now-playing-poster'

E este seria o resultado maravilhoso, Claro, se você tiver um projetor, você também pode colocar um arquivo GIF animado que simula poeira onde é projetado… etc, etc… Você pode fazer coisas legais. E, claro, se você modificar a ação de cada objeto que adicionamos ao cartão, poderá interagir com eles.

Bem, e como um último, Mas há muito mais coisas que podem ser feitas, ei! Para colocar, vamos ver o valor de alguma entidade no Home Assistant, Por exemplo, se tivermos sensores de temperatura, Bem, o que marca, os graus que eu faço, e é colocado em todos os cômodos onde temos o termômetro… O mesmo pode ser feito se estivermos medindo o consumo de um dispositivo, E então, quando vemos o mapa, porque em tempo real veremos a temperatura, humidade, consumo… Tanto faz! Vir, Adicionamos isso ao cartão com o qual estamos trabalhando, cada um colocará suas entidades, A cor da sua letra…:

- entidade: sensor.0x00158d000444587d_temperature estilo:
    cor: tamanho da fonte laranja: 12px font-weight: negrito à esquerda: 54%
    Início: 16%
  tipo: Rótulo de estado

Poço, cada um que dá à imaginação, aqui está um GIF de como tudo isso ficaria animado, Espero que inspire e ajude você, Muito obrigado a todos que tornam o Home Assistant possível, e todos que compartilham seu trabalho no GitHub (entre outros). Obrigado por compartilhar nas redes sociais!!!