A different take on designing a Lovelace UI

[elyisum]

Hy Mathias
I started to develop my lovelace with a menu in the sidebar.
I have a yam file for each lovelace panel and one sidebar.yaml file for the menu which is called by each file.
Now, I would like to change the item menu style according to the current dashboard. Do you have any idea for a condition on the current lovelace ? Or maybe my way is not the best and I need to change the grid and have a conditional card like you mentioned it ?
Thanks for your help

[Br3b]

Could anybody tell me, where i can specify “state_color: true” if im using mdi:icons?

[Pablo_Gustavo_Fiscel (Pablo Gustavo Fiscella)]

hi @Mattias_Persson So that the weather card takes up more space in height. Do I have to put together a grid and customize it?
Thanks

[Mattias_Persson]

The weather card is not designed with a square layout in mind. Can you conceptualize how you would fill that space without stretching the card?

You could make your own with button card [example]
or add the weather card to the sidebar

[Mattias_Persson]

@Br3b

Could anybody tell me, where i can specify “state_color: true” if im using mdi:icons?

Use the icon: config variable instead (not custom field). if you must use <ha-icon> you can add a css variable

custom_fields:
  icon: |
    <ha-icon icon="hue:play-bar" style="color:var(--button-card-light-color);"></ha-icon>

[Mattias_Persson]

@elyisum

Now, I would like to change the item menu style according to the current dashboard. Do you have any idea for a condition on the current lovelace?

You can use this template by @Mariusthvdb for current view as a condition in sidebar yaml

[[[ return window.location.pathname.split('lovelace/')[1]; ]]]

Lovelace: Button card

have another view related question: trying to color the background in a button_template, based on the current view: button_menu_button: variables: view: > [[[ return window.location.pathname.split('lovelace/')[1]; ]]] styles: card: - background: > [[[ return variables.view ? 'gold' : 'var(--paper-card-background-color)'; ]]] but this doesn’t work. While I can do this on a single button: variables: view: > [[[ return window.location.pathname.split('love…

[Mattias_Persson]

@Br3b

I copied the change color for update from theme and could change the color but i cant get the icon to change.

I don’t know about the first one but changing icons in type: button is potentially bugged

[Mattias_Persson]

@Giblet

I have tried a few things here as well, but can’t seem to find the correct configuration that we need
@Mattias_Persson could you maybe shine some light on this?

I’m using this layout

swipe-card
→ horizontal-stack → conditional
→ grid

some people tried (which I didn’t test)

swipe-card
→ grid
→ grid

which cut off the bottom part and the reason I added height: 100%

working example

      - type: grid
        title: Media
        view_layout:
          grid-area: media
        columns: 1
        cards:

          - type: custom:swipe-card
            start_card: 1
            parameters:
              roundLengths: true
              effect: coverflow
              speed: 650
              spaceBetween: 20
              threshold: 7
              coverflowEffect:
                rotate: 80
                depth: 300
            cards:

              - type: grid
                columns: 2
                cards:

                  - type: custom:button-card
                    entity: media_player.vardagsrum
                    name: Vardagsrum
                    template:
                      - media
                      - icon_apple_tv

                  - type: custom:button-card
                    name: Sovrum
                    entity: media_player.sovrum
                    template:
                      - media
                      - icon_apple_tv

                  - type: custom:button-card
                    entity: media_player.spotify
                    name: Spotify
                    template:
                      - media
                      - icon_spotify

                  - type: custom:button-card
                    entity: media_player.kok
                    name: Nest Mini
                    template:
                      - media
                      - icon_nest_mini

              - type: grid
                columns: 2
                cards:

                  - type: custom:button-card
                    entity: media_player.vardagsrum
                    name: Vardagsrum
                    template:
                      - media
                      - icon_apple_tv

                  - type: custom:button-card
                    name: Sovrum
                    entity: media_player.sovrum
                    template:
                      - media
                      - icon_apple_tv

                  - type: custom:button-card
                    entity: media_player.spotify
                    name: Spotify
                    template:
                      - media
                      - icon_spotify

                  - type: custom:button-card
                    entity: media_player.kok
                    name: Nest Mini
                    template:
                      - media
                      - icon_nest_mini

[Mattias_Persson]

@Pablo_Gustavo_Fiscel

Hi friends. Does anyone know why this is happening? If I refresh several times the screen is accommodated.

Do you have this line? extra_styles fix

[Mattias_Persson]

@Tismo

i wish there was a video showing step by step.

There’s this basic guide at least. You’re welcome to make a video

A different take on designing a Lovelace UI

[Mattias_Persson]

@Pablo_Gustavo_Fiscel

I can’t get the card to occupy 100% of the button’s size. Remove the theme to see how much the card occupied and an unoccupied space is seen on the left side.

Have you tried putting custom:thermostat-dark-card by itself and not inside custom:button-card?

[Mattias_Persson]

@Mariusthvdb

yet, there’s this issue I see in Safari Mac, which doesnt pickup the format or icons completely (only Tv Auditorium and Network library show as they should):

I bet my templates are messing with your bottom right icons. Can you post how you’ve set those up?

[Mattias_Persson]

Yeah, and to add to that I don’t think that markdown is inherently bad but styling it is a nightmare.

The nice thing about button card is that if one doesn’t want to convert all jinja templates to javascript, incorporating existing template sensors works fine too.

[Mattias_Persson]

@PlopDropper

Basically I would like it to look like “A” when ‘off’, and “D” when ‘on’, but do not see how to achieve this. Hope that makes sense, if anyone has any tips/ advice I would be very grateful.

The easiest way would be to swap out the svg
on = a.svg
off = b.svg

custom_fields:
  icon: >
    [[[
      if (entity.state == 'on') {
        return `
          <svg viewBox="0 0 50 50">
            <rect width="40" height="40" fill="blue" />
          </svg>
        `;
      }
      if (entity.state == 'off') {
        return `
          <svg viewBox="0 0 50 50">
            <circle cx="20" cy="20" r="20" fill="red" />
          </svg>
        `;
      }
    ]]]

I would probably just conditionally display the “light” path though

[Mattias_Persson]

@banllon2008

or can i add some condition like this ??

(as_timestamp(now()) - as_timestamp(states.light.bed_light.last_changed)) < 1

Here’s how, timeout is in milliseconds

[Mattias_Persson]

@slofii

Im trying to create the “Sidebar-Update” like u did it ago.
But I got the following error:

ButtonCardJSTemplateError: SyntaxError: Unexpected token ';' in 'if (entity) { // markdown parser variables.markedjs; let links = new RegExp('<a href="...'

Do you have these sensors working?

• sensor.hass_version_latest_beta
• sensor.hass_version_latest
• sensor.hass_release_notes_rc
• sensor.hass_release_notes

[Mattias_Persson]

@Joel_Marambaia

Hi Mattias, i´m trying to apply your lovelace and installed as your recommendation but i´m getting this error in my main lovelace page: mapping values are not allowed here in “/config/button_card_templates.yaml”, line 129, column 65

It’s because you’re not following the guide

A different take on designing a Lovelace UI

@xADDRx You can’t use some features like includes in the “Raw config editor”. Use an external editor like VS Code.

[Joel_Marambaia]

Thanks, @anon36468094 assisted and everything went ok. for now my lovelace is like below, improving every day… your design is awesome.

[Pablo_Gustavo_Fiscel (Pablo Gustavo Fiscella)]

Yes. equal

[Mariusthvdb (Marius)]

thanks for getting back to me.
in fact I haven’t, other than on the entity itself, the button-cards are very plain, and only use your templates as posted.
I’ve also carefully checked if I dont use any templates with the same name myself, which happened in another spot

Just checked, and Firefox looks identical to Safari. Only Chrome shows the animated icons…

wait: I had edited the base: template and commented some code that I didnt use (screensaver, galaxy etc) but apparently commented too much. now looking like:

which is much better. Interesting to learn once again that not all browsers are equal…
not sure why it shows the ‘unknown’ s yet, but that should be easy to fix fixed… wrong entity_id’s duh…