Show me your vertical/mobile interfaces!

Share your Projects! Lovelace & Frontend
#1

Now that I’m happy with my automations and the devices in my HA installation, I’ll be digging into designing my UI.

I’ve loved and been inspired by so many horizontal/landscape UIs built for tablet interaction (especially loving the floorplan views). What I’d really love to see is some super functional, minimalist style, vertical layouts that would work well/be responsive for mobile usage.

The way I see it, a mobile layout should be less about control and more about at-a-glance information, with the ability to drill down into controls. So show me what you got friends! Keen to get my hands dirty and dig into design!

#2

Did you already look at this?

1 Like
#3

An other famous one :

1 Like
#4

I’m not sure, is that a famous theme?

#5

You made an incredibly awesome theme, don’t be modest :wink:!

#6

Screenshot_20200311-145847_Chrome
Screenshot_20200311-145847_Chrome1080×2160 635 KB

This is mine, I really like the Homekit style and this is my take on it

#7

I totally forgot this one. The newest version that is currently in beta testing, allows you to configure the interface through the ui!!

2 Likes
#8

Was also wondering on doing something for mobile devices… but wondering how other people tackle this in reference to the new multi lovelace cards option we have in v107?

So how do you go about having a mobile card and a regular card and let it switch depending on form factor? Is that possible? Or do you need to create a different user to log into HA for mobile versus tablet?

#9

Screenshot_20200403-161227
Screenshot_20200403-1612271080×2160 581 KB
Screenshot_20200403-161234
Screenshot_20200403-1612341080×2160 558 KB
Screenshot_20200403-161239
Screenshot_20200403-1612391080×2160 549 KB

#10

Is your Hello Tom hard coded with the name? I would like a dynamic name based on the logged in user but have no idea how to achieve that.

#11

I did it with a button card, but in Home Assistant 0.108 there will be a user variable for the markdown card. Here is how I did it:

name: |
  [[[
    let greeting = "Hallo";
    let hour = new Date().getHours();
    
    if(hour < 6) {
      greeting = "Hallo";
    } else if(hour <= 10) {
      greeting = "Guten Morgen";
    } else if(hour <= 14) {
      greeting = "Guten Tag";
    } else if(hour <= 17) {
      greeting = "Moin";
    } else if(hour <= 21) {
      greeting = "Guten Abend";
    } else if(hour <= 23) {
      greeting = "Gute Nacht";
    }
    return greeting + ", " + hass.user.name;
  ]]]
styles:
  card:
    - margin-left: 16px
    - margin-top: 20px
template: greeting
type: 'custom:button-card'
#12

Would appreciate if you could share your config with us.

#13

I’m not a designer and/or developer so please be kind :wink: work in progress, but this is what I have for now
Short overview: https://dmertens.stackstorage.com/s/I5N80TzpshXrOW5

image
image732×1372 193 KB