Thanks, Andy. Just to clarify, I did perform the glb conversion in the same directory with the mtl file. I made everything in my Sweet Home 3D model gray by choice, so that potentially clickable actions and their effects are more clearly evident. I did leave a little bit of wine in bottle red (third bottle from the left), though. I’m opportunistically trying to build the model quickly using readily available furniture rather than accuracy.
versus reality:
Nice, even if you are also forced by some limitations, i think you have caught the spirit of the card! If you want a photorealistic representation of your home then picture element is better than floor3d card. But if you prefer high interaction flexibility and ease of maintenance, than floor3d card is unbeatable… for the style your approach is very good
Hello Everybody. I was earlier already using this nice card and already made my plan. But now it won’t load my model anymore giving me this error in firefox:
Uncaught (in promise) Error: Object issue for Entity: <binary_sensor.samba_share_update_available>
_add3dObjects https://home-assistant.ddns.me/hacsfiles/floor3d-card/floor3d-card.js?hacstag=361776538143:2297
_add3dObjects https://home-assistant.ddns.me/hacsfiles/floor3d-card/floor3d-card.js?hacstag=361776538143:2297
_onLoaded3DModel https://home-assistant.ddns.me/hacsfiles/floor3d-card/floor3d-card.js?hacstag=361776538143:2248
_onLoadedGLTF3DModel https://home-assistant.ddns.me/hacsfiles/floor3d-card/floor3d-card.js?hacstag=361776538143:2248
load https://home-assistant.ddns.me/hacsfiles/floor3d-card/floor3d-card.js?hacstag=361776538143:2191
parse https://home-assistant.ddns.me/hacsfiles/floor3d-card/floor3d-card.js?hacstag=361776538143:2191
this is the Sweethome 3D example file . Can somebody help me? 
It took me hours to make my own plan and now i cannot use it anymore
Fior my model i get thiss logs:
LIGHT-ENTITY-CARD
Version 4.5.0 light-entity-card.js:9211:15
BUTTON-CARD
Version 3.4.2 button-card.js:425:4478
CARD-MOD 3.1.4 IS INSTALLED card-mod.js:5:246
Card-mod is loaded as a module card-mod.js:5:11643
DWAINS-WRAPPER-CARD
Version 0.0.1 main.js:105:13
DWAINS-HEADING-CARD
Version 0.0.2 dwains-heading-card.js:10:148
DWAINS-FLEXBOX-CARD
Version 1.0.4 dwains-flexbox-card.js:1004:151
DWAINS-COLLAPSE-CARD
Version 0.0.5 dwains-collapse-card.js:47:153
DWAINS-WEATHER-CARD
Version 0.0.5 dwains-weather-card.js:155:612
DWAINS-HASH-SWITCH-CARD
Version 0.0.2 dwains-hash-switch-card.js:22:133
DWAINS-COVER-CARD
Version 0.0.7 dwains-cover-card.js:216:121
DWAINS-AUTO-ENTITIES-CARD
Version 0.0.2 dwains-auto-entities-card.js:2:408
DWAINS-HEADER-CARD
Version 0.0.2 dwains-header-card.js:76:149
DWAINS_DASHBOARD JS
Version 0.0.3 dwains-dashboard.js:90:10635
DWAINS-NOTIFICATION-CARD
Version 0.0.5 dwains-notification-card.js:49:158
BROWSER_MOD 1.5.3 IS INSTALLED
DeviceID: 8e34d84e-8320002f browser_mod.js:145:8956
MORE-INFO-CARD 1.2.0 IS INSTALLED <empty string> more-info-card.js:36:135
Card-mod is loaded as a module card-mod.js:5:11643
AUTO-ENTITIES 1.11.0 IS INSTALLED auto-entities.js:172:7186
CARD-TOOLS 2.1.2 IS INSTALLED
DeviceID: 8e34d84e-8320002f card-tools.js:90:4963
BAR-CARD
Version 3.1.7 bar-card.js:4855:9
MULTIPLE-ENTITY-ROW 4.4.1 multiple-entity-row.js:1:25358
FOLD-ENTITY-ROW 20.0.12 IS INSTALLED <empty string> fold-entity-row.js:86:329
RESTRICTION-CARD
Version 1.2.6 restriction-card.js:200:7782
LOGBOOK-CARD
Version 1.4.1 logbook-card.js:393:1028
MINI-GRAPH-CARD 0.11.0 mini-graph-card-bundle.js:1:95970
vertical-stack-in-card
Version: 0.4.1 vertical-stack-in-card.js:1:9
select-list-card
Version 1.2.0 select-list-card.js:289:139
SWIPE-CARD
Version 4.0.0 swipe-card.js:21:2147
LAYOUT-CARD 2.4.2 IS INSTALLED layout-card.js:228:115
STACK-IN-CARD
Version 0.2.0 stack-in-card.js:200:5682
FLIPDOWN-TIMER-CARD
Version 1.0.0 flipdown-timer-card.js:515:89
AIR-VISUAL-CARD
Version 2.0.0 air-visual-card.js:6:9
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "button-card-action-handler" has already been used with this registry typography.js:181
STATE-SWITCH 1.9.3 IS INSTALLED <empty string> state-switch.js:139:248
VACUUM-CARD 2.6.2 vacuum-card.js:4:17736
ALARMO-CARD
Version: v1.4.0 alarmo-card.js:880:659
The main 'lit-element' module entrypoint is deprecated. Please update your imports to use the 'lit' package: 'lit' and 'lit/decorators.ts' or import from 'lit-element/lit-element.ts'. See https://lit.dev/msg/deprecated-import-path for more information. config-template-card.js:329:12
CONFIG-TEMPLATE-CARD
Version 1.3.6 config-template-card.js:735:9
🍄 Mushroom 🍄 - 1.8.3 mushroom.js:2554:149
APEXCHARTS-CARD v2.0.1 apexcharts-card.js:835:75172
PLOTLY-GRAPH 1.3.1 production plotly-graph-card.js:12:10112
FRIGATE-HASS-CARD
Version 3.0.0 frigate-hass-card.js:21563:9
FLOOR3D-CARD
Version 1.4.3 floor3d-card.js:2248:10716
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "light-entity-card-editor" has already been used with this registry typography.js:181
HISTORY-EXPLORER-CARD Version 1.0.22 history-explorer-card.js:66:887
---- MY-SLIDER ----
Version 2.0.3 my-cards.js:186:11426
---- MY-FOOTER ----
Version 0.0.3 my-cards.js:356:3494
---- MY-CARDS ----
Version 1.0.5 my-cards.js:424:132
New Card floor3d-card.js:2248:11566
floor3d-card: Set Config Start floor3d-card.js:2248:14084
floor3d-card: Set Config End floor3d-card.js:2248:15382
First updated start floor3d-card.js:2248:17081
Start Build Renderer floor3d-card.js:2248:30162
Max Texture Image Units: 16 floor3d-card.js:2248:30405
Max Texture Image Units: number of lights casting shadow should be less than the above number floor3d-card.js:2248:30468
Path: /local/floorplan/downstairs/ floor3d-card.js:2248:31346
End Build Renderer floor3d-card.js:2248:32049
First updated end floor3d-card.js:2248:17599
Thermostat Card
Version 1.3.0 main.js:3:9
Material loaded start floor3d-card.js:2297:3630
Material loaded end floor3d-card.js:2297:3906
Object loaded start floor3d-card.js:2248:32489
Ïnit Objects, Levels and Raycasting floor3d-card.js:2248:34579
Found level 0 floor3d-card.js:2248:34700
End Init Objects. Number of levels found: 1 floor3d-card.js:2248:36391
Shadow On floor3d-card.js:2248:32894
Add Objects Start floor3d-card.js:2297:3957
Uncaught Error:
_onLoaded3DMaterials floor3d-card.js:2297
load floor3d-card.js:2191
load floor3d-card.js:2191
load floor3d-card.js:2191
load floor3d-card.js:2191
_onLoaded3DMaterials floor3d-card.js:2297
load floor3d-card.js:2191
load floor3d-card.js:2191
load floor3d-card.js:2191
load floor3d-card.js:2191
display3dmodel floor3d-card.js:2248
firstUpdated floor3d-card.js:2248
_$AE floor3d-card.js:11
performUpdate floor3d-card.js:11
scheduleUpdate floor3d-card.js:11
_$E_ floor3d-card.js:11
requestUpdate floor3d-card.js:11
o floor3d-card.js:11
x floor3d-card.js:11
nt floor3d-card.js:23
Eu floor3d-card.js:2248
E typography.js:181
t typography.js:181
s ha-logbook.ts:29
u ha-logbook.ts:29
u ha-logbook.ts:29
d ha-logbook.ts:29
v ha-logbook.ts:29
value hui-masonry-view.ts:44
_cards hui-masonry-view.ts:44
value hui-masonry-view.ts:44
value hui-masonry-view.ts:44
value hui-masonry-view.ts:44
performUpdate app.53b92002.js:1248
scheduleUpdate app.53b92002.js:1248
_$EC app.53b92002.js:1248
requestUpdate app.53b92002.js:1248
o app.53b92002.js:1248
b app.53b92002.js:1248
r hui-masonry-view.ts:44
E typography.js:181
t typography.js:181
value eaaf4adc.js:385
_debouncedConfigChanged eaaf4adc.js:84
floor3d-card.js:2297:3876
The resource at “https://home-assistant.ddns.me/static/fonts/roboto/Roboto-Regular.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. 0
The resource at “https://home-assistant.ddns.me/static/fonts/roboto/Roboto-Medium.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. 0
Browser Control Card: Wake Lock API not supported by this browser. browser-control-card.js:1:154
Browser Control Card: CSS Zoom not supported by this browser. browser-control-card.js:1:312
@Amerigo_Rossi see some possible solutions:
In windows, you can install nodejs here
https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi
Once installed you can open a command prompt (or powershell) and type the following command:
npm install -g obj2gltf
Then (always in the same command prompt) you just have the full sweethome3d model to a folder (obj, mtl, pictures), move to the folder (cd) and type the following command:
obj2gltf --checkTransparency -i home.obj -o home.glb
Assuming your model is called home.obj. You wait for some time (from a few seconds to minutes) and when it is completed you can take the glb file and copy it to the www folder of Home Assistant.
It is a self containing binary object so you just need that one file to load the model.
How to Force GPU Rendering on Android - Appuals.com.
In some cases it works, but it depends how big is your OBJ (or GLB) file and the processing power of the GPU.
Thanks @Vincenzo_Filho for your initial diagnostic.
@thundergreen, in this case I think you have started with the sample card and you have changed to your model without removing the sample entities and object groups. Do that and tell me what is the result
indeed… well you might want to remove those entities as it is very confusing 
I use glb and I can just say WOW! Thanks you so much it is now reliable fast and awesome. will play around with open windows and doors… but first big big thanks
Hi Andy, Thanks again for such an awesome contribution (and for your thorough responsiveness). I’m struggling to get text working. I’ve tried a variety of planar objects, sensors, fonts, and background and foreground colors. What I am missing? I’m trying to get the video source to display on the TV screen above the fireplace (red panel):
Here’s the card YAML (relevant entity is at the very end):
path: /local/home_ng3/
name: Home
objfile: housep2.glb
shadow: 'yes'
globalLightPower: '0.8'
header: 'no'
camera_position:
x: 609.3072605703628
'y': 905.5330092468828
z: 376.66437610591277
camera_rotate:
x: -1.0930244719682243
'y': 0.5200808414019678
z: 0.7648717152512469
camera_target:
x: 37.36890424945437
'y': 18.64464320782064
z: -82.55051697031719
object_groups:
- object_group: ac
objects:
- object_id: '117_24'
- object_id: '117_81'
- object_id: '117_118'
- object_id: '117_93'
- object_id: '117_1'
- object_id: '117_4'
- object_id: '117_7'
- object_id: '117_10'
- object_id: '117_59'
- object_id: '117_115'
- object_group: lmbth
objects:
- object_id: '92_6'
- object_id: '92_4'
- object_id: '92_5'
- object_id: '92_7'
- object_group: spigots
objects:
- object_id: '163_1'
- object_id: '167_1'
- object_id: '166_1'
- object_group: cab
objects:
- object_id: '22_5'
- object_id: '199_1'
- object_group: bc
objects:
- object_id: '45_121'
- object_id: '45_135'
- object_id: '45_194'
- object_id: '45_187'
entities:
- entity: light.light_over_kitchen_sink
type3d: light
object_id: '84_1'
light:
shadow: 'yes'
vertical_alignment: bottom
color: Gold
distance: '325'
lumens: '800'
decay: '1.4'
- entity: light.light_over_kitchen_sink
type3d: color
object_id: '84_1'
colorcondition:
- state: 'off'
color: LightSteelBlue
- state: 'on'
color: Orange
- entity: switch.light_in_master_bath
type3d: light
object_id: <lmbth>
light:
shadow: 'yes'
vertical_alignment: bottom
color: Gold
distance: '300'
lumens: '300'
decay: '1.4'
- entity: switch.light_in_master_bath
type3d: color
object_id: <lmbth>
colorcondition:
- state: 'off'
color: LightSteelBlue
- state: 'on'
color: Orange
- entity: switch.light_in_small_bedroom
type3d: light
object_id: '77_25'
light:
shadow: 'yes'
vertical_alignment: bottom
color: Gold
distance: '200'
lumens: '250'
decay: '1.4'
- entity: switch.light_in_small_bedroom
type3d: color
object_id: '77_25'
colorcondition:
- state: 'off'
color: LightSteelBlue
- state: 'on'
color: Orange
- entity: switch.cabinet_light
type3d: light
object_id: <cab>
light:
shadow: 'yes'
vertical_alignment: middle
color: Gold
distance: '200'
lumens: '500'
decay: '1.6'
- entity: switch.cabinet_light
type3d: color
object_id: <cab>
colorcondition:
- state: 'off'
color: LightSteelBlue
- state: 'on'
color: Orange
- entity: switch.desk_light
type3d: light
object_id: '45_101'
light:
shadow: 'yes'
vertical_alignment: top
color: Gold
distance: '250'
lumens: '800'
decay: '1.4'
- entity: switch.desk_light
type3d: color
object_id: '45_101'
colorcondition:
- state: 'off'
color: LightSteelBlue
- state: 'on'
color: Orange
- entity: switch.bookcase_light
type3d: light
object_id: <bc>
light:
shadow: 'yes'
vertical_alignment: top
color: Gold
distance: '200'
lumens: '210'
decay: '1.6'
- entity: switch.bookcase_light
type3d: color
object_id: <bc>
colorcondition:
- state: 'off'
color: LightSteelBlue
- state: 'on'
color: Orange
- entity: switch.light_in_laundry
type3d: light
object_id: '81_4'
light:
shadow: 'yes'
vertical_alignment: bottom
color: Gold
distance: '275'
lumens: '500'
decay: '1.4'
- entity: switch.light_in_laundry
type3d: color
object_id: '81_4'
colorcondition:
- state: 'off'
color: LightSteelBlue
- state: 'on'
color: Orange
- entity: switch.light_in_dining_room
type3d: light
object_id: '82_1'
light:
shadow: 'yes'
vertical_alignment: top
color: Gold
distance: '300'
decay: '2'
- entity: switch.light_in_dining_room
type3d: color
object_id: '82_1'
colorcondition:
- state: 'on'
color: Orange
- state: 'off'
color: LightSteelBlue
- entity: switch.light_in_master_bedroom
type3d: light
object_id: '83_3'
light:
shadow: 'yes'
vertical_alignment: top
color: Orange
distance: '200'
decay: '0.7'
lumens: '350'
- entity: switch.light_in_master_bedroom
type3d: color
object_id: '83_3'
colorcondition:
- state: 'on'
color: Orange
- state: 'off'
color: LightSteelBlue
- entity: light.light_in_family_room
type3d: light
object_id: '78_1'
light:
shadow: 'yes'
vertical_alignment: middle
color: Gold
distance: '180'
decay: '0.6'
lumens: '500'
- entity: light.light_in_family_room
type3d: color
object_id: '78_1'
colorcondition:
- state: 'on'
color: Orange
- state: 'off'
color: LightSteelBlue
- entity: switch.light_in_living_room_2
type3d: light
object_id: '76_54'
light:
shadow: 'yes'
vertical_alignment: middle
color: Gold
distance: '140'
lumens: '1000'
decay: '0.8'
- entity: switch.light_in_living_room_2
type3d: color
object_id: '76_54'
colorcondition:
- state: 'on'
color: Orange
- state: 'off'
color: LightSteelBlue
- entity: switch.beach_glass_lamp
type3d: light
object_id: '143_8'
light:
shadow: 'yes'
vertical_alignment: middle
color: Gold
distance: '180'
decay: '0.6'
lumens: '500'
- entity: switch.beach_glass_lamp
type3d: color
object_id: '143_8'
colorcondition:
- state: 'on'
color: Orange
- state: 'off'
color: LightSteelBlue
- entity: cover.shade_1_top
type3d: hide
object_id: '174_4'
hide:
state: open
- entity: cover.shade_1_bottom
type3d: hide
object_id: '174_4'
hide:
state: open
- entity: cover.shade_2_top
type3d: hide
object_id: '173_4'
hide:
state: open
- entity: cover.shade_2_bottom
type3d: hide
object_id: '173_4'
hide:
state: open
- entity: climate.mytstat_hallway_tstat
type3d: color
object_id: <ac>
colorcondition:
- state: heat
color: Red
- state: cool
color: Blue
- entity: binary_sensor.zz_water_valve_valve
type3d: color
object_id: <spigots>
colorcondition:
- state: 'off'
color: Brown
- state: 'on'
color: Aqua
- entity: switch.samsung_tv
type3d: color
object_id: '72_2'
colorcondition:
- state: 'on'
color: Indigo
- entity: switch.amplifier
type3d: color
object_id: '177_4'
colorcondition:
- state: 'on'
color: Red
- entity: sensor.samsung_tv_media_input_source
type3d: text
object_id: '72_2'
text:
span: 60%
font: verdana
textbgcolor: red
textfgcolor: yellow
backgroundColor: Black
extralightmode: 'yes'
Thanks very much.
Hello @FortranFour, I try to catch-up as quick as possible, now it is pretty calm, I do not know if it is because adoption of the card is dropping or because I reached some form of stability…
Anyway, when the object_id is a number, it means that something went wrong with the export and this means that you may have some collateral effects on the card. Please try to fix the name of the object in SweetHome3d (remove any special characters) and export again. Apart from this I have the impression that your text entity is well configured
Thanks. However, I originally named all the objects with sequential, unique integer numbers in Sweet Home 3D. So, I don’t think that because they are numbers indicates that anything went wrong with the model export to .obj or conversation to .glb. Is it possible text (or overlay, where I am also having problems) does not work with .glb format?
You are right, in my model when switching to glb the text is appearing but it is upside down. I must admit I have less and less time to test and more and more things to test when doing a new feature. For the Glb format I discovered many things are not working the same. It is still experimental but the feature is so cool that I did not want to delay the release. Let me do some analysis before starting the fix.
Hello I was just wondering which hardware you watch the floorplan.omusing an older nuc and after adding more than one entity it hangs and get slowly like hell.
It’s a pity as this project ist more than awesome
Actually the only entity types that are affecting performances are the “light” (with shadow) and the “rotate”. Then, of course, the bigger the model, the higher the resource consumption.
There are still some instability of the rendering, because inside the HA interface it is not always trivial to control the refresh of the page and repainting the model, so it happens that several rendering call are executed slowing down the appearance of the model.
The browser PC (it is the only one that count as no server resources are needed) need to have a decent GPU and (as explained above in some post) the browser HW acceleration and GPU 3D engine need to be activated.
The machine were I debug and test has a good CPU but only an integrated GPU.
You have to find the good trade-off between the available resources, the model complexity and the number of entities (especially the lights). But this is normal, it is true even for gaming.
Ok …copy that . Means I have at least to remove shadows… because my goal is to have a view in which rooms are still lights on . And there’s no other way than having a very recent pc with native GPU to have an acceptable result?
I reckon it is.
My house’s SH3D model is quite big as it has cellar, ground floor and fist floor with some 1500 furniture objects plus walls.
What I have done is checking which furniture objects are the biggest.
The easiest way to do that is : Right click on the header of the Object Panel header → Display Column → Check Model size.
You get a new column with the furniture model size in KB. By clicking on the header, you can order the column from big to small.
Look for the big ones. Either replace them or redesign them to be smaller.
For example, a cupboard can be 1000 KB. But if you make your own cupboard, without the unnecessary details, as I did, it goes down to 300 KB. The worst are beds 
. But you can downsize them from 6000 to 500 KB.
Hope that helps.
Cheers,
us
A question about room: Is there a way to color the room conditionally? It seems like you must specify a base color with room, then color, even when colorcondition is used. Here is my code:
- entity: switch.light_in_master_bath
type3d: room
object_id: room_1_1
room:
color: yellow
transparency: 50
colorcondition:
- color: '#93ADDD'
state: 'on'
I would like the room to become color #93ADDD only when switch.light_in_master_bath is on, but not yellow (or any color) at other times. (It seems as if transparency controls both colors.)
Thanks!
Hello @FortranFour, I think that you are right, there is a bug, also in the refresh of the color based on the condition.
Let’s us know if you guys this sorted @FortranFour
I’m trying to get the same info to my tv, but no luck.
@adizanni would you have an example that we could use as template?
Or anyone else who got it working. Would you mind posting here your working card YAML skeleton?
Thanks heaps @adizanni for always helping us on whatever you can.
No. I cannot even begin to heap sufficient praise on this project. It’s fantastic. Thank you, Andy, for a job well done. The features that I’ve still not been able to get to work with either .glb or .obj models are overlay, text, and fan rotate (fan just disappears when on). I’ve also had some glitches with covers, but I have motorized blinds that go both up and down, so that may be the problem. Everything else works like a charm.
hey @FortranFour
I got it working:
When a video starts playing on my chromecast tv, it shows which app is streaming to the crhome cast.
If I click/tap on the TV, it brings the more info about it as you can see on the pictures.
Also, got to display the room temperature.
Here is my code:
- entity: sensor.temperature
type3d: text
text:
font: arial black
span: '100'
textbgcolor: transparent
textfgcolor: black
action: more-info
object_id: Livingroom_show_temp_1
- entity: media_player.living_room_tv
type3d: text
object_id: Livingroom_Wal_TV_2
text:
font: verdana
span: '75'
textbgcolor: blue
textfgcolor: white
attribute: app_name
action: more-info
Let me know if I can help you with yours.
Thanks heaps to Andy’s documentation. I was able to check again and get it working.
I wish it was possible to show the attribute: entity_picture
It shows the picture of what is playing.
But, the above is already a BIG Plus!
Cheers