A different take on designing a Lovelace UI

Share your Projects!
2215

I would dare say it’s because you left all the junk in there?
Try this maybe:

<svg viewBox="0 0 33.2 33.13">
          <path d="M26.44 3.24C18.11-2.73 7.13-0.24 1.92 8.86c-5.35 10.36 1.04 22.56 12.6 24.16  c7.46 1.03 14.7-3.29 17.58-10.49C34.8 15.72 32.4 7.51 26.44 3.24z M23.44 20.48c-0.05 3.75-3 6.75-6.66 6.8  c-3.85 0.06-6.91-2.81-7.06-6.64c-0.02-0.58 0-1.16-0.01-1.74c-0.01-0.65 0.19-1.21 0.93-1.21c0.8 0 0.99 0.58 0.97 1.29  c-0.02 0.58-0.02 1.16 0 1.74c0.13 2.58 2.24 4.63 4.81 4.69c2.64 0.07 4.82-1.76 5.06-4.38c0.13-1.4 0.05-2.82 0.06-4.23  c0-0.64-0.27-1.04-1.06-1.06c-3.19 0-6.27-0.03-9.36 0.02c-1.04 0.01-1.39-0.39-1.43-1.4c-0.1-2.51 0.26-4.82 2.22-6.66  c3.44-3.22 9.19-2 10.98 2.35c0.26 0.64 0.51 1.31-0.31 1.67c-0.84 0.37-1.12-0.28-1.41-0.92c-1.05-2.28-3.3-3.46-5.58-2.96  c-2.38 0.52-3.94 2.41-4.02 4.75c-0.03 0.98 0.33 1.39 1.32 1.38c3.01-0.03 6.03-0.02 9.04-0.01c1.34 0 1.48 0.16 1.49 1.51  C23.45 17.15 23.47 18.82 23.44 20.48z"/>
        </svg>

Appart from the color of course if you want it blue.
Also you should maybe make the size 0 0 50 50, you have it smaller.
But I’m not a pro. Sorry

2216

@Mattias_Persson
How do I know if I should use conditional_media_atv2_fix and conditional_media_atv1_fix?

I’m using one Gallery, one spotify account, one Sonos and one AppTV in the conditionals but I can’t get it to work. I always see the Gallery. I can’t figure out where my problem is. Does it matter what the media_players actually are? I’m not using any TV’s

For you what are: media_player.vardagsrum, media_player.sovrum and media_player.kok?
Apple TV’s?

PS: I’m almost done…

2217

Also, @Mattias_Persson if you ever get bored, you should put the name of the artist and title of song on the spotify button. :wink:
Just an idea…:grimacing:

Screen Shot 2021-12-18 at 8.33.41 PM

2218

Hi Paul!

Thanks for your reply.

I have already tried stripping all the junk and resizing the viewBox, but I left it in my post so that I wasn’t hiding anything that could be used to identify what’s wrong with the SVG.

With or without the junk or viewBox change, Safari/iOS displays the card and the SVG, but not the other browsers. When I open the Inspector, it’s just not there, no div, nothing.

Sadly, I’m no expert either.

Cheers.

2219

Your card is not rendering because you’re missing a space in width:78%

The linked design principles is for creating custom “mdi” (for entities card etc)

For the button-card icons check out this post A different take on designing a Lovelace UI - #264 by Mattias_Persson

2220

I don’t remember… I think it’s a fix for the horrendous youtube app on apple tv. It’s so convoluted at this point I might redo it. The basic idea is in conditional_media_playing automation.

media_player.vardagsrum = appletv
media_player.sovrum = appletv
media_player.kok = google nest mini

2221

There is on the big one, not the small because the text doesn’t fit

1 Like
2222

Aw, man…

Thank you for the spot, it’s working fine now.

Again, great work on putting all this together, and thank you for having a look into my post.

Also, thank you for the linked post too, much better!

2223

I’m down to just 2 conditions and it still doesn’t work… Argh…
It just stays on the gallery card at all times.
I feel bad but @Mattias_Persson if you ever have some time to look at this, I would greatly appreciate.
I’m done after this, promise.

input.yaml

input_select:
  conditional_media:
    initial: gallery
    options:
      - gallery
      - spotify

automation.yaml

- id: '7426848686945'
  alias: Homeassistant_start
  initial_state: true
  trigger:
    - platform: homeassistant
      event: start
  action:
    - service: browser_mod.close_popup
    - delay:
        seconds: 1
    - service: frontend.reload_themes
    - delay:
        seconds: 10
    - choose:
      - conditions:
          - condition: state
            entity_id:
              - media_player.spotify_cheznath
            state: 'off'
        sequence:
          - service: input_select.select_option
            target:
              entity_id: input_select.conditional_media
            data:
              option: gallery
    - delay:
        seconds: 10
    - service: fullykiosk.load_start_url
      target:
        entity_id: media_player.galaxy_tab_a_media_player

- id: '5557842567134'
  alias: conditional_media_playing
  initial_state: true
  mode: restart
  trigger:
    - platform: state
      entity_id:
        - media_player.spotify_cheznath
      to: playing
  action:
    - service: input_select.select_option
      target:
        entity_id: input_select.conditional_media
      data:
        option: >
          spotify

- id: '3603627624707'
  alias: conditional_media_paused_idle
  initial_state: true
  mode: restart
  trigger:
    - platform: state
      entity_id:
        - media_player.spotify_cheznath
      to:
        - 'off'
        - idle
        - standby
    - platform: state
      entity_id:
        - media_player.spotify_cheznath
      to: paused
      for:
        minutes: 5
  action:
    - service: input_select.select_option
      target:
        entity_id: input_select.conditional_media
      data:
        option: >
          {% set media_players = [states.media_player.spotify_cheznath] %}
          {% if media_players | selectattr('state','eq','playing') | list | count == 0 %}
            {% if media_players | selectattr('state','eq','paused') | list | count == 0 %}
            gallery
            {% else %}
            {{ media_players | selectattr('state','eq','paused') | map(attribute='name') | max }}
            {% endif %}
          {% else %}
          {{ media_players | selectattr('state','eq','playing') | map(attribute='name') | max }}
          {% endif %}

- id: '6882931899148'
  alias: conditional_media_all_off
  initial_state: true
  trigger:
    - platform: template
      value_template: >
        {{ is_state('media_player.spotify_cheznath', 'idle') }}
  action:
    - service: input_select.select_option
      target:
        entity_id: input_select.conditional_media
      data:
        option: gallery

ui-lovelace.yaml

cards:
              - type: horizontal-stack
                cards:

                  - type: conditional
                    conditions:
                      - entity: input_select.conditional_media
                        state: gallery
                    card:
                      type: custom:gallery-card
                      entities:
                        - sensor.gallery_images
                      menu_alignment: hidden
                      slideshow_timer: 120
                      maximum_files: 30
                      file_name_format: '%YYY_%m_%d_%H_%M_%S'
                      caption_format: ' '
                      card_mod:
                        style: |
                          ha-card {
                            border-radius: calc(var(--custom-button-card-border-radius) / 2);  /* card - rounded corners */
                            aspect-ratio: 1/1;  /* card - square */
                          }
                          figure {
                            margin: 0px !important;  /* remove card margins to line up with rest of dashboard */
                          }
                          figcaption {
                            display: none;  /* hide image caption */
                          }
                          img {
                            object-fit: cover !important;  /* fill the whole card */
                            aspect-ratio: 1/1;  /* needed for object-fit */
                          }
                          .btn {
                            top: 50% !important;  /* center buttons */
                          }
                          .modal-content {
                            aspect-ratio: unset;  /* undo image aspect-ratio when clicked */
                          }

                  - type: conditional
                    conditions:
                      - entity: input_select.conditional_media
                        state: spotify
                    card:
                      type: custom:button-card
                      entity: media_player.spotify.cheznath
                      template:
                        - conditional_media
                        - icon_spotify
2224

Hello. Is anyone having this problem?
This should load when we add the car mod integration?

Thacks

Custom element doesn't exist custom:hui-horizontal-stack
1 Like
2225

Hi @Mattias_Persson
I am trying to change the theme of a button-card. The problem is that I don’t know how to identify each property of the theme you created. Is there any reference to how the botton is composed to know how to apply the colors you want?
Thanks a lot

2226

Hi there,
I just begin to setup this wonderful theme, but at the first start I have an error:

image
image908×625 27 KB

Can someone tell me how to solve this please ?
Thanks a lot
Denis

2227

Hi Giblet,

I’ve been trying to implement the Curtains SVG, but I can’t help the fact that it returns like this in my dashboard:
image

Do you have any idea what I’m doing wrong ?

Kr,

Bart

Code:

‘’’

  • type: custom:button-card
    entity: cover.gordijnen
    icon_curtains_combined:
    styles:
    custom_fields:
    icon:
    - width: 70%
    - stroke: >
    [[[ return variables.state === ‘closed’ ? ‘#3181b7’ : ‘#9da0a2’; ]]]
    custom_fields:
    icon: >
    [[[ if (entity.state === ‘open’) return ’
    ’ ;
    else return ’ ‘; ]]]
    ‘’’
2228

Hello,
I love your dashboard template. I wanted to know if it is possible to have the code of your ui-lovelace.yaml and your button_card_templates.yaml to combine 1/1 and 4/1 ratio tiles as in the screenshot

image

2 Likes
2229

Hi I have two unrelated questions…

  1. I’m having an issue with the sidebar template, I’ve implemented two versions of the sidebar for two different languages which are two different dashboards.
    I essentially copied the sensor with unique ID “sidebar” again and changed the language - so now I have in template.yaml:
sensor:
  - unique_id: sidebar
    state: template
    ......

and below that:

  - unique_id: sidebarheb
   state: template
   ....

then in my custom_lovelace files, I tried for english version:

     - type: vertical-stack
        view_layout:
          grid-area: sidebar
        cards:
          - type: custom:button-card
            entity: sensor.template_sidebar
            template: sidebar_template

and for hebrew version:

      - type: vertical-stack
        view_layout:
          grid-area: sidebar
        cards:
          - type: custom:button-card
            entity: sensor.template_sidebarheb
            template: sidebar_template

but still getting them both in english, when I tried completely renaming the sidebar one, I get nothing on both. Any help on this would be greatly appreciated.

Second question - is there a way to change the language of home assistant by clicking on a button (by calling some service)? Currently I only see a way to do this manually by going to profile and changing language - the use case is when I switch between my different dashboards I want to change the language as well.

Thanks!!!

2230

I don’t know how… but I have solved :slight_smile:

The problem now is that I have bad colors/css/etc…

image
image1289×835 58 KB

Someone know why please ?
Thanks all
Denis

2231

That looks correct?

2232

Have you checked your yaml indentation and logs? Your example “and below that:” is wrong.

Have a look in dev tools to see if your templates return something

Open your Home Assistant instance and show your state developer tools.

1

I don’t think so Home Assistant frontend - Home Assistant

2233

https://github.com/custom-cards/button-card

2234

Check input_select.conditional_media in dev-tools to see if the automation actually changes the state

Open your Home Assistant instance and show your state developer tools.
https://www.home-assistant.io/docs/automation/troubleshooting/