Show me your vertical/mobile interfaces!

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!

Did you already look at this?

1 Like

An other famous one :

1 Like

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

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

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

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

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?

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.

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'

Would appreciate if you could share your config with us.

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