12 Likes
can you do this for me?
6 Likes
i would actually pay money for having this setup, i spent an entire week making mine, and it looks like dogshit compared to this lol 
14 Likes
hats off to you my friend, most polished and best looking UI i have ever seen
3 Likes
How did you make the annimated icon (like the spinning fan)? Been wanting to do this
2 Likes
With after effects but I’ve seen others do it with css animation!
1 Like
Is it possible ‘hui-markdown-card’ plugin is missing in the repo? Can’t seem to find them on HACS either. (As we speak I’m trying to recreate the full screen with CSS animations etc).
It’s not a plugin. Its the ”internal” name of markdown card. You shouldn’t have to install anything.
Modified (CSS+JS) vertical Light Entity Card for easier touch control.
are you willing to share how you modified the Light Entity card to have a vertical dimmer?
1 Like
Sure. I copied ‘light-entity-card.js’ and renamed it to light-slider-card.js and added this html.
<style>
ha-card {
box-shadow: none;
padding: 0;
margin: 0;
}
.light-slider-card-center {
display: flex;
justify-content:center;
padding: 0;
height: 17em;
padding-top: 6.5em;
}
input[type='range'] {
-webkit-appearance: none;
background-color: rgba(25, 25, 25, 0.9);
height: 8em;
overflow: hidden;
width: 100%;
border-radius: 1.5em;
transform: rotate(-90deg);
font-size: 0.9em;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
box-shadow: -210px 0 0 210px rgba(255, 255, 255, 0.8);
cursor: pointer;
height: 0;
width: 0;
border: 0;
}
.slider-center {
display: flex;
justify-content:center;
margin-top: 1vw;
}
.percent {
color:rgba(255, 255, 255, 0.7);
margin-top: -0.3em;
font-size: 1.7em;
z-index: 1;
display: flex;
justify-content: center;
font-family: SF Display;
letter-spacing: 0.04em;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}
textarea:focus, input:focus{
outline: none;
}
</style>
<form>
<div class='light-slider-card-center'>
<input .value='${t.attributes.brightness || 0 }' .onchange='${e=>this.setBrightness(e,t)}' id="slider_input" type="range" min="0" max="254" oninput="slider_output.value = Math.round(slider_input.value / 2.54 )">
</div>
<div class='percent' style="margin-left: 0.3vw;">
<output .value='${Math.round(t.attributes.brightness / 2.54 ) || 0 }' id="slider_output"></output><span style="margin-left: 0.05em; margin-top: -0.03em; font-size: 0.85em;">%</span>
</div>
</form>
1 Like
Thanks for sharing, although i’m not 100% sure where to put the html.
And do i need to add a new resource to the lovelace config?
1 Like
If you’re unsure just copy the light-slider-card.js I linked. Yeah, you need to add it to your resources. Check my ui-lovelace.yaml
1 Like
Thank you. Is there something else i need to do to get the dimmer to work on an iphone?
1 Like
Beautiful. First UI that’s made me really want to wall-mount a tablet at home.
4 Likes
Sorry, I’m not using the dimmer on mobile. But you’re right, not working for me either.
I am new to HA and spent a week setting up my system and after seeing this. I know nothing and understand even less. That’s incredible work 
. I have so many questions but don’t even know where to start. Well done again.
5 Likes
To be honest: Thats is by far the best Lovelace-Ui that I’ve seen ! Good work! Will try to copy something here
2 Likes
Very nice work!! I looking to copy some of the ideas… How did you get rid of the Home Assistant UI sidebar and title bar? I searched your ui-lovelace.yaml and didn’t see anything obvious, mind you it’s over 3000 lines.
Anyway, thanks for sharing your work!
1 Like
He @gwww you need this: https://github.com/maykar/custom-header
To get tid of the sidebar and header/title-bar
3 Likes
Hey Mattias. I’ve had a deep dive into your code and it’s given me lots of ideas on how I want to approach my UI.
One question though, if you’re running HA on RPI, how do you then get the command line sensors for your iMac to show up? Or, is this only when you view the UI on your iMac?