🌻 Lovelace UI • Minimalist

[tben (Thomas)]

My Home Assistant

---

Hi, my name is Thomas and I’m a UX designer and have been using Home Assistant for 4 years.
After showing a little bit of my interface on Bokub’s post, I had several requests for more details on my configuration. I drew a lot of inspiration from 7ahang’s work that I found on Behance.

Interface composition

---

I use my phone most of the time to access the interface. I chose to use only one column to facilitate maintenance between the different devices.

I have been using this interface for over 2 years, there have been some minor changes but overall it keeps the same principles.

My interface consists of 4 pages

At the top of each page we find the chips which allow me to quickly visualize the important information of the page.
Then titles to separate the different sections
and cards to represent and interact with devices, sensors, etc …
I used the custom component button-card for all these cards.

Cards

---

Light and dark theme

Ressources

---

GitHub - UI-Lovelace-Minimalist/UI: UI-Lovelace-Minimalist is a "theme" for...

Home

Documentation • Wiki

deprecated resources

Github
Theme
Button card • Configuration Templates

4 pages
01_home.yaml
02_temperature.yaml
03_consommation.yaml
04_localisation.yaml

Credits

---

• The technical part is realised mostly by taking advantage of the great work @RomRider did with his button-card.
• Code refactor, cleanup and maintainance by @CM000n, @schumijo and @paddy0174.
• Wiki by @paddy0174.
• Special thanks to @clemalex and @schumijo for contributing their cards to the main repository.
• Contributions from others in this forum thread

Have fun !

[tom_l]

@tben

I’m a UX designer

I shows. Very nice,

[Piggyback (René)]

agree! very slick!! thanks for sharing!!

[nickrout]

I think that propels him into the dev team doesn’t it?

[bokub (Boris)]

The result is so neat

Thanks for sharing your work Thomas

[tom_l]

I’m looking for the ‘conscription’ button… https://discord.gg/PQUJbZ68

[Mariusthvdb (Marius)]

this is a treat for the eyes, really eye candy. thanks for sharing.

of course, I immediately tried to copy some of the theme settings, but got confused on several var names.

how come you use:

  box-shadow: '0px 2px 4px 0px rgba(0,0,0,0.16)'
  border-radius: '20px'
  border-color: '#EAEAEA'

I tried that, but it defaulted to the HA defaults. In my themes I need:

  ha-card-border-radius: 0px
  ha-card-box-shadow: '0px 2px 4px 0px rgba(0,0,0,0.16)'

and I can’t get the border-color to do anything really, not even when using ha-card-border-color … (though tbh, not sure if I use that anywhere, could be the issue too…)
same goes for border-color, which I need to use as ha-card-border-color

is ha-card.ts the place where it is defined?

we (I) really need an updated overview of the used var names in themes. I always check ha-style.ts
and styles.ts

[tben (Thomas)]

It’s been a while since I touched my theme, there may be obsolete variables.
For example I use the box-shadow variable in the Button card • Configuration Templates file

    styles:
      card:
        - box-shadow: var(--box-shadow)

i guess you can use your variable

    styles:
      card:
        - box-shadow: var(--ha-card-box-shadow)

it is possible that the border-color variable is not used indeed

[Mariusthvdb (Marius)]

yes, thanks, of course we can declare these variable and use them ourselves was merely trying to find the default HA variables.

again, a very nice theme you’ve made, I’ve still got to find all the spots in the button card templates where you use these.
the chips are a cool new ‘feature’, must explore the possibilities of that (maybe in replacing the badges I now have)

especially the ‘back’ chip

though I would have hoped it to go back in the browsing history, and not to the Homepage. Guess that is still not possible, eg even with browser-mod.

(sorry I edited my post while you already answered it… I found it in your templates)

[tben (Thomas)]

I called it return-button

  return_button:
    template: pilule
    show_icon: true
    icon: 'mdi:arrow-left'
    size: 80%
    styles:
      grid:
        - grid-template-areas: '"i"'
    tap_action:
      action: navigate
      navigation_path: /lovelace/home

[Plouf34]

Could you please share the code of your Lovelace?

[tben (Thomas)]

Hey Plouf34👋
Here is my lovelace file

button_card_templates: !include lovelace/button_card_templates/button_card_templates.yaml
title: 'Home'
views: !include_dir_merge_list lovelace/views/ 

This is how my lovelace folder is organized

[eric3616191]

@Plouf34

Could you please share the code of your Lovelace?

Could you please share the code of your Lovelace?
[email protected] Thank you

[nickrout]

Guys, the code is shared in the first post.

[jonathanathe]

I love how it looks on you! I need help where I have to integrate the “template” I was looking in the documentation of “template” but I can’t find how it works or where I could place the file. I hope you can help me. Thanks!

[Mariusthvdb (Marius)]

playing some more with this, I just got to say I love the use of those nice icons in the buttons. Forgot I had 1 of those myself,

    - type: custom:button-card
      name: 🎂 ♡♡ 🍰  🎈 Celebrations 🎈 🍰  ♡♡ 🎂

but now I see you explicitly use them (in the pilule templates), will re-visite that frontend enhancement.
so cool. nice and easy colored icons, without the hassle of needing to create these in svg ourselves.
this really should get some more wide-spread attention

edited your chip template and button a bit:

template:

chip:
  variables:
    view: >
      [[[ return window.location.pathname.split('/')[2]; ]]]
  tap_action:
    action: more-info
  show_icon: false
  show_name: false
  show_state: false
  show_label: true
  size: 80%
  styles:
    img_cell:
      - width: 24px
    card:
      - border-radius: 30px
      - box-shadow: var(--box-shadow)
      - height: 36px
      - width: auto
      - padding-left: 6px
      - padding-right: 6px
    grid:
      - grid-template-areas: '"l"'
    label:
      - justify-self: center
      - padding: 0px 6px
      - font-weight: bold
      - font-size: 14px

button:

type: custom:button-card
template: chip
entity: weather.buienradar
hold_action:
  action: navigate
  navigation_path: >
    [[[ return variables.view != 'weer_klimaat'
        ? '/lovelace/weer_klimaat' : 'null'; ]]]

label: |
  [[[
    var inter = states['sensor.temp_current'].state;
    var exter = states['sensor.temperatuur_living'].state;
    var condition = states['sensor.dark_sky_icon'].state;
    var mapper = {'clear-day':'☀️','clear-night':'🌙','rain':'🌧️',
                  'snow':'❄️','sleet':'❄️','wind':'🌫️','fog':'🌫️',
                  'cloudy':'☁️','partly-cloudy-day':'⛅️','partly-cloudy-night':'⛅'};
    var icon = mapper[condition] ? mapper[condition] :'☀️';
    return icon + ' ' + inter + '° / ' +  exter + '°' ;
  ]]]

allowing for adjusted navigation with an entity for the more-info, so we have useful actions for both

[tben (Thomas)]

Hey jonathanathe
You can write the content of the template file in your ui-lovelace.yaml file or include the file like this

button_card_templates: !include button_card_templates.yaml

[telashton (Tom Ashton)]

Great work - love the simplicity.

Could you post an example of the YAML needed for a temperature line chart - my attempts using just the “graph” template render incorrectly.

[tben (Thomas)]

Hey Tom
Here is an example

- type: 'custom:button-card'
  template: graph
  variables:
    entity: "sensor.fibaro_multisensor_salon_temperature"
    color: "var(--google-blue-500)"
    name: "Température"

[telashton (Tom Ashton)]

Fantastic - works great!