Floorplan now available as a Lovelace card

Third party integrations Floorplan
453

Hi,

I am fiddling arround with Floorplan and I have created my home with SweetHome 3d.

Now I’m trying to figure out the correlation between the SVG which I created in InkScape, the LoveLace YAML and the CSS file, but that is not so easy as it seems. Lack of good documentation is not helping.
Reading this thread helps though, but is not sufficient.

I’ve created these rendered maps of my first floor:

WDStraat_BG_WKS0_WKSL0_ET0_KH0_H0_T0_TK0_G0
WDStraat_BG_WKS0_WKSL0_ET0_KH0_H0_T0_TK0_G01200×1200 139 KB
WDStraat_BG_WKS0_WKSL0_ET0_KH0_H0_T0_TK0_G1
WDStraat_BG_WKS0_WKSL0_ET0_KH0_H0_T0_TK0_G11200×1200 149 KB

As you see one is without light on, and the second one has a light on in the hall. This one is standard opacity: 0;

I’ve brought both rendered maps as an object in InkScape to an SVG, and have ID’d both layers uniquely.
I have also added a third invisible layer over the hall which I have ID’d area.hall. This is needs to work as an area to toggle the light in the hall.

Once the lamp is on, the layer with the light on should get opacity: 1;.

This is the code I copied from the examples, and this adds a class .light-on or .light-off depending on the state of the entitiy light.hall. This is clear.

                    - entity: light.hall
                      element: area.hall
                      state_action:
                        action: call-service
                        service: floorplan.class_set
                        service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
                      tap_action: toggle

But how do I tie the action to this that my layer with the light on gets opacity 1; ?

this is my plain CSS:

#floorplan {
    padding: 10px;
}


#floorplan>svg {}

svg * {
    vector-effect: non-scaling-stroke !important;
}


/* Binary sensors */

.light-on {
    opacity: 1;
    transition: opacity 1s ease;
}

.light-off {
    opacity: 0;
    transition: opacity 3s ease;
}

Can anyone put me in the right direction, or direct me to proper documentation?

454

OK proper docs is easy. That is here: Usage - Floorplan for Home Assistant

Otherwise it looks like you are on the right track. The only thing I don’t know about is where you say

I am not sure what you are trying to do here. You should just have the two layers and the top layer with the light would have the ID as area.hall. You actually don’t even need the element area.hall you could just label the lights on layer the same as your entity so light.hall. I describe that here: Floorplan now available as a Lovelace card - #416 by OzGav
So your floorplan code could be:

                    - entity: light.hall
                      state_action:
                        action: call-service
                        service: floorplan.class_set
                        service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
                      tap_action: toggle
1 Like
455

Thanks for the link to the documentation. It is indeed somehow explaining, but it is not complete. So still a lot to find out on trial and error.

Thanks for sharing that I am on the right way.

I’m puzzled however how to proceed, as I need to create a picture of every possible light on/off combination and label them logicaly and then create the logics to have the sofware select the right picture/layer within the SVG.

I started with the logical describing layer id’s (and corresponding filenames) that contain every light or light group with an own identifier. So is my Livingroom row of spotlights (WoonKamer Spotjes in Dutch) identified with WKS0 for off an WKS1 for on, and my Toilet with T0 or T1 for resp. off and on.

The filename and ID for a map with all the lights off is then:

WDStraat_BG_WKS0_WKSL0_ET0_KH0_H0_T0_TK0_G0

I am afraid however that the SVG file will be huge, or maybe too huge to process, and that applying the logic is pretty complex.

My question here is now: Can anyone help me out on how to add JavaScript in the Lovelace-Floorplan.YAML and tell me what is returned to what. I lack a good description of the integration of JS in Floorplan.YAML to be honest.

My goal is to have a piece of JS code that changes the selected element by generating the variable to for instance:
WDStraat_BG_WKS0_WKSL0_ET0_KH0_H0_T0_TK0_G0 or
WDStraat_BG_WKS1_WKSL1_ET1_KH0_H0_T0_TK0_G1 etc. etc.

456

What I’m trying to achive with this layer is a touch-area so that you only have to tick or click on the room or near a lamp to switch it on or off. This seems to me handy for mobile phones in particular.

457

What you are trying to achieve is exactly how floorplan works. I think maybe the missing piece is the lights on image does not need to be (and for what you are trying to do shouldn’t be) the whole floorplan. You need to crop out the lights image for EACH room and then place them in the correct position over the base lights off layer. If you are using the code I provided above then what will happen is when you touch anywhere on that (smaller) lights on image (even if you cant see it because it is hidden) that will cause the lights to toggle and the image to show or hide. This also has the added benefit of making the overall SVG smaller since you aren’t importing a number of large images. Now I see in your lights on image that you have light spilling out of the open door on the dining table. I have my way of dealing with this but I will let you just get this much working first and then we can go from there. (And yes it does involve using the invisible area you mentioned before!)

458

Also have a look at this thread which may give you some more information. I have linked to my post but look above and below it. Share your Floorplan - #676 by OzGav

In my pic the room in the top right has the light on and you can see light spilling outside and into the ensuite. In the top left you can see a desk light on.

459

Just to be clear this is NOT what you want to do (although you could!). You want to have light on images for each room and they are individually controlled to be shown or hidden in sync with the physical light.
Have a look at this example. The SVG is available by a link at the bottom Floorplanner Home Example - Floorplan for Home Assistant This example is made simpler by not having light spill from one room to another. As I said though this can be done (and I have done so) but it involves more effort.

460

If you think it’s not completed for your needs, kindly create a PR with your needs, to help other users of ha-floorplan :+1:. Provide the SVG and YAML too, for the best result.

1 Like
461

Sorry, this is probably a bit of a newbie question, but I have a floorplan, I want it to work in such a way that if i click a room, it “zooms in” to a different SVG that only contains that room and all the controls (the entire floor view has the most important controls, but can’t change everything in detail). Eventually show more control icons when i click the room. Any tips on how to do this?

462

Have you seen the multi-floor example? Multi Floor Example - Floorplan for Home Assistant

Instead of a separate button I am thinking you would make the room the button,

463

Great work Petar.

I have a problem with script invocation which I can’t seem to resolve. I wonder if you (or anyone) can offer advice.

I have a collection of binary sensors linked to corresponding SVG elements. CSS updates are all working nicely and the entity info frame pops up when the associated SVG component is clicked. I now want to execute a script when an SVG element is clicked. My script is in place and executing as expected from the Home Assistant configuration interface.

I have added an action clause to my configuration which references the script, but the script does not get called when I click on an SVG element. No configuration errors and no runtime errors, just no action. The entity info panel continues to pop up as before and I wondered if this was pre-empting the click action? Have I missed something. My configuration is:

- title: Environment
    path: environment
    visible: []
    panel: true
    badges: []
    cards:
      - type: custom:floorplan-card
        entity: fp_hydronic
        image: /local/beatrice/hydronic-system.svg
        stylesheet: /local/community/floorplan-card/floorplan-card-style.css
        groups:
          - name: Binary sensors
            entities:
              - binary_sensor.boiler
              - binary_sensor.callforch
              - binary_sensor.chiller
              - binary_sensor.engine
              - binary_sensor.generator
              - binary_sensor.hydrophore
              - binary_sensor.immersion1
              - binary_sensor.immersion2
              - binary_sensor.thermal_store
            states:
              - state: 'on'
                class: visible
              - state: 'off'
                class: invisible
            action:
              domain: script
              service: mqtt_update_topic
              data:
                topic: home/test
                message: Hello mum
464

I guess there’s some inspiration here:

Not 1:1 with your needs, cause it’s related to browser_mod.

Else, taks a look at the docs?

And let us know, if you’re getting stuck :+1:. If so, please consider to create a New discussion on GitHub. It’s fine to ask here - but much easier for other to find inspiration, by having each question in a dedicated topic :relaxed:.

465

I am wondering if you are still using an old version of floorplan? states and action don’t look right anymore. Should be state_action and tap_action?

In the latest version calling a script would look like:

            - tap_action:
                service: script.turn_on
              entities:
                - script.vacuum_kitchen
466

100% old version, or wrong rule-usage, at least… That’s why I linked to the current docs.

I should have mentioned the details about the wrong version, too :relaxed:.

467

I looked at the example, it seems like it uses some classes in the SVG itself to change the picture, instead of poting to a different SVG altogether? Wasn’t quite able to use it the way I wanted.

468

OK in the github discussions there are these that may help:

You could also use multiple views in your ui-lovelace.yaml and then use window_navigate to jump between each. How to use that? Look at these places:

469

I’ve spent quite some time today, but have not been able to find a solution that actually works. I am trying to setup my floorplan to use of 90% of the left side of the screen (column A, to give it a name). Then have a stack of cards on the right 10% of the screen (column B)

I created the following to illustrate what I want to do:

image
image1887×1039 130 KB

470

Out of the box this is not possible due to the way Lovelace works. It is not a limitation of floorplan. Lovelace keeps things evenly spread out.

I haven’t used this (but now I’ve seen it I might try!) but this might be what you need GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards.

1 Like
471

Sounds like you are looking for the “Sidebar view” that was introduced with the new Energy panel.
When creating a new view you can select the type (dropdown at bottom of View configuration popup).

472

:-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1:

hmph