Floorplan now available as a Lovelace card

Third party integrations Floorplan
165

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

  1. in the svg make for example a square and give it a name, for example solarium.heatlevel

  2. 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

166

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
167

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…

168

Still kinda wish this were built-in.

169

Hi Petar,
can you help with an example of CSS animation; for example a zoom out effect based on switch-on state.
thanks

170

Hi,
does this work in floorplan-card.js?

thanks

171

Hi,
I find a code for navigating between pages, link below.


Also CCOSTAN is using similar type of code in his setup (not a floorplan-card).
However, when I try it comes with an error … maybe some smarter people can figure it out how to use it the right way.

title: Floor Plan Test
type: 'custom:floorplan-card'
config:
  log_level: info
  pages:
    - image: /local/test1.svg?v=1.1.15
      log_level: info
      page_id: page1
      rules:
        - element: button_1a
          action:
            service: floorplan.page_navigate
            data:
              page_id: page3
        - element: button_2a
          action:
            service: floorplan.page_navigate
            data:
              page_id: page2
      stylesheet: /local/style.css?v=1.1.14
    - image: /local/test2.svg?v=1.1.15
      log_level: info
      page_id: page2
      rules:
        - element: button_2a
          action:
            service: floorplan.page_navigate
            data:
              page_id: page3
      stylesheet: /local/style.css?v=1.1.14
    - image: /local/test3.svg?v=1.1.15
      log_level: info
      page_id: page3
      stylesheet:/local/style.css?v=1.1.14
      master_page: 
        content_element: floorplan
      rules:
        - element: button_3a
          action:
            service: floorplan.page_navigate
            data:
              page_id: page1

I manage to toggle a layer in svg file using this:


- elements:
    - toggle_button                   
  action:
    service: floorplan.class_toggle                    
    data:
      classes:
        - layer-hidden                        
        - layer-visible
      default_class: layer-hidden
      elements:
        - page1

where “toggle_button” is the id of the object you use as a button and “page1” is the layer id (saved in inkscape xml), also your css file must include .layer-hidden and .layer-visible.

172

Maybe make a binary_sensor that changes to true when either of the sensor or lamp conditions are met. Then set the SVG element to the status of the binary_sensor?

1 Like
173

Hey OzGav, thanks for your comment! I forgot to answer that I have solved the templte sensor, I am more and more studying templats there you can do fun things to me!

174

what are the differences between floorplan and built in picture-elements? trying ot figure which way to go

175

Very simply, with Floorplan you have total control and can use any shapes, in any way. This makes it significantly more flexible, and requires more effort.

For instance, on my floorplan those doors and windows are part of the SVG. No matter how the view scales, they remain perfectly aligned. Same with every other entity.

Trying to duplicate that with the Picture Elements card was frustrating, and I abandoned those efforts.

Of course, that’s partly my fault for wanting my floorplan to closely resemble reality… If I wanted something more conceptual it’d be easier to use Picture Elements.

1 Like
176

I started using this card this week and can already see the many benefits over the picture glance approach. People do some amazing things here!

Is it possible to use (reference) the actual light colour of my RGB bulbs to use that as a fill?

To those familiar with the custom button card, it’s typically done like this (because custom button card defines this based on the entity):

            cards:
              - type: custom:button-card
                name: My Smart Bulb
                entity: light.smart_bulb_1
                color: var(--button-card-light-color)

I saw that people have cases where they define multiple CSS classes (e.g. for different light or temperature levels) and handle the switching with a class_template, but I haven’t been able to find cases where a CSS variable can be used (in the YAML or CSS). I don’t know which variables are defined or whether there are other tricks.

I was also wondering whether there is extensive documentation somewhere. The simple example does great at explaining some of the basics and the structure, but it’s not clear what all the options and limitations are (regarding the YAML config).

And if I may ask one more thing: I see there is both lovelace-floorplan (which I’m using) and ha-floorplan. I can’t quite figure out whether the one supersedes the other or whether both are supported and what the pros and cons of the two options are.

177

I installed files and got the simple sample working in a custom panel and changed some of the elements in the svg to match my light switches.

I click them and THEY WORKED! But only once or maybe twice. After that, no response. I still get the hover arrow as if they SHOULD do something, but nope. Even refreshing the page does nothing. I’m on HA 0.110.4

Any ideas of why?

178

One detail I noticed re: my previous post - if I manually turn off the switches for the lights (Tuya switches) then clicking the Floorplan button will turn them on. So even though I have it calling a Toggle on the switch, it is only sending an ‘Turn On’ command. Based on the default install code, is there a way to have it check the state of a switch and then send the correct code to switch it to the opposite state (Off/On)?
Thanks all!

179

Hi all,
I am converting my 2D image to 3D. All is going well but I have just run into a problem. Currently I can click pretty much anywhere in a room and turn the main room light on. I would like to still do that. When I cut out the mask for a room light it includes all the streaming light out of the doors and windows (looks great!). However this means I have a huge touch target now and they all overlap. This is because I am using a JPG as the base image and then putting the PNG “lights on” image over the top which is then hidden via CSS until the light is on.It is this image that is the touch target.

So how have people solved this? I am thinking I can make a transparent area which is the touch target and then have booleans for each room with an automation that keeps that in sync with the light status and then link the PNG with the boolean. Does that make sense? Is there an easier way to do this?

I have used image templates elsewhere which change an image based on an attribute but they are all the same size and shape so I don’t think that will work?

Thanks for the help!

180

Following on from my idea above. I have set up a input boolean and I am using the following to try and keep the input boolean state synchronised to the light state but it is currently doing the opposite and I am seeing an error in the log. Here is my code:

  - alias: Pantry Floorplan Sync
    trigger:
      platform: state
      entity_id: light.0x94103ea2b2786db7_light # Pantry light
    action:
      entity_id: input_boolean.pantry_lights_flag
      service_template: "input_boolean.turn_{{trigger.to_state.state}}"

Here is the error:

2020-07-26 00:36:49 WARNING (MainThread) [homeassistant.components.automation] Pantry Floorplan Sync: Already running

Can anyone help me out with what is going wrong?

Edit: I am not sure why (maybe its some MQTT messaging thing I don’t know about) but I think I have fixed this by using the new mode option:

  - alias: Pantry Floorplan Sync
    mode: restart
    trigger:
      platform: state
      entity_id: light.0x94103ea2b2786db7_light # Pantry light
    action:
      entity_id: input_boolean.pantry_lights_flag
      service_template: "input_boolean.turn_{{trigger.to_state.state}}"
181

I finally figured out how to get the ‘simple’ example working properly in 0.113. Since the process I think was more painful than it should be, I’ll highlight some things for other newbs just trying to get started with this great lovelace floorplan card. I think these items should be updated on the github docs (I may submit a PR myself, but wanted to pass across more advanced folks first).

  1. Step #3 in the primary readme refers to adding the resource url to your lovelace config.

Of course the natural progression (and suggested below on the page) is to open up the lovelace raw yaml editor and paste that in. Fortunately when you do this, a warning pop up tells you not to add resources: to the yaml, instead use the lovelace config ui. So then I have to delete those lines and resave the yaml, then open up configuration/lovelace and enter the module url there. The docs should be updated to point newbs straight to the lovelace config ui.

  1. This gripe probably has more to do with my lack of understanding how lovelace yaml works… the tutorial for the simple example says to simply ‘add the following to your Lovelace configuration:’. So, a newb clicks ‘configure ui’ from the hamburger, clicks the orange + circle in the bottom, scrolls down and clicks the ‘manual’ card entry, pastes in the entirety of code from the example, and gets a big red box with ‘card type errors’. I believe this is going to be the usual way a newb will attempt to go about setting up the simple example. So instead the example lovelace card should be purely just a card config like this:
config:
  image: /local/floorplan/examples/simple/simple.svg?v=1.1.14
  log_level: error
  rules:
    - action:
        service: homeassistant.toggle
      element: light.double_garage
      entity: light.double_garage
      image_template: '/local/floorplan/examples/simple/light_${entity.state}.svg'
      more_info: false
    - action:
        service: homeassistant.toggle
      class_template: 'background-${entity.state}'
      element: light.double_garage.background
      entity: light.double_garage
    - action:
        service: homeassistant.toggle
      element: light.double_garage.text
      entity: light.double_garage
      text_template: '${entity.state}'
    - action:
        service: homeassistant.toggle
      entity: switch.living_area_fan
      more_info: false
    - entity: switch.living_area_fan
      more_info: false
      propagate: false
      states:
        - class: spinning
          state: 'on'
    - action:
        service: homeassistant.toggle
      class_template: 'background-${entity.state}'
      element: switch.living_area_fan.background
      entity: switch.living_area_fan
    - action:
        service: homeassistant.toggle
      element: switch.living_area_fan.text
      entity: switch.living_area_fan
      text_template: '${entity.state}'
    - entity: camera.new_york_broadway
      image_refresh_interval: 5
      image_template: '${entity.attributes.entity_picture}'
    - entities:
        - binary_sensor.main_bedroom
        - binary_sensor.living_area
        - binary_sensor.double_garage
      state_transitions:
        - duration: 5
          from_state: 'on'
          to_state: 'off'
      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'

This code works when you just paste it into a ‘manual card’ using the gui. I know the example includes more yaml for the header/tabs and stuff, but since this is a ‘card’ by definition, folks are going to expect it to work like a card, not a card+headers+extraJunk.

Please don’t take this post as a negative. I truly appreciate all the efforts that have gone in to making this what it is. I just wanted to give a fresh perspective on things in case the docs could be polished up so newbs get a smoother introduction to this awesome project.

182

Hi again all,

I have this text_template in my ui-lovelace.yaml

text_template: >-
                ${entity.state != "unavailable" ? (Math.ceil(entity.state * 10) / 10) + "°C" : "undefined"}

It is working fine but I would like “20” to be displayed as “20.0”. I am guessing I need to pipe it to format but not sure how. Help?

Should have googled one more time. Solution:

text_template: >-
                ${entity.state != "unavailable" ? (Math.ceil(entity.state * 10) / 10).toFixed(1) + "°C" : "UNK"}```
183

hello everyone, I have a problem with lovelace, in the iphone open the floorplan but in browser give me error ‘’ You need to define an entity ‘’ what can I be doing wrong ??

11082020
11082020750×1334 107 KB
2020-08-11 16_15_29-
2020-08-11 16_15_29-1641×1019 75.9 KB

184

Hello, I’m a novice. I’ve been working on multi floor display for a long time, but I can’t. You can say what this means, or share an example. Thank you