so, I don’t have to install also ha-floorplan?
why I have this error in lovelace:
Error: Custom element not found: floorplan-card
???
Just use Floorplan now available as a Lovelace card, but not both.
Just updated to 0.107.6 version no errors or problems.
You know why I have this error in lovelace:
Error: Custom element not found: floorplan-card
?
Add the resource at the beginning of the ui file.
Read the info at the github page…
hi I have question
I have my thermostat in my floorplan
I would like to add dynamic icon to change with the heat level
climate.neviweb_climate_chambre_1:
templates:
entity_picture: ‘if (attributes.heat_level < 1) return ‘’/local/heat-0.png’’;
if (attributes.heat_level < 21) return ‘’/local/heat-1.png’’; if (attributes.heat_level
< 41) return ‘’/local/heat-2.png’’; if (attributes.heat_level < 61) return ‘’/local/heat-3.png’’;
if (attributes.heat_level < 81) return ‘’/local/heat-4.png’’; return ‘’/local/heat-5.png’’;
'
can you add me to add in my config?
hey! does anyone have a link to a more recent explanation for zoom options to the SVG file? i found this old coment Floorplan for Home Assistant from Petar but cant get it to work, so im thinking its only working on the old setup? i added the pan_zoom: in the ui but it just makes the floorplan not showup at all
Many thanks again for helping you all! i’m really starting to like this system 
Hello everyone,
I just want to know what is the difference between this card and picture element ?
Thank you
Night and day…
Picture elements allows you to place icons at relative locations. This allows you to place anything you want at any absolute location. Go look at the examples linked from here and the GitHub 
There is no way I could do this with the Picture Elements card - I know because I spent days trying to get something half as nice.
1 Like
I would also love to know this. I would like to be able to click an element and navigate to another tab of my lovelace interface. For example, click my thermostat and it takes me to a page i have setup with my custom thermostat cards.
Unfortunately, no one could direct me to the right way yet…
Hi my name is Jovan and I’m 18. So I’m quite new when it comes to the Home Assistant and Floorplan in general.
This is the idea I have for the layout, which i made in Inkscape and I want it to work this way:
The buttons on left are supposed to control which controls are available on display. So when the first one is clicked, bulbs appear, and when the next one is clicked, bulbs disappear and temperature is shown.
Now the question is, do I have to make an SVG file in Inkscape for every single option here and then just manage to toggle between them somehow or can i just slam all the icons on the same place over each other and just control later when they are active and when not?
Thank you all for having the patience, and I hope to get some response.
1 Like
I had this working back in version 9X something. My SD card died and I had to reistall. I had a copy of most of the config. I had my configuration file and the floorplan folder. So I have restored it all.
My SVG and CSS files are restored. and my “Edit Raw Configuration” in lovelace looks like this:
resources:
- type: module
url: /local/floorplan/floorplan-card.js?v=1.1.14
views:
- cards:
- config:
image: /local/floorplan/floorplan.svg?v=1.1.14
rules:
- action:
domain: homeassistant
rules: null
service: switch.toggle
entities:
- switch.icy_studio_desk
- switch.icy_studio_lights
- light.front_door
- binary_sensor.pir_sensor
states:
- class: binary-sensor-off
state: 'off'
- class: binary-sensor-on
state: 'on'
- action:
domain: homeassistant
service: switch.toggle
entities:
- switch.tv
states:
- class: tv-off
state: 'off'
- class: tv-on
state: 'on'
stylesheet: /local/floorplan/floorplan.css?v=1.1.14
title: Home Floorplan
type: 'custom:floorplan-card'
icon: 'mdi:floor-plan'
id: system
title: FLoorplan
panel: false
but this is all I get now.
Hi, I have and question about using the css format. I would like to adjust the color of an element when a lamp comes on. The element is also connected to another sensor and already set with css. When the PIR state changes to on, the element color changes, but I also want the same element to change color when the lamp is turned on. can i give a object in the SVG file more then 1 ID? It did not work, but was like this:
id="binary_sensor.pir_luuk", "light.gateway_light_7811dcfaed8e"
inkscape:label="binary_sensor.pir_luuk"
transform="translate(125.94167,43.391667)">
<title
id="title100335">tafels hoog midden </title>"
This is mij ui config:
rules:
- action:
service: homeassistant.toggle
element: light.double_transpirant
entity: light.gateway_light_7811dcfaed8e
more_info: false
- entities:
- binary_sensor.pir_luuk
- light.gateway_light_7811dcfaed8e
more_info: false
states:
- class: binary-sensor-off
state: 'off'
- class: binary-sensor-on
state: 'on'
- class: .light-gateway-off
state: 'off'
- class: .light-gateway-on
state: 'on'
hope any of you have any tips! I can’t figure it out with a lot of google… many tnx!
Hi, I am new to HASS. I am trying to get the simple example up and running. But, on step 3, add to Lovelace, I am unsure of where I put the card config? If I go to the Lovelace UI and paste the code into a manual card, I get an “undefined is not an object (evaluating ‘this._configElement.setConfig’)” error in the card configuration.
I have been through the same issue when I upgraded to 0.106.
There were several posts referencing the change
I tried to follow the link above but have up and just replaced all of the configuration files with latest GitHub version.
Obviously you need to add your own images, CSS and UI code again but that’s easy if you have then saved
Hi! I’m working hard on my UI, using the picture element card to be able to show my FP.
is there any way to add on top a calendar card and a weather card?
thanks
Hello,
I managed to do it for my roller shutters but it is an ‘active’ element I don’t know if it can work with just the state information. I try to explain
-
in the svg make for example a square and give it a name, for example solarium.heatlevel
-
in the configuration :
element: your svg name ex solarium.heatlevel entity: the entity with your data ex climate.solarium image_template: >- var heatlevelstate = entity.attributes.name of the attribute; if (heatlevelstate < xx) return '/local/heat-1.png’; # you must specify the exact address of the directory else if (heatlevelstate < xx) return '/local/yourpng'; else return '/local/yourpng'; # for the last case
heatlevelstate is a exemple, you can choose another name.
I hope this will help you and my apologies for my bad english
Hey guys, I had the old floorplan on my setup but recently was trying again but its proving difficult.
I followed the guide lovelace-floorplan
Added the resource as a JavaScript Module.
tried a lovelace card config which works partly. The card keeps on loading. How can i try replicate the “simple” example so i can continue building on and edit to my plans. Thanks
config:
image: /local/floorplan/examples/simple/simple.svg?v=1.1.14
rules:
- entities:
- light.sarvesh_room
states:
- class: binary-sensor-off
state: 'off'
- class: binary-sensor-on
state: 'on'
stylesheet: /local/floorplan/examples/simple/simple.css?v=1.1.14
title: Simple Floorplan
type: 'custom:floorplan-card'
icon: 'mdi:floor-plan'
id: system
1 Like
Hi there.
Went thru your tutorial step by step but I do not get anything displaying.
I can see the entities and their changing states but no floorplan image…
Still kinda wish this were built-in.