Floorplan UI with Color synced lights

Thank you! Yea I’m trying to figure out how to “nicely” integrate clouds and weather. Messing around with gifs and videos for rain etc. I think I will make custom animations.

At a certain point it seems easier just to make a 3D home in unity or three js :wink:

Good evening and congratulations for the really cool project … can I know if there is a more detailed guide?

thank you very much and congratulations again

1 Like

github?? what type of light it that?

It’s the custom ‘button card’.

My lights colors isn’t synced correctly… Link to my code

At first they were almost inverted, but after adding hue-rotate:

          'on': opacity(100%) hue-rotate(-50deg)

It looks better. I’m still not able to get as correct and saturated colors as OP. The biggest problem right now is when my lamp IRL is white, the room is orange/closest color in the color wheel. Is there a solution?

Would be amazing to fix this color sync issue.

I’m not able to change the light settings from my phone. Do I have to do anything to enable touch?

So thankful for your work! :smiley:

1 Like

Good evening, congratulations for the really nice project, I too started to create my configuration but I am having problems and I don’t really know where to put my hand … practically the card weather I can’t see it in its entirety. where can i change the position?

- backdrop: false
  entity: weather.roma
  name: ' '
  style: |
    :host {
      left: 11.4%;
      top:  85.5%;
      width: 17%;
      height: 7% !important;
      overflow: hidden;
      height: 8.5vw;
      background: none  !important;
      box-shadow: none !important;
      font-size: 1vw !important;
    }
    ha-card {
      background: none  !important;
      box-shadow: none !important;
      flex-flow: row-reverse !important;
      padding: 0 !important;
    }
    .weather__info--add{
       display : none !important;
    }
    .weather__info{
       flex-grow: 1;
       min-height: 0 !important;
       height: 2.4vw;
       margin-left: 0.6vw;
    }
    .weather__icon{
       margin-right:0.5% !important;
       margin-top: -3%;
       width: 2vw !important;
       height: 2vw !important;
       flex: 0 0 2vw !important;
    }
  tap_action: null
  type: 'custom:simple-weather-card'

Thanks so much

hello, I love your work it just looks really great! But I have the following two error messages:

0 is read-only
can’t define property “useTemperature”: Object is not extensible

unfortunately I do not know exactly where the error comes from, how would I get more detailed debug information? I have currently simply imported your complete lovelance.yaml. as well as uploaded all the dependencies.

hi, how did you set the weather? if you look at the previous post I can’t see it

hi, how did you set the weather? if you look at the previous post I can’t see it

https://community.home-assistant.io/t/floorplan-ui-with-color-synced-lights/169417/72?u=fabrizio_martini

Hi,

Modify height: 7% !important; from :host. and also make sure you are on the correct sidebar when you are changing the value :slight_smile:
Regards,
Seb

2 Likes

Hello there,

I’ve managed to do everything except the vacuum part. I’ve integrated with HA, made the design and everything, but unfortunately the pics are not working as they should. I’ve looked a thousand times on your code and compared it to mine, and i don’t know what the problem is.

As you can see in the picture, as soon as i select a room to clean, the picture remains that way. Can you or somebody give me a suggestion ? (I’m fairly new to this HA :smiley: )
Regards,
Seb

Later edit: I’ve managed to to get it working…in a way.

3 Likes

Hey Fabrizo! Sorry I really just put it online as some people requested it. I do my best to comment in the code but it is a more complicated lovelace UI given the manual positioning of stuff and the way I did it very custom. Let me know if you have any specific questions (feel free to discord me!) I can help you out.

Very cool! And thank you for your kind words. Looks really cool, nice work. Glad my config helped you and also very glad you are learning some new things. All this web code can be very helpful to know in ALOT of places. Well done!

1 Like

Hey so this part of the code looks right. The following should adjust its position:

      left: 11.4%;
      top:  85.5%;

If it doesnt, it might be a syntax thing or something else in your Yaml file. Feel free to share it on discord with me if you are still having problems I can try to take a look.

1 Like

Hey there! Do you mean the “Cleaning Kitchen” and green square bit? If so, the images respond to the input variable: input_text.room_cleaning

If the images are still there when your vacuum is done, check the status of input_text.room_cleaning in Developer Tools >> States. It should say “charging” or “none”. If not, then there is something wrong with this entity.

  1. Make sure you have the following in your configuration.yaml:
input_text:
  room_cleaning:
    name: Currently Cleaning Room
    initial: charging
  1. Make sure you have the following automations to update that input text:
    https://github.com/lukevink/hass-config-lajv/blob/428bec735ec0deaef9fbbb2643b035030667c380/automations.yaml#L156

Im guessing you have tried these things? Let me know if you are still having issues, or hit me up on discord we can solve it together.

Side note - you have discovered an unfinished part of my config :stuck_out_tongue: Congrats! haha. I meant to put text beneath those time and floor icons, whoops.

Nice! Didn’t know he did that! Very cool

Hey there,

So im going to guess somewhere in your lovelace is an entity that doesnt exist? useTemperature is not something in my code anywhere so im curious where in you have it. Try searching in lovelace.yaml for it and share the code where you find it?

Hey lukevink, i realized that i reached a code that was not finished :smiley: but i figured out in the mean time what to do with it. Anyways, thank you for posting your code, i’ve learned a lot on how HA is working (i just started 2 weeks ago) and i’ve learned a bit of YAML and CSS :smiley:

Right now i’m working on Media page, but what i realized that the integration with spotify is working really slowly, or maybe my configuration is wrong. Do you have some suggestion, or some updates for your code? I;m using the “official” integration of Spotify with HA and the 2 components you are using. Thanks

1 Like

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