🌻 Lovelace UI • Minimalist

Hey @tben really like it, but hoping you could also share the chips that you have not added in your github (such as the spotify title-artist thing)

Thanks!

Is there a solution for this:

I’m assuming you’re trying to fix an issue is your screen is to narrow?

There is a solution but not an easy one. And it will require you to do some tinkering on your own :stuck_out_tongue:

If you take a look at the following repository:

He has build a different layout but while using the same techniques
(button card + heavily depending on templates)
In the file ui-lovelace.yaml he has defined a default layout for his tiles + some different configurations when the mobile screen is portrait or landscape.

This is the exact piece of code he uses:

  - type: custom:grid-layout
    path: 0
    layout:
      #default
      grid-gap: var(--custom-layout-card-padding)
      grid-template-columns: repeat(4, 1fr) 0
      grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
      grid-template-areas: |
        "sidebar  .           .       .       ."
        "sidebar  vardagsrum  studio  sovrum  ."
        "sidebar  media       övrigt  hemma   ."
        "sidebar  footer      footer  footer  ."
      mediaquery:
        #phone
        "(max-width: 800px)":
          grid-gap: calc(var(--custom-layout-card-padding) * 1.5)
          grid-template-columns: 0 repeat(2, 1fr) 0
          grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
          grid-template-areas: |
            ".  .           .        ."
            ".  sidebar     sidebar  ."
            ".  vardagsrum  sovrum   ."
            ".  studio      övrigt   ."
            ".  media       hemma    ."
            ".  footer      footer   ."
            ".  .           .        ."
        #portrait
        "(max-width: 1200px)":
          grid-gap: var(--custom-layout-card-padding)
          grid-template-columns: repeat(3, 1fr) 0
          grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
          grid-template-areas: |
            "sidebar  .           .       ."
            "sidebar  vardagsrum  sovrum  ."
            "sidebar  studio      övrigt  ."
            "sidebar  media       hemma   ."
            "sidebar  footer      footer  ."
            "sidebar  .           .       ."
    cards:
        ..... (define your cards here) .....

You could try to use the same technique to adjust the cards based on the available room there is :slight_smile:
But as I said, this will not be easy.

1 Like

I think you just need to put those two cards into a vertical stack.

I would love to see this also. I am struggling getting the scenes working

Hi @jompa68 and @martheijnen :wave:
Here are some details on this sensor
127768397-24ab76fc-b037-4fc5-a2ef-45e96285cd46

I have been using this method for 4 years now and am super happy with it, there might be another way to do it now.
I make an API call with my phone using Tasker to change the value of the input select according to the wifi network I’m connected to.

Here is an example with the Present location

input_select

localisation_thomas:
    name: 'Thomas • Localisation '
    icon: mdi:face
    options:
      - Present
      - Absent
      - Travail

I then use a history_stats to find out how long I have been in a state
This sensor is reset to 0 when I go to bed (launch of the automation: automation.thomas_nuit_on)

sensor

platform: history_stats
name: Present
entity_id: input_select.localisation_thomas
state: 'Present'
type: time
start: "{{ as_timestamp(state_attr('automation.thomas_nuit_on', 'last_triggered')) }}"
end: '{{ now() }}'
9 Likes

Hello!

Could anyone do a little explanation a bit more complete than just those command lines from the configuration.yaml? I have no experience and I can’t get it to work, neither can I get it by copying the views.

Thanks for your patience.

2 Likes

As this could be a bit more extensive, it could be easier, when you start with some info if you know custom!button-card and which mode (yaml, storage or ui) you are using.

1 Like

I’m using default mode because I don’t have experience with yaml. Is there a possibility to use this without switching to yaml?

The problem I have is the following. After following the three installation steps, when I copy one of the example cards I have an error of templates are missing.

Thank you!

This is possible, but not very clear due to the extensive code. If this does not bother you, simply copy the template code you want to use into the raw config above the first line views: The template code must begin with button_card_templates: (no indentation), the rest has to be indentated, for example:


button_card_templates:
  icon:
    color: var(--google-grey)
    show_icon: true
    show_name: false
    show_label: false
    size: 20px
    custom_fields:
      notification: >
          …
   

Which template you need is shown in the error notice: „ Template blablabla is missing!“

@pedolsky I haven’t tried that (yet), but shouldn’t it be possible, to just copy the link to the template files in the “raw config editor”? Or does the complete template have to be copied into? :slight_smile:

PS: Will send a PM in a few minutes. :slight_smile:

EDIT: Can’t send a PM to you…? Is there a way to contact you, maybe you sending a PM and I can respond?

I have setup this with UI mode and can share my raw config if you are interested.

1 Like

Unfortunately, currently it seems not possible to use !include in ui dashboards, here is a feature request: https://community.home-assistant.io/t/ability-to-use-include-directives-in-ui-editor/336167

Mmh, strange, in my settings pm from other users is allowed. I will try to pm you.

Oh great! Can you send me a PM? I appreciate you.

Hi, I would be interested too. In particular I’m looking for some help to set up the localisation tab and the sensor for present/absent chip

It still is a work in progress but it will give you a good start point to work with.
For scenes setup like @tben i have setup automation in shortcuts on my iOS device. (Tasker only work in Android)
Automations are setup so it will call an action in HA app when i leave/arrive home/work.
Just ask and i all give some example on that also.

Paste this in an empty Lovelace dashboard - Lovelace UI • Minimalist - Pastebin.com
All the credits goes to @tben, i have only copy and paste his great work :slight_smile:

Update1.
Mobile themes code. Create a folder in themes folder called mobile. Create an yaml file with name mobile.yaml. Paste this - Lovelace UI • Minimalist - Mobile themes - Pastebin.com

Desktop themes code. Create a folder in themes folder called desktop. Create an yaml file with name desktop.yaml. Paste this - Lovelace UI • Minimalist Desktop theme - Pastebin.com

Have an happy tuesday

1 Like

Hello all,
I just created a alarm clock UI, I find it easier than using the keyboard.

If there is any interest, I would clean up the code and share it here. :slight_smile:

8 Likes

super-nice, release, please!

1 Like

I am interested :pray:

1 Like

Can I ask what “localisation” means in this sense?