I would really love to see how your interface looks like on the phone. I guess it’s not the same as this but still would be really cool to see.
Thanks for sharing, the interface is really beautiful!
Do you think you could do a video (screen recording) so we can see all the interacetions of the buttons? 
1 Like
would love if this would be the standard interface. amazing job.
3 Likes
Yes, it’s essentially a card inside a service call.
service: browser_mod.popup
service_data:
title: Popup example
card:
type: entities
entities:
- light.bed_light
- light.kitchen_lights
- light.ceiling_lights
deviceID:
- this
- dashboard
5 Likes
This was just an example of how you can do it, not meant as a theme.
But I guess I can share the psd
2 Likes
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