A different take on designing a Lovelace UI

Hey all, did someone maybe create animated icon for alarm (home security), moving robot vacuum or the fork icons animation that you @Mattias_Persson made but not as svg but the old gif way? I would love to use those but even with great steps it’s hard to generate/create it

Thank you so much for your work, @Mattias_Persson. Probably I do not have enough details but why are you always setting up input_boolean.turn_on for your televisions, although you are calling service to turn them off?

Hi, what is that magic wand icon on the tiles? Does that show based on state of an entity? Can you share the code of one of the cards :slight_smile: ?

It’s for the loading animation

1 Like

Hello,
I am new to HASS and but all setup for next level and that UI is beauty.
I still ldont understand from where to start ?

Where should i install the github files to have begining of something that looks same ?

1 Like

Hello everyone, to begin thanks @Mattias_Persson for his work

Does anyone know why Plex Recently added card is grey with no background image ? Plex Recently added seems to work because he gave me the last added episode but no image.
I copy-pasted the code in ui-lovelace and plex’s sensors yaml and add my secrets

0550057488

I am curious about the architectural decision to use a massive picture elements card as opposed to any other option. Would you Mattias or someone else be kind enough to elaborate on that?

I have a other problem :
I reuse the same code for media swipe-card for lights to get more lights et light groups in same position. But the hold_action doesn’t work anymore now, then I can’t get the light-popup-card. Do you have a solution to fix that ?
In fact, it’s work well with fullykiosk and home assistant app, but no with chrome, applicationize.me and firefox

I experienced this same issue a few months ago when I started to use swiper card. I have found a way to invoke hold action by accident on browsers. This works 100 of the time and I’ve been doing it this way for months now.

Press and hold right click on an icon till you see the hold_action effect (the little circle effect). Then let go and single press left click. All buttons inside that swiper card will open hold_action now with left click. To stop, just single press right click and then left click works as toggle again.

If you have a slider inside a swiper card, then it’s a little more complicated. Then you need to hold right click first and then hold left click (without letting right click off) and drag with both fingers. This means you need a mouse with both buttons (so Apple magic mouse is not usable for instance). But perhaps you can also use macro’s of function key for that.

2 Likes

I notice that yesterday. This trick looks like a rescue solution

If you use it that way a few days, is feels natural and logical. One thing to pay attention to: when a button is not inside a swiper card, this won’t work. I sometimes turned off my soundbar because I did this (because then left click always works as a toggle). Ofcourse you can decide to put all buttons inside a swiper card to have a matching experience.

You’re right

I found an interesting thing. From chrome in dev tools, with the toggle device toolbar, we can use properly hold and click actions
Question : Is it possible to force applicationize.me to work in with the “toggle device toolbar” and emulate a tablet ? (User agent ?)
I am going to dig

1 Like

Hi,
I’m sorry but when i set the icon _tv the icon not appear… why?

Thank you so much

              - type: custom:button-card
                entity: media_player.samsung_tv_remote
                triggers_update:
                  ['media_player.samsung_tv_remote', 'input_boolean.samsung']
                style:
                  top: 76.0%
                  left: 24.0%
                  width: 47.7%
                tap_action: &tv_tap_action
                  services: |
                    [[[ if (entity.state === 'off') {
                    hass.callService('input_boolean', 'turn_on', {entity_id: entity.entity_id.replace(entity.entity_id.split('.')[0], 'input_boolean')});
                    hass.callService('media_player', 'turn_on', {entity_id: entity.entity_id}); }
                    if (entity.state === 'on') {
                    hass.callService('input_boolean', 'turn_on', {entity_id: entity.entity_id.replace(entity.entity_id.split('.')[0], 'input_boolean')});
                    hass.callService('media_player', 'turn_off', {entity_id: entity.entity_id});
                    hass.callService('media_player', 'turn_off', {entity_id: entity.entity_id.replace('sony_bravia', 'vardagsrum').replace('samsung', 'sovrum')}); } ]]]
                hold_action: !include popup/tv_samsung_popup.yaml
                custom_fields:
                 icon_tv: >
                    [[[ const state = entity.state === 'on' ? 'animate' : null;
                    const style = '<style>@keyframes animate_on{from{transform: scaleY(0);}to{transform: scaleY(1);}}.animate_on{animation: animate_on 1s; transform-origin: -100% 46%; animation-fill-mode: forwards;}@keyframes animate_off{from{transform: scaleY(1);}to{transform: scaleY(0);}}.animate_off{animation: animate_off 1s; transform-origin: -100% 46%; animation-fill-mode: forwards;}</style>';
                    const path = '<path d="M46 9.2v27.5H4.1V9.2H46m2.4-2.4H1.6v32.3h46.7c.1 0 .1-32.3.1-32.3zM11.9 43.2h26.3c.6 0 1.1-.4 1.1-1v-.3c0-.6-.4-1.1-1-1.1H11.9c-.6 0-1.1.4-1.1 1v.3a1.11 1.11 0 0 0 1.1 1.1z"/>';
                    const gradient = '<linearGradient id="A" gradientUnits="userSpaceOnUse" x1="5.401" y1="34.714" x2="43.817" y2="11.74"><stop offset="0" stop-color="var(--paper-listbox-color)"/><stop offset="1" stop-color="var(--paper-listbox-color)"/></linearGradient>';
                    if (entity.state === 'off') { return `<svg viewBox="0 0 50 50"> ${style} ${gradient} <path class="animate_off" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
                    if (entity.state === 'on') { return `<svg viewBox="0 0 50 50"> ${style} ${gradient} <path d="M2.9,8h44.3v29.9H2.9V8z" fill="#20262890"/><path class="animate_on" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
                    if (entity.state === 'on') { return `<svg viewBox="0 0 50 50"> ${gradient} <path d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
                    else if (entity.state==='off') { return `<svg viewBox="0 0 50 50"> ${path} </svg>`; } ]]]
                styles: &icon_tv_styles
                  custom_fields:
                    icon_tv:
                      [fill: "[[[ return entity.state === 'on' ? '#616161' : '#9da0a2'; ]]]", 
                      top: 7%, left: 10.7%, width: 3.5vw, position: absolute]
                template: ['base', 'loader']

Hey @Mattias_Persson, i encountered an issue with the person popup (home not home). SInce few days, the popup file is empty. Does yours still work? Mine does not show the map /wifi/bluetooth info anymore.

Hi! I’m stucked after putting these syntaxes:

configuration.yaml (no longer works in ui-lovelace.yaml)

resources:
  - url: /community_plugin/popup-backdrop-filter/popup-backdrop-filter.js
    type: module

themes.yaml

      iron-overlay-backdrop-filter: 'blur(15px)'
      iron-overlay-backdrop-background-color: 'rgba(0,0,0,.6)'
      iron-overlay-backdrop-opacity: '1'

I have also installed this in HACS, rebooted HA and clear cache but to no avail.

May I know what is next to make the backdrop possible?
I have installed home assistant using VMDK file hence installation using npm is not possible.

I am having the same issue, it has been working for a long time, but not anymore

Seems like you’ve got it working, empty cache

Basically the freedom to easily put an element anywhere. The downside is of course that the layout is not responsive for mobile etc but I’m sure that’s possible with layout-card/grid-card/media queries

1 Like

I’ve noticed that as well

1 Like

Yes, downgrade stack-in-card 0.2.0 -> 0.1.1

@soylant