Floorplan UI with Color synced lights

Hi, thanks for your reply! I have managed to get it to work using custom:hui-markdown-card instead of mardown. Then I followed a deep rabbit hole into CSS and figured how to align the text. I use variable text templates (like how many lights are on, welcome messages etc) and the sizing was centered nomather the align-text options I used.

But I got it all to work. Thanks for your input though, I am interested in CSS and scripts so definitely gonna comb through your post!

Fair enough.
I was actually using the manual process before I did a reinstall action and started over. I think I have a fairly good understanding and by looking at examples it normally enda up making sense to me :slight_smile:.

Is it possible to describe how you made that sidebar?
I know you just hide away the default menu with compact header, but is your menu just a custom card with designes icons and styled together?

1 Like

any chance you could make this an empty skin? like what we would need for just the side bar?

2 Likes

Thanks for your public config btw, it helped me a great deal understanding how to use picture-elements. I’ve been using HA for little over 3 months now, and have never worked with CSS or scripting, so it’s very welcome to look into what others have done. Used that together with Mattias_Persson’s config as prime examples.

I created a tablet version of my smartphone setup: (work in progress):

3 Likes

The renderings with the sun position would be interest to see the shadows inside the house.
I also thinking the effect of the clouds and sun over PV panels.

Congrats for the amazing work.

1 Like

@david1 - take a look here Lovelace: custom sidebar card

2 Likes

Yep that’s it! It’s very hard coded. I didn’t see the need to make a whole card for it

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