Floorplan now available as a Lovelace card

[Millerjord (Rune Millerjord)]

Hi,

I have some issues with this, and it is probably pretty basic. I am really new to this, so I do not really know how to troubleshoot. I have enabled logging, and that shows an issue (that is mentioned in this thread, but no responses)

My problem is as easy as that it will not show my SVG. I have even tried with the simple.svg, and it does not show up there either. I have made a, according to me, very good SVG in Inkscape of my florrplan. The only thing that shows up is the header, saying “Simple Floorplan”.

As mentioned, in the log I get an error on the yaml.min.js. Invalid escape sequence.

I do have an object in the SVG with the same ID as the binary_sensor. Anyone have any tips on how to troubleshoot?

Here is my lovelace-config

  - title: Floorplan
    path: floorplan
    panel: true
    icon: 'mdi:floor-plan'
    badges: []
    cards:
      - type: 'custom:floorplan-card'
        title: Simple Floorplan
        config:
          image: /local/floorplan/millers.svg?v=1.1.14
          stylesheet: /local/floorplan/millers.css?v=1.1.14
          log_level: debug
          debug: true
          rules:
            - entities:
                - binary_sensor.entredorr
              states:
                - class: binary-sensor-off
                  state: 'off'
                - class: binary-sensor-on
                  state: 'on'

[Millerjord (Rune Millerjord)]

An update;
I wrote this article, went for lunch, and when I got back it worked. Don’t really know what happened. My dog was home alone while I had lunch, he probably fixed it

Still get the invalid escape sequence error though

Now off to getting all things put together to get it useful.

[ThaNerd (Turbo Tronix)]

Haven’t tried this yet but curious to know if this works with multilevel homes, if so does anyone have an example?

[firstof9]

Sure does, I just do a side-by-side SVG.

Example:

[ThaNerd (Turbo Tronix)]

Nice! Is there a way to create a tab view, each tab a diff level? Cuz mine is a split-level house so might get crowded placing all levels in one view…

[firstof9]

You can hide/show layers of SVG to give it a “tabbed feel”.

[criskolkman (Cris)]

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?

[criskolkman (Cris)]

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

[geoff.wray (TerribleCoder)]

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

[geoff.wray (TerribleCoder)]

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.

[criskolkman (Cris)]

Great work @geoff.wray!

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

3D Floorplan using lovelace picture-elements card

@fahr, Thank you for your help/explaination! I’ve come up with below results, not the most beautiful work but it’ll do for now. Lights off: [image] Livingroom, bar, garage and front door on: [image]

[_Raz]

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

[Michael_Azzopardi]

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 ?

[bartplessers]

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:

Lovelace: Simple thermostat schedule

[Thermostat] Hi everyone, I’m looking for an easy way to schedule my thermostatic radiator valves. Fiddling around, I can’t find a wife-proof interface. However, setting my first steps in lovelace, I came to Although this is about showing a floorplan, the basic idea is that you can add a graphic layer (SVG), add actions to it, and show states. With this in mind, I think it should be possible to create a SVG-grid as shown above: for every hour and day a small button create …

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

[bartplessers]

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

[oneteam]

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%

[sven1 (Sven)]

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

[augustjanse]

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.

[d4v3d (Dave)]

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!

[Norbsen]

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!