Lovelace Soft UI - Simple and Clean Lovelace Configuration

[Steen (Stein)]

does anyone have a idea to solve this ? The last tile does not appear as it should on my phone screen. On the pc it’s fine tho

[fitim]

Im also interested in this. To only way I handled it was removing the last tile. So I was able to use just 4 tiles. I then adjusted the size of the 4.

[N-l1]

@Steen and @fitim,

As @fitim mentioned, removing the last tile would be the easiest choice. There might also be some implementation of resizing the cards when the screen gets smaller using state-switch. That is however more complicated. In a future version, I might update my config for the cards to resize.

Hope this helps!

[Ralf]

Just found this. Great idea for my Dashboard!
Will have a deeper look into this!
Thanks!

/ Ralf

[Savjee]

(Sorry for the self-promotion)

I took this design and made a custom card for it. It’s called Button Text Card and is now available on HACS:

Savjee/button-text-card

Makes your Lovelace config a lot cleaner. It also has support for templating, it has a large version and you can tweak the colors.

Let me know what you guys think (and if you have suggestions)

[fitim]

This is amazing!

[N-l1]

Awesome! Great work!

[fitim]

I’m playing around with it now … since I’m not good in javascript maybe I just don’t understand, but:
How do i configure it with a tap_action? Isn’t it possible to toggle lights with this?

[Savjee]

The tap_action should behave like all other cards. To toggle a light, you can use:

type: 'custom:button-text-card'
icon: 'mdi:lightbulb-outline'
subtitle: Subtitle
title: Title
entity: light.dressing
tap_action:
  action: toggle

Just make sure to correctly set the entity_id.

Other things are also possible, like opening another tab in Lovelace:

tap_action:
  action: navigate
  navigation_path: /lovelace/switches

[fitim]

Ok thx.

Another thing:
I use a dark theme for evening, and a white theme for the day.
Is it passive to change the shadow of the box dependent from the theme?
Actually it is just working for the white theme.

[Savjee]

It’s on my TODO https://github.com/Savjee/button-text-card/issues/2
I’ll try to fix it soon.

[fitim]

Perfect …
Another TODO can then be the small boxes without text

[Savjee]

Quick update: I fixed the shadow

About your other request: this should already be possible.

icon: 'mdi:comment-alert'
type: 'custom:button-text-card'

Renders:

(Make sure you have the latest version. Older versions required you to define an entity)

[fitim]

Sounds great! Thx for your work.

With the smaller boxes it would be great if we could define let’s say up to 4 little boxes. And each of them with own actions, and colorchange dependent from the state etc. … like the Buttons of this Original work …

[fitim]

btw. what do you mean with “you fixed the shadow”? I don’t see any difference, except that there is no “deep look” anymore…
I think that there are also a lot of things to do, if you want to make a plugin with all abilities of the original work of @N-l1:

1. Make horizontal and vertikal stacks with more than 1 button.
2. give the option to use other shadow effects (for dark themes and light themes). This shouldn’t be as hard … I would make this dependent of the sun state.
3. give the option to show the buttons pressed and depressed. this is one of the thing I like most.

I like your plugin really much … that’s why I give you this input. I hope its not annoying for you.

[Savjee]

I meant that the color of the shadow is now determined by your current theme. I feel like this is the best way to implement it because then it really works for all themes and doesn’t look out of place.

As for your other remarks:

1. Horizontal and vertical stacks should be possible by using the built-in horizontal-stack and vertical-stack. Example with horizontal stack:

type: horizontal-stack
cards:
  - icon: 'mdi:format-title'
    type: 'custom:button-text-card'
  - icon: 'mdi:format-title'
    type: 'custom:button-text-card'
  - icon: 'mdi:format-title'
    type: 'custom:button-text-card'

Result:

While this does work, it’s not ideal. Putting 4 cards side-by-side gives a pretty bad result because the cards have some margin. This margin shouldn’t be there when there is no title or subtitle. Noted!

2. You’re correct. I already give users the ability to control background and text color. Shadow color would be a nice addition. GitHub issue opened.

3. I think this should be relatively easy to implement as well. Stay tuned!

I’m pretty new to Home Assistant (but loving it) and this is my first custom component. So feedback is always appreciated. I’ll keep you posted on my progress

[fitim]

Thank you man! I really appreciate your effort!

With “2.” I meant the shadow, wich you already implemented somehow… For now I see a problem here, because either im doing something wrong, or its not working as expected. I’m up to date and this is how it looks for now with a dark theme:

If you say that the shadow is grabbed by the current theme, I don’t know if this works out. I thought more about something like this as result (this is how the original work did it):

Thanks again for your work and welcome to Home Assistant!

[Savjee]

You’re not doing anything wrong. My card takes the shadow color that is defined by your active theme. Apparently your theme defines a color that is almost 100% black. Which is why it seems to disappear (but if you look closely it is still there).

The shadow around the card should match the shadow beneath your top bar in Lovelace. (Judging by your first screenshot that seems to be the case).

I will keep this as the default behavior because this should work fine with most themes. However, as mentioned yesterday, I will offer the ability to customize the color. Stay tuned!

[fitim]

Sorry, im confused now… the upper picture shows your plugin, the lower picture shows the “plugin” of @N-l1.
With your plugin the shadow is white … and not dark. If it would be the same shadow like in the lower picture, I’d be happy.
Since the update also the shadow isn’t working anymore with a white theme, that worked before very good.
Which theme are you using?

Edit: Okay, after checking your code I realized that you use “ha-card-box-shadow” for the shadow variable. But in both of my themes this variable isn’t defined.

[DigitalElise (Elle)]

Hi Folks,

I love this lovelace UI. So far almost everything is working perfectly.
However I cant get my lights to update live.

I am using the following code but the count of on lights only updates if I restart the Home Assistant server.

Is there a way to make this happen live that I am missing?

sensor 4:
  - platform: template
    sensors:
      lights_on:
        friendly_name: "Lights On"
        value_template: "{{ states | selectattr('entity_id','in', ['light.elles_go','light.sarah.go','light.kitchen_lightstrip','light.vanity'] )|selectattr('state','eq','on') | list | count }}"

Thanks for your help in advance.