Floorplan for Home Assistant

Third party integrations Floorplan
832

I am attempting to add a flashing/blinking icon to my floorplan that would represent that a door is open. I am capturing the sensor on the door in my floorplan and have added the logic to the floorplan.css and floorplan.yaml files but I am unable to get the actually flashing/blinking to occur. I actually tried to mimic the setup of @PhyberApex however unfortunately it’s not working. Anyone have any ideas based on the setup below or see anything incorrect ?

This is the icon I would like to blink if the door is open
image

floorplan.css:

@keyframes flash {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.flash-on {
  stroke: #ff0000 !important;
  -webkit-animation-duration: 4s;
  -webkit-animation-name: flash;
  -webkit-animation-iteration-count: infinite;
}

.flash-off {
  stroke: #778899 !important;
}

floorplan.yaml:

  • name: DoorSensors
    entities:
    - binary_sensor.visonic_mct340_e_0b02b0b0_1
    - binary_sensor.visonic_mct340_e_0b239ff0_1
    states:
    - state: ‘on’
    - class: ‘flash-on’
    - state: ‘off’
    - class: ‘flash-off’
833

You can use the dev tools in your browser to check wether the css classes get changed or not. That would be the first step. If this works then try to get the animation working in your browser in a jsfiddle.

~Cheers

834

hide_app_toolbar: is not working for me on any browser or device, anyone else have this problem?

835

For static text to display, choose Path and then Object to Path:
image

To convert flows to text for home assistant to interact with (temp, humidity, etc.) Choose Text and then Convert to Text:
image

Those took me a while to figure out but made all the difference.

836

Everything is displaying correctly and interactable.

Here is my SVG

Screenshot (8)
Screenshot (8)1026×297 28 KB

The buttons on the right are on a layer called “buttons” which is the topmost layer. Under that is a layer called “weather_layer” which has all the weather related text and icons on the left. That layer should be invisible when started up and toggle on and off when the Weather button on the right is clicked. Everything else is on the bottom layer called background. Here is what it looks like in Chrome. I tried to take the screenshot showing the mouse turning into a pointer finger when hovering over the weather button, but mouse is removed from screenshots so you’ll just have to take my word on that :smile:

Screenshot (9)
Screenshot (9)1259×417 32.8 KB

As you can see, all of the sensor data is displayed correctly. It’s just visibility of that layer that is the issue.

2 Likes
837

Hi, I’m stumped on a error I’m receiving trying to get Floorplan showing as a custom panel. I am trying get to get a default 1.0.5 version to display however I only get a spinning icon and the below error. Any thoughts on what the issue could be? Thanks.

In Chrome the error is:
Uncaught TypeError: Cannot read property ‘socket’ of undefined
URL: http://hass:8123/local/custom_ui/floorplan/ha-floorplan.html
Line: 151, column: 27

In Firefox the error is similar:
TypeError: this.hass.connection is undefined

838

Hi, all
Can anyone help me out?
my homeassistant does not show any sidebar or state card. Attached screen shot.

58
581626×1184 85.8 KB

I have clone the ha-floorplan and attached is my file tree!
and my configuration file looks like this! Cannot find out where the problem is. Thanks in advance.
Only one pic is allowed I’ll try to attach the file tree and configuration flie

839

there is the file tree

05
051136×496 77.5 KB

840

No way to help you with just screenshots. But by the looks of it you just copied the ha-floorplan next to your config…that of course does not work. Read the manual in the repo.

~Cheers

841

Thanks for reply.
I tried to go through the readme. added texts in configuration.yaml. Do I need to move those file out of the folder? Have no clew where those files need to go.
Again thanks a lot.

842

Basically those files need to go directly into your config folder. So the stuff from ~/.homeassistant/ha-floorplan needs to go into ~/.homeassistant but you should not copy OVER your already existing files!!! Instead you should take a look into the configuration.yaml and panel_custom.yaml etc. and copy the content over by making appropriate changes.

~Cheers

1 Like
843

Thanks for reply and thanks for being so fast!
I dont have those .yaml files but the configuration.yaml which I have copied the content over. I’ll try to move files in /ha-floorplan/ out. One more question: www/custom_ui/floorplan/lib/jquery-3.2.1.min.js
is this file go under /.homeassistant/lib ? or under /.homeassistant/floorplan/lib?

844

You have to keep the complete file tree intact for this to work. So www/custom_ui/floorplan/lib/jquery-3.2.1.min.js goes under .homeassistant/ www/custom_ui/floorplan/lib/jquery-3.2.1.min.js but this goes for all files and folders. The binary_sensors are just examples iirc. Whats important is the panels folder, the www folder, the floorplan.yaml and the stuff out of the configuration.yaml.

~Cheers

1 Like
845

Thanks a lot for both patient and replying fast!
I’ll try it later tonight.

1 Like
846

Hi, Phyber,
Thanks! I have worked it out

1 Like
847

Thanks for reporting back.

2 Likes
849

Hi, just wanted to follow up on a prior post to see if anyone had any thoughts on why the weather image is not staying within the boundaries of the rectangular box? I’ve tried a number of things but can’t seem to get it to go in the box. My setup is similar to what was shown and I have even compared it across other examples, very odd.

image

850

Did you try to display only that svg in your browser? Does it get displaced as well there?

~Cheers

851

Not sure what you mean by displaced in the browser. I can display it in a browser page. Do I need to do something specific when displaying it to see if it is displaced?

852

Nah just see if it gets placed in the top left corner or if it has some invisible space above the icon or something.

~Cheers