# Multiplos floorplan

**URL:** <https://forum.cpha.pt/t/multiplos-floorplan/767>\
**Category:** Configuração\
**Created:** [15 Agosto , 2018 15:02 UTC](https://forum.cpha.pt/t/multiplos-floorplan/767 "2018-08-15T15:02:57Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![lmsousa](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/l/f9ae1b/32.png) [@lmsousa](https://forum.cpha.pt/u/lmsousa)\
**Post date:** [15 Agosto , 2018 15:02 UTC](https://forum.cpha.pt/t/multiplos-floorplan/767/1 "2018-08-15T15:02:58Z")

</div>

Olá

Alguém sabe como criar multiplos plantas no HA?

Segui o exemplo do [pkozul](https://github.com/pkozul/ha-floorplan) no GitHub e funcionou.  
Adaptei para a utilização de múltiplas plantas como explica [pkozul](https://community.home-assistant.io/t/floorplan-for-home-assistant/17394/303) em [community.home-assistant.io](http://community.home-assistant.io) e o que com fiquei foi:

 ![Sem%20T%C3%ADtulo](https://forum.cpha.pt/uploads/default/original/1X/9fa21ebad217f11461ad87f5e4b21c08c7ee68e9.png)  
E não funciona!

---

<div class="post-metadata">

**Author:** ![RodolfoVieira](https://forum.cpha.pt/user_avatar/forum.cpha.pt/rodolfovieira/32/14633_2.png) [@RodolfoVieira](https://forum.cpha.pt/u/RodolfoVieira)\
**Post date:** [15 Agosto , 2018 21:32 UTC](https://forum.cpha.pt/t/multiplos-floorplan/767/2 "2018-08-15T21:32:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![paulo106](https://forum.cpha.pt/user_avatar/forum.cpha.pt/paulo106/32/2317_2.png) [@paulo106](https://forum.cpha.pt/u/paulo106)\
**Post date:** [16 Agosto , 2018 08:13 UTC](https://forum.cpha.pt/t/multiplos-floorplan/767/3 "2018-08-16T08:13:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paulo106](https://forum.cpha.pt/user_avatar/forum.cpha.pt/paulo106/32/2317_2.png) [@paulo106](https://forum.cpha.pt/u/paulo106)\
**Post date:** [16 Agosto , 2018 08:23 UTC](https://forum.cpha.pt/t/multiplos-floorplan/767/4 "2018-08-16T08:23:22Z")

</div>

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. 🙄

```
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.

---

<div class="post-metadata">

**Author:** ![lmesousa](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/l/e0b2c6/32.png) [@lmesousa](https://forum.cpha.pt/u/lmesousa)\
**Post date:** [16 Agosto , 2018 08:40 UTC](https://forum.cpha.pt/t/multiplos-floorplan/767/5 "2018-08-16T08:40:10Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![lmsousa](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/l/f9ae1b/32.png) [@lmsousa](https://forum.cpha.pt/u/lmsousa)\
**Post date:** [20 Agosto , 2018 13:21 UTC](https://forum.cpha.pt/t/multiplos-floorplan/767/6 "2018-08-20T13:21:53Z")

</div>

Bom dia

Depois de várias tentativas consegui aplicar várias plantas em páginas diferentes do HA.  
1 - Seguir o exemplo do [pkozul](https://github.com/pkozul/ha-floorplan) 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:

 ![Sem%20T%C3%ADtulo](https://forum.cpha.pt/uploads/default/original/1X/8bdd169ce6028815f1534b93785f17e63c9be8d3.png)

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

Aqui vai o resultado!

 ![Sem%20T%C3%ADtulo%200](https://forum.cpha.pt/uploads/default/original/1X/4ffe8740bb5ad88df5e7dc5210db3c05eb5242be.png)  
 ![Sem%20T%C3%ADtulo%201](https://forum.cpha.pt/uploads/default/original/1X/fbe081a47e2f03fd9dfb6760fbaa6877ba55c808.png)  
 ![Sem%20T%C3%ADtulo%202](https://forum.cpha.pt/uploads/default/original/1X/dc479022dc506161f67b0b677bf1d9022e9217e6.png)  
 ![Sem%20T%C3%ADtulo%203](https://forum.cpha.pt/uploads/default/original/1X/a28d8ba0c0fc1f76f56d4c58985c36d805654346.png)  
 ![Sem%20T%C3%ADtulo%204](https://forum.cpha.pt/uploads/default/original/1X/df12220bb3275a2708516dbea08bb2ceb9fb8518.png)  
 ![Sem%20T%C3%ADtulo%205](https://forum.cpha.pt/uploads/default/original/1X/04bc7e89bbecb04dd6b93b524131157a4b4410da.png)

---

<div class="post-metadata">

**Author:** ![paulo106](https://forum.cpha.pt/user_avatar/forum.cpha.pt/paulo106/32/2317_2.png) [@paulo106](https://forum.cpha.pt/u/paulo106)\
**Post date:** [24 Agosto , 2018 13:11 UTC](https://forum.cpha.pt/t/multiplos-floorplan/767/7 "2018-08-24T13:11:42Z")

</div>

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

 ![Screenshot_20180807-090447](https://forum.cpha.pt/uploads/default/original/1X/de5110a9773f5a78633632807f56fecc1994c3ce.png).

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

---

<div class="post-metadata">

**Author:** ![system](https://forum.cpha.pt/user_avatar/forum.cpha.pt/system/32/2_2.png) [@system](https://forum.cpha.pt/u/system)\
**Post date:** [22 Novembro , 2018 13:11 UTC](https://forum.cpha.pt/t/multiplos-floorplan/767/8 "2018-11-22T13:11:43Z")

</div>

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