Floorplan UI with Color synced lights

read1st · July 11, 2020, 8:51pm

hi there, (this is my first post, excuse me if i am not using correct terminology)
to everyone struggling with getting the color of the lights synced correctly. i just figured out a way that works in my setup : I changed the color values of the ‘light-on image’ using a photo editor (photoshop in my case). Proceed as follows:

change ‘hue/saturation’ values of the ‘light-on’ image
- hue:300
- saturation +100,
- tick ‘colorize’ on.
  (the image turns red)
apply opacity mask to get smooth effect

for reference:

lukevink · July 15, 2020, 10:55pm

Oh sweet! I’ve been waiting for a Spotify card that works, will look into it and keep you posted

ManImCool · July 20, 2020, 7:12pm

Hey long time lurker, first time poster of this thread. I’m happy to say I"m almost done with a completely new UI based on this project, but have one simple but important question: what font did you use for menu buttons? Instead of the room/group and media pages, I’m doing something different, and want to make matching buttons accordingly with the same font! I suppose I could redo all buttons in my own font but I like the one you picked. Thank you!

hardkothari · July 25, 2020, 7:14pm

You can change the icon color to transparent. Hence it will be hidden. Only will show if motion detected and color is changed.

style:
  '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'

hardkothari · July 25, 2020, 7:15pm

Awesome design and amazing help to all of us by sharing the config. Thank you so much for this!!

sergio_pt · July 30, 2020, 8:08am

Hi all!!
I dont know if it’s only me, but the update to 0.113.2 seems to have broken my Floorplan card.
It seems to trace back to config-template-card.

Does anyone else have this issue?

config-template-card.js:3227 Uncaught (in promise) TypeError: Cannot read property 'state' of undefined
    at eval (eval at _evaluateTemplate (config-template-card.js:3227), <anonymous>:1:36)
    at HTMLElement._evaluateTemplate (config-template-card.js:3227)
    at config-template-card.js:3191
    at Array.forEach (<anonymous>)
    at HTMLElement._evaluateConfig (config-template-card.js:3180)
    at config-template-card.js:3188
    at Array.forEach (<anonymous>)
    at HTMLElement._evaluateConfig (config-template-card.js:3180)
    at HTMLElement._evaluateArray (config-template-card.js:3205)
    at config-template-card.js:3185

dmertens · July 30, 2020, 10:38am

I have started to setup a new version based on the new config of Luke but for what I have now everything seems to work fine, lights work, media works weather works, state images, icons, badges work, … so no issues here I think

sergio_pt · July 30, 2020, 10:51am

Guys, I’m really sorry.
Just traced my issue to a change in the media_player entity id.

Fixed, and all is working fine

ManImCool · August 3, 2020, 1:37pm

Still a very rough draft but thought I’d share mine. I wanted to create way more different tabs/views than I thought I had space for, until I came up with a simple solution: insert a down arrow so I can scroll down to reveal additional menus! I think it looks sleeker being animated. It’s easy to miss but I also had to create a 5th roborock button for the mop setting.

Are the animated rainy weather overlays working for anyone? As far as I can tell I have them in the correct order in my lovelace yaml, but didn’t see the rain animation overlay despite raining all weekend. I changed the state filter from ‘pouring’ to ‘rainy’ and confirmed it was ‘rainy’ as a current state from openweather.

snoekieboe · August 3, 2020, 1:59pm

Need help… this is driving me nuts
I can get @lukevink 's setup up and running but the only thing not working is the " control rooms" page.

i’ve tried to isolate this by trying a simpler example (https://www.youtube.com/watch?v=6QbtU9ID47A&t=469s) but with similar results.

The result is a white page showing nothing (also no errors) and it seems to be related to the config-template-card.

I’m using HA 0.113.3 and running lovelace in yaml mode.
all custom addons have been installed (through HACS or manually) all resources are mentioned in configuration.yaml etc…

Who can help me troubleshoot this?

Thanks in advance
br

dmertens · August 3, 2020, 2:11pm

Looks great!, love to see your config if your willing to share?

Thanks!

ManImCool · August 3, 2020, 6:00pm

Sure. Again, it’s a super rough draft across all tabs, not to mention the “all entities” tab is practically empty right now.

edit: dumb question but how do I paste in my massive yaml file? I tried wrapping it inside a [code] but I’m way over the word/character limit.

snoekieboe · August 3, 2020, 6:21pm

most upload their config to github and share it

ManImCool · August 3, 2020, 7:16pm

Ugh obviously have an account but I’ve never uploaded a single thing to github before; i’ll take a look at it tonight. Please pardon my github noobness.

ManImCool · August 3, 2020, 11:55pm

Hope pastebin is an acceptable way to share lovelace configs! Let me know if not. https://pastebin.com/7EBGV5BJ

dmertens · August 4, 2020, 10:42am

No problem with pastebin, Thanks!

X015 · August 4, 2020, 12:36pm

Thanks for giving me a project for the Weekend

Beautiful UI !!

TylerHome · August 5, 2020, 9:38am

I did dynamic floorplan for my home assistant, but these config is on other level.
There is a guide to approch lovelace and css to create a safe environment to check config wihtout screw-up all my system?
I’m little scared to copy and paste something really I don’t understand.

Thanks

ASNNetworks · August 5, 2020, 6:13pm

Create a new dashboard in yaml mode and use that for experimenting. I have two dashboards specifically for testing out cards/elements before I add them to my ‘official’ dashboard.

Once you have everything setup and are satisfied, just use the new dashboard as the default.

reins5 · August 7, 2020, 8:30pm

you can share again because it is not available. thank you