@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 
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! 
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
Hi,
Modify height: 7% !important; from :host. and also make sure you are on the correct sidebar when you are changing the value 
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 )
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.
- Make sure you have the following in your configuration.yaml:
input_text:
room_cleaning:
name: Currently Cleaning Room
initial: charging
- 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 
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 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
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