A different take on designing a Lovelace UI

Share your Projects!
2340

Hi
I’m obviously very new to HA.
The instructions may be really easy to understand - but I am missing a few things…

  1. do I clone the whole repo? and if yes… where to?
  2. it says to copy 4 files from repo manually… but to where?
    • I copied them to config root…
    • I applied the code to configuration.yaml
    • also installed the 4 mods via HACS.

I see a lot of files in the repo… but I only copied 4…

sry if all this should be obvious.

2341

Thanks! Updated original reply.

2342

In the sidebar I wanted to insert custom: button-card to the button pusto, I added columns: 3 in the grid and I made a template of my liking …
the problem I find is that if I insert 3 / 6o9 card with the mobile it is not visible.

  sidebar_button:
    template: base
    show_state: false
    show_name: false
    styles:
      grid:
        - grid-template-columns: 1fr
        - grid-template-areas: '"icon "'
      card:
        - background-color: rgba(0, 0, 0, 0.0)
        - box-shadow: none
2343

Hi everyone, i have tried this dashboard, followed the guidelines but all was not successful. Is there any one in the community who can share already made version in English language. without any code writing please.

2344

I’m trying to resize my background.png to make the aspect ratio fit my iPad 2017. However changing the background resolution and aspect ratio doesn’t seem to change a thing.

I’ve tried emptying the cache and rebooting home assistant but it doesn’t work.

Anyone have any clue what I do wrong?

2345

Thank to Mathias and all the contributors!
Learned a lot and with a severe copy and paste activity and a lot of debugging I’m now on the right path (I look now like Mathias in HA and most of the wording is in swedish,…)
need some direction tough:
-battery level: the reports shows the state (chargin/not chargin) instead of the level. Tried some corrections with no luck. Any idea?
-the sidebar format is worong: I’m not able to change the fonts and it occupies only the area needed, the lenght is not down to the bottom. Maybe this pic will help in understanding
-also the backgorund style is not loaded
edit: Found replies to pit 2 and 3 above…

Snap12
Snap12622×876 52.7 KB

Thanks!!

2346

Could you share your code? Especially styles for the person cards :smiley:
It is looking really great!

2347

Hi all, been playing around a little and have a question re: grid layout.

In the current setup, what would be the quickest / most straightforward way to turn the 3 columns (each have 4 buttons) in 2 columns with 6 buttons each?

2348

Just change grid in ui-lovelace.yaml and then put more cards to columns :slight_smile:

2350

Is there a way to use another entity color?
I’m using a shelly that turn on a hue light and would like to have the hue entity color instead of the base blue one
I’m trying to pass a variable to icon_hue template with no success (while it works for the light template)

2351

Can you give me the complete code and where you added it?

2352

Where did you add the button in lovelace.ui? When i add it it hides one of the grid layout sections. is there a way to add it “hidden” so it doesnt mess with the rest of the UI?

2353

Hi!
Sure. Here is a part of my Lovelace UI.

cards:
  - type: custom:hui-element
    card_type: horizontal-stack
    cards:
      - type: custom:button-card
        styles: 
          card:
            - display: none

  #################################################
  #                                               #
  #                    SIDEBAR                    #
  #                                               #
  #################################################
  - type: vertical-stack
    view_layout:
      grid-area: sidebar
    cards:
2354

Reverse it, use hue as entity and add a tap action to toggle shelly instead.

but if you must here’s a quick example

custom_fields:
  circle: >
    [[[
      let e = states['light.dator'],
        h = e.attributes.hs_color[0],
        s = e.attributes.hs_color[1];
      return `<div style="background-color: hsl(${h}, ${s}%, 50%);">test</div>`;
    ]]]
2355

rejectattr on the entities you don’t want

2356

here https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594/1981

2357

The other files are specific to my config. Like if you copy automation.yaml to your config you’ll get errors because we don’t have the same physical devices

2358

Yes, https://github.com/custom-cards/button-card#custom-fields

2359

I made it
Thanks!

          - type: custom:button-card
            entity: light.100_giardino_hue
            name: Luce giardino
            template:
              - light
              - icon_hue
            tap_action:
              action: call-service
              service: switch.toggle
              service_data:
                entity_id: switch.100_giardino

your second suggestion will be used for different task. Nothing is wasted

2360

ok, clear.
Any way to retrive iphone (apple…) battery level instead of its state?