Floorplan for Home Assistant

Third party integrations Floorplan
1213

I have a very tall floorplan, width is 1080px and height is 4500px. I’m trying to get it to take up the width of the page, and allow me to scroll down the page to see the rest. I’m using it on a phone, as a custom panel. How can I get it to display in it’s native size without it being auto resized by the height of the page? I’ve been playing with the css for hours and I’ve gotten nowhere.

And how do I get floorplan to stop replacing my text, for lights it’s changing my text in the svg from kitchen to on or off. I have it set to change the text color to show if the light is on or off, I don’t want it to change the text at all.

1214

text_template: '${(entity.state === "armed_away") ? "Armed away" : "Disarmed"}'

I want to make floorplan a little nicer for eyes, but I have no idea how to make it work. This line only works for Armed away, but anything else is Disarmed, even armed_home or pending. :blush:

I just want to rename 4 state texts to something else (to my native language, but I use english here for easy understand).
armed_away -> Armed away
armed_home -> Armed home
disarmed -> Disarmed
pending -> Pending

Since I’m not an expert I can’t find out what is the correct syntax for floorplan, and couldn’t find good templates in google. Can someone help me in this?

1215

Since I’m not the only one with issues using floorplan on mobile/touch devices while pan_zoom is enabled, I’ve created a fix. I’m not a web dev by trade, so it’s really just thrown together. This was a huge barrier to using floorplan in my case, so I had to try something.

I’ve created a pull request for the fix that I threw together here: https://github.com/pkozul/ha-floorplan/pull/59

I haven’t found (yet) any issues with my fix, but I give no warranties. If anyone wants to make the changes manually, it’s fairly simple–just copy the changes from the pull request. The change to svg-pan-zoom can be safely ignored.

As a bonus, the fix also adds pinch to zoom support for touch devices.

2 Likes
1216

@Bottesford How did you resolve the issue in your earlier post of being able to see both the rectangle and the image that the image_template added at the same time. The image_template is obviously working in my case becasue it’s adding the image but my original rectangle is still there as well. All rectangles are at the root level of the svg tag also.

Capture

1217

Have you got it working? Yes, it could be the way it’s drawn. If it’s inside a group in the svg file it may not be clickable. Yes, if you have done anything wrong i the floorplan.yaml it also could make errors. But I can’t access your link to check your github repository.

1218
1219

If you don’t use the full with of your screen, you can try with changing the percent view in floorplan.html ( change to ex 200 %):

<link rel="import" href="/local/custom_ui/floorplan/ha-floorplan.html" async>

<dom-module id="ha-panel-floorplan">

  <template>
    <style include="ha-style">
      .container-fullscreen {
        height: calc(100%);
        vertical-align: top;
        position: relative;
      }

But if you use the full with, the picture won’t get bigger.

1220

Great work! It worked perfectly :grinning:

1221

I apply a css class to it which sets the stroke to none. So for example for showing the status of a room with an image I add the empty rectangle and then set hide the rectangle and show the image like this:

name: Room occupation state icon
entities:
  - input_select.room_occupation_smallbathroom
  - input_select.room_occupation_livingroom
  - input_select.room_occupation_kitchen
  - input_select.room_occupation_backhall
  - input_select.room_occupation_bedroom
  - input_select.room_occupation_babyroom
  - input_select.room_occupation_bathroom
class_template:  return "placeholder_no_stroke";
image_template: 'return "/local/custom_ui/floorplan/images/room_occupation/" + entity.state + ".svg";'

Then in my floorplan.css:

.placeholder_no_stroke {
  stroke: none !important;
}
1222

Floorplan noob here. This is a fantastic extension but I’m having a couple of issues with configuration. Upgrading to a newer version of Floorplan resolves some of them but upgrading to the latest version breaks my configuration. What is the latest version I should be using for vanilla Floorplan? In the main Github repository, it’s 1.0.6 but I’m on 1.0.7.4 and most things are working (I think I’ve seen a 1.0.7.5 discussed in this forum and will try that next). In the quick-start and fully kiosk repositories, it’s 1.0.7.51 but upgrading to that seems to break my configuration (I get a blank page). Thanks in advance!

1223

@Bottesford Ah, thank you! That is the missing link, I didn’t realize that the rectangle didn’t get replaced but it is easy enough to modify with the css so you don’t see it.

1224

Hi all,

I just started on floorplan and did some animation on door opening which is kinda cool. Is there a way to do for window? I only manage to open one side of the window as 1 ID can only be used on 1 object. Grouping doesnt work since I want the window to have 2 different animation (i.e 1 rotate clockwise and the other counter clockwise). Can anyone teach me on how I can use 1 sensor to trigger 2 different animation on 2 objects?

2 Likes
1225

Really excited by the possibilities, started sketching our floor plan, worried I’m going to go a little crazy with having the plan make me want to add extra sensors for doors and windows that I wasn’t planning on having originally. We’re installing a Sense electrical meter and a Flō water meter both are, in theory able to detect specific points of use (appliances, water fixtures) by their usage signature. Curious how/if i should try to represent active points of use like that in the house.

48%20AM
48%20AM1350×1138 127 KB

2 Likes
1226

Oh! I like the idea of showing the exterior for our Solar, and local weather station detailed data, nice!

1228

so for someone who dont understood how to change background color how do i change that to black?

1229

Accidentally asked this in the ‘Show your floor plan’ thread:

  1. Does anyone know how to turn a Chromecast TV off via floorplan, and if it’s playing something, maybe display something relevant to the content on the floor plan?

I tried using service: toggle and that can turn the TV on, but clicking it again makes it idle instead of powering the TV off.

Also I’d love it if the TV image instantly changed when I click it, but since that only powers the TV on and keeps it in the ‘off’ state, the CSS for idle/paused/playing doesn’t activate until I actually start casting a video.

  1. Has anyone managed to change Floorplan elements based on things like time of day and weather? I’d like to dynamically change the background of my floor plan.
1230

I upgraded to the latest version of HASS and it seems like my animations have stopped working for my lights. I can still click on the icons to toggle the lights but the colour doesn’t change anymore. It worked before the update and I haven’t changed anything. Are there any breaking changes to be aware of?

Also, I can have the floorplan background change with the active theme using:

svg, svg * {
  pointer-events: all !important;
  background-color: var(--primary-background-color);
}

But when I try to set a specific background colour, it doesn’t work and shows the default white, any ideas?

svg, svg * {
  pointer-events: all !important;
  background-color: var(–variable-name, #37464f);
}
1231

I tray to change colors of some object depending on outside temperature.

I try like this, but not working:
- name: fp_temperature_oudside_front_changing_colors
entities:
- sensor.433_temperature_01_temperature
states:
- state: ‘< 18’
class: ‘green’
- state: ‘< 30’
class: ‘red’

1232

Which program did you use for the layout? I like the light effects how you do that?

1233

Check this post:

2 Likes