Lovelace Soft UI - Simple and Clean Lovelace Configuration

Tags: #<Tag:0x00007f77fc941288>

@radinsky No, you need to install custom component browser-mod :smiley:

Hi @N-l1!

Very nice design! I really like it and have already implemented multiple parts.

I want to turn your vertical buttons into toggle buttons, but cannot get it to work :frowning: Very frustrating… They seem to be inactive.
2020-01-28_21h50_20
I would like to activate my input.booleans by clicking. Can you help me spot my mistake?

                 type: 'custom:button-card'
              - icon: 'mdi:weather-night'
                show_icon: true
                show_name: false
                style: |
                  ha-card {
                    box-shadow: 
                      {% if is_state('sun.sun', 'above_horizon') %}
                        -8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
                      {% elif is_state('sun.sun', 'below_horizon') %}
                        -8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
                      {% endif %}                 
                  }
                styles:
                  card:
                    - width: 80px
                    - height: 80px
                    - border-radius: 15px
                    - background-color: var(--primary-background-color)
                  icon:
                    - color: var(--primary-text-color)
                tap_action:
                  action: toggle
                  entity: input_boolean.good_night
                type: 'custom:button-card'
              - cards: 
                  - content: |
                      # Goodnight

Thanks in advance :slight_smile:

Hi @Martin_Pejstrup,

Thank you! You should put the entity outside the tap_action

              - icon: 'mdi:weather-night'
                show_icon: true
                show_name: false
                style: |
                  ha-card {
                    box-shadow: 
                      {% if is_state('sun.sun', 'above_horizon') %}
                        -8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
                      {% elif is_state('sun.sun', 'below_horizon') %}
                        -8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
                      {% endif %}                 
                  }
                styles:
                  card:
                    - width: 80px
                    - height: 80px
                    - border-radius: 15px
                    - background-color: var(--primary-background-color)
                  icon:
                    - color: var(--primary-text-color)
############################## Like this ################
                entity: input_boolean.good_night
                tap_action:
                  action: toggle
                type: 'custom:button-card'
              - cards: 
                  - content: |
                      # Goodnight

Hope this helps!

Hi again

That worked for 2 out of 3. I’ll have a look and see if I can figure it out :thinking:

Thanks again! And great work on the UI once more!

1 Like

Has anyone found a good way (good designed, like the whole UI here) to name the entities of the vertical stack? I would love to have the name inside the button, or over the button/under the buttons…

@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

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

6 Likes

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

1 Like

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?

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!

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

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.

:wave: @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!

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

/ Ralf

1 Like

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

4 Likes

This is amazing!

Awesome! Great work! :+1: :astonished: :heart:

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?

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

Ok thx. :slight_smile:

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.