A different take on designing a Lovelace UI

Ah, after three days of trying and failing I will go back to the old way. Maybe it is a little bit over engineered, but it works the way I want and I dont have any negative aspects, expect a few more lines of code.

Will concentrate to the rest of the dashboard. The tablet is arriving tomorrow, so I need to get it finished. :slight_smile:

But thank you for your assistance.

Is the picture your actual dashboard? Looks like your browser didnt load the new.

If yes, please restart HA and do a fresh reload of the page.

Hello!
Thanks for sharing this. I took a lot of inspiration for my Lovelace UI.

But I’m stuck at one thing, which is the blurry background.
I installed popup-backdrop-filter in hacs: https://github.com/gabe565/popup-backdrop-filter

But I’m not able to get it up and running. I’m using the default theme and want to add the blurry background to popup cards.
Can someone help me get this done?

oh okay, that explains some things.

I’m using cardmod altready for other things. Does that mean ich can specify this effect within the button config? Sorry for the newbie questions. I’m indeed quite new to all this.
Right now it looks like:

styles:
  card:
    - border-radius: 15%
    - width: null
    - height: null
    - padding-bottom: 12px
    - margin-left: null
    - background-color: '#262626'
    - font-size: 15px

So if I’m right, it has to be set in the theme.yaml. But can it also applied when using the default theme?

If not you have to set it on every tap action

tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: test
    style:
      $: |
        .mdc-dialog__scrim {
          backdrop-filter: blur(20px) brightness(70%);
          -webkit-backdrop-filter: blur(20px) brightness(70%);
        }
    card:

use card-mod-theme in conjunction with the default theme

Okay thanks!
Got it like that:

type: 'custom:button-card'
entity: light.tv_backlight_all
name: Lichtbutton FINAL
tap_action:
  action: toggle
hold_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: Helligkeit & Szenen
    style:
      $: |
        .mdc-dialog__scrim {
          backdrop-filter: blur(20px) brightness(70%);
          -webkit-backdrop-filter: blur(20px) brightness(70%);
        }
    card:

still doesn’t work unfortunately

https://caniuse.com/css-backdrop-filter

oh wow, quite a lot of unsupported browsers …
that was the issue, thanks a lot!

@Mattias_Persson and all others who use a wall-mounted tablet.
I just bought a Lenovo Tab M10 and the dashboard is not really smooth. Also the other lovelace-sites from HA are not smooth. The tablet runs a Qualcomm Snapdragon 429 (SDM429), 4x 2.00GHz (ARM Cortex-A53) as cpu and a Qualcomm Adreno 504 (iGPU) as GPU.

I thought displaying something like this should not need really much power. Can someone confirm that there is the need of something powerful to display it smooth and fluid?

Basically all tablets suck except iPad, and you can’t automate with iPad :man_shrugging:

But why? I mean thats a website. Ok there is something to do for the tablet, but for example a game is much more work and they are running fine?

Is your tablet running fine? That would be my next attempt.

I mean my tablet is running fine but I definitely notice screen stutter. home-assistant frontend is pretty heavy, it used to be worse pre 0.109, that and cheapo android tablets…

Changed brwoser from wallpanel to fullykiosk, its running better. Seems that it is running on the edge :smiley:

But now the next problem: browser_mod update.

hold_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        title: '[[[ return entity.attributes.friendly_name ]]]'
        card:
          type: entities
          entities:
            - type: custom:light-popup-card
              entity: '[[[ return entity.entity_id ]]]'
              icon: none
              fullscreen: false
              brightnessWidth: 130px
              brightnessHeight: 360px
...

copied exactly the changes from your github. But no popup is working. Did I miss something?

Cleared cache? Indentation between hold_action and action? Errors?

Cache is cleared, intendation is correct (code above has a copy paste mistake), no errors shown.

    hold_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        title: '[[[ return entity.attributes.friendly_name ]]]'
        card:
          type: entities
          entities:
            - type: custom:light-popup-card
              entity: '[[[ return entity.entity_id ]]]'
              icon: none
              fullscreen: false
              brightnessWidth: 130px
              brightnessHeight: 360px

toast is working. popup and more-info are not working.

€: missed the update for button-card. Had 3.4.1 running…

For some reason, I am not able to hit the buttons to toggle on and toggle off. I have to press and hold and slide the brightness up to turn on. How would I enable toggle on and off from hitting the buttons?

Also, how would I configure basic lights that do not offer brightness adjust or hue adjustments?

Hi, incredible job. Can you create a fast step-by-step guide to install your UI? I’m trying to figure out how to start :sweat_smile: