A different take on designing a Lovelace UI

[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…

[Br3b]

I solved it with a template sensor returning different icons if the entity is on or off and included the entity as tap_action to that template sensor button.

[Br3b]

Does anybody have problems with swiper-card and conditional-card? Accessing my Dashboard for the first time this weird visual error occurs, if i reload or change to another and back to that dashboard it seems fine Any ideas?

If the condition is met it looks like this

type: custom:swipe-card
parameters:
  roundLengths: true
  effect: coverflow
  speed: 650
  spaceBetween: 20
  threshold: 7
  coverflowEffect:
    rotate: 80
    depth: 300
cards:
  - type: conditional
    conditions:
      - entity: sensor.washer_status
        state: 'True'
    card:
      type: picture-elements
      aspect_ratio: 100%
      image: /local/washer.png
      elements:
        - entity: sensor.power_washer
          style:
            color: black
            font-size: 1rem
            left: 15%
            top: 93%
          type: state-label
        - entity: sensor.consumption_22
          style:
            color: black
            font-size: 1rem
            left: 70%
            top: 93%
          type: state-label
        - entity: sensor.washer_status
          state_image:
            'True': /local/washer_on.gif
            'False': /local/washer.png
          style:
            clip-path: circle(30% at center)
            width: 100%
            left: 50%
            top: 50%
          tap_action:
            action: more-info
          type: image
  - type: grid
    columns: 2
    cards:

Thanks in advance!

[Crashbash2020]

First off, thanks @Mattias_Persson for sharing your work/design here. it has really helped me as a framework to work from to learn how lovelace UI works.

I have gotten stuck on 1 part, I was hoping someone here could help me. Its more CSS related but hopefully someone here knows the answer.

im trying to change how the gridlayout works for a particular card. I figured the simplest way to do this is to create a new button_card_template, that references the “base” template and change the grid layout. that seemed to work but i cant figure out what to change to get what i want.

for the bottom right tile, the text is “sync bedrooms” it is too long and gets truncated to “sync bedro…” I wanted the text to wrap onto the next line. I dont need the state displayed, it can be hidden as it is just a toggle switch and i will show the state by modifying the icon displayed.

this is what i have tried (code snippet for above image)

  base2:
    template:
      - base
    styles:    
      grid:
        - grid-template-areas: |
            "icon  ."
            "n     n"
            "n     n"
        - grid-template-columns: fit-content(100%) 1fr
        - grid-template-rows: 1fr 1fr 1fr
        - gap: 2%
        - align-items: start

I assumed by change the last row of the grid would allow the text to occupy the whole area, but it didnt work. i tried a variety of settings like change grid template columns and rows etc. but never got good results. ideally it would be proportioned exactly like the others. (the “n” refer to name, and “s” to the entity state right?)

Thanks for any help

[Br3b]

Nice one!

Could you please share the code for the colored circle ?
Thanks!

[Mattias_Persson]

@Br3b

Does anybody have problems with swiper-card and conditional-card? Accessing my Dashboard for the first time this weird visual error occurs, if i reload or change to another and back to that dashboard it seems fine Any ideas?

Try in a horizontal-stack

- type: horizontal-stack
  cards:

    - type: conditional
      conditions:
        - entity: sensor.washer_status
          state: 'True'

[Mattias_Persson]

@Crashbash2020

for the bottom right tile, the text is “sync bedrooms” it is too long and gets truncated to “sync bedro…” I wanted the text to wrap onto the next line. I dont need the state displayed

It’s the .ellipsis class in button-card truncating the name.

This should work

- type: custom:button-card
  ...
  show_state: false
  styles:
    name:
      - white-space: normal
      - text-align: justify

[Br3b]

like the media swiper-card, yes i tried. But then i do have a empty horizontal-stack in the first swiper-card Any idea, what could cause this visual bug?

[Br3b]

like the media swiper-card, yes i tried. But then i do have a empty horizontal-stack in the first swiper-card Any idea, what could cause this visual bug?

I also get a weird bug if im using swipe-card for a single grid button:

type: grid
title: Wohnzimmer
columns: 2
cards:
  - type: custom:swipe-card
    cards:
      - type: custom:button-card
        entity: light.wohnzimmer_stehlampe
        name: Stehlampe
        template:
          - light
          - icon_shade
      - type: custom:button-card
        entity: light.wohnzimmer_stehlampe
        name: Stehlampe
        template:
          - light
          - icon_shade

On mobile it looks like this:

[Mattias_Persson]

Well, your conditions have to be met, otherwise it’s blank

      - 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: horizontal-stack
                cards:

                  - type: conditional
                    conditions:
                      - entity: light.dator
                        state: 'on'
                    card:
                      type: picture-elements
                      aspect_ratio: 100%
                      image: /local/mattias.png
                      elements:
                        - entity: sensor.power_washer
                          style:
                            color: black
                            font-size: 1rem
                            left: 15%
                            top: 93%
                          type: state-label
                        - entity: sensor.consumption_22
                          style:
                            color: black
                            font-size: 1rem
                            left: 70%
                            top: 93%
                          type: state-label
                        - entity: sensor.washer_status
                          state_image:
                            'True': /local/mattias.png
                            'False': /local/mattias.png
                          style:
                            clip-path: circle(30% at center)
                            width: 100%
                            left: 50%
                            top: 50%
                          tap_action:
                            action: more-info
                          type: image

              - 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

[Br3b]

sure, the thing i want is to show the entity-picuter only if the sensor is on. If not i just want to have the normal grid-buttons. Maybe i need to talk to the swiper-card people, cause probably its a specific card problem. If im using swiper-card in the grid-card the size is not working right.
Or do you have any other ideas? Thanks you!

[Crashbash2020]

Cheers mate that worked perfectly

[Mattias_Persson]

swipe-card adds “pages” for each card

1. condition true → picture-elements
2. grid

if the condition is false

1. condition false → blank
2. grid

You can solve it, but then you don’t need swipe card

conditional true → picture elements
conditional false → grid

[slofii (Michael)]

Yes, all of them are working.
Maybe I should say I didnt use HA in Docker like you. I use the Supervisor on a Raspi.