Lovelace Soft UI - Simple and Clean Lovelace Configuration

ASNNetworks · February 4, 2020, 3:30pm

@dolphinxjd1203 @Klex1404 I don’t have my config posted somewhere. I’m using HA for just two months now and am learning/changing as I go. I cannot share my entire config because I have a lot of personal info there for some stuff. I am willing to share a snippet though of some of the basics. If you want let me know, then I will send you a PM.

If you are looking for a complete setup that looks similair, you might want to look into HKI and HomeKit Style Card

dolphinxjd1203 · February 4, 2020, 4:47pm

Thanks @ASNNetworks, in the meantime, I managed to adopt @N-l1 configuration and made some customizations inspired by the pictures of your design.

ASNNetworks · February 4, 2020, 4:53pm

That looks great! Nice to see you managed to create your own version that suits your needs

Ryssk · February 16, 2020, 12:28pm

Hi! Lovely UI interface, and i’ve started to try it out myself aswell

But for someone who’s a first timer using templates, and trying to read up on the official docuements i’m still baffled of how to use it.

I’m trying to use it together with Vertical Buttons Card
together with the sensor you’ve mentioned :

{{ states | selectattr('entity_id','in', ['light.list_your_lights_here','switch.example_1','switch.example_2'] )|selectattr('state','eq','on') | list | count }}

I’ve created a light.all_mylights as a entity

Where do i add that template? And how do i write it? Do i need to add it in Configuration.yaml first or?

N-l1 · February 18, 2020, 1:12am

Hi @Ryssk,

The template is used to count how many lights are on. Which can be used directly with the card or created into a sensor like this:

# Example configuration.yaml entry
sensor:
  - platform: template
    sensors:
      lights_on:
        friendly_name: "Lights On"
        value_template: "{{ states | selectattr('entity_id','in', ['light.list_your_lights_here','switch.example_1','switch.example_2'] )|selectattr('state','eq','on') | list | count }}"

Hope this helps!

Steen · February 19, 2020, 5:05pm

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 · February 19, 2020, 6:02pm

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 · February 22, 2020, 2:04am

@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 · March 5, 2020, 1:13pm

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

/ Ralf

Savjee · March 17, 2020, 8:33pm

(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:

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 · March 17, 2020, 9:03pm

This is amazing!

N-l1 · March 17, 2020, 10:03pm

Awesome! Great work!

fitim · March 17, 2020, 11:11pm

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 · March 18, 2020, 9:31am

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 · March 18, 2020, 12:53pm

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 · March 18, 2020, 1:40pm

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

fitim · March 18, 2020, 2:05pm

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

Savjee · March 19, 2020, 4:22pm

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 · March 19, 2020, 4:37pm

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 · March 19, 2020, 7:16pm

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:

Make horizontal and vertikal stacks with more than 1 button.
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.
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.