A different take on designing a Lovelace UI

Mattias_Persson · July 27, 2020, 9:32pm

Hey, you’re right. browser_mod.popup accepts one card, so I guess I used a vertical-stack as a container for multiple cards but it’s not necessary here. Well spotted.

# remove vertical-stack
hold_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: '[[[ return entity.attributes.friendly_name ]]]'
    deviceID: this
    card:
      type: entities
      entities:
        - type: custom:light-popup-card
          entity: '[[[ return entity.entity_id ]]]'

I removed the animation because updated browser_mod seems to have one now.

jcreynolds · July 28, 2020, 1:33am

can you explain how to sign up for the dev calendar? calendar.home_assistant_devs

Mattias_Persson · July 28, 2020, 1:48am

https://developers.home-assistant.io/

https://www.home-assistant.io/integrations/calendar.google/

jcreynolds · July 28, 2020, 1:58am

thanks bruv

slofii · July 28, 2020, 6:57am

Is it possible to create a static poster if nothing is play?
I have no plex server, so most of the time nothing is shown.

And have anyone an idea, how can I create a sensor which shows me the currently title from a sonos system?
In the upper right, i want to create something smiliar like the “Media”-Tap, but only with my sonos system. And this whole template-system is above my head.

Jason_hill · July 28, 2020, 6:49pm

Solved it by instead of using a custom button to load the popup i used an image badge instead with a state filter.

      - type: image 
        entity: sensor.lights_on
        tap_action: !include popup/alle_lys.yaml  
        hold_action:
          action: call-service
          service: automation.trigger
          service_data:
            entity_id: automation.sluk_alt_lys              
        image: /local/pics/all_light_on.png
        state_image:
          "on": /local/pics/all_light_on.png
          "off": /local/pics/all_light_off.png
        style:
          top: 5%
          left: 42.5%
          width: 5%           
        title: All lights button

Roel11 · July 28, 2020, 10:01pm

can you please share your sidebar code. moving away from Tileboard and learning to fly while building the wings.
could use some guidance implementing calendar as part of the sidebar.

TIA

george_b · July 28, 2020, 11:07pm

Many thanks for offering us completely open access to your wonderful interface (and never complaining about all of us copying it ;-).

solelo · July 29, 2020, 10:30pm

This looks great, did you just add it via the HACS store custom repositories?

Jason_hill · July 30, 2020, 2:01pm

Look into Mattias github page. there all the code is available.

Jason_hill · July 30, 2020, 2:07pm

Hi Mattias.Your SVG animated icons looks amazing. Do you know if it can be incooperated in to the markdown card instead of unicode characters? I can do it with images but i would love having the coffee cup to continuenly show heat coming up.

Mattias_Persson · July 30, 2020, 3:51pm

It’s the same, put the style inside the svg itself

content: >
  <img src="/local/loader.svg">

jompa68 · July 30, 2020, 4:24pm

Hi George
Can u show the code that includes the circle buttons on the sidebar?
Looks great

MantasI · July 30, 2020, 5:09pm

Hello,

Would someone be willing to help me start with this? I tried copying code, changing entities and so on, I get a bunch of errors. I wanna start with the sidebar, the theme colors and atleast one button entity like a light, and then I will figure it out on my own. If someone could help please hit me up with a private message.

Jason_hill · July 30, 2020, 6:22pm

Need a bit guidance for that please.
If i take the playstation logo from you lovelace.yaml and copy the style into self created “file.svg”

i cannot get it to load. when i go to Flaticon and download the ps4 logo the code also looks a lot different.

Mattias_Persson · July 30, 2020, 6:44pm

add xmlns to top tag <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">

that’s because I don’t use flaticon

jcreynolds · August 1, 2020, 6:04am

@george_b from your screenshot it looks like you have a swiper bar at the bottom can you shift your page over to expose more button cards? If so, can you share your configuration for this?

george_b · August 4, 2020, 7:36pm

My code is a mess. I know mathematical programming not yaml… I will share when I get to a PC, but there should be better ways to do this…

george_b · August 4, 2020, 8:06pm

I think the bar at the bottom was from the iPad as I was moving it around to take the screen capture. I do not see it on the tablet I have it deployed (a 2012 Fire, rooted with vanilla android and installed on a wall - that struggles to keep up). I have a swiper card in the bedroom lights (similar to what Mattias has for his media, but different kind of swipe).
From a usability perspective, I do not see value in multiple screens. I go close to the wall, fullykiosk wakes up, I see what’s on and turn it off (or the other way around anyway). I do not use home assistant from my iPad much. It’s more about seeing what’s going on and quick changes of settings. I guess I should record a video, but the functionality I found best is as follows:

weather: (weatherbit integration) I love it, nobody else in my house cares about it. They prefer to ask google.
people: nothing, just show where they are. Integrating with find my phone is helpful, but haven’t done it yet. Plus my daughter is almost 11. She won’t want me to know where she is soon…
Apple devices, check battery level and alert when something needs charging. Single taps asks the Apple device so I can find it inside the house (it beeps).
google home minis: just checking when google is checking on me
Romba and nest thermostat: this is WIP and I got busy with work so it was left behind. A full integration with each platform for complete control through popups (browser_mod) is the goal (one day).
scenes: popup window to change scenes.
HASS and info: WIP. Display info (no action that I can think off, maybe restart my server).
lights: turn on off set brightness (I don’t have colors).
Garage: alert when a door is open. Close it from interface (use with caution!)
media: don’t watch much TV so this is also WIP. But Mattias’ functionality is more than I will ever need,
Music: As you can see we like music ;-), we have some Legacy squeezeboxes, expanded with other wifi speakers. Some are grouped and synced. Spotify is integrated in it. So I have made 8 playlists in spotify and have the media player card loading in a popup. From there I select a playlist where I want to hear it. 8 has been sufficient so far… believe it or not, this is by far the most common use of the wall tablet.

Everything is automated and we have found automations that work for us sustainably. If there is one thing I could add is that people in bedrooms at night continuously complain that the light turned off while they were reading a book. I switched from smart switches to smart bulbs so they can turn it on manually. They have access to HASS but don’t use from bed…
For everything else, HASS is integrated with google assistant so voice commands work. As our automation grows maybe we will have different interfaces (views) in different rooms (have a second wall tablet in the works) but not different views in the same wall tablet.
I agree with Mattias’ design approach that emphasizes simplicity, beauty and usability over complexity and complete functionality. But that’s just me.
Mattias sorry for hijacking the thread…

Mattias_Persson · August 5, 2020, 2:11am

I’m interested in this. Do you just send a critical notification to ios like this?

I tried the icloud integration and it doesn’t seem to work properly with 2 factor auth enabled on apples end and I have to constantly reauthenticate.