3D Floorplan using lovelace picture-elements card

State-switch is a custom card, see:
https://github.com/thomasloven/lovelace-state-switch

Here you go for the first lines of my yaml (more of the same repeating for the different views):

custom_header:
  compact_mode: true
  exceptions:
    - conditions:
        device_id: 2c088d82-ca71ed40
      config:
        disable_sidebar: true
        kiosk_mode: true
title: Home

views:

- title: Vue d'ensemble
  theme: slate
  icon: 'mdi:floor-plan'
  panel: true
  badges: []
  path: overview
  cards:
 
    - type: 'custom:config-template-card'
      entities:
        - light.cuisine_deco
        - light.cuisine_plafonnier
        - light.manger_lampe
        - light.manger_plafonnier
        - light.grand_totem
        - light.grand_totem_deco
        - light.petit_totem
        - light.petit_totem_deco
        - light.salon_plafonnier
        - light.panneau_lumineux
        - light.tv
        - light.vinyles
        - light.bar
        - light.salon_3
        - light.cuisine_3
        - light.terrasse_sol
        - light.terrasse_3
        - light.couleur_rez
        - light.lit_parents_blanc
        - light.lit_parents_couleur
        - light.chevet_cdrx_4
        - light.chevet_nanne_3
        - light.plafond_charles_exterieur_white
        - light.plafond_charles_interieur_white
        - light.imprimante
      card:
        type: 'custom:state-switch'
        entity: input_select.floor
        states:
          Rez:
            !include frontend/lights_rez.yaml
          1er:
            !include frontend/lights_1er.yaml

As said, I’ll be investigating on the state-switch side in the next few days and will report back if I find anything.

Still in the process of testing, figured out that it doesn’t have to do with the type of card used, as I reverted to horizontal-stack per your setup and did not speed up the floor change.

However, I do have one question: in your code, you have an underscore in front of the included files: !include _floorplan_second_floor.yaml Is there any specific reason for this?

The reason I started with an underscore is just a reminder to me that it’s a view to be included and not a main tab that shows up in my lovelace dashboard. So it’s just a personal naming convention. Haven’t had a chance yet to look at the custom card you are using but hope to this week.

Ok, got it, thanks. I don’t think it’s due to the custom card. Changed it to horizontal-stack and still takes 10 seconds to switch from one view to another. I’m starting to think it has to do either with the size of images or the views, since they are quite large.

For what it’s worth, I tried out the state-switch card and replaced my conditional cards and it works exactly the same. The floorplan changes instantly. So I’m not exactly sure what’s causing your particular issue.

---
title: Floorplan
path: floorplan
panel: true
icon: 'mdi:floor-plan'
cards:
  - type: horizontal-stack
    cards:
      - type: custom:state-switch
        entity: input_select.floorplan_floor
        states:
          "1st Floor": !include _floorplan_first_floor.yaml
          "2nd Floor": !include _floorplan_second_floor.yaml

Thank you for testing. As said, I’m leaning towards the size of the images. I’m following this way of including pictures and blending them, and seeing as each image is around 3MB in size, I’m really leaning towards the time it takes to load all this as the cause.

Just want to say thanks for this amazing guide and I have created a 3d floorplan and have it working with my home assistant.

1 Like

Glad to hear it was helpful!

Nice tutorial Aaron, I was looking for some information about state of a offline device but couldn’t find anything, that’s how i stumble on this topic. The information I was looking was not here either, but I figured out with trial and error on my 3D floor plan dash.

When one of your devices gets offline by removing it or just because of a failure, you get a broken image over your whole floor plan and that looks ugly since it covers whole 3D plan.

To fix that you need to add an ‘unavailable’ state in your code.

For example:

    state_image:
      "on": /local/floorplan/kitchen_on.png
      "off": /local/floorplan/transparent.png
      "unavailable": /local/floorplan/transparent.png

It is up to you if you want to add in your first post.

Now I am looking for curtain switch states, so I can play with closed and open curtains/roller shutters in my plans.

4 Likes

That’s a fantastic tip! I’ve actually had some entity that’s been unavailable in my floor plan for over a month but I’ve been too busy to look into it. It resulted in exactly what you described, a large broken image over your floor plan.

I used your example and added an unavailable state to each entity one by one and found out which one was causing the issue. Thanks so much for posting this, I will definitely update the blog post and credit your post here for the solution.

I’m thinking it might be nice to somehow call attention to it. In my case it was unavailable because I had renamed the entity. So rather than just hiding the problem if there were a way to highlight the entity that was causing the issue with the unavailable state that could be very useful. Perhaps a transparent square with a red border that highlights the element. Going to think about this and try out a few things.

2 Likes

I am glad if it was helpful, I don’t need credits for simple thing like this, I am sure you’d find out too.

About using transparent square with red border, it does not work unfortunately, if the image is small, lets say 50x50pxl it will automatically resize it to the floorplan.

In my case I can see the problem because I use state-icon as well, and when a entity is not available it will grayout.

You are correct that it won’t work for what I call the lighting overlays, but it will work for the toggles. e.g.

type: picture-elements
image: /local/floorplan/first_floor_lights_on.png
elements:
  # Lighting Overlays
  - type: image
    entity: switch.front_porch
    tap_action: none
    hold_action: none
    state_image:
      "on": /local/floorplan/transparent_square.png
      "off": /local/floorplan/first_floor_front_porch_lights_off.png
      "unavailable": /local/floorplan/transparent_square.png
    style:
      top: 50%
      left: 50%
      width: 100%

  # Light Toggles
  - type: image
    entity: switch.front_porch
    tap_action:
      action: toggle
    state_image:
      "on": /local/floorplan/transparent_square.png
      "off": /local/floorplan/transparent_square.png
      "unavailable": /local/floorplan/unavailable.png
    style:
      top: 32.2%
      left: 59.1

Which results in this when the entity is unavailable:

image

Oh right, you don’t use state-icon, I would love to do like yours too, but I have some limitations, I have to show HA Dashbord on a tablet which is vertically mounted on the wall and our living room is crowded with a lot lights and other stuff. I am only couple days on HA, before I was using smartlife app. I couldn’t even add some extra stuff on the floorplan like sensors and thermostat because of the crowded information, by using state-icons I can point it out where to click.

This is how my floorplan looks:

I have to come up with nicer setup, picture-elements is great, I used even for our cat’s to see if they are out or in.

This is the tablet I am talking about, it is (only) 7 inch old Samsung Tab 4 which hangs there last 5 years, and I will get a 10 inch one which fits in that spot and 3D print a holder for it:

2 Likes

Very nicely done, your setup looks great! I agree that the 3d floor plans really don’t translate well to small screens. It’s basically unusable on my phone.

1 Like

Your setup looks really cool. A bit off-topic: how did you achieve tracking your cats? Fit them with a GPS collar?

@fahr Thank you, yes it is little hard to get everything on one screen, I want only one dash too. Added power usage of the house today and temperature and it made even more crowded, that’s why I need a 10 inch tablet met high resolution.

@CDRX2 Thanks, We have a Sureflap cat door connect and using a integration to make that happen, I am the first one with overlay images I believe, it is basically same as the switches, only inside and outside images are separate thus 4 images for 2 cats.

Hello! Thank you for the post and tutorial.
I was wondering, would you mind sharing your image files? I’d like to try the tutorial out before I do my actual house.

Thanks for the info! Would be a fun thing to add sometime, but I still need to finish many other projects (like my UI) first.

Quick update on my delay switching floors. I actually went around it by using a custom:swiper-card that each show a floor. No more button to push, no more delay, a simple swipe and a simple 3D animation are now my way of switching from 1st to 2nd floor.

Great work, can the following operations be detailed? do not really understand
“I then created a new layer for each room with the lights off by duplicating the lights off layer and deleting any part of the duplicated layer that was not part of the room I was creating the image for”