A different take on designing a Lovelace UI

Jason_hill · May 19, 2020, 6:09pm

Hi Matthias. If i want to have a popup card witch shows picture element card and i want to place a prefix text in there how can i do this? I have also tried adding the anchor to the popup but it gives me error everytime.

Mattias_Persson · May 19, 2020, 7:01pm

I don’t think anchors carry over in includes so just skip using anchors. The prefix is just a state-label variable.

Mattias_Persson · May 19, 2020, 7:05pm

supportedFeaturesTreshold

“When the supported features of the light is larger than the treshold than the brightness slider is rendered if it is equal or lower a switch is rendered”

Maybe try changing that

DanielPiccoli · May 19, 2020, 8:23pm

Hey, where did you get that TV icon from ? really nice touch.

Yoinkz · May 19, 2020, 10:22pm

Hey @Mattias_Persson,

For some reason I can’t get the Robovack showing.

I looked in the configuraiton.yaml file and ensured I added the:
{'url':'/hacsfiles/mod/hass-bha-icons.js?v=f015ee3', 'type':'js'},

Under config/www/community I checked the mod folder and it shows the hass-bha-icons.js file.
But if I look at your community folder, then I also see the hass-bha-icons folder with two files in it?
Is that the one I miss and why placed in two folders?

Mattias_Persson · May 19, 2020, 10:38pm

Hey. There’s the default one that I installed with hacs and the modded with my icons in /mod/ but starting with ha 0.110 we have to load icons like this instead:

Mattias_Persson · May 19, 2020, 10:44pm

The tv button? I drew that in illustrator. It’s basically just a rectangle but thanks haha

Yoinkz · May 19, 2020, 11:00pm

Yikes…

Hmm, I can’t find it in Hacs. What is the name or does the rep needs to be added?

I’m not at that level yet - but thx for the explanation

Mattias_Persson · May 19, 2020, 11:17pm

What I’m trying to say is that you shouldn’t waste your time on that right now as the home assistant release tomorrow will break bha-icons. But yeah it’s a custom repo

Yoinkz · May 20, 2020, 6:25am

I guess it was too late for playing around with it yesterday.
Will wait and see how you deal with it then :).

VPC · May 20, 2020, 5:20pm

I really like this layout and I am starting to build out my panel. I need to have multiple pages (views). I like how lukevink has got a side menu including navigation buttons here
https://community.home-assistant.io/t/floorplan-ui-with-color-synced-lights

I would like to have multiple pages (views) which I can navigate to using the links on the left. I am not sure how to implement as the sidebar I am working with is markdown.

Side menu buttons like these are what I am looking for but not sure how to implement in markdown

Also this layout is only one page so i need to add additional views.

I’m planning on a Climate page with all my fans, blinds, air conditioning etc. Then another for media control, another for lighting etc.

Thanks for any direction!

Mattias_Persson · May 20, 2020, 5:41pm

You can’t do that in markdown. What you’re describing is just images with navigation_path. Take a look at line 3198.

github.com

lukevink/hass-config-lajv/blob/39937cc7e125291286390a19485ad3ea6b6a1e02/ui-lovelace.yaml#L3198


    left: 18.1%
    letter-spacing: '-0.05vw'
    text-align: left
    top: 17%
    width: 30%
  tap_action:
    action: none
  type: state-label
  
  
  #########################   MENU BUTTONS   #########################

- action: none
  image: /local/ui/sidebar/rooms_off.png
  style:
    border-radius: 5vw
    left: 11.7%
    top: 26%
    width: 20.5078125%
  tap_action:
    action: navigate

There’s also this https://github.com/DBuit/sidebar-card

VPC · May 20, 2020, 5:51pm

Thanks for the reply. Yeah, I had seen that code starting line 3198 and have the graphics etc already in my www directory. I’ll take a look at the sidebar-card, thanks. I will miss the markup though as I have spent time on getting it just how I wanted it.

Instead of the buttons being down the left hand markdown menu could I have buttons over on the right hand side that do navigation to different views?

regards,

Mattias_Persson · May 20, 2020, 5:57pm

You could, or even easier along the top/bottom

Lentron · May 21, 2020, 10:22am

@Mattias_Persson Thank you very much for sharing your setup, it has been a real source of inspiration. I’m still building on our setup and there’s much more i’d like to incorporate, but so far i adapted this view to a phone-friendly one, and i gave both me and my wife separate views that we can adjust to our liking by giving it a “Settings” popup (especially my wife likes to change everything to her liking / mood / day / etc):

Here are some examples:

VPC · May 21, 2020, 9:06pm

I’m looking to get several views available that are accessible from left hand menu buttons. I took inspiration (and the graphics) from lukevink

I have the Control rooms and Control Lights images working and they take me to different views. Perfect. Except… they are graphics and do seem to look grainy in certain circumstances.

My question is can I generate these buttons dynamically with real fonts and a long oval instead of have pre made graphics?

Roel_Wijmans · May 21, 2020, 9:53pm

This is awesome. I’m a total noob so thank you for sharing. Am I able to use this setup as well? If so where do I find documentation on how to actually install/configure this?

This will make for a great look on my iPad

Mattias_Persson · May 22, 2020, 4:59am

Yeah, you can use this too. There’s no specific documentation for this config but everything is documented.

Mattias_Persson · May 22, 2020, 5:05am

Well, yeah. There’s several examples of this in my config alone. You’d want to use button-card.

Frank_Hagenbuch · May 22, 2020, 5:05am

WOW thats realy nice. Can you share your Settings for the Mobile view?