A different take on designing a Lovelace UI

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? :slight_smile:

1 Like

would love if this would be the standard interface. amazing job.


Yes, it’s essentially a card inside a service call.

service: browser_mod.popup
  title: Popup example
    type: entities
      - light.bed_light
      - light.kitchen_lights
      - light.ceiling_lights
    - this
    - dashboard

This was just an example of how you can do it, not meant as a theme.

But I guess I can share the psd

1 Like

Can do landscape too but I use homekit for phone

1 Like

can you do this for me?


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 :smiley:


hats off to you my friend, most polished and best looking UI i have ever seen


How did you make the annimated icon (like the spinning fan)? Been wanting to do this


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.

  ha-card {
    box-shadow: none;
    padding: 0;
    margin: 0;
  .light-slider-card-center {
      display: flex;
      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;
    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;
    <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 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>
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.