Floorplan for Home Assistant

Third party integrations Floorplan
283

One super important tip I learned is to make sure ALL IDs are lowercase. pretty much make sure all device names in HASS and floorplan are lowercase to avoid a ton of troubleshooting and frustration.

1 Like
284

floorplan.yaml (548 Bytes)
I have done as you indicated but the floor plan does not display.

  1. In floorplan.yaml should the path “/local” remain /local/custom_ui/floorplan/floorplan.svg.
  2. I have included below the floorplan.yaml to check if this is correct. The floorplan.yaml and floorplan.svg have been edited to only contain the ID “binary_sensor.front_hallway”.

floorplan.yaml

  name: Demo Floorplan
  image: /local/custom_ui/floorplan/floorplan.svg
  stylesheet: /local/custom_ui/floorplan/floorplan.css

  groups:

    - name: Binary sensors
      entities:
        - binary_sensor.front_hallway
      states:
        - state: 'off'
          class: 'info-background'
        - state: 'on'
          class: 'warning-background'
      state_transitions:
        - name: On to off
          from_state: 'on'
          to_state: 'off'
          duration: 10
285

That’s what I have, “local” is replaced by HA with “www” … this is my floorplan.yaml …

  name: Floorplan
  image:      /local/custom_ui/floorplan/floorplan.svg
  stylesheet: /local/custom_ui/floorplan/floorplan.css

  last_motion_entity: sensor.template_last_motion
  last_motion_class: last-motion

  groups:
    - name: Sensors
      entities:
        - sensor.avglroomtemp

Remember tho’ the actual files must be in /home/homeassistant/.homeassistant/www/custom_ui/floorplan/ ie where the github specifies :slight_smile:

286

I have the same paths as you and @keithh666

Have you mentioned your version of Home Assistant? I think you should have > 0.42
Other than that, I cannot point you in any direction. I have very little knowledge of software development. Sorry!

287

I’m not sure what the difference between safari and chrome are but it works on chrome.

288

I have downloaded Chrome and it works now. It does not work however when using Safari.

Thank you to everyone who have assisted and guided me to getting it to work.

1 Like
289

Many, many thanks! It is starting to look like something!
Made a few small changes, and not everything is to my liking yet, but all seems to be working!

1075×513 24.6 KB

3 Likes
290

No worries glad you got it working, it’s an awesome addition to HA :smiley:

1 Like
291

Would you mind posting your SVG or AI file? Love your image, I use AI as well would be great to use as a template.

292

I used this SVG file Floorplan for Home Assistant

When I’m done I do plan to share all the CSS and SVG.

2 Likes
293

Hi Bram,

I would really like the css and sgv if you are done… (mainly the css for the colors :wink:

294

Question, can I also use attributes as the class_template and text_template? Or only the state?

I tried:
entity.attributes.current_temperature
But that doesn’t work… what am I doing wrong?

Thanks so much for all the effort!

295

Is there a way to make it so that when i click on an open area of a room it switches to a room view. Been reading but i’m not really seeing any mention of it.

I made something like what i mean before with a couple other programs. Here is an example of what i mean

6 Likes
296

I use this:

https://github.com/CCOSTAN/Home-AssistantConfig/blob/master/floorplan.yaml#L7-L11

To get this:

1 Like
297

Thanks! Got it!

298

Hi there,

From what I understand, you’re thinking of a set of tabs within the floorplan state card? When I get some time, I will look into how that could be done.

As an alternative, I know at least one other person who has several floorplans in his setup, as he wanted to shows all 3 floors/areas of his house. He ended up creating a separate floorplan state card for each. Not sure if he put them within the same view group (i.e. tab) or whether they appear as separate tabs in HA.

1 Like
299

Yea I was hoping to for example click an empty area in my office from the overview and then get taken to a different view of just that room.

300

I’m using floorplan as a panel, not a state card, don’t know if that makes a difference. What I would like is the same structure as the states panel. I don’t know if you can reuse the tabs from the states panel?

Like this:

1920×951 75.5 KB

4 Likes
301

Did you find out why the line thickness was different? Mine is getting so thick lines, I can barely see my icons and stuff. Theyr’e just rendering like a big mess. When I open my svg directly this doesn’t happen.

302

It was something to do with scale vs line thinkness tags against the path in the svg xml.
I think that Inkscape and chrome don’t render svg the same.