🌻 Lovelace UI • Minimalist

Mariusthvdb · August 5, 2021, 8:30am

you can use the swiper card

  - type: custom:swipe-card
#    card_width: '185px'
#    start_card: 6
    parameters:
      simulateTouch: true
      spaceBetween: 8
      preventInteractionOnTransition: true
#      preventClicks: true
#      effect: coverflow
      freeMode: true
    cards:
      - !include /config/lovelace/includes/include_chip_temperature.yaml
      - !include /config/lovelace/includes/include_chip_presence.yaml
      - !include /config/lovelace/includes/include_chip_energy.yaml
      - !include /config/lovelace/includes/include_chip_alarm_clock.yaml

and adapt the parameters to your liking

Mariusthvdb · August 5, 2021, 8:33am

dont yet understand the history: back command… hmm. how does the name: of the button cause the history to go back?? Or does it set the name, and by clicking the is goes back in history? that would be crafty

does work indeed… how cool thanks, and to Romrider of course, I’ll post this in button-card, as answer on my own question for reference.

see Lovelace: Button card - #5757 by Mariusthvdb

danieldotnl · August 5, 2021, 9:36am

Tnx, but feels like huge overkill just to wrap something

Mariusthvdb · August 5, 2021, 10:09am

the swiper card adds the swipe functionality to HA, so it does offer the extra UX. Its more than merely overkill, and kind of nice once you get used to its behavior.

you could probably also wrap them in a grid card, to auto fit and go to the next line. Its what I do with my dynamically created alert buttons

danieldotnl · August 5, 2021, 1:12pm

I’ll give it a try, but didn’t you mention that the hold_action doesn’t work? Or did you solve it?

clemalex · August 5, 2021, 4:56pm

A better code to a history back button : Lovelace: Button card - #5765 by clemalex

clemalex · August 5, 2021, 7:04pm

@tben

I just saw the vide template.

But there is already a blank card in button-card :

this is not the most important but if you want to keep the template, you might have to add pointer-events property to none :

  vide:
    styles:
      card:
        - background-color: rgba(0,0,0,0)
        - box-shadow: none
        - height: 0px
        - pointer-events: none   #<-- here

https://www.w3schools.com/cssref/css3_pr_pointer-events.asp

benm7 · August 5, 2021, 11:58pm

Just wanted to say I love this design! Haven’t used it myself but will be stealing elements of it for my own UI Keep up the great work!!!

tben · August 6, 2021, 7:48am

Hey Clemalex
I don’t think I used this card anymore. But thanks for the info, I would correct that

djacid · August 6, 2021, 12:15pm

Great work! This UI is amazing. I just created a button card for my climates.

manuel_R · August 6, 2021, 1:23pm

hello could you share your card please? @djacid

djacid · August 6, 2021, 1:24pm

Of course, but I need some time to clean my code, before share it

manuel_R · August 6, 2021, 1:26pm

No problem thanks

TJohnson93 · August 7, 2021, 3:26am

Wow, this looks amazing! Any plans to build into a custom Lovelace strategy?

TJohnson93 · August 7, 2021, 3:30am

Imagine this UI right throughout HA

TJohnson93 · August 7, 2021, 4:57am

Looks like this was depreciated in UI Editor?

benm7 · August 7, 2021, 5:27am

Agreed, this design should be looked at as a default, it’s just so clean!

tben · August 7, 2021, 6:37am

Hi Todd
I haven’t explained it anywhere but it’s possible to use it with the UI editor if you copy / paste the content of button_card_templates.yaml into the config editor.
I write it down to add it to the github

TJohnson93 · August 7, 2021, 6:47am

Cheers mate, yeah that’s how I was able to accomplish it as well, did take me a bit to stumble across the fact !include doesn’t work in UI editor. Yeah, may be worth mentioning in GitHub for others

On a side note, I’m currently looking at what is involved with Lovelace Strategies to auto populate Lovelace views, would you mind if use your cards in it (if I can get it to work of course)?

schumijo · August 7, 2021, 11:09am

@tben

What do you think about creating an addon section in your button_card_templates for community chips and cards ?

I do some tests on my side and it seems to be easy to implement

Replace include by this one in your ui-lovelace.yaml : button_card_templates: !include_dir_merge_named lovelace/button_card_templates
Put your “button_card_templates.yaml” in a specific folder and create an addon folder

Capture

Guys like @clemalex, @djacid or me could post our addons (button card templates) in this folder with a Readme file and community could download just what they want.

What do you think ?