Your Home Digital Twin: Interactive floor 3d plan

Dear all, v1.4.0 is released with a new functionality. It is now possible to create zoom areas. You can set the focus on an area of you r home at the click of a button by moving the camera at the place you want.

1 Like

Hi, can you please write some examples ?

Name Type Default Description
zoom string Required the name of the zoom area (ex. Kitchen).
object_id string Required the object id of the target of the zoom (ex. room_1_1)
rotation object {x:0, y:0, z:0} the rotation of the camera pointing to the area.
direction object {x:0, y:0, z:0} the direction vector of the canera pointing to the area.
distance number 500 the number of cm from the camera to the target point
1 Like

Hello Vincenzo,

a very simple example is this:

zoom_areas:
  - zoom: Kitchen
    object_id: room_2_1
    distance: '700'

Not using direction and rotation (so default is used in the card):

direction and rotation are objects so you want to use the code editor to enter them. Ex:

zoom_areas:
  - zoom: Kitchen
    object_id: room_2_1
    distance: '600'
    rotation:
      x: -1
      'y': 1
      z: -1

As it is a little experimental I would stick to the simple config as a starter to make sure it is working fine and it is enough for you.

2 Likes

Hi there,
Just started building my virtual home a few days ago and WOW, what a great addition.

I think the camera position set by Ui is broken. If I set the values in yaml as you did in your post it’s working instantly. But no matter in which was I set the values in UI it doesn’t change the view as expected. If the values are set by yaml the UI shows [object Object]. Maybe that was the problem for other people here, too?

Hello @hagenuck1, you are right I should even disable the possibility to edit in the UI. I was a little lazy and did not expand the xyz coordinate structure in the UI. I will probably do it in a future release of the card. This is valid for all the fields that are supposed to represent a coordinate.

Okay, thanks.

I just changed a lot in the sweet home 3D and uploaded a new file exported by the „obj to HASS“ plug-in (with another file name, because of the cache problem) and now it isn’t showing anything in the card anymore and getting this error:

Finished with errors: check the console log

This is in the log:

https://xyz.ui.nabu.casa/hacsfiles/floor3d-card/floor3d-card.js?hacstag=3617765381412:2159:2535 Uncaught TypeError: Cannot add property textfgcolor, object is not extensible
https://xyz.ui.nabu.casa/hacsfiles/floor3d-card/floor3d-card.js?hacstag=3617765381412:2205:526014 TypeError: undefined is not an object (evaluating 'b[0].pointerId')
http://homeassistant.local:8123/hacsfiles/floor3d-card/floor3d-card.js?hacstag=3617765381412:2262:31492 Error
http://homeassistant.local:8123/hacsfiles/floor3d-card/floor3d-card.js?hacstag=3617765381412:2311:42491 Error
http://homeassistant.local:8123/hacsfiles/floor3d-card/floor3d-card.js?hacstag=3617765381412:2262:15835 TypeError: undefined is not an object (evaluating 'this._controls.removeEventListener')

I also created a complete new card with the same result.

Do you have any idea how to find out using this error what could be wrong?

Edit: I guess I found the issue. The exported home.obj seems to be corrupted.

I would suggest you to send me the sh3d model file

@hagenuck1, is your deployment cloud based with nabucasa service? I was wondering because I’ve never tested this setup.

I was starting to think about the version 2.0 and my intention is to change the configuration structure. I wanted to make it more object centric. This is an example of the new configuration:

type: custom:floor3d-card
..... Model and Appearance not changing ......
objects: ---- List of Objects -----
  - object: 
    object_id:
    type3d: light
    entity: ----- Bind entity ------
    light: ------- object type -------
      shadow: 'yes'
      vertical_alignment: middle
      decay: '2'
      distance: '401'
      lumens: '900'
      color: 
      action: toggle  
    properties: ----- Dynamic object properties ------------
      attribute: 
      template:
      color: red or <templated colorcondition>
      visible: <templated condition>
      text: <text>
      tap_action: 
      doubletap_action:
  - object:
    object_id:
    type3d: door
    entity:
    cover:
      type: swing, slide, cover
      direction: 1, -1
      hinge: 
      panel:     
  - object:
    object_id:
    type3d: animate
    entity:
    animate:
      type: rotation, slide, built-in
      direction: 1, -1
      speed:
      axis:
      action: toggle

booleans: ----- templated conditions -------------
  - boolean: valueon
    value: 'on'

colorconditions: ----- templated object conditions ---------------
  - colorcondition: <hot>
    conditions: 
      - color: red
        value: 'hot'
      - color: blue
        value: 'cool'

Let me know if:

  1. It is clear
  2. You like it
  3. You would do it differently

Please debate. Thanks.

1 Like

I have no suggestion at the moment. It looks great to me.
Try to see if also tap and hold action is doable.

btw. I’m back.

Cheers,
us

1 Like

1 & 2. I like it. it seems much more intuitive. Great work so far. Thank you!!!

1 Like

Good to see you back, I missed your feedback, contribution and suggestion!

I will agree 1and 2.
Please, consider some suggestions below:

  1. Turn on/off a led lamp with 1 or 2 click and also have the option to show the “more info” to adjust color, brightness and temperature of the led lamp;

  2. Is it possible to include in the code a condition that runs the program automatically on the GPU, when this hardware is available?

  3. See if could be possible optimize the code to reduce effect on the CPU and GPU consumption.

Congratulations, you did a great job!

1 Like

Hello @Vincenzo_Filho, thanks for the feedback.
Related to point 1, of course I will try to make the actions on the objects as flexible as possible.
For point 2, this is not possible, it can only be done in the browser setting once the browser is GPU enabled. There is nothing I can do programmatically in Javascript.
Point 3, yes I hope that by creating a more logical configuration the code will be simpler and the execution more fluid. In any case it is one of my objectives
Andy

1 Like

Hi @adizanni, I have a doubt regarding to the version 1.4.2:

If I understand correctly, you implemented in this version the ‘Transparent’ background option for the Floor3D card.

What is the correct syntax for this command?

backgroundColor: Transparent ???

Hello yes all small letters:

backgroundColor: transparent

I’m asking you because it doesn’t worked on my computer, see the result bellow:

See my HA actual configuration:

config

Are you sure that you have loaded the new version (check the console) and refreshed the browser (no clear cash, just refresh the browser) ?

Just for guarantee I removed the installed version and reinstalled V1.4.2 again.

The problem persists.
The background remains white instead of transparent.

I don’t know if could be a problem, but I have installed a backend theme (theme: Backend-selected)

If you have some time test it with the standard dark theme.