Hi!
I make some floorplan but i dont know how to make mono stable switch in it? What exacly i want to do is"
when button is pressed and hold the binary state should set state on but when i release button binary should go back to off state". Any ideas? Hold action did not work.
Are covers supported or handled differently from other kinds of entities (i.e. lights, sensor and switches)? I’m having trouble getting the status to show and the actions to work. I’ve searched the forum and Github for issues related to covers but only found 1 use. My lights and sensors work fine.
Here’s my relevant config:
rules:
- entities:
- binary_sensor.lhs_garage_occupied
states:
- state: 'on'
class: 'binary-sensor-on'
- state: 'off'
class: 'binary-sensor-off'
- action:
service: cover.toggle
element: cover.lhs_garage_door
entity: cover.lhs_garage_door
states:
- state: 'open'
class: 'cover-open'
- state: 'closed'
class: 'cover-closed'
- action:
service: light.toggle
element: light.living_room_lamp
entity: light.living_room_lamp
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
Here’s my full CSS:
#floorplan {
padding: 10px;
}
svg, svg * {
pointer-events: all !important;
background-color: var(--primary-background-color);
}
svg tspan {
fill: var(--primary-text-color);
}
.ha-entity:hover {
/* home assistant theme blue */
stroke: #03A9F4 !important;
stroke-width: 1px !important;
stroke-opacity: 1 !important;
}
.light-on {
/* yellow */
fill: #F9D27C !important;
}
.light-off {
/* grey */
fill: #A3A3A3 !important;
}
.cover-open {
/* yellow */
fill: #F9D27C !important;
}
.cover-closed {
/* grey */
fill: #A3A3A3 !important;
}
.binary-sensor-on {
/* yellow */
fill: #F9D27C !important;
}
.binary-sensor-off {
/* grey */
fill: #A3A3A3 !important;
transition: fill 5s ease;
}
Also, is there a size limit on the SVG to render properly? I know my SVG contains many elements (it’s a large floorplan of about 8MB). This might be specific to the iOS companion app but my floorplan doesn’t render at all. In the browser, it takes quite long to load (not sure if it gets cached).
Last thing first. The slow load could be the 8MB size. My biggest one is 4.3MB and it works OK most of the time. Sometimes the initial load is a bit slow. Trying making any embedded elements smaller?
As for your covers I am not 100% sure but I think you have an indenting problem with the service line and I don’t know if you need the element line so can you try this:
- action:
service: cover.toggle
entity: cover.lhs_garage_door
states:
- state: 'open'
class: 'cover-open'
- state: 'closed'
class: 'cover-closed'
- action:
service: light.toggle
entity: light.living_room_lamp
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'Thanks for the feedback.
Last thing first. The slow load could be the 8MB size. My biggest one is 4.3MB and it works OK most of the time. Sometimes the initial load is a bit slow. Trying making any embedded elements smaller?
It only contains SVG elements and no pictures encoded as base64/embedded images. I’ll see if I can reduce the number of elements. It’s probably all the grass and brick paths when I drew the garden.
As for your covers I am not 100% sure but I think you have an indenting problem with the service line and I don’t know if you need the element line so can you try this:
You’re right. It was me being silly though. When I pasted my config I saw the indentations and thought I made some copy & paste mistake so “corrected” it without checking the source. It is actually indented in my full config.
I’ve done some more debugging: No errors in my logs and no console errors (UI). But, I simply added a rectangle to my SVG and that works fine with the cover in terms of toggling it (i.e. the actions work). It doesn’t apply the CSS for the state though. I need to check whether it uses on and off for the states.
So that means that there’s something odd in my SVG looking at my elements that represents the cover. Perhaps it’s the z-order or some fill issue. I need to dig deeper.
UPDATE: I have no idea how to explain this but after setting the device_class on my covers (stroke of luck to actually solve another issue where HomeKit wasn’t showing the right icon) this started working.
Hi all,
I’ve pushed a major PR to the main repo, and released version 1.0. It’s almost ready for HACS - but you are already able to use it, by adding it as a custom repo in HACS.
Let me know if you’re facing any issues. And oh, take a look at the readme. There’s a few new options too, including long_click 
A rewrite/new version including dedicated docs are also in scope, but there’s no deadline.
Happy floorplanning 
And oh. If someone would like to create a logo for the solution, fell free to send suggestions. I can do a few things, too - but there must be some great logo-designers in this thread 
!
Update: New link, for existing repo (but moved).
8 Likes
HI all,
As Tobias (exetico) said, we’re working on a new version of Floorplan, which we hope to release in the coming days. Big shout out to Tobias who has made a big contribution to the project and his motivation to progress Floorplan to the next level.
Some of the highlights in the new version:
- Developed in TypeScript (much less chance of coding errors!!!)
- Can be installed via HACS
- Entire Floorplan component in a single 90 KB file (no more external libraries, such as jQuery)
- Performance improvements (much faster loading / rendering)
- Can be used as a Lovelace card, or as a HA custom panel
- Support for long clicks / presses (thanks Tobias!!!)
- and more to come…
Stay tuned for more info coming soon…
Cheers,
Petar
9 Likes
Hey,
first of all big thx for your work to make it work!
I was using the Floorplan as a custom HA Panel and pimped it with a multi page functionality which hides specific layers on click (basement, ground floor, 1st level).
Can you tell if that is considered in your implementation aswell?
Best Dominik
1 Like
A pre-release are ready for people who like to test the new TypeScript based version.
Almost ALL credit should go to @pkozul 
There’s lots of great things.
We’re still working on a few things to be ready for the public. Read the release notes, and let us know what you guys think.
This is a pre release. So be prepared for changes - but maybe not that groundbreaking things!
Please share feedback here. If you can’t get it to work kindly wait a few days, for the last details to be added.
But in short:
Change action to on_click. There’s also a on_long_click. More details will be added to the docs, hopefully in a few days!
3 Likes
Is somehow possible to navigate to another lovelace tab after click?
I have icon displaying some problem with some entity (e.g. low battery), i am able to hide or display this warning icon but when i am trying anything im not able to navigate to tab when is list of entities with problems.
What kind of information, do you need?
Are you sure, it’s the best solution, to jump to another lovelace-tab? What about just showing the entities in a popup, or something like that?
I’m trying to understand what the actual need is - but that’s a bit hard without any visuals. I’m 99,2% sure that browser_mod can do that kind of thing 
(Both a popup, switch to another tab, and more)
I have icons to show that there is low battery sensor or disconected sensor. (not yes finished icon and placement
code:
- entities:
- sensor.low_battery_sensors
- sensor.unavailable_sensors
class_template: '
var count = parseFloat(entity.state);
if (count > 0){
return "problem-warning";
}else{
return "problem-ok";
}
'
and i have tab with information about these sensors. There will be information about battery and last time connected, not current information
of course tab has path e.g. “/lovelace/problems”
and i want to navigate from both icons to this tab. So i need to help with “action” part of that code.
Hi there,
In our new version, there is service that allows for navigating to another Web page (i.e. Lovelace tab). Below is what your rule will look like in the new format:
- entities:
- sensor.low_battery_sensors
- sensor.unavailable_sensors
on_state:
service: floorplan.class_set
data: '>
var count = parseFloat(entity.state);
if (count > 0) {
return "problem-warning";
} else {
return "problem-ok";
}
'
on_click:
service: floorplan.window_navigate
data: /lovelace/problems
Stay tuned, as Tobias and I are now in the final stages, that is, preparing the documentation Web site for the project.
Cheers,
Petar
2 Likes
First at all, thanks for your work!
I wanted to know, does someone know how to fit the floorplan to the screen without scrolls bars fitting the tall of the screen? I mean, when I’m checking the floorplan in a width screen this is the result:
However, when my screen is in higth mode looks like:
This second scenario would be the desired one, I mean, it would always fit at the tall rather than the width.
Thanks
The only way I can think of is for you to make your floorplan image wider by putting blank space around it. This will force the image to be scaled down and this would then result in the full height to be visible. You could also change your layout so the image isn’t that tall by moving your clock and the items on the left to all be on the same side and then have them beside your image instead of slightly above?
1 Like
Thanks for the suggestion but I would prefer, if it is possible, to find the solution where the image resizes automatically depending on the tall of the browser instead the wide. But thanks for helping.
Another good thing will be to be able to shown as custom panel in the left sidebar but I think this is already planned and it will be released soon as mentioned some time ago by pkozul in this threat.
HI there,
As a Lovelace card, I’m not sure if it’s possible for Floorplan to scale so that it always remains at full height of the visible card size.
As a panel, yes it’s possible. Below is an example of my Floorplan custom panel. The image is always resized so that it’s at full height of the page.
The new version does this automatically.
1 Like
I take that back!
The new version now supports ‘full height’ even as a Lovelace card. Below is an example:
1 Like
Is the new version already available? Looking forward to it 
Thanks!
Hi Oscar
Yes, you’re welcome to checkout the pre-release version 
We’re not ready “for the public”, but give it a try, if you like. The only real thing “waiting”, are the docs. The codebase itself, can be used with no issues
However, a few things has been changed, so please remember to swap out “action” with “on_click”
Docs are not ready(!), but can be found here (check the examples):
Update Actually, you can just add it through HACS now. It’s the best way to do it. Just add the repo (https://github.com/ExperienceLovelace/ha-floorplan as Lovelace), and install it.
1 Like
Hello @pkozul !
I was able to install and test your simple test, but as soon I’m trying my own test I have a strange behaviour. I.e. I’ve created a simple SVG with a circle in the middle. Then I’ve added a bulb (off) in the middle and named it with id “light.dimmer_switch_15” which is my light. Then saved and uploaded the background svg, and the two lightbulbs on and off. Strange is, as soon the card is loaded, the lightbulb is not in the middle of the map, but instead in the top left corner. The bulb works, it turns on and off the light and changes its state (from svg on to svg off), but still remains in the top left corner.
What I’m missing?
Thanks!!
Simon