Your Home Digital Twin: Interactive floor 3d plan

Hello @adizanni – first off, let me say this is a pretty awesome implementation and I’ve loved experimenting with it over the last few days. At present I have two issues confounding me:

  1. Object IDs and how to obtain them. The only documentation I’ve found says to obtain the object ID by double-clicking on the object in the floor3d card – this works great, however it only works for visible objects. I have some “incandescent light sources” in my model, but I do not know where to click to obtain the model. I also tried adding a lamp to my model instead of a generic “light source” but the problem there is the base of the floor lamp – not the top part where the bulb is – acts like the source of the light which means it doesn’t look right. I can levitate the floor lamp 4 feet off the floor and that fixes the light, but it looks funny having a lamp floating above the floor!
  2. Cached models. It seems that if I export my model to a file called “home.obj” and import it into HA, it renders. If I then make some changes in Sweet Home 3D and re-export to a file called home.obj (same name), these changes do not take effect. I have to change the name (to home2.obj or some other file) for it to show the changes. How do I clear the cached models?

Thank you!

Concerning your first point, you should be able to find non visible objects IDs if you open the json or the mtl file in any text editor. Note that I don’t know in general how this tool works with invisible light sources (I seem to remember @adizanni mentioning something about them in the tutorial videos though).

Thank you. On the Sweet Home forums I found a hack to force light sources to be present in the OBJ file. I will explore this.

Which just leaves me with the cached model issue and one other thing that I’m struggling with: light sources bleed through walls. Is there a way to prevent this? if I have a small room with a light source in it, when that light is enabled I don’t want illumination outside of the room.

How did you get a custom action for when you double-clicked on an object?

Hi @adizanni – I’m struggling with a naming issue as well, and I’m trying to figure out how the Export utility is working.

If I add a single “Ceiling Light” to my model and then run your export plugin, I get the following in my JSON file:

 "Ceiling_lamp_1" : { "object_id": "Ceiling_lamp_1" },
 "Ceiling_lamp_2" : { "object_id": "Ceiling_lamp_2" },

Which seems strange since there is only one ceiling lamp.

It also seems that if I don’t give each instance of an item a unique name they all wind up having the same ID in Home Assistant (the JSON file). This means if I have ceiling lights scattered throughout the home, there’s no way for me to tie a device to some of the ceiling lights unless I manually give them a unique name. Is that the intended behavior (or am I doing something wrong)?

You use the gesture entity, check the doc.

This is normal the objects that you see as one in SweetHome, are, in reality, composed by several parts and my plugin cannot change this. When you export, each component of each object is exporte independently. If you want to have only one object you need to name it Ceiling_Lamp# (with the sharp character at the end); this way, you will have only one object exported. Be advised that when you do that your entities will be bound to the full object, this may create some side effect on the scene (with lights doors, etc.)

Hi @adizanni, I get an uncaught error when my card tries to load up my model. I think my house model is too complex…

On browser debugging console:

    at floor3d-card.js?hacstag=361776538153:2356:4523
    at Object.onLoad (floor3d-card.js?hacstag=361776538153:2231:531795)
    at XMLHttpRequest.<anonymous> (floor3d-card.js?hacstag=361776538153:2231:435962)

and in HA log:

Uncaught error from Chrome 119.0.0.0 on Windows 10 Error /hacsfiles/floor3d-card/floor3d-card.js:2356:4523 Object.onLoad (/hacsfiles/floor3d-card/floor3d-card.js:2231:531795) XMLHttpRequest.<anonymous> (/hacsfiles/floor3d-card/floor3d-card.js:2231:435962)

I just used the Export object to HASS plug-in to create the zip file. I extracted the zip file to my HA’s www directory under home (so homeassistant/www/home/) and pointed the card to look at the home.obj, home.mtl, and home.json files. After doing that the card takes a while to go to 100% then errors out as described above.

Any ideas?


EDIT

I got it working! The card had stuff defined in the other drop-downs, like object groups and entities and I think they were pointing to things that didn’t exist or something. I removed all that stuff and then it rendered. My obj file after exporting was like 400MB so it took like 20-30 seconds to load on my computer but then rendered it and I could turn on and off levels of the house.

Works pretty well there so I tried it on my phone and after waiting for about a minute of loading while the progress counter walked up to 100%, it sat there for about 10 seconds and then the HA app crashed to the Android desktop. I guess I don’t know what I expected… Pretty cool that it works on my PC though. I probably need to put my house model on a diet. :stuck_out_tongue:

Hello @SpikeyGG, I feel sorry that you had to spend time to troubleshoot, since I introduced the sample modle loaded after the “add card” this is the most common issue and I should find a way to remediate.
Yes big models tend to consume too many resources (CPU, GPU, Memory), on an average device a model above 100mb will not work smoothly.

1 Like

Hi
I find this card very interesting.
So i am going to make a dashboard with it.

I want to make a dashboard with whole building in main display.
Then there should be a chip card to select camera position.

I have already tried two ways to do this.
One is to have several dashboards.
The other was to use conditional cards with several floorplan cards.
Booth works fine but this is not so optimal solutions.

I know that there is zoom area function but i don’t think this look nice.
I want to select this outside the floorplan view.

So my question is.
Is there a way to set camera position with a variable that is set outside the card ?
Or can zoom areas be hidden in floorplan view and selected in a call outside the card ?

1 Like

Hello @Kernal69, since a few months now I’ve stopped doing enhancement to the card (I have some time constraints). Anyway if you can post some images to better understand what you have managed to achieve with the existing functionality. This will help me better understand your final goal.

Hi

Ok
This is only on test level so far.
But here is a example.

Here i have used conditional cards.
It works very well but if you look at the code below you can see that it will be very large and hard to manage with many views.
So if a other way exist it is preferred.

I had to use helpers so i can set them on and off with the chipcards.
And then use the helpers as a condition.

A cool effect with using this is that if i want to zoom in to a room if for an example a varning appear i could set this helper from a automation.

First in the main view the whole house.

If i click the symbole for sofa in the upper left corner a room is zoomed in.
And back to main view if i click home symbole.

  - type: conditional
    conditions:
      - entity: input_boolean.test1
        state: 'on'
    card:
      type: custom:floor3d-card
      path: /local/testar/
      name: Home
      objfile: home.obj?ver=1
      lock_camera: 'yes'
      header: 'no'
      click: 'no'
      overlay: 'no'
      hideLevelsMenu: 'yes'
      shadow: 'no'
      extralightmode: 'no'
      show_axes: 'no'
      sky: 'no'
      overlay_bgcolor: transparent
      overlay_fgcolor: black
      overlay_alignment: top-left
      overlay_width: '33'
      overlay_height: '20'
      north:
        x: 0
        z: -1
      camera_position:
        x: 576.6077266104088
        'y': 1180.133098877467
        z: 69.95597663423794
      camera_rotate:
        x: -1.5638064064013464
        'y': -0.000047634853260828575
        z: -0.0068145754756135145
      camera_target:
        x: 576.6716692099963
        'y': -162.18314822016092
        z: 60.57314011159553
      object_groups:
        - object_group: RoundTable
          objects:
            - object_id: Round_table_1
            - object_id: Round_table_2
            - object_id: Round_table_3
        - object_group: EntranceDoor
          objects:
            - object_id: Door_9
            - object_id: Door_7
            - object_id: Door_5
      entities: []
      zoom_areas: null
      mtlfile: home.mtl?ver=1
      selectionMode: 'no'
      editModeNotifications: 'yes'
      style: auto
      backgroundColor: transparent
      globalLightPower: '0.8'
      card_mod:
        style: |
          ha-card {
            background: none;
            box-shadow: none;
            border: none;
          }
    view_layout:
      grid-area: middle
  - type: conditional
    conditions:
      - entity: input_boolean.test1
        state: 'off'
      - entity: input_boolean.test2
        state: 'off'
    card:
      type: custom:floor3d-card
      path: /local/testar/
      name: Home
      objfile: home.obj?ver=1
      lock_camera: 'yes'
      header: 'no'
      click: 'no'
      overlay: 'no'
      hideLevelsMenu: 'yes'
      shadow: 'no'
      extralightmode: 'no'
      show_axes: 'no'
      sky: 'no'
      overlay_bgcolor: transparent
      overlay_fgcolor: black
      overlay_alignment: top-left
      overlay_width: '33'
      overlay_height: '20'
      north:
        x: 0
        z: -1
      camera_position:
        x: -506.29870700206004
        'y': 1997.3599589225944
        z: 1515.2294604961169
      camera_rotate:
        x: -1.0419386411562015
        'y': -0.12150920900529187
        z: -0.20451592864620163
      camera_target:
        x: -205.19079207155298
        'y': -131.62304329114454
        z: 271.0867757076808
      object_groups:
        - object_group: RoundTable
          objects:
            - object_id: Round_table_1
            - object_id: Round_table_2
            - object_id: Round_table_3
        - object_group: EntranceDoor
          objects:
            - object_id: Door_9
            - object_id: Door_7
            - object_id: Door_5
      entities: []
      zoom_areas: null
      mtlfile: home.mtl?ver=1
      selectionMode: 'no'
      editModeNotifications: 'yes'
      style: auto
      backgroundColor: transparent
      globalLightPower: '0.8'
      card_mod:
        style: |
          ha-card {
            background: none;
            box-shadow: none;
            border: none;
          }
    view_layout:
      grid-area: middle
1 Like

That is a creative solution, I need to think how to better make the card interact with other UI components and states but as already stated I stopped doing enhancement, I only work in maintenance mode and only when blocking problems arise. It is time consuming and the user community is still limited. I thought that the card had more potential to become an official integration, but I have to admit that there are several unsolved issues (or even unsolvable issues, like the max number of lights, or the fact that a nicely defined 3d model is too heavy for the card)

Yes i understand.
I will use the way like i showed you , it works.

But i must say that this card is the best that has happened in Home assistant to creat a 3D floor plan.
It is so easy.
And if i change the floor plan or add something it is also easy.
So i hope you will continue to develope this card when you have time.
Maybe you should try to involve other to help you.

I think that the other way that exists to do floor plans is to complicated and is nothing i will use.

1 Like

Hello, I was wondering if it is possible to add “type: state-badge”
image
the same thing as on 2D floor plans, but on the crad rather than having to display my variables on the walls. I’ve been stuck for a while and if anyone can help me, here is my program:

type: vertical-stack
cards:
  - type: custom:floor3d-card
    path: /local/mcbc/
    name: Home
    objfile: mcbc.obj
    lock_camera: 'no'
    header: 'no'
    click: 'no'
    overlay: 'no'
    backgroundColor: black
    hideLevelsMenu: 'no'
    globalLightPower: '0.4'
    shadow: 'yes'
    extralightmode: 'yes'
    show_axes: 'no'
    sky: 'yes'
    overlay_bgcolor: transparent
    overlay_fgcolor: black
    overlay_alignment: top-left
    overlay_width: '33'
    overlay_height: '20'
    north:
      x: 0
      z: -1
    camera_position:
      x: 700.3072605703628
      'y': 905.5330092468828
      z: 900.664376105913
    camera_rotate:
      x: -1.0930244719682243
      'y': 0.5200808414019678
      z: 0.7648717152512469
    camera_target:
      x: 37.36890424945437
      'y': 18.64464320782064
      z: -82.55051697031719
    object_groups: []
    entities:
      - entity: light.eclairage_sejour_sud
        type3d: light
        object_id: '739'
        light:
          lumens: '800'
          shadow: 'yes'
      - entity: light.eclairage_couloir
        type3d: light
        object_id: Sphere_104_767
        light:
          shadow: 'yes'
      - entity: light.eclairage_sej_nord
        type3d: light
        object_id: Sphere_104_759
        light:
          shadow: 'yes'
      - entity: light.eclairage_sdb_dd
        type3d: light
        object_id: border_779
        light:
          shadow: 'yes'
      - entity: light.eclairage_ch_parents
        type3d: light
        object_id: border_776
        light:
          shadow: 'yes'
      - entity: light.eclairage_bureau
        type3d: light
        object_id: border_770
        light:
          shadow: 'yes'
      - entity: light.eclairage_ch_enfant
        type3d: light
        object_id: border_773
        light:
          shadow: 'yes'
      - entity: light.eclairage_couloir
        type3d: light
        object_id: Sphere_104_763
        light:
          shadow: 'yes'
      - entity: light.eclairage_sej_nord
        type3d: light
        light:
          shadow: 'yes'
        object_id: sweethome3d_opening_on_hinge_1_Spot_fixture_Frosted_bulb_755
      - entity: light.eclairage_sej_nord
        type3d: light
        object_id: sweethome3d_opening_on_hinge_1_Spot_fixture_Frosted_bulb_747
        light:
          shadow: 'yes'
      - entity: sensor.salon_temperature
        type3d: state-badge
        object_id: room_38_216
        width: '100'
        height: '100'
        span: '25'
        textbgcolor: black
        textfgcolor: white
    zoom_areas:
      - zoom: Cuisine
        object_id: '393'
        distance: '150'
        direction:
          x: 1
          'y': 1
          z: 1
    selectionMode: 'no'
    mtlfile: mcbc.mtl
    editModeNotifications: 'yes'
  - type: state-badge
    entity: sensor.bureau_n_temperature
    style:
      right: '-10px'
      top: 100px
      color: rgba(0,0,0,0)
      opacity: 0.5

@TonAlternantDePocket , it is not yet possible to add badges in the model, nevertheless, the things that most people do, is to create a frame instide your model in sweethome3d and then bind your text tempeartute entity to the frame. If you want the temperature to be always visible and facing the viewer of the card, you need to explore the room entity which allows to show the temperature on top of the rectangle representing the room. Everything is explained in the documentation. Try and put here a comment if you still can’t do what you have in mind.

Bit late to the party and you probably already figured it out yourself, but you don’t have to repeat the input_select part at the service line…mine is working when it looks like this:

gesture:
  domain: input_select
  service: select_option

I have a 20mb GLB with a few lights and it works great on desktop browsers, but when using an iOS device with the homeassist app or browser the model appears to be in software rendering mode and incredibly laggy & unusable, kind of like how it is if you don’t enable hardware acceleration in chrome or firefox. Is this a known limitation and should I just get a Samsung tablet?

20 mb GLB should not be a big problem for the card in a recent iOS device. There is nothing I can do to improve, the WebGL based library I’m using (three.js) does HW acceleration whenever the device supports it. Have you tried to use the same model in obj format ? The support of GLB is really experimental in the card and there might be some collateral effects. Obj format is slower to load though (even when cached)

OBJ worked great! Ill stick with that. I know you really don’t have the time to maintain the project but I really do love it, keep up the great work.