Multiplos floorplan

Olá

Alguém sabe como criar multiplos plantas no HA?

Segui o exemplo do pkozul no GitHub e funcionou.
Adaptei para a utilização de múltiplas plantas como explica pkozul em community.home-assistant.io e o que com fiquei foi:


E não funciona!

Olá @lmsousa.
Não domino o floorplan não uso, mas o exemplo que ele demonstra é apenas para uma planta?
Não me recordo aqui de ninguém que use floorplan, caso não tenhas resposta de ninguém aqui da comunidade, era bom perguntares directamente ao pzokul e depois partilhares conosco a solução, pois seria importante para todos aqueles que queiram ou tem ou tenham o mesmo problema.

Eu tenho o floorplan a trabalhar, mas por enquanto, só tenho uma planta.

Não sei se ajuda, mas copiei isto do forum internacional há uns 2 meses. Estava com ideias de fazer o mesmo, mas ainda não tive tempo para explorar. :roll_eyes:

Just tested multiple floorplans on the same page.

All I did was:

Create a new ‘dummy’ floorplan sensor to represent the new floorplan

  • platform: mqtt
    state_topic: dummy/floorplan2/sensor
    name: Floorplan 2

Add the new floorplan sensor to one of your groups

zones:
name: Zones
entities:
- switch.doorbell
- sensor.template_last_motion
- binary_sensor.floorplan
- binary_sensor.floorplan_2
Create a configuration for your new floorplan (I just copy/pasted from existing floorplan)

binary_sensor.floorplan_2:
  custom_ui_state_card: floorplan2

  # Config below is identical across state card usage and custom panel usage of the floorplan
  # You can copy/paste between one and the other whenever you make any changes

  image: /local/custom_ui/floorplan/floorplan2.svg
  stylesheet: /local/custom_ui/floorplan/floorplan2.css

  last_motion_entity: sensor.template_last_motion
  last_motion_class: last-motion

  (etc. etc.)

Copy the floorplan state card HTML file (and change and is: to reflect the name of the HTML file.

www/custom_ui/state-card-floorplan2.html

That’s all I did to get it working in the new version.

Floorplan = plantas
Perguntei porque não vi nada sobre o assunto no fórum.
Assim que tiver alguma coisa de concreto e a funcionar público!

Bom dia

Depois de várias tentativas consegui aplicar várias plantas em páginas diferentes do HA.
1 - Seguir o exemplo do pkozul no GitHub.
1.1 - sistema de pastas/ficehiros deve ser:
www/custom_ui/floorplan/ha-floorplan.html
www/custom_ui/floorplan/floorplan.svg
www/custom_ui/floorplan/floorplan.css
e
www/custom_ui/floorplan/lib/jquery-3.2.1.min.js
www/custom_ui/floorplan/lib/moment.min.js
www/custom_ui/floorplan/lib/svg-pan-zoom.min.js
1.2 -
e ainda (para a utilização de uma planta nas opções do lado esquerdo)

panels/floorplan.html

conforme é explicado no exemplo no GitHub!
1.3 - Para aparecer a planta num ‘group’ é necessário adicionar o ficheiro seguinte à pasta do HA (este ficheiro é também copiado do GitHub):
www/custom_ui/state-card-floorplan.html
este ficheiro vai servir para as definições de todas as plantas que usarmos.

2 - Para o meu caso criei 4 plantas utilizando cópias das plantas da minha casa e o Inkscape para criar os ficheiros que tem que ter a extensão SVG. Não adicionei nenhuma entidade aos ficheiros. Isto pode ser feito conforme explica o exemplo do pkozul.

3 - Criei os seguintes ficheiros:
binary_sensors.yaml

- platform: mqtt
  state_topic: dummy/floorplan/sensor
  name: floorplan
  
- platform: mqtt
  state_topic: dummy/floorplan/sensor
  name: floorplan_piso_0
  
- platform: mqtt
  state_topic: dummy/floorplan/sensor
  name: floorplan_piso_1
  
- platform: mqtt
  state_topic: dummy/floorplan/sensor
  name: floorplan_piso_2
  
- platform: mqtt
  state_topic: dummy/floorplan/sensor
  name: floorplan_terreno

floorplan.yaml (cópia do exemplo do pkzul):

  name: Demo Floorplan
  image: /local/custom_ui/floorplan/floorplan.svg
  stylesheet: /local/custom_ui/floorplan/floorplan.css
  
  # These options are optional
  # warnings:                  # enable warnings (to find out why things might ot be working correctly)
  # pan_zoom:                  # enable experimental panning / zooming
  # hide_app_toolbar:          # hide the application toolbar (when used as a custom panel)
  # date_format: DD-MMM-YYYY   # Date format to use in hover-over text
  
  last_motion_entity: sensor.template_last_motion
  last_motion_class: last-motion

  groups:

    - name: Sensors
      entities:
         -  sensor.dark_sky_temperature

este ficheiro serviu de base de trabalho aos seguintes ficheiros que criei (apaguei uma série definições que não serviam para este exemplo!) . Tem que haver um ficheiro por cada planta que for criada.

floorplan_piso_0.yaml

name: Piso 0
image: /local/custom_ui/floorplan/floorplan_piso_0.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
      
# These options are optional
# warnings:                   # enable warnings 
# pan_zoom:                 # enable experimental panning / zooming
# hide_app_toolbar:      # hide the application toolbar (when used as a custom panel)
# date_format: DD-MMM-YYYY   # Date format to use in hover-over text
      
last_motion_entity: sensor.template_last_motion
last_motion_class: last-motion

criei ainda os ficheiros:
floorplan_piso_1.yaml
floorplan_piso_2.yaml
floorplan_terreno.yaml
para as plantas e terreno (basicamente são cópias do anterior com a referência ao ficheiro SVG que contem a planta. O ficheiro CSS é o mesmo para todas as plantas.

para cada planta criei também (adaptado do exemplo do pkozul) os ficheiros
ha-floorplan_piso_0.html
ha-floorplan_piso_1.html
ha-floorplan_piso_2.html
ha-floorplan_terreno.html
são ficheiros grandes com cerca de 900 linhas. Basicamente é necessário onde se encontrar o texto ‘floorplan’ substituir por ‘floorplan_piso_0’ para a planta do piso 0 e assim sucessivamente para as todos os ficheiros. Mesmo no nome da class!
Linhas 14, 62, 70, 71, 140, 147, 154, 229, 384, 544, 623, 722 e 974 (espero não me ter esquecido de nenhuma!).

frontend.yaml

extra_html_url:
  - /local/custom_ui/state-card-floorplan.html

e acrescentei ao ficheiro customaize.yaml:

...
# Floorplan
#  custom_ui_state_card: state-card-floorplan
binary_sensor.floorplan:
  custom_ui_state_card: state-card-floorplan
  config: !include floorplan.yaml
  
binary_sensor.floorplan_piso_0:
  custom_ui_state_card: state-card-floorplan
  config: !include floorplan_piso_0.yaml

binary_sensor.floorplan_piso_1:
  custom_ui_state_card: state-card-floorplan
  config: !include floorplan_piso_1.yaml
  
binary_sensor.floorplan_piso_2:
  custom_ui_state_card: state-card-floorplan
  config: !include floorplan_piso_2.yaml
  
binary_sensor.floorplan_terreno:
  custom_ui_state_card: state-card-floorplan
  config: !include floorplan_terreno.yaml
...

e ao ficheiro groups.yaml:

...
##########################################
#PISO 0
piso_zero:
  name: Piso 0
  view: yes
  entities:
    - group.garagem
    - group.arrumos
    - group.sala_de_cinema
    - group.escadas0
    - group.casa_de_banho0
    - group.salao
    - group.planta_0
...
#------------------------------------------
#PLANTAS
planta 0:
  name: Planta - Piso 0
  view: no
  entities:
    - binary_sensor.floorplan_piso_0

planta 1:
  name: Planta - Piso 1
  view: no
  entities:
    - binary_sensor.floorplan_piso_1
      
planta 2:
  name: Planta - Piso 2
  view: no
  entities:
    - binary_sensor.floorplan_piso_2

planta 3:
  name: Planta - Terreno
  view: no
  entities:
    - binary_sensor.floorplan_terreno

O resultado é esta estrutura:

O ficheiro floorplan.css e o state-card-floorplan.html são únicos. São utilizados para todas as plantas!

Aqui vai o resultado!






3 Likes

Grande trabalho e explicação. Obrigado pela informação.
Eu só tenho uma planta a funcionar, mas estou a pensar criar mais uma ou duas como paginas de links adaptada como há em varios exemplos no forum

.

Neste momento, o meu está assim, mas ainda precisa de uns melhoramentos.

1 Like

Este tópico foi automaticamente fechado 90 dias após a última resposta. Novas respostas não são permitidas.


Copyright © 2017-2020. Todos os direitos reservados
CPHA.pt - info@cpha.pt


FAQ | Termos de Serviço/Regras | Política de Privacidade