A different take on designing a Lovelace UI

[Mattias_Persson]

@johansvensson911

Thank you so much! It was as simple as I didn’t have the font folder in the www…

I miss that the “dimmer” is in another color. Right now it’s all the same no matter what % I have the lights on. I’ve tried to change in the pop up card but I don’t get any different color?

Is this what you mean?

In button_card_templates.yaml replace sliderColor: '#c7c7c7' with sliderColoredByLight: true

And, I don’t have the colorful Philips bulb so I want to get rid of the circle with the color in it. How do I manage that? I’ve tried to delete some from the card itself in the code but then the color circle stays and ‘the most orange’ circle disappears.

Remove this whole block from themes.yaml

#popup>div.action-holder>div:last-child>div:last-child>.color {
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%), 
    conic-gradient(rgb(120, 39, 230), rgb(230, 34, 231), rgb(228, 5, 136), rgb(228, 25, 25), 
    rgb(229, 105, 30), rgb(232, 226, 46), rgb(125, 230, 41), rgb(52, 232, 40), rgb(51, 231, 92), 
    rgb(52, 232, 224), rgb(32, 125, 229), rgb(18, 39, 229), rgb(120, 39, 230));
  border-width: 2px;
  border-color: #e6e6e6;
  --size: 4.4em !important;
}

and also add/remove actions: in button_card_templates.yaml -> light-popup-card

God jul!

[johansvensson911 (Johan Svensson)]

@Mattias_Persson

Is this what you mean?

In button_card_templates.yaml replace sliderColor: '#c7c7c7' with sliderColoredByLight: true

I tried that and that gave me the result that i can click on the dimmer and the percent of the light switches. I mean that I want the dimmer slider colored. Example: 0% the dimmer is no color, 50% half the dimmer is white ish and 100% the whole dimmer slider is white ish… Hard to explain.

[Mattias_Persson]

Oh, right. Pretty sure that won’t be a smooth experience with card-mod. Suggest the feature on git.

[johansvensson911 (Johan Svensson)]

Ah! I will look in to this and look in to your button card template to se. Thank you!

[celeritas0725]

Thank you! It worked. For reference and to understand the feature further, may I know why I need to put input boolean in this? If I recall it correctly, I am copying your old file before and this is not present. Thanks again in advance!

[Mattias_Persson]

It’s tied to an automation. You’ll only want the loader template (button card) on a slow responding device. You turn on an entity, and for simplicity, an input boolean with the same name.

Now the automation is really simple. If one of these entities change state, like from off to on, it turns off the loader (spinning circle).

So basically the input boolean is just a switch for the visibility of the loading animation.

  - alias: turn_off_loading_wheel
    initial_state: true
    trigger:
      - platform: state
        entity_id:
          ['media_player.sony_bravia', 'media_player.samsung_tv_remote', 'switch.computer_imac', 
          'switch.playstation_5', 'fan.sovrum_anslut', 'switch.air_purifier']
    action:
      - service: input_boolean.turn_off
        data:
          entity_id: >
            {{ trigger.entity_id | replace(trigger.entity_id.split('.')[0], 'input_boolean') }}

[johansvensson911 (Johan Svensson)]

Tried a lot but no success. In your setup the dimmer goes up and down in a white ash color when you slide the dimmer up and down. Mine is all black. Tried to change a lot of color in the button_template_card but no success. Any ideas?

[Mattias_Persson]

It’s sliderColor in button_card_templates.yaml. Did you edit ui-lovelace.yaml too? Because you need to edit that after you make changes to includes.

sliderColor: 'red'

If you can’t get it to work you can force it with card-mod in themes.yaml. Don’t forget to call service frontend.reload_themes

#popup>div.range-holder>input[type=range] {
  cursor: grab;
  --slider-color: blue !important;
}

[johansvensson911 (Johan Svensson)]

I thought that it was sliderColor… But nothing happens when I change the sliderColor… No matter what. Although I haven’t changed anything in the ui-lovelace.yaml, what should I edit? If I change the sliderTrackColor the changes apply after I restart HA.
Sorry for me being such a newbie…

[Mattias_Persson]

Yeah, just change anything. If you change anything in included files, add a space at the end of ui-lovelace and save.

[johansvensson911 (Johan Svensson)]

Really strange thing happened. I made the changes and I had to force it in themes.yaml, called the service and the slider showed up and was red. Then I just tried to change the color and it went back as it was before. Maybe I need to take a break… Thank you for patience!

[johansvensson911 (Johan Svensson)]

It showed up once I white now, then it disappeared and back as it was before. I’ll take a break and give it another try some other day…

[celeritas0725]

Thank you for a very clear explanation! I’m glad I was able to visit this page as I learn more with Lovelace UI design. I’m still learning how to design my UI based on your syntaxes.

[bran2000 (Sam)]

Hi, great job !
i copied all your github repo for this beatiful lovelace ui and configure step by step the ui lovelace to adapt to my need however i met some problem about the mod_card popup card for example when i click on the card for my light it’s not returning and no pop up appears and i have not the sensor to up and down or slide my purcent of the light, the only thing is working is to turn on or turn off, any idea what i’m missing ?
Thanks for your help

[Martin_Pejstrup (mpejstrup)]

Hi Matt

Merry Christmas

I’ve been spending some time update my old setup to your new way of handling it.
One thing i don’t understand is: You have removed some of your style config from you ui-lovelace.yaml, but still manage to make it look right. When I remove the same lines I get into trouble. Are you handling this styling somewhere I can’t find it?
Example from Sidebar. Ref. lines 72 to 84 in your ui-lovelace.yaml

Old way

          - type: custom:hui-element
            card_type: markdown
            style:
              {top: 5%, left: 9.1%, width: 15.5vw, height: 1px, --ha-card-background: none, --ha-card-box-shadow: none, 
              --primary-text-color: 'rgba(255, 255, 255, 0.9)', font-family: SF Display, font-size: 1.4vw, font-weight: 300, 
              letter-spacing: 0.06vw, line-height: 2.05vw, opacity: 0.75, pointer-events: none}

New way, as you new setup

          - type: custom:hui-element
            card_type: markdown
            style:
              {top: 10%, left: 9.1%}

PS. My clock will sometime not be the size I have configured it to. Do you have the same issue?

Any idea?
I works for me with the old setup, but it bugs me don’t get it

[Mattias_Persson]

you missed class: sidebar and use custom:hui-markdown-card

- type: custom:hui-markdown-card
  class: sidebar
  style:
    {top: 9%, left: 11.1%}
  content: >
    <span>{{ states('sensor.time') }}</span>
    ...

card-mod class in themes.yaml

.sidebar {
  font-size: 1.5vw;
  font-weight: 300;
  opacity: 0.75;
  width: 15.5vw;
  height: 1px;
}

the clock is styled card-mod-card-yaml:

...
ha-markdown-element>p>span {
  font-family: SF Text;
  font-size: 5vw;
  font-weight: 200;
  margin-left: -0.3vw;
  letter-spacing: -0.05vw;
}

also add “markdown fix” in ui-lovelace.yaml

# markdown fix
- type: custom:hui-element
  card_type: markdown
  style: {opacity: 0}
  content: preload

profit

[Martin_Pejstrup (mpejstrup)]

Another question @Mattias_Persson. I see you have changed some files in your browser mod custom component. Do you recommend to integrate them as well and could that be the reason for all my popups have lost the styling?

[Martin_Pejstrup (mpejstrup)]

Great spotted. And great explanation. Thanks!

But still no luck, I have also changed the hui-markdown-card and both themes.yaml and markdown fix was already integrated.

title: Hjem
views:
  - panel: true
    path: default_view
    cards:
      - type: picture-elements
        image: /local/background.png
        elements:
        
          # markdown fix
          - type: custom:hui-element
            card_type: markdown
            style: {opacity: 0}
            content: preload        

          ##########################################################################
          #                                                                        #
          #                              * Sidebar *                               #
          #                                                                        #
          ##########################################################################

          - type: image
            image: local/sidebar.png
            tap_action:
              action: none
            hold_action:
              action: none
            style:
              {top: 49.24%, left: 10.6%, width: 21.5%, pointer-events: none, border-right: '1.5px solid rgba(58,69,73,0.2)'}

          #################################################
          #                                               #
          #                  * Markdown *                 #
          #                                               #
          #################################################

          - type: custom:hui-markdown-card
            class: sidebar
            style:
              {top: 9%, left: 11.1%}
            content: >
              <span>{{ states('sensor.time') }}</span>

Thanks in advance

[Mattias_Persson]

Have you updated card-mod?

[Martin_Pejstrup (mpejstrup)]

Yes, all should be fully updated.
Card-mod is 2.0.3