A different take on designing a Lovelace UI

theRKS · February 12, 2022, 6:45pm

Steve;

Can u share your code for climate card (Living Room Heating)? Like the look and how temp is shown.

gerard33 · February 12, 2022, 10:46pm

Sure, here you go. The part from ui-lovelace.yaml

- type: custom:button-card
  entity: media_player.sony_bravia_tv
  name: TV
  lock:
    enabled: true
  state_display: >
    [[[
      if (states['media_player.sony_xr_55a84j'].state === 'playing') {
        return states['media_player.sony_xr_55a84j'].attributes.app_name;
      }
    ]]]
  custom_fields:
    c1: >
      [[[ return states['media_player.sony_xr_55a84j'].attributes.app_name === 'Netflix' ? `<ha-icon icon='mdi:netflix'></ha-icon>` : ' '; ]]]
  styles:
    custom_fields:
      c1:
        - position: absolute
        - left: 60%
        - bottom: 50%
        - margin-right: 15px
  hold_action:
    !include popup/kamer_tv.yaml
  template:
    - base
    - icon_tv
    - loader

And add this to base template in button_card_templates.yaml

custom_fields:
  c1:
    - font-family: Sf Display, Roboto
    - font-size: 80%
    - text-align: justify
    - position: absolute
    - left: 10%
    - bottom: 36%
    - color: >
        [[[
          return variables.consider_on ?
            'rgba(0, 0, 0, 0.6)' :
            'rgba(255, 255, 255, 0.3)';
        ]]]

Some additional info:

I have moved the position of state_info that’s why you see the status in the upper right cornder.
I use c1 for other buttons as well, that’s why overwrite some values in ui-lovelace.yaml for the Sony TV entity.

danieljarhult · February 13, 2022, 9:11am

Can you please share your garagedoor icon and camera icon ? Please

sde91 · February 13, 2022, 4:23pm

@Mattias_Persson I tried integrating your recent footer changes into my fork of your config. As far as I see, I transfered all changes from themes.yaml, ui-lovelace.yaml, button_card_templates.yaml but on my Tablet the footer is cut of and you need to scroll down to see the entire button.

Is this expected or did I miss something? Thanks

afi-dev · February 13, 2022, 5:42pm

Hey I think your panel is very clever, is there any way you could share the code of your cards? ^^

Julien

afi-dev · February 13, 2022, 11:30pm

Hey, I know it’s not really related to the topic but someone could help me solve my problem,

So my problem is that I tried to call various services from my camera, problem, when I run it, it tells me that it needs an entity_id, area_id and other… but I tried but I don’t know how to include it knowing that I found that it works on a classic button and not on the custom button. More precisely I want to make like for the switch a button that makes both switch on and switch off the switch

(Camera Brand: Eufy)

        - type: horizontal-stack
          cards:

          - type: custom:button-card
            icon: mdi:motion-sensor
            tap_action:
              action: call-service
              service: switch.motion_detection
              target:
                entity_id: switch.motion_detection
            template: icon_only
            entity: camera.garage

          - type: custom:button-card
            icon: mdi:flashlight
            tap_action:
              action: call-service
              service: switch.garage.light
              target:
                entity_id: switch.garage.light
            template: icon_only
            entity: camera.garage

          - type: custom:button-card
            icon: mdi:eye
            tap_action:
              action: call-service
              service: switch.garage.night_vision
              target:
                entity_id: switch.garage.night_vision
            template: icon_only
            entity: camera.garage

Can anyone tell me how to do this? Thank you in advance ^^
Julien

wjbeckett · February 14, 2022, 2:32am

Yep, I’ve noticed this too.
I added an extra line to the grid config sothe buttons are sitting on the bottom, but it still doesn’t fit on the screen.

We can adjust the grid spacing to try and fit it all in though.

Ravenholm · February 14, 2022, 12:38pm

Thanks, worked like a charm!

sde91 · February 14, 2022, 8:03pm

I think about putting the config on GitHub at some point. If there is anything specific you like, just ask and I’m happy to provide the config

CDRX2 · February 14, 2022, 8:24pm

I’d like to adapt this to my own setup. It’s not quite as complex as what you’ve done with it and since I’m completely new to anything Javascript more complex than “if this then that”, I’m a bit lost.

Basically, I’m trying to have the following returned if the text is longer than the container:

return `<marquee scrolldelay='200'>${states['media_player.bubble'].attributes['media_artist']} - ${states['media_player.bubble'].attributes['media_title']}</marquee>`;

and this if the text fits within the container:

return states['media_player.bubble'].attributes['media_artist'] + ' - ' + states['media_player.bubble'].attributes['media_title'];

This part of the code works, but I’m struggling with the “if text is wider than the container, show 1 else show 2” part. I’ve tried several combinations, here’s the latest that doesn’t work, based on what I’m trying to grasp from this code by Mattias:

        label: >
          [[[ var element = this.shadowRoot
              var state = element.getElementById("state")
              var container = element.getElementById("container")
              if (state.width >= container.width) return `<marquee scrolldelay='200'>${states['media_player.bubble'].attributes['media_artist']} - ${states['media_player.bubble'].attributes['media_title']}</marquee>`;
              return states['media_player.bubble'].attributes['media_artist'] + ' - ' + states['media_player.bubble'].attributes['media_title']; ]]]

If anyone has any pointers, I’d much appreciate it.

LRvdLinden · February 14, 2022, 8:25pm

Hi, kan jij wellicht jouw ui-lovelace.yaml delen?

Krish1 · February 14, 2022, 8:40pm

Hi All,

Just wondered if anyone knows how to allow titles of custome:button_cards to go over two lines?

All of the worlds i use to describe the entity are too long.

Any help would be really appreciated.

Mattias_Persson · February 14, 2022, 11:02pm

Mattias_Persson · February 14, 2022, 11:03pm

This does exactly that

github.com

matt8707/hass-config/blob/214d466d84e5f2fa60f1a533b913898de95d4033/button_card_templates.yaml#L964-L1010

    
      
          state_display: >
            [[[
              if (entity) {
                let elt = this.shadowRoot,
                  await = setTimeout(marquee, 0),
                  artist = entity.attributes.media_artist,
                  title = entity.attributes.media_title,
          
          
        output = artist === undefined && title !== undefined
                    ? title
                    : title === undefined && artist !== undefined
                      ? artist
                      : title !== undefined && artist !== undefined
                        ? `${artist} - ${title}`
                        : variables.translate_idle;
          
          
      function marquee() {
                  let state = elt.getElementById("state"),
                    container = elt.getElementById("container");

This file has been truncated. show original

You might be missing the extra styles class and animation “marquee”

github.com

matt8707/hass-config/blob/214d466d84e5f2fa60f1a533b913898de95d4033/button_card_templates.yaml#L201-L211

    
      
          .marquee {
            animation: marquee 20s linear infinite;
          }
          @keyframes marquee {
            from {
              transform: translateX(0%);
            }
            to {
              transform: translateX(-50%);
            }
          }

Mattias_Persson · February 14, 2022, 11:04pm

target → service_data

https://www.home-assistant.io/lovelace/actions/#tap_action

Mattias_Persson · February 14, 2022, 11:06pm

I might have an odd resolution idk 16:10 (1920x1200)

Here’s the theme variables for what @wjbeckett said about grid spacing

custom-layout-card-padding
grid-card-gap

and maybe “GRID CARD HEADINGS h1 font-size/ padding”

wjbeckett · February 14, 2022, 11:20pm

Yep. That’s the ones.
I adjusted the custom-layout-card-padding which helped. Don’t over do it though, otherwise the view becomes cluttered and messy. Same goes for grid-card-gap. Adjust with caution

@Mattias_Persson What tablet are you using? Still the Galaxy Tab A 10.1? I thought the screen was 1920x1080 on those?

Mattias_Persson · February 14, 2022, 11:39pm

Yeah still that tablet, I don’t recommend it though. From what I can find it’s 1920x1200

wjbeckett · February 14, 2022, 11:42pm

Oh you don’t? Have you had issues with it?
Is yours the one with the capacitive buttons?

I’ve been searching around for a new tablet so keen to know your challenges with this one.

Mattias_Persson · February 14, 2022, 11:59pm

I don’t believe there’s any capacitive buttons.
It works fine but if I open a popup with loads of cards it takes over 1 sec to actually pop up and the animations are sometimes below 30fps. But I’m comparing a ~$200 device to iphone/imac which are not $200…