A different take on designing a Lovelace UI

Yeah, that was what I feared, too. I already went on and fought with some new to me stuff here whose name is Java Script. I managed to accomplish … NOTHING though. I tried my luck with .innerHTML and failed. And now to the nice part: Your lil snippet … WORKS :smiley:

THANKS SOOO MUCH :smiley:

That together with some line in the theme card-mod part realizes what I wanted. Now it’s time to clean things up a bit ^^

I don’t even understand where the :host([persistent]) vanished to, but I don’t care, it just works :smiley:

1 Like

Sorry if this has been answered already but is it possible to keep my existing HA dashboards as they are and configure this as a new Dashboard (under Configuration/Dashboards)?

As a quick try I created a new dashboard and copied the content of ui-lovelace.yaml into the new dashboard but received errors (mainly includes errored).

You can.
But you need to copy all of the templates inside the new dashboard as well.

button_card_templates:
  template1:
  ...
  template2:
  ...
  icon1:
  ...
views:
  - theme: tablet_original
    type: custom:grid-layout
    path: 0
    layout:
      grid-gap: var(--custom-layout-card-padding)
      grid-template-columns: repeat(5, 1fr) 0
      grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
      grid-template-areas: |
        " sidebar . . . . . "
        ...
  

I implemented it like this, so I’m able to use the UI-editor.
But actually, I’m thinking about implementing it with YAML. as well, cause its getting messy.

I am having trouble getting the conditional_media card to display playback state of chromecast (googletv and chromecast speaker) while in certain apps (netflix for example, youtube works fine)


Example of running the nextflix app
image
playback state works perfectly in the media view of the slider

however, in the conditional view, the icon reflects that the device is active, but the label displays as “inactive”
image
It would be amazing if instead of showing just “Playing”, it instead displayed the title of the running app (since it appears no media_title is available for these apps), but I can’t even brain well enough to figure the “inactive” problem…

on my chromecast enabled speaker, I have the same “inactive” issue when casting audio (which I do via media_extractor), it however works fine when selected as a spotify connect device.

Huh, at a quick glance I’m not sure what’s going on. Background should be white when ‘playing’

You can override button_card_templates for specific buttons like this

and app with entity.attributes.app_name

1 Like

Does someone know if it is possible to trigger a popup when clicking on the grid titles/headers?

I realy like your section with cameras.
Please share popup/camera_single.yaml.

And where is input_select.conditional_camera created/filled?

Thank you, kinda works, but the card background still isn’t white.
It’s quite strange that it behaves outside of the conditional_media template just fine.

Is there perhaps a hacky way to override the background colour also?

I’d also love to dispay something like "mdi:play - entity.attributes.app_name" how could I go about that syntax wise? I’m not sure how to make it display an mdi icon there, if it’s even possible?

Thanks again for all your help, and prompt responses. I can’t imagine the amount of time you spend checking this thread!

Okay, had a closer look. The big card doesn’t work the same way. conditional_media is for displaying artwork and overwrites base colors.

If you want to change this behaviour just add this to your button

- type: custom:button-card
  ...
  styles:
    card:
      - background-color: >
          [[[
            return variables.state_on
              ? 'rgba(255, 255, 255, 0.8)'
              : 'rgba(115, 115, 115, 0.2)';
          ]]]

or create a new template like conditional_media_tv

state_display: >
  [[[
    return `<ha-icon icon="mdi:play" style="--mdc-icon-size: unset;"></ha-icon> - ${entity.attributes.app_name}`;
  ]]]
1 Like

Not natively, here’s a workaround:

Thanks, that’s taught me a bunch and I’ve made some progress, however i can’t seem to get the code snippet you’ve given me for background-color to function as intended.

It seems not to override the - conditional_media template present in the card. However, setting the template to - media overrides the default colours actually, after some playing with the alpha channel, it seems to overlay the colours I’m forcing on top of the default colours set by the media template.

It confuses me a little that me that the media template can handle album art as well as falling back to base colours, but I’m not clever enough to notice how conditional_media handles this differently (but I can see that the template also does some other stuff like .fanart and .poster, I assume for plex or the like).

Ultimately, it’s not so bad having the card greyed out if no art is present tho. I’ve managed to resolve the ‘inactive’ while playing issue so I’m pretty happy for now.

The offending line causing conditional_media to break in my situation:

It seems that this template defaults to idle if there is no artist and/or title present within attributes.
Swapped variables.translate_idle out to variables.state which appears to solve my issue with the playing state.

Thanks very much!

Great! Try background instead of background-color

1 Like

Such prompt solutions.

You’re a legend!

Hi

I’m currently struggling in moving the Lights Brightness Popup, which currently is a hold_action on the Lights tile, to a single tap_action on the Light-Icon.

So basically, when tapping on the Icon inside the Lights Tile, the Popup should open. If I tap the other Area inside the Light tile, the Light should turn on/off as it does today:

I tried to modify the Icon itself, but can’t really bring the tap_action to work without breaking the current tap_action of the tile itself, which is turning the lights on/off.

Any help greatly appreciated. Thanks :slight_smile:

If I were you I’d abandon this idea, tap_action is for the entire button only

Hi Mattias, I can’t get the demo for portrait/landscape to start showing.

Hi,

How did you manage to work sensor values as button-card ? I couldn’t manage to do it right way. Because when i try to that with your shared code they are just not stretched to button-card. Can you help we with that? And can you please share your code or github id ?

I tried to do with your shared code the “GRAPH” one. Bu i couldn’t stretched it.
This is what i want to do.
Screen Shot 2022-05-08 at 02.42.00

Theres any way to get a automation state inside a variable? the entity.state its not valid because the state that i want is not the sabe as the entity refered in the card. Look:

variables:
  circle_input: >
    [[[ "return automation.auto_alarm"; ]]]

I’m trying to add HTML class as I did with your help in the footer, to hide the names on phone, inside a markdown card. But I can’t get it to work. Is it not supported, or is there another way to archive this?
For testing I just included

                  <ha-icon icon="mdi:nas"></ha-icon> <span
                  class="footer-title">NAS</span>

in the markdown, but its no hiding on mobile :frowning: :

          custom_fields:
            news:
              card:
                type: markdown
                content: >
                  <font  color="#9c9d9d"><b>TAGESSPIEGEL</font> </b><font>

                  {{ state_attr('sensor.tagesspiegel', 'entries')[0]["title"] }}

                  <br> <font color="#9c9d9d"><b>HEISE</font></b><font>

                  {{ state_attr('sensor.heise', 'entries')[0]["title"] }}

                  <ha-icon icon="mdi:nas"></ha-icon> <span
                  class="footer-title">NAS</span>

                  <br> <font color="#9c9d9d"><b>MYDEALZ</font></b><font>

                  {{ state_attr('sensor.mydealz', 'entries')[0]["title"]}}

Thanks in advance