Floorplan UI with Color synced lights

thank you so much for the reply … I would like to ask you something … is it possible to add the “alarm-panel” card as in the picture?
I am trying but with a negative result

Sorry if you look bad

Hey thanks for your help! I was able to find out what it was from the homekit-panel-card.js

This has now been fixed. But I have some minor visualization problems, it does not scale everything on one page. is there a workardound?

it must always be scrolled down, and also the persons cards are a little bit hidden

out

Thanks a lot for your work Luke i have mix yours and Mattias work.
So far so good. Now i have to figure out why i dont bring the Spotify Playlist to
work.

2 Likes

hi @lukevink great job!
I have used this code here
style:

  filter: '${ "hue-rotate(" + (states[''light.table''].attributes.hs_color ? states[''light.table''].attributes.hs_color[0] : 0) + "deg)"}'

but the issue I am having is that the picture looks really green, far away from the real light colors.
Any idea why?
How could I fine tune it?
Thanks for your help!

A quick question. Right now I’ve merged all my old lovelace.yaml UI back when the “web editor” was introduced. So right now I only edit my UI through that.

To my understanding I need to “go back” and use the lovelace.yaml file to be able to build this right?
Is it possible to run both, so I don’t remove the working lovelace UI I have right now, while i build a new one like this?

Hey there. So you may just be in luck - I believe, the new version of hassio, you can have multiple dashboards - might be worth looking into:

Hmm thats really odd. Theres definately some weird spots in color (its not perfect), as in some of the colors can show up a bit funky if your base image is not as white as it can be. Can you share your yaml code, a picture of the issue in your config and the png image of the light?

Looks wicked! Nice job!

1 Like

Hmm this is really unusual. Im going to guess its somewhere in the styles. Can you share your ui-lovelace with me on discord?

Hey so I dont have an alarm myself to test it with. You may have to rightclick, inspect and edit the css of the card to get it to look right. Do you have some knowledge of CSS?

Hey yes! Just updated all of my spotify stuff to the new integration and a bunch of other tiny tweaks. Will update github soon.

Hi Frank,

Really nice and smooth!

Would it be possible to share your config? I like the buttons you are using and I think your approach would helpful for me trying, before creating floorplans drawing with lights etc.

Hi Luke,
Thanks - and yes. I did read it, but for some reason I must have messed up the configuration when I was trying, because it wasn’t working. But I gave it a shot again and took your ui-lovelace.yaml file as an example. Finally it worked… a lot of card errors and stuff, but now I at least know it works when both the web-editor and the “old-school” way.

Thanks!

I create a Repo next days an share it.

Thanks - much appreciated!

Ha , i don’t know how to bring it to github;-)
Try it for the last 60min without luck.
Sorry

Any updates on this?? Have been thinking about taking a stab at that myself.

Dear @lukevink thanks a lot for your reply and for your help, it is really appreciated!
I created a zip package containing a few file, please download it using this link: https://share.toradex.com/4dfb3dawugq1mdx
In the zip package, you will find, in the Panel Files folder the following files:

  • “With Hue Filter.yaml”: this file does not have the hue filter line and shows the lights correctly, the way I exported. The picture which shows the correct light is called “Without Hue Filter.png”
  • “Without Hue Filter”: this file does have the hue filter line and shows the lights with a green tone. The picture which shows this issue is called “With Hue Filter.png”

I replaced one of the light (light.finestra) with a pure white light source, to see if the issue was related to the export. This also does not work properly and the two files in the package are also shown this weird error:

  • “white exported light - lamp configured red .png”. To get this picture I configured the light.finestra to be RED, but it the picture looks really white. Walls, table, is all white, even if the real lamp is configured to RED…
  • “white exported light - lamp configured white.png”. This picture is generate by setting the lamp to white…as you can see, the table and the wall looks still white (like the picture above), but the floor looks kind of blue and pink…

The folder “UI Pictures” contains the original pictures, I only placed the living room ones, as the other rooms are not even configured for hue filter right now.

Thanks a lot for your help, I wish you a nice evening!
Diego

1 Like

Hmm, for some reason I can’t get it to load the slider in the popup.
I download all my integrations through hacs, but this one I needed to take from your library.

image

So I’ve tried adding this into the ui-lovelace.yaml file:

resources:
  - type: js
    url: /local/js/light-slider-card-lajv.js

… no luck, so I tried this:

lovelace:
  mode: storage
  resources:
    [ {'url':'/hacsfiles/color-lite-card.js?v=0.348',                            'type':'js'},
      {'url':'/hacsfiles/light-slider-card-lajv.js',                              'type':'js'} ]
  # Add yaml dashboards
  dashboards:
    lovelace-yaml:
      mode: yaml
      title: YAML-OLDSCHOOL
      icon: mdi:script
      show_in_sidebar: true
      filename: ui-lovelace.yaml

No luck either…

What have I done wrong (already tried with a clean browser)?

“Dark Sky” is going out of service, any replacement suggestion?