A different take on designing a Lovelace UI

[Jason_hill]

Ended perfect. style it with “max-height: 1px” and it only expands downwards.

[jcreynolds (James C. Reynolds II)]

@Mattias_Persson updated his repo to include the fix for the popups. Slightly changed the way styles was being handled they get loaded from the theme via classes and lovelace reference those classes. Check it out ran through the changes and got it going and popups look the way they did before.

[Mattias_Persson]

@spudje

Another day another challenge. I’m struggling with styling a markdown card. I would like to layout elements inside of it. Now the reason I’m struggling may be the fact that the way to do styles varies between some card types, or my css is simply very rusty

Markdown does not render full html and I don’t think what you’re trying to do is possible. Your styles are also off. You end with a , instead of ;

If you want to style a specific tag you can target that from the top level picture elements and dig through shadow roots.

- type: picture-elements
  image: /local/background.png
  style:
    "#root > hui-markdown-card":
      $:
        "ha-card > ha-markdown":
          $: |
            ha-markdown-element > p > span {
              font-size: 5vw;
            }
  elements:

    - type: custom:hui-markdown-card
      style:
        top: 9%
        left: 11.1%
      content: >
        <span>Clock</span>
        other
        ...

[spudje]

Super, thanks a lot, got it working!!

[Martin_Pejstrup (mpejstrup)]

Great

Do you mind sharing it? Mine is giving me some problems…

[larsstr]

Thank you for updating your theme! It works very good with version 0.113.1. After integrating your style changes into my configuration, I noticed that no all my popups do have close icon in front of the popup title. If I open a hue popup, there is a close icon in front of the title but if I open the vacuum popup, the close icon is missing. Did I miss something to integrate or do you also have that phenomenon :)?

[larsstr]

Try adding kiosk as a query var to your Lovelace address, e.g. http://IP:8123/lovelace/default_view?kiosk. This will hide the Home Assistant sidebar (specified in the first lines of the ui-lovelace.yaml file).

// Edit: Saw you updated your screenshot :-). Probably my solution approach will not fix your problem.

[Martin_Pejstrup (mpejstrup)]

Getting closer, but not really loving it, so hope @Jason_hill, might have a great look for it.
And I wanna get in more that 3-4 events…

[Mattias_Persson]

@larsstr

Thank you for updating your theme! It works very good with version 0.113.1. After integrating your style changes into my configuration, I noticed that no all my popups do have close icon in front of the popup title. If I open a hue popup, there is a close icon in front of the title but if I open the vacuum popup, the close icon is missing. Did I miss something to integrate or do you also have that phenomenon :)?

It’s intentional. I’ve set hide_header: true on popups with more than one card, otherwise the header spans all cards.

[larsstr]

Oh it’s late in Germany… that was obvious, thank you :-). As I’m using the S5 Max, which is not supported by valetudo, I cannot use the map feature. Now it’s fine :-).

[Mattias_Persson]

We’re in the same time zone then

Great!

[Mattias_Persson]

@Martin_Pejstrup

@Martin_Pejstrup

Getting closer, but not really loving it, so hope @Jason_hill, might have a great look for it.

And I wanna get in more that 3-4 events…

What are you trying to achieve with your calendar? Which calendar card do you use?

@Martin_Pejstrup

Hi Matthias

First of all, very nice work

I am trying to make your sidebar_active sensor, and was hoping to jump right into using most of yours. Only changing to Danish

I have a sensor that counts all the lights on and I was hoping to use it.

For now I’m just using my media_player.stue as the switches part.

Is it even possible to use a sensor like this? I’m not that comfortable in templating yet…

Sensor does come up, but is only showing “Unavailable”

Thanks in advance

This template already counts the lights for you so adding a sensor that counts lights into that template doesn’t make sense. I’ve set it up to only count switches and lights.

@Martin_Pejstrup

Hi all

Been reading through the tread, but can’t seem to find what i’m looking for:

• Does any know where I can find a full list of the icons Mathias is using?

I see for example the Hue bulb is working fine but it’s not in the icons.yaml in the repo.

Also has anyone made an icon for a oven, in a similar design to these?

Thanks in advance

Icons here /www/custom_icons.js. These are normal icons like mdi: that you put in lets say an entities card. All other icons are in ui-lovelace.yaml in each button card and are not listed.

@Martin_Pejstrup

Really getting some stuff done here… Thanks again @Mattias_Persson!

I have an issue with a hold_action on the picture_elements card. It won’t react at all…

Can anyone see the issue?

Thanks in advance

Update browser_mod

[Martin_Pejstrup (mpejstrup)]

Hi Mattias

Thanks for taking your time to answer me questions.
I’m using “github.com/ljmerza/calendar-card”, but tinkering with it I have gotten something I like.

Okay, so like this?Shouldn’t I be able to do this with media_player? They are not appearing…

    sidebar_active:
      value_template: >-
        {% set lights = [
          states.light.bad_1,
          states.light.bad_2,
          states.light.bryggers,
          states.light.carport,
          states.light.gang,
          states.light.have,
          states.light.kontor,
          states.light.kokken,
          states.light.lounge,
          states.light.sovevaerelse,
          states.light.spisestue,
          states.light.stue,
          states.light.terrasse,
          states.light.udendors,
          states.light.viktualierum,
          states.ight.vaerelse_nord,
          states.light.vaerelse_syd,
          states.light.walk_in,
          ] %}
        {% set lights_on = lights | selectattr('state','eq','on') | list %}
        {% set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
        {% set media_players = [
          states.media_player.stue,
          states.media_player.alrum,
          states.media_player.badevaerelse_1,
          states.media_player.bedroom_apple_tv,
          states.media_player.terrasse,
          ] %}
        {% set media_players_on = media_players | selectattr('state','eq','on') | list %} 
        {% set media_players_name = media_players | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
        {% if (lights_on | length ==0 ) and (media_players_on | length > 0) %} 
        {{ media_players_name | regex_replace(',([^,]*)$',' og\\1') }} er tændt
        {% elif (lights_on | length ==1) and (media_players_on | length == 1) %}
        {{ lights_name }} og {{media_players_name }} er tændt
        {% elif (lights_on | length ==1) and (media_players_on | length > 1) %}
        {{ lights_name }}, {{ media_players_name | regex_replace(',([^,]*)$',' og\\1') }} er tændt
        {% elif (lights_on | length > 1) and (media_players_on | length == 1) %}
        {{ lights_on | length }} lamper og {{ media_players_name }} er tændt
        {% elif (lights_on | length > 1 ) and (media_players_on | length > 1) %}
        {{ lights_on | length }} lamper, {{ media_players_name | regex_replace(',([^,]*)$',' og\\1') }} er tændt
        {% elif (lights_on | length ==1) and (media_players_on | length ==0) %}
        {{ lights_name }} er tændt
        {% elif (lights_on | length >1 ) and (media_players_on | length ==0) %}
        {{ lights_on | length}} lamper er tændt
        {% else %} 
        <font color='#6a7377'>Alt er slukket</font> 
        {% endif %}

Okay, thanks. I need to get started on learning how to do that

Updated browser_mod. Not working, it feels like it’s because the swipe- card thinks I want to swipe when I’m holding??

---

Now that I have you… I have asked this in another tread:
Can someone help me change this button, so that it either:

• Becomes depressed for xx secs
• Is just a tap-button, meaning no depress animation? I just want to toogle a boolean for a automation
  I’m lost when it comes to styling.

          - type: custom:button-card
            entity: input_boolean.godnat
            style:
              top: 82.1%
              left: 91.05%
              width: 10%
            tap_action:
              action: toggle
            hold_action:
              action: none
            custom_fields:
              icon_home: >
                [[[ const state = entity.state === 'on' ? 'animate' : null;
                return `<svg viewBox="0 0 50 50"> <style>@keyframes animate{from, 20%, 40%, 60%, 80%, to{animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0%{transform: scale(0.3);}20%{transform: scale(1.1);}40%{transform: scale(0.9);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}to{transform: scale(1);}}.animate{animation: animate 1s; transform-origin: center;}</style>
                <path class="${state}" d="M42.2 28.3c0-.8-.2-1-.2-1L26 12.1s-.5-.4-1-.4-1 .3-1 .3L8.2 27.1c-.4.5-.4.9-.4.9v18.3c0 1.1.9 2 1.9 2h8.2a1.47 1.47 0 0 0 1.5-1.5v-14a1.47 1.47 0 0 1 1.5-1.5h8.4a1.47 1.47 0 0 1 1.5 1.5v14a1.47 1.47 0 0 0 1.5 1.5h8.2c1.1 0 2-.9 2-1.9 0-.2-.3-18.1-.3-18.1zM7.3 25l-1.6 1.5s-.3.3-.5.3-.5 0-.8-.2c-.2-.2-2-2.8-2-2.8s-.1-.4-.1-.7c.1-.3.2-.7.3-.8.4-.1 21.5-20.1 21.5-20.1s.4-.3.9-.3c.4 0 .8.1.9.2s.5.4.5.4l8.9 8.5V6s.1-.4.2-.7c.1-.2.3-.3.4-.3s.3-.1.3-.1h3s.3.1.4.3a1.08 1.08 0 0 1 .3.7v9.8l7.2 6.9s.2.3.3.4c.1.2.1.7.1.7 0 .1-.1.4-.2.5s-1.6 2.5-1.6 2.5-.1.3-.3.3c-.2.1-.4.1-.7 0-.2-.1-.5-.4-.5-.4L26.4 9.4s-.3-.3-.5-.4-.4-.2-.8-.2-.5.1-.8.1c-.1.1-.4.3-.7.5C23.3 9.8 7.3 25 7.3 25z"/></svg>`; ]]]
            styles:
              card: [transition: all 0.3s ease-out]
              custom_fields:
                icon_home:
                  [top: 10.5%, left: 10.1%, width: 2.9vw, position: absolute,
                  fill: "[[[ return entity.state === 'on' ? '#c7983e' : '#9da0a2'; ]]]"]
            template: switch

Secondly and not so important, can I get a timer on the card that counts down from xx secs, after being pressed? Should be instead of the “Til”.

Thanks in advance
(I should mention that I have used the great work of Mattias Persson)

[Mattias_Persson]

Okay, so like this?Shouldn’t I be able to do this with media_player? They are not appearing…

There’s a good chance your media_player state isn’t on, but equal to playing. Like I said my template is only lights and switches so now you’ll have to add media to the logic…

{% set media = [states.media_player.stue, states.media_player.alrum] %}
{% set media_name = media | selectattr('state','eq','playing') | map(attribute='name') | join(', ') %}
{{ media_name }} är på

Updated browser_mod. Not working, it feels like it’s because the swipe- card thinks I want to swipe when I’m holding??

I don’t know then, it works here.

Becomes depressed for xx secs

If you have a script as an entity in button-card the button will be on for as long the script is running. Have the script toggle input_boolean.godnat. Add a delay to the end of the script to set how long the button should be on.

Is just a tap-button, meaning no depress animation? I just want to toogle a boolean for a automation
I’m lost when it comes to styling.

You can override the state styles from the button_card_templates:

- type: custom:button-card
  entity: input_boolean.godnat
  state:
    - value: 'on'
      styles:
        card: [background-color: 'rgba(115, 115, 115, 0.2)']
        name: [color: 'rgba(255, 255, 255, 0.3)']
        state: [color: 'rgba(255, 255, 255, 0.3)']
  ...

Secondly and not so important, can I get a timer on the card that counts down from xx secs, after being pressed? Should be instead of the “Til”.

I mean sure it’s possible but you may have to research how to do it in javascript or maybe use a timer. I’m using a timer for my laundry button-card.

[Martin_Pejstrup (mpejstrup)]

Hi Mattias

Thanks for the help again

Blockquote
There’s a good chance your media_player state isn’t on, but equal to playing. Like I said my template is only lights and switches so now you’ll have to add media to the logic…

Worked like a charm

Blockquote
I don’t know then, it works here.

Holding won’t work in Chrome. Will try on the tablet later.

Blockquote
If you have a script as an entity in button-card the button will be on for as long the script is running. Have the script toggle input_boolean.godnat . Add a delay to the end of the script to set how long the button should be on.

Could be a nice solution with your second idea…
Tried your config, no result…

           - type: custom:button-card
            entity: input_boolean.godnat
            state:
              - value: 'on'
                styles:
                  card: [background-color: 'rgba(115, 115, 115, 0.2)']
                  name: [color: 'rgba(255, 255, 255, 0.3)']
                  state: [color: 'rgba(255, 255, 255, 0.3)']
            style:
              top: 82.1%
              left: 91.05%
              width: 10%
            tap_action:
              action: toggle
            hold_action:
              action: none
            custom_fields:
              icon_home: >
                [[[ const state = entity.state === 'on' ? 'animate' : null;
                return `<svg viewBox="0 0 50 50"> <style>@keyframes animate{from, 20%, 40%, 60%, 80%, to{animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0%{transform: scale(0.3);}20%{transform: scale(1.1);}40%{transform: scale(0.9);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}to{transform: scale(1);}}.animate{animation: animate 1s; transform-origin: center;}</style>
                <path class="${state}" d="M42.2 28.3c0-.8-.2-1-.2-1L26 12.1s-.5-.4-1-.4-1 .3-1 .3L8.2 27.1c-.4.5-.4.9-.4.9v18.3c0 1.1.9 2 1.9 2h8.2a1.47 1.47 0 0 0 1.5-1.5v-14a1.47 1.47 0 0 1 1.5-1.5h8.4a1.47 1.47 0 0 1 1.5 1.5v14a1.47 1.47 0 0 0 1.5 1.5h8.2c1.1 0 2-.9 2-1.9 0-.2-.3-18.1-.3-18.1zM7.3 25l-1.6 1.5s-.3.3-.5.3-.5 0-.8-.2c-.2-.2-2-2.8-2-2.8s-.1-.4-.1-.7c.1-.3.2-.7.3-.8.4-.1 21.5-20.1 21.5-20.1s.4-.3.9-.3c.4 0 .8.1.9.2s.5.4.5.4l8.9 8.5V6s.1-.4.2-.7c.1-.2.3-.3.4-.3s.3-.1.3-.1h3s.3.1.4.3a1.08 1.08 0 0 1 .3.7v9.8l7.2 6.9s.2.3.3.4c.1.2.1.7.1.7 0 .1-.1.4-.2.5s-1.6 2.5-1.6 2.5-.1.3-.3.3c-.2.1-.4.1-.7 0-.2-.1-.5-.4-.5-.4L26.4 9.4s-.3-.3-.5-.4-.4-.2-.8-.2-.5.1-.8.1c-.1.1-.4.3-.7.5C23.3 9.8 7.3 25 7.3 25z"/></svg>`; ]]]
            styles:
              card: [transition: all 0.3s ease-out]
              custom_fields:
                icon_home:
                  [top: 10.5%, left: 10.1%, width: 2.9vw, position: absolute,
                  fill: "[[[ return entity.state === 'on' ? '#c7983e' : '#9da0a2'; ]]]"]
            template: switch

Right?
What I really would like it to do is:

1. Push to toggle the input_boolean
2. Either be depressed (on) shortly as long as the automation takes or be on until ex. a light is turned on / lock is unlocked or for a defined time.

How would you go about that?

Thanks again

[Mattias_Persson]

But what you want is how it’s in my repo, forget input_boolean. Let a script do all the good night stuff and the button will be on while the script is executing

#button
- type: custom:button-card
  entity: script.godnat
  state_display: Auto
  style:
    top: 82.1%
    left: 91.05%
    width: 10%
  ...

#script
godnat:
  sequence:
    - service: light.turn_off
      entity_id: light.alla_lampor_utom_hall
    - delay:
        seconds: 4

[Martin_Pejstrup (mpejstrup)]

All right, it was because the whole “Godnat” automation is done in Node-Red.
Can I do this below or would you suggest to do the whole thing in yaml?
I have been thinking about quitting Node-Red, but it’s sooooo easy to have the overview

#script
godnat:
  sequence:
    - service: input_boolean.turn_on
      entity_id: input_boolean.godnat
    - delay:
        seconds: 4

Thanks

[Jason_hill]

Hej Martin. Også dansker her Do you wanna take it up in the danish forum on facebook.

[Martin_Pejstrup (mpejstrup)]

Hi Jason

Actually I’ve gotten some way
But since we are working on similar things let’s connect in there, I would like to see your weather integration.

[gwww (Glenn Waters)]

I’m trying to figure out why you’ve created the popup in the way that you did. For example this config:

hold_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    card:
      type: vertical-stack
      cards:
        - type: entities
          entities:
            - type: custom:light-popup-card
              entity: '[[[ return entity.entity_id ]]]'

Why the popup inside entities card inside vertical-stack. I know it works because I copied it and also have it working. When I try to take one of them out, it breaks. That’s what I don’t understand.

Second question, while I’m here. I’ve been following this thread almost since it began and browsing your repo every now and then. I see you made a change 2 days ago removing the animation on the popup entities card. I imagine you still want animation. I looked and could not see where it landed. Somewhere in the themes.yaml is my guess, but I didn’t spot it?

Thanks for sharing your hard work! Like so many others on this thread I’ve copied many of your ideas! ,