So I think its just a matter of stretching the background images and adjusting the manual positions of the style elements, for example:
left: 85.5%
top: 70.5%
transform: scale(1.2)
width: 3vw
Left and top is position on the screen, transform scale changes the size of the object and width aswell. You may need to update the resolution of some images. The source files are included in the “UI source” folder.
Hey so I didn’t really “integrate” it - just used device tracker to detect when it comes on the network.
Yea mine broke too… Had to update alot of the cards in the JS folder. My latest code is on github now!
I updated my code to the latest version. In future, you can figure out these sort of things by right click, Inspect. It ususally shows the offending card, element or entity.
Ah yes I had the same problem. Havent yet gone deep into resizing all of this, as it just worked for me at the right resolution. I presume using transform: scale(2) or something would be a quick hack…
tks for the reply!
but, you found any way to power ON/OFF the xgimi projector?
sorry, new in home assistant please let me know ho i can install it? i have Hass installed so i can add scripts from git hub please help me, may be its video how to do it or what i need to do first to get same result?
Hi,
With respect but that’s not how this works I’m afraid, there is nothing to install here, you have to build this yourself, please have a look at the first post in the resources part, everything is explained here.
To be honest I never have seen a cleaner more detailed config, Lovelace config as the config of @lukevink and as a bonus he is even willing to support this in this forum so you will not find it better than this!
But with all respect if this is all new to you, start walking first and go running after this, learn the basics start with building a simple example dashboard, learn how the different cards work, Lovelace, get familiar with basic yaml editing, because you will need that believe me!
After this make a basic picture elements example, have a look at this for instance: https://www.juanmtech.com/set-up-the-picture-elements-card-in-home-assistant/, read, play, investigate, build… curse and start over, believe me I’m already in version 6 now 
So after this, and you know the basics, you can use probably something like this flow;
Step 1: Preparations
Step 2: The floorplan itself…
Step 3: Put the floorplan in lovelace…
Step 4: The config of @lukevink
so go true this part by part and try to rebuild the config from luke first, all the images are in his config, just replace the entities with yours and see of you get this working, no it will not be only copy and paste 
The list is probably not complete, but out of my head;
After this and you get the hang of it, start a new dashboard and start creating your dream dashboard
Optional: you can also have a look at this option: GitHub - bradcrc/color-lite-card: Simple custom card for Home Assistant Lovelace floorplans with color and dimming support here you use a custom card to get more or less the same, I prefer the solution of @lukevink but depending on what you want it can also be an option for you?
The developer also created a very simple tool to get the coordinates of elements you want to put in your floor plan, believe me it makes it a lot faster than fiddling with the code yourself
I know this is probably not what you wanted to hear, but I’m afraid it will not be plug and play, more pray in the beginning to be honest
So believe me it takes some time, effort to get to this result, but the feeling when you get this done, is so overwhelming and satisfying that it was worth the time you put in to this, also when your wife, loved ones say OK I have to say this is quite nice and handy I can see me using this will make your whole day 
Good luck, and off course share your ideas, results back here always fun, educational so see what other people have designed!
Stream your floor plan, dashboards to Nest Hub, ChromeCast… using catt with HA, HassOS…
Hi,
It took me some time to figure this out, so maybe helpful for others also…
There are two options that I could find to do this?
So here it goes, first we need to configure something to logon on a device without a keyboard, like a Google Nest hub for instance;
To do this we need to add something to the configuration.yaml file, trusted networks, trusted users
So basically you add your ChromeCast devices as a trusted network and define a user that can login without entering credentials
For this we need to add auth_providers to our configuration.yaml
(https://www.home-assistant.io/docs/authentication/providers/#trusted-networks)
Add a device to the trusted network
auth_providers:
- type: trusted_networks
trusted_networks:
- 192.168.0.154/32
- 192.168.0.165/32
Now we also need to add a trusted user who can access the dashboard
That we do true the option: trusted_users and adding the option to bypass the login true credentials
trusted_users:
192.168.0.154: ID OF THE USER
192.168.0.165: ID OF THE USER
allow_bypass_login: true
you find the ID of the user, not the name by going to your HA settings, users, click on a user and on the top of the window you can see the ID of that user, copy this and put it in your config.
Important: if you use Nabu Casa you also need to add this option (type: homeassistant) under auth_providers because otherwise every connection will be untrusted because Nabu Casa is not forwarding the IP address of the incoming request at this moment;
See the post about this here: https://www.nabucasa.com/config/remote/
Luckily this can easily fixed by adding this under authenticated providers
auth_providers:
- type: homeassistant
Personally I wanted to restrict things as much as possible so I only allowed the 2 Hubs I have to be considered to be on a trusted network and restricted the user to a special “hub” account I created in HASS. So my configuration.yaml looks like this:
auth_providers:
- type: homeassistant
- type: trusted_networks
trusted_networks:
- 192.168.0.154/32
- 192.168.0.165/32
trusted_users:
192.168.0.154: 6r18ewef97534332dwhihfwif30fbd1bd
192.168.0.165: 6r18ewef97534332dwhihfwif30fbd1bd
allow_bypass_login: true
So now that we have done the preparations we can start configuring the casting option
So as always some smart developer had probably the same issues and found a solution for this 
https://github.com/skorokithakis/catt
Basically you can cast almost anything with this, but it took some time for me as a non developer, wizard to figure it out 
but now that I have it working, I can maybe also help other users with this?
There are two different ways to do this that I could find?
If you install catt in your HassOS installation, it will work but every time you start your HassOS you need to do this again because the docker container is emptied again, not fun and to be honest not workable in my opinion.
So the option you have here is install Catt on another device, Rpi, VM, separate docker container, … or whatever, this works fine but there are some caveats of course, when is this not the case
So for instance install Catt on a raspberry Pi, wel that’s easy as Pi to be honest
Just open a terminal and put in this command
pip3 install catt
After this do a scan to find your cast enabled devices, and it will give a list of all your devices you can use with this service
catt scan
After this you can start casting almost everything to your devices from this machine based on a simple command structure, for instance stream www.google.com to a Nest Hub;
catt -d "NAME OR IP_OF_DEVICE" cast_site https://www.google.com
Here is the complete list of commands for Catt that I could find?
Commands:
add Add a video to the queue (YouTube only).
cast Send a video to a Chromecast for playing.
cast_site Cast any website to a Chromecast.
clear Clear the queue (YouTube only).
del_alias Delete the alias name of the selected device.
del_default Delete the default device.
ffwd Fastforward a video by TIME duration.
info Show complete information about the currently-playing video.
pause Pause a video.
play Resume a video after it has been paused.
play_toggle Toggle between playing and paused state.
remove Remove a video from the queue (YouTube only).
restore Return Chromecast to saved state.
rewind Rewind a video by TIME duration.
save Save the current state of the Chromecast for later use.
scan Scan the local network and show all Chromecasts and their IPs.
seek Seek the video to TIME position.
set_alias Set an alias name for the selected device.
set_default Set the selected device as default.
skip Skip to end of content.
status Show some information about the currently-playing video.
stop Stop playing.
volume Set the volume to LVL [0-100].
volumedown Turn down volume by a DELTA increment.
volumeup Turn up volume by a DELTA increment.
write_config Please use "set_default".
This all works fine, but we off course want to use a device, automation in HA to trigger this;
So we need to find a option to get a way to execute a command on a external machine;
There are maybe other ways to accomplish this? but I could only find the option to do this with ssh,
As always this is not working out of the box and we need to do some things before we can use this, what’s new
First we need a way to authenticate the connection to the external machine from in HA, you can off course use no password for your ssh connection (Don’t do this!) a better way to do this is using ssh keys, I don’t want to go to far in this in this message:
but here you can find a tutorial to do this: https://www.youtube.com/watch?v=b6lJnqeHHns&feature=emb_logo
So now that we have this working, you still need to find a solution to use this in HA, also I don’t know if this is the only option but what I could find was using a shell command for this: https://www.home-assistant.io/integrations/shell_command/
a small example that worked for me;
shell_command:
start_ha_hub_woonkamer: ssh -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no -i /config/ssh/id_rsa [email protected] catt -d 192.168.0.164 cast_site http://192.168.0.250:8123
After creating the shell scripts in your config and you rebooted HA you can use this shell command in an automation, script… in your HA installation like this for instance
- id: '1591458950260'
alias: test hub
description: ''
trigger: []
condition: []
action:
- service: shell_command.start_ha_hub_woonkamer
This works all fine, no issues here, but it takes some time, efforts to get it all (keep) working and you need to have a seperate device and also when you have a lot of devices, dashboards you need to create shell scripts for everything you want to cast, in my opinion also not the best solution, but it works so it’s an option for who wants to do it this way.
Just install this add-on true the add-on store of HassOS: https://github.com/hassio-addons/addon-ssh managed, maintained by the team itself (frenck) so save to say that is a save and good option also to the future.
After this putt this in the config of the add-on
init_commands:
- python3 -m pip install catt
Basically this installs Catt again in your docker after rebooting your machine, HassOS…
Because now that Catt is basically running in HassOS you can use just a simple automation, script to initiate the cast based on a device, time, or whatever you want to use…
Small example that initiates a cast to my Hub based on a movement sensor
- id: '1592380285643'
alias: beweging cast
description: ''
trigger:
- device_id: cb70e3d37b0e492abacd36fc6b6549f4
domain: binary_sensor
entity_id: binary_sensor.beweging_bureau_motion
platform: device
type: motion
condition: []
action:
- data:
addon: a0d7b954_ssh
input: 'catt -d 192.168.0.165 cast_site http://192.168.0.9:8123/lovelace/test'
service: hassio.addon_stdin
Note: The first time you cast something to your Hub for instance you will be greeted with the login screen of your HA installation, if you did everything correct as described above in configuring trusted networks, users you should see an option under the login prompt to click on trusted networks after you do this you will be logged in HA and go to the dashboard you requested.
The first time I tried this I did not saw the option, but this was because I was using a dark theme, but just click on the bottom and it should work fine, if you want to be sure just put your HA on the default lite theme and you will see the option clearly in the logon window.
So hopefully it’s helpful for somebody and off course if you have a better solution don’t hesitate to share this, always willing to lean and share!
source that started this journey https://blog.fuzzymistborn.com/homeassistant-and-catt-cast-all-the-things/
Update I got request of this so small update: yes if you have a Homey and installed the Google ChromeCast app, you can directly cast pages, dashboards… from a Homey flow, no need to use Cast for this, to use this you only have to configure the trusted networks, users part in your configuration in HA.
Thanks for that, works great for now. Is there a Script for starting this if the Hub is nothing playing for 2 mins ?
Hi,
did not tested this yet, but can’t you use an condition in your automation for this?
Something like this for a Google Nest for instance
Maybe something like this, not home so can’t easily test right now
- id: '1592575796411'
alias: Cast every 2 minutes if not playing
description: ''
trigger:
- minutes: /2
platform: time_pattern
condition:
condition: or
conditions:
- condition: device
device_id: b52bb502e9a049aa90abd1c7c30ebbd7
domain: media_player
entity_id: media_player.hub_woonkamer
type: is_idle
- condition: device
device_id: b52bb502e9a049aa90abd1c7c30ebbd7
domain: media_player
entity_id: media_player.hub_woonkamer
type: is_paused
action:
- data:
addon: a0d7b954_ssh
input: 'catt -d 192.168.0.165 volume 0 && catt -d 192.168.0.165 cast_site http://192.168.0.9:8123/floorplan-rpi/home
&& catt -d 192.168.0.165 volume 60 '
service: hassio.addon_stdin
Maybe also helpful?
Because Google decided to kill the cast every 10 minutes with the latest firmware 
this is the only way to get it working constantly now, will move to a motion detector for this but the delivery out of China seems to be slow at the moment so for now this will do the trick.
- id: '1589529246400'
alias: Cast to hub 10 minutes
description: ''
trigger:
- minutes: /10
platform: time_pattern
condition: []
action:
- data:
addon: a0d7b954_ssh
input: 'catt -d 192.168.0.165 volume 0 && catt -d 192.168.0.165 cast_site http://192.168.0.9:8123/floorplan-rpi/home
&& catt -d 192.168.0.165 volume 60 '
service: hassio.addon_stdin
Small note: Because when you start the casting you get a stupid annoying sound, that you can’t disable pfff 
I also lower the volume now first to zero, cast and put the volume back to the previous setting, this also gives a small sound but is a lot less annoying, if you or something has a better option please do share because no sound would be so much better for this
thank you so much, will try it. Stupid question, i dont find the divice ID of my Google Nest Hub…
Just use the automation editor, and this will be filled in automatically
So easy 
Unfortunately no . Been crossing my fingers xgimi does some sort of APi or something. I’m ever curious if there’s a way to “hack” it… perhaps hdmi cec or arc or something?
HDMI CEC works for me but only for power on, to turn off… no way atm
Thank you @lukevink.
I have tried to implement just the dynamically-lit floorplan, but get incorrect colours.
I’m not sure if it’s a similar issue to @Diegole in the Apr 15 post
I have rendered multiple images from Sweet Home 3D - all the same full size, no lights on for the base, then each light on individually for new images.
When I turn a light on, it changes the colour of the whole floorplan, not just the lit area. If the hue is 0 (red), then it’s the same colour and I see a nice white light, but my real light is actually red. If I use any colour other than red (hue 0), the whole image is modified. I haven’t seen others ask, so maybe I got something wrong or missed something out. Again, I’m only trying to emulate the lighting floorplan.
- path: floorplan
title: Floorplan
panel: true
icon: mdi:floor-plan
cards:
- type: 'custom:config-template-card'
entities:
- light.sunflower_alcove
- etc. (all of the lights/entities in the floorplan)
card:
type: picture-elements
image: /local/floorplan/floorplan-nolights.png
elements:
- entity: light.sunflower_alcove
type: image
image: /local/floorplan/floorplan-alcove.png
action: none
hold_action:
action: none
tap_action:
action: none
style:
mix-blend-mode: lighten
filter: >-
${"hue-rotate(" + (states['light.sunflower_alcove'].attributes.hs_color
? states['light.sunflower_alcove'].attributes.hs_color[0] : 0) + "deg)"}
opacity: "${states['light.sunflower_alcove'].state === 'on' ? (states['light.sunflower_alcove'].attributes.brightness / 255) : '0'}"
left: 50%
top: 50%
width: 100%
...
I’ve tried many things, including adding (back) in the bit with style: ha-card:first-child {...}, but no luck.
I also made a quick test HTML+CSS document with just a background and foreground image, the hue-rotate filter and mix-blend-mode, and it works the same - colours the whole image, so this seems like normal behaviour… I’m missing something…
Am I meant to edit the images and remove/delete background parts that aren’t coloured by the lights? (The explanation doesn’t say to.)
I would really appreciate anyone’s advice on how to fix the colouring problem, thank you!
Is this really not a problem anyone else has had?
It seems like lots of people have tried this floorplan technique with mix-blend-mode: lighten but from what I read about that mode, and my testing, it should change the hue as it does for me… why does it work differently for others… or what am I missing to get this to work as expected?
It’s doing the same for me too. The color of one light is blending across the Floorplan into other rooms. I noticed in the provided code file he has the rooms broken out (ex. kitchen vs study) in the lights folder. I was thinking of maybe needing to do that to avoid the blending across other room images layered below. I was also thinking I may need to adjust the light source level % in Sweet Home 3D. I spent some time this afternoon trying to figure out how to create images in Sweet Home 3D of just one room of the floor plan, but couldn’t figure it out. Ill try using a photo editor software to cut the room images (though the rooms aren’t square so it will be interesting) Ill post my results once i know more.
Hey @lukevink I really like your spotify-card-styled.js (which is outdated, and does not work anymore unfortunately) but can’t get your style in the new spotify card by fondberg. Can you maybe help me out getting the correct style into that card? Or help me how to configure the style in the ui yaml file maybe? Thank you