A different take on designing a Lovelace UI

Share your Projects!
46

With shell commands, check out the secrets.yaml.

47

Thanks, I’ll see if I can work it out.

What is the hui-vertical-stack-card - I can’t find it anywhere…

48

It’s simply the built in vertical-stack card.

Calling it custom:hui-vertical-stack-card allows you to make is an element in picture elements or a row in entities cards.

Same trick can be used to nest other cards.

1 Like
49

Great ui!
i would like to create a light button like yours with toggle on/off and hold that pop up a window with dimmslider, temperature och color, could you post the code for that?
i have all the plugins that you have but i cant seem to get i to work :frowning: i don´t know what i´m missing

50

Did you place the javascript url’s in the ui-lovelace.yaml?

resources:
  - type: js
    url: /local/community/bar-card/bar-card.js
  - type: module
    url: /local/community/button-entity-row/button-entity-row.js
  - type: module
    url: /local/community/circle-sensor-card/circle-sensor-card.js
  - type: js
    url: /local/community/light-entity-card/light-entity-card.js
  - type: module
    url: /local/community/lovelace-card-mod/card-mod.js
  - type: module
    url: /local/community/lovelace-layout-card/layout-card.js
  - type: module
    url: /local/community/mini-graph-card/mini-graph-card-bundle.js
  - type: module
    url: /local/community/mini-media-player/mini-media-player-bundle.js
  - type: js
    url: /local/community/vertical-stack-in-card/vertical-stack-in-card.js
  - type: css
    url: 'https://sf.abarba.me/font.css'
  - url: /local/community/compact-custom-header.js
    type: module
  - type: js
    url: /local/community/light-slider-card.js
  - type: module
    url: /local/community/popup-backdrop-filter.js
  - type: js
    url: /local/community/upcoming-media-card.js
title: Huis

I’m also implementing this wonderfull design and the components work like a charm, and i’m learning basic swedish

3 Likes
51

Yes. As per Custom Component: HACS

I’m also implementing this wonderfull design and the components work like a charm, and i’m learning basic swedish

:joy:

1 Like
52

The dimmer unfortunately doesn’t work on mobile if thats what you mean.

53

You have inspired me to (again) redesign my control panel, this time using the browser control popup and notifications. Still got some polishing to do to make it shine like yours, but thank you for providing config for others to learn from

image
image1169×706 36.5 KB

8 Likes
54

@Mattias_Persson How does this scale on a vertical phone screen?

55

Not very well.

56

Interesting thanks. Do you plan to make your Lovelace UI responsive to different screen sizes?

58

This…is…the most beautiful UI i’ve ever seen. Great work. Do you plan to add additional “pages” for cameras or further sensors?

And like the question before: Any chance to get something like this visible on a vertical screen?

2 Likes
59

Have you seen HKI?

60

My I ask how you got the pop-up with the three sections side by side by side?

61

My I ask how you got the pop-up with the three sections side by side by side?

62

Yeah, looks great!

63

I think I will use a combination of HKI (which I’m already using) for the phone and your take on lovelace for the tablet. I really like your clever approach to this, thanks a lot for sharing your code. Highly appreciated!

1 Like
64

Thanks!
I don’t plan to no. I like the one page layout.

Since it’s made for a specific tablet resolution, no. You could make one page for tablet and one for mobile. An other option is to design for mobile first. But the homekit app is sufficent for me.

65

WOW so nice !!! This show how flexible HA code can be!! I gonna try to rebuild my WebUI with those nice settings… Gonna inspect your GitHub how you did it !!!

1 Like
66

@Mattias_Persson nice UI! What are your ideas with the alarm panel card? :slight_smile: i wonder if you have any sketch/ideas for that too :smiley: