Lovelace Soft UI - Simple and Clean Lovelace Configuration

N-l1 · January 6, 2020, 2:47am

I’ve finally got home. After some tinkering and testing this seems to work.

          - content: >
              # {% if is_state('media_player.multispeakers_cast', 'off')%} Er speelt momenteel
              geen muziek af. {% elif is_state('media_player.multispeakers_cast', 'playing')%} Er
              speelt momenteel muziek af.  {% elif is_state('media_player.multispeakers_cast',
              'paused')%} De muziek is gepauzeerd.  {% endif %}
            style: |
              ha-card {
                --paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
                box-shadow: 2px 2px rgba(0,0,0,0.0);
              } 
              h1 {
                font-size: 15px;
                font-weight: thin;
                font-family: Helvetica;
                letter-spacing: '-0.01em';
              }
            type: markdown

Hope this helps!

ASNNetworks · January 6, 2020, 10:17am

You are a legend

I can’t wait to further explore this great theme and versatility of it! I have managed to give the ‘pressed’ look to the big buttons too by copying it from the smaller ones. Looks great for scenes!

I want to create context aware information under the ‘Scene’ line when 1 or more scenes are turned on. I think I will manage that with your previous codes

N-l1 · January 6, 2020, 8:54pm

Wow that’s looking really nice!

Glad I helped! If you have any more questions please let me know, I’m glad to help!

ASNNetworks · January 6, 2020, 9:05pm

Thank you! Btw, is there a way to ignore the sun.sun state and force the day theme without having to change the scripts? I really really like the day time theme and think about having that on 24/7. But I suspect I have to remove/change the sun.sun shadow styling.

Also, can you explain to me how I can add an extra line of code with the contextual scripts (like the Spotify one). I used that example with different cards and changed some values which worked fine. But then I added an extra line, because I wanted an extra variant, but then the code breaks and doesn’t work anymore.

For example: what would I need to add where so I can add an extra variable?

          # {% if is_state('input_boolean.gamemodus', 'on')%} Game Scène staat
          aan, succes met gamen! {% elif is_state('input_boolean.moviemode',
          'on')%} Film Scène staat aan, geniet van de film!  {% elif
          is_state('input_boolean.gamemodus', 'off')%} Kies een scène en
          ontspan.  {% endif %}
        style: |
          ha-card {
            --paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
            box-shadow: 2px 2px rgba(0,0,0,0.0);
          } 
          h1 {
            font-size: 15px;
            font-weight: thin;
            font-family: Helvetica;
            letter-spacing: '-0.01em';
          }
        type: markdown

I tried copying one line and pasting it again and changing text, but that broke the code.

{% elif is_state('input_boolean.moviemode','on')%} Film Scène staat aan, geniet van de film!

N-l1 · January 6, 2020, 9:15pm

Yes, you would have to remove the night styling. So you would have to change from this:

            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);
                  {% else %}
                    -8px -8px 8px 0 rgba(77, 77, 77,.5),8px 8px 8px 0 rgba(0,0,0,.3);
                  {% endif %}   
              }

To this:

            style: |
              ha-card {
                box-shadow:  -8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
              }

For pressed buttons, from this:

                style: |
                  ha-card {
                    box-shadow: 
                      {% if is_state('sun.sun', 'above_horizon') and is_state('switch.dining_table', 'on') %}
                        inset -4px -4px 8px 0 rgba(255,255,255,.7), inset 4px 4px 8px 0 rgba(0,0,0,.07);
                      {% elif is_state('sun.sun', 'above_horizon') and is_state('switch.dining_table', 'off') %}                      
                        -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') and is_state('switch.dining_table', 'on') %}                      
                        inset -4px -4px 12px 0 rgba(77, 77, 77,.5), inset 4px 4px 12px 0 rgba(0,0,0,.7); 
                      {% elif is_state('sun.sun', 'below_horizon') and is_state('switch.dining_table', 'off') %}   
                        -8px -8px 8px 0 rgba(77, 77, 77,.5),8px 8px 8px 0 rgba(0,0,0,.3);
                      {% endif %}     
                  }

To this:


                style: |
                  ha-card {
                    box-shadow: 
                      {% if is_state('switch.dining_table', 'on') %}
                        inset -4px -4px 8px 0 rgba(255,255,255,.7), inset 4px 4px 8px 0 rgba(0,0,0,.07);
                      {% else %}
                        -8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
                      {% endif %} 
                  }

For the scenes template, adding another {% elif…%} should work fine, something like this:

          #{% if is_state('input_boolean.gamemodus', 'on')%} Game Scène staat
          aan, succes met gamen! {% elif is_state('input_boolean.moviemode',
          'on')%} Film Scène staat aan, geniet van de film!  {% elif
          is_state('input_boolean.gamemodus', 'off')%} Kies een scène en
          ontspan. {% elif is_state('input_boolean.another_variable', 'on')%} Some 
          other text {% endif %}

ASNNetworks · January 6, 2020, 11:05pm

@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

                          # {% 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%}

ASNNetworks · January 7, 2020, 11:17am

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

kalkih · January 7, 2020, 4:08pm

This is really cool, thanks for sharing!

N-l1 · January 7, 2020, 9:04pm

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!

Hope this helps!

ASNNetworks · January 7, 2020, 9:20pm

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).

WhistleMaster · January 8, 2020, 6:55pm

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

ASNNetworks · January 8, 2020, 7:16pm

@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

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

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.

WhistleMaster · January 9, 2020, 11:51am

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

ASNNetworks · January 9, 2020, 12:07pm

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.

teachingbirds · January 9, 2020, 6:57pm

Really nice work!

mitchmario · January 12, 2020, 12:55pm

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

Carlos_Lara · January 12, 2020, 1:25pm

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.

N-l1 · January 12, 2020, 6:02pm

@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

ASNNetworks · January 12, 2020, 6:59pm

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

mitchmario · January 12, 2020, 11:10pm

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

That was it. Thank you!