New at floorplan need some help

Third party integrations Floorplan
1

hello
I am new at floorplan and I read some document about floorplan ,I download Inkscape but is not look like the best program to build svg file .
can some one advice me what is the pro program that give me good UI and graphic ?

this is my config file

panel_custom:

  • name: floorplan
    sidebar_title: Floorplan
    sidebar_icon: mdi:home
    url_path: floorplan
    config: !include floorplan.yaml

and this is my floorplan.yaml

name: Demo Floorplan
image: /config/panels/tamirhome.svg

can someone know why I cant see the floorplan on my hassio?
I get error

2

how I install floorplan on hassio?

I have svg file how I convert it to css file?

3

I try to convert it to css using Inkscape
this is the error I get and no file css made

Traceback (most recent call last):
File “merge_styles.py”, line 133, in
e.affect()
File “inkex.py”, line 283, in affect
self.effect()
File “merge_styles.py”, line 116, in effect
raise KeyError(“There are no common styles between these elements.”)
KeyError: ‘There are no common styles between these elements.’

4

I am new to floorplan as well. What I did was follow the instructions on the github to get the example floorplan working first. This includes downloading the example files and placing them in the right folders on your home assitant device. You’ll have to download the svg, yaml and css files from there for the example.

Once you get this working, then you can try to make your own. I read the “share your floorplan” thread and learned from there by looking at other people’s floorplans and how they did it.

I used inkscape and it was pretty good. If you have an image of your floorplan, import that and then make a layer called “walls” and draw your walls over the image. I also have a layer for doors and windows, furniture, floors, icons, etc.

5

@Marauder2
I do that I build my on floorplan but I can’t build css file .
The program give me error an don’t build a file .

I can upload my file for the floorplan if it help

6

that it my floorplan

Untitled
Untitled1366×768 172 KB

this is how It look on hassio

web
web1366×768 42.7 KB

web2
web21366×768 55.8 KB

I cant see the photo on html file,if I open the HTML I see the photo but not on hassio you can see that

web3
web31366×768 129 KB

7

You don’t build a css file from the svg. the css file is provided in the repo and you edit it as needed.

8

I do that and I still cant see my draw on hassio under floorplan

can some help???
I can send my file if someone can help me

9

There are multiple files you need to download from github, there is a css file there so you don’t need to make one yourself. Download it and edit it.

www/custom_ui/floorplan/ha-floorplan.html www/custom_ui/floorplan/floorplan.svg www/custom_ui/floorplan/floorplan.css 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

10

I add this css file to my pi3 and I still can’t see the my drawing under floorplan tab.

You can see on the photo that u post is blank .
@Marauder2

11

I have the same issue.

12

What browser are you both using? Chrome is about the only reliable browser for FP.

13

I am on android using chrome

14

I use it on a PC so I’m not sure if it will work properly on Android.

15

I get work guys .
But I don’t know I can set icon on and icon off.

I add icon but I like the icon chance if it off or on .
How can I do it.

16

You need to edit the floorplan.yaml and add you switches, then edit the floorplan.css to change the colours etc.

See here …

Look at the lights and switches parts…

Switches
Below is an example of a 'Switches' group, showing how to add switches to your floorplan. The appearance of each switch is styled using the appropriate CSS class, based on its current state.

        - name: Switches
          entities:
             - switch.doorbell
          states:
            - state: 'on'
              class: 'doorbell-on'
            - state: 'off'
              class: 'doorbell-off'
          action:
            domain: switch
            service: toggle
Lights
Below is an example of a 'Lights' group, showing how to add lights to your floorplan. The appearance of each light is styled using the appropriate CSS class, based on its current state.

        - name: Lights
          entities:
             - light.hallway
             - light.living_room
             - light.patio
          states:
            - state: 'on'
              class: 'light-on'
            - state: 'off'
              class: 'light-off'

In the .css file change and add your own classes for other switches etc.

/* Light */

.light-off {
  fill: #C3B7F4 !important;
}

.light-on {
  fill: #F8D2B9 !important;
}

/* Doorbell */

.doorbell-off {
  fill: #C3B7F4 !important;
}

.doorbell-on {
  fill: #F8D2B9 !important;
}
2 Likes
17

how did you resolve it? I am on mac google chrome and still get a blank page :frowning:

18

@keithh666 if I like to chance icon not color how can I do it?

19

Download any svg icon and import it into inkscape and resize/reposition it, add the entity_id and hit set then save the floorplan.svg and bobs ur uncle :slight_smile:

20

Seems like @tamiryosef doesn’t like sharing rather likes finding answers to his own problem only ! Thanks buddy