Floorplan now available as a Lovelace card

i pm you
ty

I am sorry to report that this update is not working for me. With this update, the entire floor plan is not shown. Clearing cache and restarting didn’t help either … :frowning_face:

Wrap-up after Teamviewer:
Don’t save the CSS file as .css.txt in Windows. It took all the way too long time to spot :grin: But hey… We finally made it :sweat_smile::love_you_gesture:

1 Like

is it possible to create a “configuration file” and then include it in the floreplan? something like !include floorplan.yaml in the lovelace?

I think this might be the answer Lovelace and !include

Yes :slight_smile:

It’s really up to you. My personal system are in YAML-mode, and all changes is done directly in the .yaml files.

In my ui-lovelave.yaml, I’ve the following part for the floorplan:

  - title: Floorplan
    icon: 'mdi:floor-plan'
    panel: true
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack  
            cards:
              - config: !include lovelace/floorplan/_config-floorplan1.yaml
                type: 'custom:floorplan-card'
                full_height: true

My _config-floorplan1.yaml looks like this:

image: /local/floorplan/floorplan1.svg?v=1.1.14
#log_level: error
rules:
     !include_dir_list rooms/
stylesheet: /local/floorplan/floorplan1_main.css?v=1.1.14
id: floorplan1

And within the rooms folder, my files are arranged lige this:

My tip is to start our simple, and see what you can find out. It’s a bit hard at first, but I’ll get it to work, after a few tries :slight_smile:

Good luck :slight_smile:

1 Like

is it possible to change the color of an mdi icon based on the chhange of it’s state? For example the icon of a car that change the color based on “home” / “not_home”?

                    - entity: device_tracker.CAR
                      state_action:
                        action: call-service
                        service: floorplan.style_set
                        service_data:
                          style: >
                            fill: ${ entity.state === "home" ? "#f50707" :
                            "#37d60b" }; transition: ${ entity.state ===
                            "not_home" ? "fill 5s ease" : "" };

this is the code that i am tring now, but it does not work…

There’s already a question like this in the Discussion on GitHub, if I remember correctly. Also, there’s a few color-change examples in the docs, too. If you still need help. please create a discussion-thread for it, on GitHub.

Hi @nebbiadigiorno

It’s probably better to create CSS classes to control your styles, rather than set the styles directly.

It could be that you need to change the fill of nested elements, embedded within your main device tracker element. Can you have a look at this discussion?

https://github.com/ExperienceLovelace/ha-floorplan/discussions/65

It shows how to change styles of nested elements.

Hi @nebbiadigiorno

Floorplan already has support for using an external config file.

In your Lovelace config, you simply need to to point your card’s config to the floorplan YAML config file.

    cards:
      - type: 'custom:floorplan-card'
        config: /local/floorplan/examples/home/home.yaml

that’s a great project, i don’t understand (in your example) the use of svg file and the css file. In the wiki there is an example of a light with a dedicated svg and css. To use it i need to add the svg and the css in the floorplan folder? or i need to add the css in MY .css file and the lamp.svg in my HOME.svg?

if it’s not too much effort can you provide an example of te home.yaml file?
it’s not clear if i have to use the space at the begginning or not.

local translates to www, so in this case, you’ll move your XAML-file to your www folder, too.

But again, it’s up to how you’d like it to be. Nor pkozul or I can tell you to do Y, without knowing X (what you’re planning to do).

I’ll recommend you to browse some more here on the community, and looking through the docs. Home Assistant will require the try-and-errror way, from time to time.

Floorplan doesn’t care where you please your files, it just needs to be within the www folder, so Floorplan can download the files in your browser. Floorplan arn’t handling that part in the back-end. It’s 100% handled in the frontend.

With that said, if you’re using include in your YAML code, for other YAML-files, that part are handled through the native support in HA - In the backend.

I hope that gives your a better understanding of how to include files. Also, as suggested… If you have a specific request/question, please provide the case itself, and ask om GitHub, in our Discussions-area :pray::grin:.

Fighting with the custom card and my own firt tinkerings… I have a svg file edited to have more lights for more rooms and a modified home example as custom card config:

type: 'custom:floorplan-card'
config:
  image: /local/floorplan/examples/home/home.svg
  stylesheet: /local/floorplan/examples/home/home.css
  defaults:
    hover_action: hover-info
    tap_action: more-info
  rules:
    - entities:
        - entity: light.wohnzimmer
          element: light.wohnzimmer
          state_action:
            action: call-service
            service: floorplan.image_set
            service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
          tap_action: toggle
        - entity: light.esszimmer
          element: light.esszimmer
          state_action:
            action: call-service
            service: floorplan.image_set
            service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
          tap_action: toggle
        - entity: light.schlafzimmer
          element: light.schlafzimmer
          state_action:
            action: call-service
            service: floorplan.image_set
            service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
          tap_action: toggle
        - entity: light.heimkino
          element: light.heimkino
          state_action:
            action: call-service
            service: floorplan.image_set
            service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
          tap_action: toggle
        - entity: light.bad
          element: light.bad
          state_action:
            action: call-service
            service: floorplan.image_set
            service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
          tap_action: toggle
        - entity: light.kueche
          element: light.kueche
          state_action:
            action: call-service
            service: floorplan.image_set
            service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
          tap_action: toggle
      state_action:
        action: call-service
        service: floorplan.style_set
        service_data:
          style: >
            fill: ${ entity.state === "on" ? "#F9D27C" : "#7CB1F9" };
            transition: ${ entity.state === "off" ? "fill 5s ease" : "" };

Getting there was a pain already. Took a while to understand that you need a “- entities:” when trying to get more than one working… Now I have them in there, but the lights are not handled as one anymore, I can click on all single elements it was made off and none of them toggles light…

SVG: https://pastiebin.com/6058ad0525f10

What did I do wrong?

Hi @Daniel_Reimer

Can you try using the config below? As you can see, there is just one rule which is used to handle all of your lights. The state_action (i.e. when the state of each light changes) consists of two actions.

Does that work?

type: 'custom:floorplan-card'
config:
  image: /local/floorplan/examples/home/home.svg
  stylesheet: /local/floorplan/examples/home/home.css

  defaults:
    hover_action: hover-info
    tap_action: more-info

  rules:
    - entities:
        - light.wohnzimmer
        - light.esszimmer
        - light.schlafzimmer
        - light.heimkino
        - light.bad
        - light.kueche
      state_action:
        - action: call-service
          service: floorplan.image_set
          service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
        - action: call-service
          service: floorplan.style_set
          service_data:
            style: >
              fill: ${ entity.state === "on" ? "#F9D27C" : "#7CB1F9" };
              transition: ${ entity.state === "off" ? "fill 5s ease" : "" };
      tap_action: toggle
1 Like

Hi, thanks for the reply. OK, if I used yours 1:1 all lamps are drawn and work, IF I remove the light_off.svg and light_on.svg. The lamps are then the non replaced ones from my main svg I guess and that’s why they bahve like single parts as explained above (just that they do some toggle now). If I put the two svgs back in, only one lamp is drawn and the one works as expected, but only one lamp is there… In my case light.schlafzimmer. Close, but not there yet.

Hi @Daniel_Reimer

I am not sure why you are changing the image and applying a style? If you look at the example YAML there are three “rules” to do with the garage button. One changes the bulb appearance, one changes the button colour and one changes the text on the button. I think all you want is to change the bulb appearance so do you need the style change?

Perhaps this: (Note this format is based on the latest v 1.0.23)

type: 'custom:floorplan-card'
config:
  image: /local/floorplan/examples/home/home.svg
  stylesheet: /local/floorplan/examples/home/home.css

  defaults:
    hover_action: hover-info
    tap_action: more-info

  rules:
    - entities:
        - light.wohnzimmer
        - light.esszimmer
        - light.schlafzimmer
        - light.heimkino
        - light.bad
        - light.kueche
      state_action:
        - action: call-service
          service: floorplan.image_set
          service_data: 
            image: /local/floorplan/examples/home/light_${entity.state}.svg
            cache: true
      tap_action: toggle
2 Likes

Hi @Daniel_Reimer

Yep, as @OzGav said, you probably don’t want to apply styles to these dynamically-loaded images. In any case, I got your example working.

The rule I ended up using is below:

    rules:
      - entities:
          - light.wohnzimmer
          - light.esszimmer
          - light.schlafzimmer
          - light.heimkino
          - light.bad
          - light.kueche
        state_action:
          - action: call-service
            service: floorplan.image_set
            service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
          - action: call-service
            service: floorplan.class_set
            service_data: 'light-${entity.state}'
        tap_action: toggle

For your styles, I ended up creating some CSS classes.

.light-on,
.light-on * {
  fill: #F9D27C !important;
}

.light-off,
.light-off * {
  fill: #7CB1F9 !important;
  transition: fill 5s ease !important;
}

In any case, the reason your light images were all being displayed in the same location (i.e. stacked on top of each other) is because of the transforms that are used in your SVG. Below is an example of one of the lights. As you can see, the <g> element has a transform applied to it. When floorplan loads the SVG image, it replaces the <g> element with the new SVG image, but the transform never seems to be retained, and that causes the image to end up in a different location.

  <g
     id="light.kueche"
     inkscape:label="light.kueche"
     transform="translate(100.52719,11.964558)">
    <path
       transform="matrix(0.10946544,0,0,0.10946544,52.401348,140.07825)" 

I have made a fix so that now, floorplan never replaces the <g> element with the SVG image being loaded, but instead, it adds the loaded SVG image as a nested element. I did some tests and it all seems to work just fine.

image

The new version is 1.0.24 and will be released to HACS over the course of the next day or so.

Cheers.

1 Like

Hey, thanks for the big help both of you :smiley: Well, was my first time I tinkered with Inkscape. I was quite sure I destroyed something myself in there. No clue why and how to fix that normally, but thanks for the upcoming fix. So with the new version I can try to make a real floorplan of my flat and hopefully won’t kill everything again? Btw, the lamps look… flat/single colored on your pic ^^

That’s because of the style change. If you just use the image_set it will look like the example. Glad it is coming together for you. Floorplan really is the most elegant way to display and control your HA IMO! :slight_smile:

2 Likes

OK, now I feel stupid… What else should a fill command in css do than what I just witnessed… Fixed that. (= commented out the style change I just borrowed from the example anyways) Works flawless with master installed from HACS. :smiley: Thx once more. Time for some old floorplan scanning and SVG converting then ^^

1 Like