A different take on designing a Lovelace UI

[maverik80]

@Mattias_Persson hello and congratulations again, this dashboard is fantastic, I have a problem with the display that I cannot solve, I have increased the columns as in the photo but I see them badly only on a PC and on a smartphone as per the attached images

this is phone

this is PC

on tablet instead I see them well, since I would like to use your work on all devices and completely disconnect from storage, how can I solve this problem, I’m hitting my head, this is the grid I used…

views:
  - type: custom:grid-layout
    path: 0
    layout:
      #default
      margin: 0
      grid-gap: var(--custom-layout-card-padding)
      grid-template-columns: repeat(5, 1fr) 0
      grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
      grid-template-areas: |
        "sidebar  .           .       .       .       ."
        "sidebar  soggiorno   notte   scene   cucina  ."
        "sidebar  media       altro   casa    test    ."
        "sidebar  footer      footer  footer  footer  ."
      mediaquery:
        #phone
        "(max-width: 800px)":
          grid-gap: calc(var(--custom-layout-card-padding) * 1.5) 
          grid-template-columns: 0 repeat(2, 1fr) 0
          grid-template-rows: 0 repeat(6, fit-content(100%)) 0fr
          grid-template-areas: |
            ".  .           .        ."
            ".  sidebar     sidebar  ."
            ".  soggiorno   notte    ."
            ".  scene       altro    ."
            ".  test        cucina   ."
            ".  media       casa     ."
            ".  footer      footer   ."
            ".  .           .        ."
        #portrait
        "(max-width: 1200px)":
          grid-gap: var(--custom-layout-card-padding)
          grid-template-columns: repeat(4, 1fr) 0
          grid-template-rows: 0 repeat(4, fit-content(100%)) 0fr
          grid-template-areas: |
            "sidebar  .           .       .       ."
            "sidebar  soggiorno   notte   cucina  ."
            "sidebar  scene       altro   test    ."
            "sidebar  media       casa    .       ."
            "sidebar  footer      footer  footer  ."
         
    cards:

      - type: custom:button-card
        styles: #extra_styles fix
          card:
            - display: none

thank you so much in advance for your help

[xADDRx (Ben)]

of course…

  icon_temp:
    custom_fields:
      icon: >
        <svg viewBox="0 0 50 50">
          <path d="M32.8 28.2V8.4A8.28 8.28 0 0 0 24.5.1a8.28 8.28 0 0 0-8.3 8.3v19.7c-2.5 2.3-4.1 5.6-4.1 9.3 0 6.9 5.6 12.4 12.4 12.4s12.4-5.6 12.4-12.4c0-3.7-1.6-7-4.1-9.2zm-8.3 17.5a8.28 8.28 0 0 1-8.3-8.3 8.2 8.2 0 0 1 2.8-6.2l1.4-1.2V8.4c0-2.3 1.9-4.1 4.1-4.1s4.1 1.9 4.1 4.1V30l1.4 1.2c1.7 1.6 2.8 3.8 2.8 6.2a8.28 8.28 0 0 1-8.3 8.3zm-2.1-29h4.1v24.8h-4.1V16.7zm2.1 14.5c3.4 0 6.2 2.8 6.2 6.2s-2.8 6.2-6.2 6.2-6.2-2.8-6.2-6.2 2.8-6.2 6.2-6.2z"/>
        </svg>

[Marcassin]

Hi @xADDRx, you might want to add “overflow: hidden” property to the “base” (in styles > card, around the line 116-117 in button_card_templates.yaml) and then change the margin of “temperature” to “0% 0% -15% -13%”. It’s maybe not the best way to fix it but it works perfectly for me:

[xADDRx (Ben)]

@Marcassin

0% 0% -15% -13%

now looks better:

but not the full width…

Any Idea?

[Lklf12]

Hi @danieljarhult , Do you know if you can integrate another calendar in this script. If so, do you know how to write the code?

[Marcassin]

Yes, change the style to this, it will fix the graph width and the position of the circle:

styles:
      name: [top: 87%, left: 0%, width: 100%, position: absolute]
      label: [top: 75%, left: 0%, width: 100%, position: absolute, font-family: Sf Display, font-size: 0.90vw]
      custom_fields:
        graph: [bottom: 0%, left: 0%, width: 130%, position: absolute, margin: 0% 0% -13% -15%]
        circle:
          [
            top: -7%,
            left: 20%,
            width: 3.5vw,
            position: absolute,
            letter-spacing: 0.03vw,
          ]
        icon:
          - width: 67%
          - fill: "#9da0a2"

I moved the label slightly up (“vor 1 Minute”) but if you want to keep it down like you have currently, change the “label: [top: xx%” and increase the number to move it down.

Cheers

[xADDRx (Ben)]

THANK YOU!

It works.

[danieljarhult (Daniel)]

should work depending on how you calendar sensor looks like. Send me a direct message with your calendar sensors and a screenshot of their attributes etc and i can take a look.

[Lklf12]

@danieljarhult I only have two calendars integrated in the iCal sensor, which gives me similar sensors but with different calendars.

At the beginning of the code, it is no problem to add both and it works in the popup calendar.
It is in the lower part of the code then when sensor.ical_johan_kalender_event_1 comes that I do not know how to get sensor.ical_annika_kalender_event_1 so it shows from both calendars.

[Mattias_Persson]

@maverik80

I have increased the columns as in the photo but I see them badly only on a PC and on a smartphone

At a quick glance I spotted some grid inconsistencies

default
grid rows: 0 repeat(3, fit-content(100%)) 0fr = 5
area rows: sidebar sidebar sidebar sidebar = 4

portrait
grid rows: 0 repeat(4, fit-content(100%)) 0fr = 6
area rows: sidebar sidebar sidebar sidebar sidebar = 5

You can also try to disable the theme to see if a style’s messing with the layout

[Mattias_Persson]

@Snafuflux

I can google, but I’d love to know your suggestions for further reading?

Great! I don’t have any particular resources for further reading but I guess I generally use

• documentation, community (ha, templates)
• github readme, issues (custom)
• google, stackoverflow (css, js)

[Mattias_Persson]

@Arthur_Morgan

Hey, on my Media card (Conditional Media) while on “Recent downloaded”, the text appear in the middle of the card instead of the bottom on the blurred area, why is that?

Make sure you’ve updated all templates in button_card_templates.yaml
There’s a “compare” feature in vscode or try https://www.diffchecker.com/ or something

[Mattias_Persson]

@hyeonseok

Hi, I want the icon on to be an attribute, not a state

Try entity.attributes.hvac_modes === 'heat'

[maverik80]

thank you very much for the answer, if you remove the theme and put the default one everything is regular

[sjabby]

@Mattias_Persson thanks for your continued work on this dashboard! The latest release brings a YouTube token. What format should it be in the file and where does one obtain the correct token needed?

[Mattias_Persson]

This is for apple tv btw, you can remove it if you don’t need it

https://www.google.com/search?q=youtube+api+token

.youtube_token.txt

token|token

[sbienia (Sławek Bienia)]

Hello, I have a issue with the popup, I’m not able to show it in any way. I have installed browser_mod 1.5.1. Any idea how to debug it? Nothing interested in console, just:
BROWSER_MOD 1.5.1 IS INSTALLED DeviceID: xxxxxxxx-xxxxxxxx

example script:

      - type: horizontal-stack
        view_layout:
          grid-area: footer
        cards:
          - type: custom:button-card
            name: >
              <ha-icon icon="mdi:nas"></ha-icon> NAS
            tap_action: !include popup/nas.yaml
            template: footer

popup/nas.yaml:

action: fire-dom-event
browser_mod:
  command: popup
  title: "NAS"
  card:
    type: vertical-stack
    cards:
      - type: entities
        state_color: true
        card_mod:
          class: content
        entities:
          - sun.sun

[djoaza]

Anyone know how to use footer notifications? I would like there to be a number notification (int) if sensor ‘sensor.hacs> 0’

[Tarlak (Desaydrone)]

I did this for the number of battery under a level :

                  type: custom:button-card
                  name: >
                    <ha-icon icon="mdi:battery-heart-outline"></ha-icon>
                  tap_action:
                      !include popup/battery.yaml
                  variables:
                    notify: >
                      [[[ 
                        let nbrbat = states['sensor.template_etat_batterie'];
                        if (nbrbat) {
                          return parseInt(nbrbat.state);
                        }
                      ]]] 
                  styles:
                    name:
                      - color: red
                      - animation: my-blink 1s linear infinite
                      - align: center
                  style: |
                    @keyframes my-blink {
                      from {opacity: 0;}
                      to {opacity: 100;}
                      from {opacity: 100;}
                      to {opacity: 0;}
                    }                      
                  template: footer

And for the sensor :

      - unique_id: etat_batterie
        state: >
            {% set alertbat = states | selectattr('attributes.device_class', 'eq', 'battery')
                  | rejectattr('state', 'eq', '100')
                  | rejectattr('entity_id', 'eq', 'sensor.tarlaktelephone_battery_level')
                  | rejectattr('entity_id', 'eq', 'sensor.mi_9t_battery_level')
                  | rejectattr('entity_id', 'eq', 'sensor.lenovo_tb_j606l_battery_level')
                  | selectattr('state', 'lt', '15')
                  | list | count 
            %}
            {{alertbat}} 
        attributes:
          friendly_name: Nbr batterie à surveiller
          icon: mdi:battery-heart-outline

hope than can help you

[groach45]

Awesome work here!

I’m trying to add the VanilliaTilt piece you recently added. I’ve placed the vanilla-tilt.min.js in my www folder and added the module in my configuration.yaml file.

lovelace:
  mode: yaml #use ui-lovelace.yaml
  resources: #hacs
    - url: /local/community/button-card/button-card.js
      type: module
    - url: /local/community/lovelace-card-mod/card-mod.js
      type: module
    - url: /local/community/lovelace-layout-card/layout-card.js
      type: module
    - url: /local/community/swipe-card/swipe-card.js
      type: module
    - url: '/local/calendar-card.js?v=3.109.1'
      type: module
    - url: '/local/custom_icons.js?v=28082021'
      type: module
    - url: '/local/marked.min.js?v=4.0.12'
      type: module
    - url: '/local/vanilla-tilt.min.js?v=1.7.2'
      type: module
    - url: /local/font.css
      type: css

I copied over the latest button_card_templates.yaml as well, but I’m getting the following console error:

Uncaught ReferenceError: VanillaTilt is not defined
at eval (eval at _evalTemplate (/local/community/button-card/button-card.js:425:9295), :8:24)

Did I miss something?

[EDIT] - Ignore me. I just needed to restart home assistant - Everything is working! Great job again!