Lovelace Soft UI - Simple and Clean Lovelace Configuration

@N-l1thanks for your help man! I really appreciate it, I succesfully added an extra entry. Also, I wrote my own line of code succesfully. I wanted the context to differ when there was one light on vs multiple. It said ‘1 lights are on’ instead of ‘1 light is on’ (but then in Dutch). So I have added three variables: one if state is 0, of if state is 1 and one if state is else. Now it all looks even more natural. I then used that code in my other cards with multiple devices/states. I’ll paste my code here, perhaps it will be of use to others as well :slight_smile:

                          # {% if is_state('sensor.lights_on', '0')%} Alle
                          lampen staan uit. {% elif is_state('sensor.lights_on',
                          '1')%} Er staat momenteel 1 lamp aan.  {% else %}  Er
                          staan momenteel {{states('sensor.lights_on')}}  lampen
                          aan.  {% endif%}
2 Likes

@N-l1 Hi I had a question about the scripting for the context information (like the Spotify ones). Is it also possible to have an ‘and’ variable set? So that you have two lines of text in the same entry.

For instance: Music is playing. The volume is at 10.

I have managed this by creating an extra content card under it, but that takes too much space. Is it possible to have multiple contents one line basically? What my main goal is, is to have as my welcoming message:

Good morning! Sarah is at home. The windows are open. The front door is open. The temperature is set at 20.

And if the door/windows are closed, that entry disappears.

Is this at all possible or am I forced to create a separate content card for each message under eachother?

Edit: I got it working partly. But I think also dissapearing states will be not possible, since it will be tied to different variables. But I will find out!

This is really cool, thanks for sharing!

2 Likes

Hi @ASNNetworks,

To have an ‘and’ variable it would be something like this:

{% if is_state('input_boolean.first', 'on') and is_state('input_boolean.second', 'on')%}

I’m not sure if you can have multiple templates in one line, but you can use a lot of ‘if…and…’ statements to achieve what you want.

Something like this:

                          Goedemorgen! {% if is_state('device_tracker.sarah', 'home' and               
                           is_state('binary_sensor.window','on')%} Sarah is thuis. Het raam is open  
                          {% elif is_state('device_tracker.sarah', 'home' and               
                           is_state('binary_sensor.window','off')%}  Sarah is thuis. {% endif%}

It would however take a lot of templates! :wink:

Hope this helps!

1 Like

Thanks! Yeah I’ve been experimenting and had some stuff working, but I quickly realised I would need a lot of templates if I want the door/windows to appear/disappear. For now I’ll just stick with persons and the temperature, and will create a dedicated tab for sensors (like doors, windows, motion etc).

1 Like

How did you got the weather card in that “large” shape and the weather badge at the top ?

@WhistleMaster I used the Custom Weather Card and turned off forecast and details. Custom animated weather card for Lovelace

What badge do you mean beside that weather card?

———

Quick update: I also added conditional media player cards for Chromecast/Spotify, AppleTV and PS4. They appear/disappear when something is playing/not playing. Tapping the media player directs to the correct tab where the entity is located. Everything is starting to look very clean and polished now :slight_smile:

Also quick tip: use the Custom Layout Card so you have a clean and consistent experience with different displays :+1:

This is how it looks with vertical layout on my iPad Pro 12.9. I experienced heavy cropping and out of place cards on iPad (especially when using splitscreen). The vertical layout elimates all that. Granted, you have more useless space around the sides, but it looks way cleaner and consistent. Also, unless you have separate tabs with more cards for larger screens, you will have useless space anyway, but messier.

2 Likes

Thanks for the very detailed explanations ! Regarding the badge, I was talking about the following one:

Ah that one. I decided to not use badges at all anymore so I didn’t understand you right away. But that badge is the Dark Sky sensor (0day forecast) which shows the current forecast. There are many variations for different forecasts.

After hou have integrated Dark Sky, you can use the sensor as a badge.

1 Like

Really nice work!

1 Like

I am so excited to get this working. Could someone tell me why might my shadows be too dark? I’m using the Google Home theme

The documentation says that you aren’t supposed to use pure black or white for your background. Yours looks very bright to me, try changing it.

:wave: @mitchmario

Can you share a bit of your code? Also can you make sure that it is currently day in you region, since the code will automatically change to a darker shadow at night

I don’t think it is a problem with the theme, since I also use the Google Home theme :wink:

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