Floorplan now available as a Lovelace card

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
image

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
captured (5)

I also have some background going on which is a bit more complex.

1 Like

Great work @geoff.wray!

I decided to create a 3D image and work with that.

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… :slight_smile:

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

Solved here https://github.com/Domy5/lovelace-floorplan/blob/4671db96677a47202c0e1bea530e6501165f5a63/www/floorplan/lib/yaml.min.js

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

Hi, i’m trying to use Floorplan Lovelace card, but I’m receiving an error:

9/02/2020 16:49:36 ERROR TypeError: Cannot add property svg, object is not extensible at http://192.168.50.21:8123/local/floorplan/lib/floorplan.js?v=1.1.8:90:27
log @ VM12632 floorplan.js:1681

my yaml:

config:
  image: /local/floorplan/apartamento.svg
  log_level: error
  debug: true
  rules:
    - entities:
        - cover.veneziana_roxo
        - cover.veneziana_casal
        - media_player.mini_1
        - switch.led_verde
      states:
        - class: binary-sensor-off
          state: 'off'
        - class: binary-sensor-on
          state: 'on'
  stylesheet: /local/floorplan/ap.css
title: Mapa Casa
type: 'custom:floorplan-card'

Could you help me?

Thank you Daniel

Wait for next release.

so, now I have to use source code from here:

or from here: