A different take on designing a Lovelace UI

Share your Projects!
4486

this might help, A different take on designing a Lovelace UI - #3692 by Mattias_Persson

try this A different take on designing a Lovelace UI - #4072 by Mattias_Persson

thanks @D34DC3N73R and @pajeronda I will have to try your solutions, I am not that happy with my current method for this

1 Like
4487

Thanks @D34DC3N73R I tried it and it partially works.
Card is correctly placed at the bottom of the page but it is no more aligned to the sidebar column (it slightly overlaps other columns).

Screenshot 2023-01-23 alle 14.38.24
Screenshot 2023-01-23 alle 14.38.241152×486 64.8 KB

Any idea?

Thanks!

4488

Ciao @pajeronda I tried also your solution but it works only if I have 2 cards.
On my solution I have 3 cards and changing value on sidebar template moves down the second card (that I want close to the sidebar).

Davide

4489

Ciao @Dave81 if you want to add more cards reduce the min-height value.

4490

Yes, you’ll have to add other css attributes like padding, width or max-width. When you use absolute position the card is sort of ‘floating’ and no longer bound to the parent styles. In your case it looks like you could reduce padding-left, or set the width.

4491

I made a way to easily add motion sensors to light cards. Pretty much all of my lights are tied to motion sensors and I wanted a way to include motion info. It’s styled similarly to the climate cards when lights are off, and when the lights are on, it animates to the upper right corner of the card and doesn’t interfere with the brightness circle. Side note, I couldn’t get triggers_update to work with a template so I’ve left that as part of the button card rather than in the template itself. If anyone has pointers on that I’d be glad to hear it.

kitchen_button

Add motion.yaml to the button_card_templates directory.

In your ui-lovelace.yaml, add

variables: 
  motion:

and define the motion sensor entity_id.

If you want the card to update with the motion sensor and light entity state (rather than only the light entity), you’ll also need to add the motion entity to triggers_update:.

Lastly include - motion in the template section of your button card.

Code available here:

18 Likes
4492

I’m trying to get the state (current power usage) in the name of the footer-button.

          - type: custom:button-card
            entity: sensor.power_consumed
            name: >
              <ha-icon icon="mdi:chart-line-variant"></ha-icon> [[[ return "states['sensor.power_consumed']" ]]]
            show_name: true
            show_state: false
            tap_action:
              !include popup/footer_updates.yaml
            template: footer

But this doesn’t seem to work, anybody knows how to template the name-field so it does work?

4493

Try this

            name: >
              [[[
               let power = states['sensor.power_consumed'].state;
               return `<ha-icon icon="mdi:chart-line-variant"></ha-icon> ${power}`;
              ]]]
1 Like
4494

this works! many thanks for the advice!

4495

I don’t understand how the icons are created. Is it possible to get more?

4496

see this post, @Mattias_Persson iv needed to share this what feels like 5 times, could we Look at adding it to the FAQ?

2 Likes
4497

Oh, sorry, and thank you :blush:

4498

Thanks for sharing, works like a charm. One Question…what for a font are you using. Looks amazing. Thx Dirk

4499

Thanks, the font is one of my more recent favorites, Poppins.

4500

Many thanks will have a try

4501

Maybe off-topic, but how did you create the sensor.ps5_activity

4502

It’s a fairly recent integration

1 Like
4503

Trying to set up for the first time. My current lovelace config is as below. Am I able to add in this somehow without removing the mode:storage that I use for my other dashboards?

lovelace:
  mode: storage
  # Add yaml dashboards
  dashboards:
    minimalist-mobile:
      mode: yaml
      title: Mobile Dashboard
      icon: mdi:cellphone-text
      show_in_sidebar: true
      filename: ui_lovelace_minimalist/dashboard/minimalist-mobile.yaml
    minimalist-test:
      mode: yaml
      title: Test Dashboard
      icon: mdi:tablet-dashboard
      show_in_sidebar: true
      filename: ui_lovelace_minimalist/dashboard/test.yaml
4504

You can use this dashboard in storage mode, however you will need to change some things here and there to get everything up and running. I have also done it that way until I ultimately decided to just stick with this one dashboard

1 Like
4505

Don’t suppose you can elaborate a little more on that one? Would be greatly appreciated!