A different take on designing a Lovelace UI

Share your Projects!
5302

Hello everyone,
First of all I would like to apologize for my bad English and thank @Mattias_Persson for these great dashboards.

And I have a question about this exact dashboard. I downloaded it from Github last night and am currently setting it up. In older posts I saw how some people have icons/buttons at the bottom of the sidebar, basically like the footer. I would like that too but it fails completely.

In older versions I have seen that some people over

-type: icon

did but that no longer works.

Can someone give me instructions for beginners on how to do this?

Thank you and greetings

5303

I am trying to combine my two dashboards into one and I was wondering if there was away to eliminate a grid area when using “mediaquery.” Specifically, I want the sidebar on everything but my smartphone. On the smartphone, I would like to eliminate the sidebar. Does anyone know?

5304

This layout is amazing and about 99% of how I want my own dashboard.

One thing I’m looking to do without drastically changing is to be able to span a button card across a row within a grid. I can’t seem to figure out how to do that without creating something new.

Here’s a terrible MS paint example

image

I want 3 buttons instead of 4 and the top button spanning across.

5305

Hi All, can someone help me?

I am trying to use the footer with swipe-card, but it justified to the left, I am trying to use the justify-content : space-evenly but now effect.

- type: custom:swipe-card
  view_layout:
    grid-area: footer
  card_mod:
    style: |
      ha-card {
        box-shadow: none;
        background: none;
        padding: 0px;
        justify-content: space-evenly;
      }
  cards:
    - type: horizontal-stack
      cards:
        - type: custom:button-card
          name: >
            <ha-icon icon="mdi:robot-vacuum"></ha-icon>
          tap_action:
            !include popup/footer_vacuum.yaml
          template: footer

        - type: custom:button-card
          name: >
            <ha-icon icon="mdi:shield-home"></ha-icon>
          tap_action:
            !include popup/footer_security.yaml
          template: footer

        - type: custom:button-card
          name: >
            <ha-icon icon="mdi:home-lightbulb"></ha-icon>
          tap_action:
            !include popup/footer_lights.yaml
          template: footer

        - type: custom:button-card
          name: >
            <ha-icon icon="mdi:home-thermometer"></ha-icon>
          tap_action:
            !include popup/footer_heating.yaml
          template: footer

        - type: custom:button-card
          name: >
            <ha-icon icon="mdi:cart"></ha-icon>
          tap_action:
            !include popup/footer_shopping.yaml
          template: footer

    - type: horizontal-stack
      cards:
        - type: custom:button-card
          name: >
            <ha-icon icon="mdi:server"></ha-icon>
          tap_action:
            !include popup/footer_server.yaml
          template: footer

        - type: custom:button-card
          name: >
            <ha-icon icon="mdi:tablet"></ha-icon>
          tap_action:
            !include popup/footer_tablet.yaml
          template: footer

@Mattias_Persson may I ask your help with this.

Thanks David.
ezgif.com-video-to-gif

5306

themes config, maybe you should add/edit grid-layout$swipe-card$hui-horizontal-stack-card:

this will help you find the right path
https://matt8707.github.io/card-mod-helper/

5307

in my opinion, simply add another card to the grid card, like this?

- type: grid
  title: Devices
  view_layout:
    grid-area: devices
  columns: 1
  cards:
    - type: vertical-stack
      cards:
        - type: custom:button-card
          aspect_ratio: 2/1
          icon: mdi:home
          styles:
            card:
              - background: '#5f9ea0'
        - type: grid
          columns: 2
          cards:
            # APPLE TV
            - type: custom:decluttering-card
              template: grid_atv

            # Samsung TV
            - type: custom:decluttering-card
              template: grid_samsung

image
image844×896 36.2 KB

5309

Perfection Viet:D

Thanks so much! I was overcomplicating I guess haha

FYI did you mean to takedown your shared repo? I want to steal your dynamic blind icons :smiley:

5310

hehe… here you go

Untitled

icon_cover_animate:
  styles:
    custom_fields:
      icon:
        - width: 80%
        - fill: >
            [[[
              return (variables.state_on || variables.current_tilt_position !== 0 )
                  ? '#3182b7'
                  : '#9da0a2';
            ]]]
  custom_fields:
    icon: >
      [[[
        let state;
        if (variables.state === 'opening' && variables.timeout < 50000) {
            state = 'on';
        }
        if (variables.state === 'closing' && variables.timeout < 50000 ) {
            state = 'off';
        }
        if (variables.state_on && variables.timeout > 50000) {
            state = 'on_timeout';
        }
        let style =
            `
            <style>
              @keyframes on {
                from {
                  transform: scaleY(0);
                }

                to {
                  transform: scaleY(1);
                }
              }

              @keyframes off {
                from {
                  transform: scaleY(1);
                }

                to {
                  transform: scaleY(0);
                }
              }

            .on {
              animation: off 10s ease-in infinite;
            }

            .off {
              animation: on 10s ease-out infinite;
            }
            </style>
            `,
            ram =
          `
            <g id="ram" opacity="0.6">
              <path d="M1.77,28.03c.78,0,1.41-.64,1.41-1.4s-.63-1.4-1.41-1.4-1.39,.62-1.39,1.4,.62,1.4,1.39,1.4Z" />
              <path d="M1.77,18.34c.78,0,1.41-.64,1.41-1.4s-.63-1.39-1.41-1.39-1.39,.62-1.39,1.39,.62,1.4,1.39,1.4Z" />
              <path d="M1.77,23.19c.78,0,1.41-.66,1.41-1.41s-.63-1.39-1.41-1.39-1.39,.62-1.39,1.39,.62,1.41,1.39,1.41Z" />
              <path
                d="M1.77,34.92c-.85,0-1.55,.72-1.55,1.56v5.07c0,.85,.7,1.56,1.55,1.56s1.56-.71,1.56-1.56v-5.07c0-.85-.69-1.56-1.56-1.56Z" />
              <path d="M1.77,8.65c.78,0,1.41-.65,1.41-1.41s-.63-1.39-1.41-1.39-1.39,.61-1.39,1.39,.62,1.41,1.39,1.41Z" />
              <path d="M1.77,13.49c.78,0,1.41-.63,1.41-1.39s-.63-1.41-1.41-1.41-1.39,.62-1.39,1.41,.62,1.39,1.39,1.39Z" />
              <path d="M1.77,32.86c.78,0,1.41-.64,1.41-1.39s-.63-1.39-1.41-1.39-1.39,.62-1.39,1.39,.62,1.39,1.39,1.39Z" />
              <path d="M42.5,0H1.77C.8,0,0,.81,0,1.78s.8,1.78,1.77,1.78H42.5c.98,0,1.78-.8,1.78-1.78s-.8-1.78-1.78-1.78Z" />
            </g>
          `,
            opened =
          `
            <path id="open1"
              d="M41.71,5.95H10.2c-1,0-1.66,.23-2.24,.77l-1.87,1.86c-.66,.64-.42,1.87,.67,1.87h31.53c1,0,1.66-.23,2.24-.77l1.87-1.87c.66-.64,.42-1.86-.69-1.86Z" />
            <path id="open2"
              d="M41.71,16.71H10.2c-1,0-1.66,.22-2.24,.77l-1.87,1.87c-.66,.63-.42,1.84,.67,1.84h31.53c1,0,1.66-.22,2.24-.77l1.87-1.87c.66-.62,.42-1.84-.69-1.84Z" />
            <path id="open3"
              d="M41.71,38.17H10.2c-1,0-1.66,.23-2.24,.79l-1.87,1.86c-.66,.62-.42,1.87,.67,1.87h31.53c1,0,1.66-.25,2.24-.8l1.87-1.85c.66-.64,.42-1.86-.69-1.86Z" />
            <path id="open4"
              d="M41.71,27.45H10.2c-1,0-1.66,.22-2.24,.77l-1.87,1.87c-.66,.64-.42,1.86,.67,1.86h31.53c1,0,1.66-.25,2.24-.79l1.87-1.86c.66-.62,.42-1.85-.69-1.85Z" />
            `,
              closed =
            `
              <path id="closed1"
                d="M41.08,6.05H7.56c-.97,0-1.59,.63-1.59,1.55v4.75c0,.94,.64,1.55,1.59,1.55H41.08c.99,0,1.59-.63,1.59-1.57V7.59c0-.93-.62-1.54-1.59-1.54Z" />
              <path id="closed2"
                d="M41.08,25.46H7.56c-.95,0-1.59,.63-1.59,1.53v4.77c0,.93,.62,1.55,1.59,1.55H41.08c.99,0,1.59-.62,1.59-1.55v-4.78c0-.89-.6-1.51-1.59-1.51Z" />
              <path id="closed3"
                d="M41.08,35.17H7.56c-.98,0-1.58,.61-1.58,1.55v4.73c0,.94,.6,1.56,1.57,1.56H41.06c.97,0,1.61-.62,1.61-1.56v-4.73c0-.95-.62-1.55-1.59-1.55Z" />
              <path id="closed4"
                d="M41.1,15.76H7.56c-.95,0-1.59,.63-1.59,1.54v4.77c0,.91,.62,1.52,1.59,1.52H41.09c.96,0,1.58-.62,1.58-1.52v-4.79c0-.9-.62-1.52-1.58-1.52Z" />
            `;
      if (variables.state_on ||  variables.current_tilt_position == 100 && variables.current_position == 0)
        return `
          <svg viewBox="0 0 50 50">
            ${style}
            ${ram}
            <g class="${state}" id="open">
              ${opened}
            </g>
          </svg>`;
        else return `
          <svg viewBox="0 0 50 50">
            ${style}
            ${ram}
            <g>
              ${closed}
            </g>
          </svg>`;
      ]]]
8 Likes
5311

Can you share your repo in github like Mattias did?

5312

Hi, thanks for the aswer.

Unfortunately, I still cannot make it.
the path would be:

"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>grid-layout$#root>swipe-card$#swiper-wrapper-68d1044fa3780ffa8>hui-horizontal-stack-card.swiper-slide.swiper-slide-active$#root"

and that would be the footer part of the ui. yaml

      - type: custom:swipe-card
        view_layout:
          grid-area: footer
        card_mod:
          style: 
              $hui-horizontal-stack-card.swiper-slide.swiper-slide-active:
                # horizontal bottom buttons
                $: |
                  #root {
                    justify-content: space-evenly;
                  }
        cards:
          - type: horizontal-stack
            cards: ...
          - type: horizontal-stack
            cards: ...

for some reason I cant figure out hout to add the path correctly. If I edit the css in developermode in Chrome, it works so its my config is wrong.

5313

No, you have to edit the css in the theme configuration… themes/tablet.yaml
grid-layout$swipe-card$hui-horizontal-stack-card

5315

Hey Viet!

For some reason I’m only getting the states on either end, but not the animation from one to the other when the button-card is toggled. Any ideas!?

Thanks a million!

5316

Animation depends on the state of the blinds. First, find out what state it is in when it opens or closes. For me I have a cover with specific positions and tilt of the slats and HA when I have the slats open, the state is still closed, because I have the position at 0.

5317

Hey Folks,

it its possible to show on Last Media, Kodi and not Plex ?

I dont have Plex :smiley:
Maybe somebody can help.

Greetz

5318

magically is working today:) we’ll take the wins when we get 'em :slight_smile:

1 Like
5319

Hello,
using the swipe card - as many of you- is causing an error t.setConfig is not a function on my Galaxy Tab A7 and sometimes on my windows machine. On Ipad I can solve it by swiping down to refresh the lovelace page. Is there any solution for this behavior?

IMG_0586
IMG_05861920×1440 163 KB

5321

How did you solve the problem?

5322

I did purge cache for that domain from cloudflare account. :sweat_smile:

5323

Hello,

Did anyone manage to make an alarm card? I was looking to put an alarm card with keypad in one of the grids but it does not fit all the grid spacing and looks diferent from the rest of the theme

5325

My dashboard has changed to the weird look after upgrade to Home Assistant 2023.10. The font of title has changed, smaller. The custom button cards have different size. The grid view is misaligned, especially in my iphone. In tablet, the errors seems less serious than in phone.
Is anyone has the same errors?

image
image1242×2119 202 KB