Lovelace Soft UI - Simple and Clean Lovelace Configuration

It appears you have the sun below horizon automation activated while using a light day theme. Use a dark background for the dark theme and a light theme for light theme.

Go to developer tools and activate the sun.sun state to ‘above_horizon’. This will force the state of the sun (not in real life lol) which allows you to test light themes after the sun is down :wink:

1 Like

It appears you have the sun below horizon automation activated while using a light day theme.

That was it. Thank you!

1 Like

v0.2 Remote pop-up card!

Features:

  • Introduces all new remote pop-up card that can be configured to pop-up when you long press on a button

  • Introduces all new TTS card that can be used to send TTS to media players.

  • Better Readme! No more scrolling forever. Readme now has collapsible code.

Thanks everyone!

6 Likes

Just have to chime in and say that this looks amazing! It makes me so happy to see that the user experience part of home automation (especially in a platform this big) is improving so much. Will definitely use this when I have the time to configure everything. A thousand thumbs up to you! :smiley: :smiley:

1 Like

Hi,

First of all, thanks a lot for this wonderful UI! Really a big fan of it.

One question, how can I change the icon dynamically via a template? The below code doesn’t seem to work…

          - icon: >
               {% if is_state(cover.window,'open') %} 
                 'mdi:window-open'
               {% else %} 
                 'mdi:window-closed'
               {% endif %}

Thanks a lot!
Cadish

@N-l1 I want to thank you again for your previous help and effort. I learned some very important stuff by studying your code. I shaped my UI more and more and allthough it is different now, it was started as your Soft UI and is still inspired by some elements (especially the context aware concept.)

Here’s a preview of what I have created now, inspired by your work, Popup-cards of Custom Lovelace Card - Homekit style card :slight_smile: and some creativity of my own. I have finedtuned a lot and a lot of cards are content aware/conditional. I heavily focus on visibility, usability and design. I also changed the codings so I can create custom themes I can activate as a button card and change everything on the fly with one user press.

Link to vid (I couldnt embed it): https://youtu.be/a6vIV6uKgqQ

And some screenshots with different context aware / conditional cards.

Just wanted to show my thanks this way :raised_hands:

7 Likes

Hi @ASNNetworks, that looks great! Looks like you have came a long way since you first started! Thanks for checking out my setup!

Best wishes! :heart: :+1:

Hi @Cadish, seems like you forgot the ‘’ (quotes) so it would be something like this. I don’t have any cover entity so I’m not sure if it will be ‘open’ or ‘on’. Try ‘on’ if this doesn’t work.

          - icon: >
               {% if is_state('cover.window','open') %} 
                 'mdi:window-open'
               {% else %} 
                 'mdi:window-closed'
               {% endif %}

Hope this helps! :wink:

1 Like

Doesn’t work. Got it working by using this code:

          - icon: 'mdi:window-closed'
            entity: cover.window
            state:
              - value: "open"
                icon: mdi:window-open

Regards,
Cadish

Hi @N-l1
Great Work
Check out this: https://medium.muz.li/skeuomorphism-neumorphism-ui-trend-e7b78792bd21

3 Likes

simpy gorgeous thanks

Im going through your instructions, but I cant find Card Mod in HASC

Also, I cant see themes in HASC…

Sorry for the noob questions

Thank you @dvbit! Very nice designs and a really nice tool indeed! :+1:

:wave: @richardmayo,

Card mod in HACS can be found searching card-mod in the plugins section. If themes aren’t showing up in HACS, make sure you have enabled themes in Home Assistant. Check out the HACS documentation.

Hope this helps! :heart:

can you tell please what is your configuration of sensor.lights_on

not OP bust here’s what im using:

sensor:
  - platform: template
    sensors:
      lights_on:
        entity_id: sensor.time
        value_template: '{{ states.light | selectattr("state", "equalto", "on") | rejectattr("attributes.is_deconz_group") | list | length }}'

You may need to adopt the value template based on the lights/integrations you use. I had to reject all deconz groups because these are shown under the light domain in home assistant.

3 Likes

Hi @ASNNetworks,
do you have your config published somewhere?
Really like your setup and wanted to know how things were done.

@ASNNetworks I would also love to take a look at your configuration.

Cannot make the pop-up card (remote control) to get working.
Can you tell, do I need to include the popup-card.js?

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