Floorplan now available as a Lovelace card

Third party integrations Floorplan
143

H,
on HASSIO 0.107 I’m trying to add example to Lovelace interface:

type: 'entities'
cards:
  - config:
      image: /local/floorplan/examples/simple/simple.svg?v=1.1.14
      rules:
        - entities:
            - binary_sensor.main_bedroom
            - binary_sensor.living_area
            - binary_sensor.double_garage
          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
title: Floorplan

but I receive this error:

Expected a value of type undefined for cards but received [{"config":{"image":"/local/floorplan/examples/simple/simple.svg?v=1.1.14","rules":[{"entities":["binary_sensor.main_bedroom","binary_sensor.living_area","binary_sensor.double_garage"],"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"}].

Entities need to be an array

Any suggestions?

144

now, I have this error:

Error: Custom element not found: floorplan-card

145

are you in HASSIO 0.107 I have to install only this:

and not this:

??? there is some bug in 0.107.5 version?

146

With lovelace-floorplan on 0.107.5 version no errors or problems.

147

so, I don’t have to install also ha-floorplan?

why I have this error in lovelace:

Error: Custom element not found: floorplan-card

???

148

Just use Floorplan now available as a Lovelace card, but not both.
Just updated to 0.107.6 version no errors or problems.

149

You know why I have this error in lovelace:

Error: Custom element not found: floorplan-card

?

150

Add the resource at the beginning of the ui file.
Read the info at the github page…

151

hi I have question

I have my thermostat in my floorplan
image

I would like to add dynamic icon to change with the heat level
image

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?

152

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 :smiley:

153

Hello everyone,

I just want to know what is the difference between this card and picture element ?

Thank you

154

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 :wink:

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
156

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.

157

Unfortunately, no one could direct me to the right way yet…

158

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.

Floorplan
Floorplan1920×1200 293 KB

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
159

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.

image
image513×639 3.15 KB

160

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!

162

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.

163

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
164

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