My Lovelace UI for iPhone/Mobile Phones

daphatty · January 7, 2019, 11:48pm

Like many others, I’ve spent a ridiculous amount of time working to get a functional UI up and running with Lovelace. The hardest part has been determining that no one UI can service traditional browsers (i.e. Desktop/Laptops), tablet Browsers, and mobile phone Browsers. I finally decided to focus on mobile phone browsers and managed to eek out some layouts that are reasonably usable. These screenshots were taken on an iPhone 7.

As you can see, I have a good mix of default cards and stacks and custom cards as well. This list includes:

Default

Horizontal and Vertical Stacks
Light card
Entities card
Alarm Panel
Conditional card
Weather card

Custom

Card Modder and Card Tools
Compact Custom Header
Thermostat card
Monster card (I use this for the Windows are Open alert on the security tab)
Button card (yes, there is a custom card with the same name as the default. This one is way better!)

My favorite card thus far is the custom Button Card nested under Card Modder and Conditional. This allows me to change the visible mdi:icon based on the state of the light. It took me a while to get this working but was worth the effort. My least favorite is the Light card which I really hope gets an update. They’re just too big and could use some additional tweaks. I’d love to adjust the width of the stroke on the dimmer dial and even change the icon itself.

Of course, this is a work in progress and will likely change as existing cards are updated and new cards are released. Hopefully these layouts will help spark some inspiration in others as I had hoped other posts would inspire me. I am always open to suggestions so feel free to shower me with better ideas if you’ve got them.

tottow · January 8, 2019, 7:09am

Great work! Looks really clean! I think the idea of making a UI specifically for mobile is smart. Do you handle the layout based on device connecting, or just stick to one type? I believe the Compact custom header also supports differentiation on device types?

Mind sharing how you set up the button card with card modder and conditional to change the mdi:icon based on state?

Thanks!

daphatty · January 8, 2019, 7:43pm

I use CCH’s User Agent feature to identify specific device types and then adjust the views accordingly. At the moment, I only have a configuration for iPhone but will eventually have a view for iPad as well. The default view will be specifically for Desktop usage.

As for the conditionals, here’s the config I use. In reality, I am using two different buttons, one for each state (on and off). Each button is nearly identical in configuration. Only the icon: and state: values change. To achieve the row of buttons, I simply nest these inside of a horizontal stack with as many buttons as I need for that specific stack.

              - type: conditional
                conditions:
                  - entity: light.master_bath
                    state: "on"
                card:
                  type: "custom:card-modder"
                  style:
                    border-radius: 10px
                  card:
                    type: "custom:button-card"
                    entity: light.master_bath
                    icon: mdi:toggle-switch
                    name: Bathroom
                    show_state: true
              - type: conditional
                conditions:
                  - entity: light.master_bath
                    state: "off"
                card:
                  type: "custom:card-modder"
                  style:
                    border-radius: 10px
                  card:
                    type: "custom:button-card"
                    entity: light.master_bath
                    icon: mdi:toggle-switch-off-outline
                    name: Bathroom
                    show_state: true