A different take on designing a Lovelace UI

Hello folks,
I am looking for a way to display the next waste in a button card.
I have a sensor that always shows the next waste in the first attribute (see picture)
I don’t understand how to display the first attribute in the card.
I already have the days until the next waste is collected.
843647c52fa53b338fd7943bee613645917f99b8

  #################################################
  #                                                                                              #
  #                   Kopfzeile                                                            #
  #                                                                                              #
  #################################################

  - type: horizontal-stack
    view_layout:
      grid-area: kopfzeile
    cards:
      - type: custom:button-card
        name: '[[[ return `<ha-icon icon="mdi:recycle"> </ha-icon> Abfall in ${ states[''sensor.abfallnaechster''].state } Tagen ` ]]]'
        template:
          - footer

Probably the name for the attributes of your entity sensor is changing, they are not fixed. As a simple way to get to the attribute value, it’s easy, for example…

    name: >
      [[[
        if (entity) {
          let name = entity.attributes.friendly_name;
           return name;
        }
      ]]]

but in your case you can use this way to get the value from the first attribute. :grinning:

name: >
  [[[
    let sensorState = states['sensor.abfallnaechster'].state;
    let attributes = states['sensor.abfallnaechster'].attributes;
      if (sensorState && attributes) {
        const firstAttributeValue = Object.values(attributes)[0];
        return  `<ha-icon icon="mdi:recycle"> </ha-icon> Abfall in ${ sensorState } Tagen - ${ firstAttributeValue }`;
      } else {
        return 'No entity available';
      }
  ]]]
2 Likes

What font do you use in this picture? Thx

Hi, the font is Poppins

1 Like

Did you ever managed to use, plex recently added + media playing and a gallary? I want to add gallery when no media is playing and plex have nothing new added in last 3 days…

Can anyone suggest what might be causing a vertical scroll bar to appear on the right hand side of the screen in my browser, when my dashboard first loads? I’m using a Microsoft Surface Pro 5 with Edge Browser in Kiosk mode. After a reboot of the tablet, the browser auto opens and my dashboard loads in a full screen browser, using ‘no header’ and ‘no sidebar’ in browser_mod, however although the visible content all fits within the viewport, there is a vertical scroll bar.

As soon as I tap on the screen, either on a button or empty space, the screen adjusts slightly and the scroll bar disappears. I just don’t know why a screen tap is required in order for the scroll bar to disappear?

You can run device-mode via dev tool and simulate Surface resolution. Then try to find out what the cause is, probably Kiosk mode not loaded…

Thanks. It seems Kiosk mode was loading, however the browser window wasn’t becoming ‘active’ until it was touched. It looked OK in the simulated Pro 5 screen resolution in Dev tools, and I couldn’t recreate the same behaviour as I was seeing on the Surface.

I’m not sure if it’s a workaround, or an actual fix for the issue, but by adding the Chromium Command line switch --hide-scrollbars to my existing startup command, it completely fixes the issue and no more scrollbars are visible at startup, and the screen doesn’t ‘adjust’ like it did when you tapped it before to get rid of the scrollbar. New startup command is:
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --kiosk --hide-scrollbars

Anyone still using the old version with “Sidebar bottom icons” for information/vacuum/update and fixed the issues with HA core 2024.7? For me the icons have the wrong placement and all the icons are highlighted instead of only the update icon. See attached picture:
image

My fix was to rollback to 2024.6. I spent some time trying to figure it all out, but it appears that card_mod is unable to properly reach those items anymore.

Hello. This project is not going to continue and I would like to know if someone was able to replicate these buttons with all their templates so that they look like this in the new drag and drop interface? Thank you

You can try the new type of the dashboard ‘Section’ and use the Tile card. They look almost identical to Mattias’ Ha Fusion

Cool. Thanks friend

Can someone help? I can’t manage the loading; when I type this, it responds with this, I’ve tried everything… :frowning:



You have to use yaml mode…

Hello, thank you! I did this, I created a new dashboard, but when I paste this at the top and try to save, it shows an error: button_card_templates: !include_dir_merge_named button_card_templates.

Nope, what you’re doing is still storage mode. You have to create a file with the yaml codes for these cards…

1 Like

Uploading: image.png…
How do you make this part of the title blur?

Here. This template is responsible. I cant explain the code :smiley:

I use Matt’s dash too, but mine doesn’t have that effect. A friend had the same problem. I’ll check again. Thanks for the reply.