A different take on designing a Lovelace UI

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.

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

Can do landscape too but I use homekit for phone

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

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.