A different take on designing a Lovelace UI

simposium · May 16, 2020, 5:11pm

Hi
Please could you share with use the configuration about
turn_off: service: shell_command.turn_off_nas

I tried to generate a command to power off my Synology nas but was not sucessfully.

Thanks in advance

SimplyGardner · May 17, 2020, 10:00pm

I maybe being simple, but how do I install this? Do I group the components mention in the first post or is there a bunch of files etc I can grab and upload?

systemsNinja · May 18, 2020, 4:35pm

I got my core set up and sensors now i am up to organizing the dash… Man this thread is a wealth if information!
Mattias how LONG did all of this take you!?

Maybe I just dont know enough (especially of CSS), in order to make this go quicker for me!

I am trying to pin point the part of the code that gives you this neat spacing and grouping. between the buttons. Is that spacing defined in the templates?

Thanks!!

systemsNinja · May 19, 2020, 5:35pm

[EDIT]
Alright, so i figured it out how to do the placement.
Picture card, with percentages as to where to place the cards on the screen.

Templates at the top which have the button, switch. etc styling

One thing I have not been able to figure out…

[Question]
How do you get a brightness slider instead of a switch on the light pop up card? I am only ever getting switches for all of my lights!

ehh??? any thoughts out there?

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?