Floorplan UI with Color synced lights

Found a great visual tool to get the dimensions, coordinates for the (transparent) images on the floor plan, goes a lot faster then thinkering till you find the correct coordinates :wink:
Also the now playing card from this developer is quite cool to see what’s playing on your TV, projector or just showing artwork from your media players, works great in the floor plan


Video demo: https://www.youtube.com/watch?v=1ZU4WMgwU6s&feature=youtu.be

2 Likes

what program you use to drag icons

OK lets say I’m stupid :flushed: because I forgot off course to add all the entities in the template card, after this it works great, my apologies for my stupidity and thanks for the great work you did to enable us non dev wizards to have a great looking and very functional dashbaord!!!

2 Likes

Olá @lukevink gostei de seu trabalho tenho um robo xiaomi v2 e gostaria de uma ajuda, este codigo que vc colocou input text para que serve? Não consigo chamar por voz o robo para limpeza de area. será que vc consegue me ajudar?

Hey all! I finally uploaded my code to the latest version (111.3), yay! Apologies for taking so long.
I will go through all comments here tomorrow and see if theres anything I can help out with. Cheers everyone!

1 Like

The input text is a variable to store which “room” the vaccum cleaner is cleaning - because the robot cant clean rooms. Instead, you have to manually set “zoned areas” by drawing a grid over your map. (its a little complicated). The input variable is then used to highlight which room is being cleaned in the UI.

google translate - não falo português desculpe!
O texto de entrada é uma variável para armazenar em qual “sala” o aspirador está limpando - porque o robô não pode limpar as salas. Em vez disso, você deve definir manualmente “áreas de zona” desenhando uma grade sobre o mapa. (é um pouco complicado). A variável de entrada é usada para destacar qual sala está sendo limpa na interface do usuário.

Sketch and The Noun Project
https://thenounproject.com/ - which for any designer is a massive cheat :smiley:

Hey yea! Super cool! I had a now playing on my projector screen in the middle of my living room - but the angle was so warped and thin, it looked pretty terrible in my room so I chose not to keep it.

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!

1 Like

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.

1 Like

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?

1 Like

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 :slight_smile:

So after this, and you know the basics, you can use probably something like this flow;

Step 1: Preparations

  • Make a plan what you want to do with the floorplan, managing lights, music, sensors…
  • On what device are you going to use, view the floorplan, phone, tablet, monitor, TV, Nest hub…
  • What’s the purpose of the floorplan, view, monitor, or mange as a switchboard for instance
    – lights, media, sensors, camara’s…
    – Get a list of all the entities you are going to use in the floorplan, you need this later…
  • Do you have a plan of the house, rooms, the measurements, furniture measurements…, so how detailed you want to go, you will need this information to build the plan itself…

Step 2: The floorplan itself…

Step 3: Put the floorplan in lovelace…

Step 4: The config of @lukevink

  • I never have seen a more detailed config as this one, but still if your all new to this, it’s still quite overwhelming believe me it was for me :slight_smile: 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 :wink:
  • Start with installing the custom cards, integrations for this to work, you can use Hacs for most of these: https://hacs.xyz/

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 :wink:

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 :wink:

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 :stuck_out_tongue:

Good luck, and off course share your ideas, results back here always fun, educational so see what other people have designed!

11 Likes

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)

  • trusted_networks
  • trusted users

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

  • the build in Cast service of HA, (https://www.home-assistant.io/blog/2019/08/06/home-assistant-cast/) works but you need to expose your HA installation with SSL to the outside world using Nabu Casa (payed service) or DuckDNS or something like this.
    it worked for me but in my short tests it was not always handling custom cards correct and also was not that reliable to be honest, so I’m not going further is this here now.

So as always some smart developer had probably the same issues and found a solution for this :wink: 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 :stuck_out_tongue: 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 :wink:

So for instance install Catt on a raspberry Pi, wel that’s easy as Pi to be honest :stuck_out_tongue:

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 :wink:

  • 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.

  1. The second way that I could find, makes things a lot easier and seems to work fine for more then a week now…

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 :wink: 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.

6 Likes

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 :face_with_symbols_over_mouth: 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 :wink: 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 :frowning: 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 :wink:

1 Like

thank you so much, will try it. Stupid question, i dont find the divice ID of my Google Nest Hub…