Lovelace Soft UI - Simple and Clean Lovelace Configuration

Congratulations @N-l1 for your great work.
I’m trying to make this kind of buttons for shutters/blinds. Does anyone already have this kind of buttons to share?
I made this:
image
Thanks

1 Like

Thanks for the great work you’ve done.
I’m going to try and update the remote you already have provided and get a keypad section.

This is my work so far.
Capture

I’m trying to mimic this.

If you’ve got any tips on how I could achieve that. I would appreciate it.

1 Like

Wow! @Joca Looking great!

@NovaG, implementing a keypad into the remote card could be cool, it looks like your work is going great! I’m not sure if I can help since I created the remote card quite a while back, don’t quite remember the specifics. The repo you linked looks very nice though.

Thanks @N-l1.
I’m looking for something simple and clean to control the shutter position and slats position.

1 Like

So I have given it a go but it looks nowhere near as good as your initial card.

Still at a loss on how to design it.

1 Like

@N-l1 may I ask which theme you are using as shown in the screenshot (the light one)?

After update to 0.111.0 I have text size problems. The text is bigger and I can’t change it to smaller.
Does anyone know how to solve this?

me too, maybe it doesn’t take the font

Same font issue for me. I thought it might’ve been my set up. But I guess it’s more people that face this issue.

Yup I already created an issue on Github but I believe this is due to a recent pull request. If I understand the changes to the mark down card correctly, it’s now set to use user agent style sheets by default, which can’t be overridden?!

1 Like

I think this has to do with markdown card or the properties with styling. I don’t use this UI (I have my own) and have the same issue with 0.111.2 (upgraded from 109.7). I have all my markdown cards with a bigger font now and also the same sizes. I had two different sizes for my mod cards, so I think the property you have to use to change the font size has changed. I’m gonna try and fix it tomorrow for my UI, otherwise revert back and wait for an update.

Edit: this most likely has to do with card-mod. I noticed the CSS values I entered are not used. Others seem to report this as well. Hopefully the author of that add-on will update is soon.

https://github.com/thomasloven/lovelace-card-mod/issues/52

Hello! I love the theme and have made many great dashboard with this.
I have one quick question, is it possible to use the Remote pop-up card with my logitech harmony hub?

1 Like

Hi,
Does anyone know why this is likely happening?
image
This is the code I’m using…

cards:
  - content: |
      # {{ states('sensor.time') }}
    style: |
      ha-card {
        height: 20px;
        --paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
        box-shadow: 2px 2px rgba(0,0,0,0.0);
      }
      h1 {
        font-size: 20px;
        font-weight: bold;
        font-family: Helvetica;
        letter-spacing: '-0.01em';
      }
    type: markdown
  - content: |
      # {{ states('sensor.date') }}
      style: |
      ha-card {
           height: 50px;
           --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
type: vertical-stack

Hi all. As many have experienced by now, 0.111 breaks styling for the markdown card. In the meantime, keep an eye on @knapoc’s GitHub issue.

@Knapoc, I use the clear theme, more info here.

@LittleMighty, it is possible to use the remote card with the harmony hub. Each button on the card calls a service.

Thanks everyone.

The markdown card styling issue has been fixed, check the Readme for updated code. Thanks :tada:

1 Like

This is probably a simple question but where would I add this template so it would update with how many lights I have one?
{{ states | selectattr('entity_id','in', ['light.list_your_lights_here','switch.example_1','switch.example_2'] )|selectattr('state','eq','on') | list | count }}

This is what I have so far

  - icon: 'mdi:lightbulb-multiple'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 10px;
        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: navigate
      navigation_path: /lovelace/lights
      haptic: light
    type: 'custom:button-card'
  - cards:
      - content: |
          # Lights
        style: |
          ha-card {
            height: 20px;                  
            --paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
            box-shadow: 2px 2px rgba(0,0,0,0.0);
          }
          h1 {
            font-size: 20px;
            font-weight: bold;
            font-family: Helvetica;
            letter-spacing: '-0.01em';
          }
        type: markdown
      - content: >
          # There are  {% if is_state('light.cubby_light', '0') %} currently no 
          {% else %}  {{states('light.cubby_light')}}  {% endif %} lights on
        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
    type: vertical-stack
type: horizontal-stack

Do I need to create a template sensor?

I went through something similar, and mine looks like this - it’s using a combination of webostv.button and webostv.command to send the additional button presses. I’d recommend using just ‘name’ rather than ‘icon’ for things like the numbered buttons. I had also toyed with changing the vol/channel buttons to vertical but could never get it to look decent so kept them as they are. There’s plenty more keys I could add but wanted to keep it pretty minimal to suit the rest of the theme

5 Likes

Hi @Eldudemeister, yes, you would need to use the template to create a template sensor, be sure to change the lights inside the template though.

Wow @doubleclue! That is sooo nice! If you would like to, it would be wonderful to also add your version of the remote card to GitHub. Let me know if you are interested.

Love it. If you could share what you’ve done that would be great. I was doing icons as I wanted to put letters underneath eg ABC DEF etc

Very slick. Any chance you would share the code? It’s beautiful