You can hide/show layers of SVG to give it a “tabbed feel”.
1 Like
Hello all,
Hope someone can help me out here.
I’m tying to implement floorplan in my Lovelace (using these instructions https://github.com/pkozul/lovelace-floorplan).
First I created the floorplan in Sweet Home 3D and imported the created svg into Inkscape.
In Inkscape I added a bulb (green arrow) just to try it all out.
But as soon as I connect a real entity in the Lovelace yaml file, the lamp will go to the upper left corner and much smaller size (red arrow).
Anyone has an idea why this is happening?
So I found out that this is being caused by the line image_template: '/local/floorplan/examples/simple/light_${entity.state}.svg'
As soon as I comment that line out the lamps are staying in their places, but the other images (on/off) are not being used (obviously).
Now I need to find a way to fix this 
You can create as many tabs as you like in the Lovelace front end. Nothing to stop you using multiple floor plan Configs in separate Lovelace tabs. You’ll get a lot more screen space that way rather than side by side drawings or creating layers within an svg
Yes. I had the same problem. Do not use the image supplied in the guide! for some reason when you use another image it is not anchored to the same position as the original. may be an inkscape problem rather than your code.
I got around this by download another image and changing the colour using CSS states.
I used a bulb from noun project, modified the colours etc to show it in its ‘On’ state then used the ‘off’ state to show it as a black outline
UI code looks like this
- action:
service: homeassistant.toggle
entities:
- switch.bedroom_light
- switch.toy_room_light
- switch.kitchen_main
- switch.living_area_light
- switch.lounge_light
- switch.dining_area_light
more_info: false
states:
- class: switch-on
state: 'on'
- class: switch-off
state: 'off'
CSS looks like this
/* Switches */
.switch-on {
transition: fill 1s ease;
}
.switch-off {
fill: #000000 !important;
stroke: #000000 !important;
stroke-opacity: 0.1 !important;
transition: fill 1s ease;
}
final light looks like this
I also have some background going on which is a bit more complex.
1 Like
i was having the same issue, i change the resources section to the following:
i know see my floorplan load successfully.
resources:
- url: /local/floorplan/floorplan-card.js?v=1.1.14
type: js
1 Like
Managed to install and configure the Floorplan on the side panel.
Everything works fine. However, I can’t figure out what I need to do to add it as card in a view to show it as a panel.
What entry needs to be added to the lovelace frontend ?
Hi Petar,
Based on your simple example, you have inspired me to use an SVG-grid to create a simple interface for sheduling a thermostat.
It’s all very new for me, so maybe I’m stretching this a little bit to far…
Maybe you can take a quick look at my post:
I can spend some time to implement (and share) it myself, no problem, but I just want to know if this can be done. Otherwise I have to send my TRV’s back because it’s to complicated to create a shedule on the valve itself.
Many thanks in advance,
Kind regards,
Bart
OK, creating the SVG wasn’t that hard: I created a number of blocks in Visio and exported it as SVG…
Than:
I changed the ID of my shapes to something logic
The ID is a “time format”:
0100 = day 1, hour 00 (monday, 00:00)
0101 = day 1, hour 01 (monday, 01:00)
…
0723 = day 7, hour 23 (sunday, 23:00)
(I used a 2-digit day format so it can be used for 2 week schedules also)
Further, in my lovelace::
- title: THERMOSTAT
path: thermostat
badges: []
cards:
- config:
image: /local/floorplan/examples/thermostat/schedule-week.svg
log_level: error
rules:
- action:
service: homeassistant.toggle
element: shape-0100
entities:
- light.double_garage
- action:
service: homeassistant.toggle
element: shape-0101
entities:
- light.double_garage
stylesheet: /local/floorplan/examples/thermostat/schedule-week.css
svg: {}
title: Simple Week Schedule
type: 'custom:floorplan-card'
icon: 'mdi:thermometer-lines'
id: system2
I can now turn on/of my light.double_garage by clicking the squares (.at least shape-0100 and shape-0101)
At least this is a start.
Am I on a good track? Or are there better ways…?
kind regards,
Bart
Sorry if I missed it but I would have liked to know if there is a way to switch directly to the appropriate floor if there are multiple floors.
Currently I use the attached toggle code. But with this I can only switch one floor after the other.
- type: service-button
title: Erdgeschoss
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: "#eaeaea"
border-radius: 5%
Did sombody experience the problem that after adding the yaml config for the floorplan-card the ConfigRawEditor of Lovelace couldn’t be open anymore due an YAMLException for the SVGElement?
I described the problem in more detail here: https://github.com/pkozul/lovelace-floorplan/issues/19
Is there any way to match multiple elements? I have 40 of these for my remote:
- entity: remote.broadlink
element: power
action:
- service: remote.send_command
data:
entity_id: remote.broadlink
device: television
command: power
If element could match each element with a certain class or something I could use a template for data and would only need one rule.
I am using icons from http://materialdesignicons.com/ but I am having an issue where only the outline is clickable. For example, my light off icon is “lightbulb-outline” and I can only click on the outlined part of the icon for it to work. The center of the image does nothing.
How can I have the entire area of the icon be clickable?
Thanks!
Hi there,
I have a problem with my UI setup: I use the custom:floorplan-card to integrate an SVG-file with some nice effects, etc. into lovelace. This works all very well without issues. However, when navigating on the left menu to another page in HA (e.g., from lovelace to profile or from supervisor to community) to whole web page gets stuck. Also reloading does not work. The browser needs to “stop the webpage” because it hangs.
When then loading from scratch the webpage gets loaded without a problem, but again navigating to another page gets the browser stuck. This could be verified with firefox, chrome (desktop) and fully kiosk (pad). When removing the floorplan card from lovelace, the problem goes away.
Any ideas or suggestion in which direction I can nail down the problem and fix it? Thanks!
With this new update (0.106) I’m no more able to see my Floorplan.
Checking the log i found this error:
https://xxxxxxxx.duckdns.org:8123/local/floorplan/lib/yaml.min.js:1:1479 Uncaught SyntaxError: Invalid or unexpected token
16:12:33 – components/system_log/__init__.py (ERROR) - il messaggio si è verificato per la prima volta alle 13:49:28 e compare 19 volte
any idea to solve it?
1 Like
But Floorplan not loading.
It has been failing for me since the upgrade to 0.106.0
On chrome it outputs:
“28/02/2020, 13:18:32 ERROR TypeError: Cannot assign to read only property ‘svg’ of object ‘#’ at https://xxxx.com/local/floorplan/lib/floorplan.js?v=1.1.8:90:27”
On firefox it outputs:
“Error initSinglePage/<@https://xxxxxx.com/local/floorplan/lib/floorplan.js?v=1.1.8:90:11”
This line is:
this.config.svg = svg;
Not sure why that is read-only
Issue report here and quick patch to get everything back up and running.
1 Like
Hi all,
I’ve been working on a new improved version that no longer requires the lib folder. In other words, the complete floorplan library is all in just one single file. It runs as both a Lovelace card as well as a regular HA panel.
A few people are testing it out, and so far, all signs are good.
Stay tuned over the next few days as I will be releasing the new version.
Cheers,
Petar
4 Likes