Lovelace: alternative to multiple entity row?

[prankousky]

Hi everybody,

I have a main tab in my lovelace that displays each room, and for each room all switches, lights, and entities. Currently, this is done via glances cards. However, it is kinda cluttered and not very intuitive.

What I’d like to do is something like this (trying to type out the layout of the card)

<room name>

<open?> (window) (door)
<temperature> <heater_sat_temperature>(input_slider) <measured_temperature>(sensor)
<lights> (light1) (light2) (light3) (light4)
<switches> (switch1) (switch2) (switch3) (...) (switch9)

I have tried doing this with multiple-entity-row, however… if I understand correctly, it can “only” display one thing on the left, then two things (primary and secondary) next to it. See here.

I would like to, however, display as many lights/switches/entities as there are, ideally even with indentation, for example

(...)
<lights> (light1) (light2) (light3)
(empty space) (light4) (light5) (light6)
<switches> (switch1) (switch2) (switch3)
(empty space) (switch4) (switch5) (switch6)
(...)

I use Home Assistant mobile 99% of the time (well, now that there is an android app, I actually switched to that!), so it’d be nice to use as little space as possible while still having a nice overview of all entities I want to read / control.

Here is an example of my current office card. It looks and works fine, but I don’t like it for some reason and it’d be nice to make it feel more intuitively.

I like the way the entities are set up as glances (instead of switch items for each switch) that I can toggle by clicking; I just don’t like how they are arranged.

Thank you for your ideas

[tom_l]

I’ve seen some very nice layouts using this:

Lovelace: Button card

Button card Lovelace Button card for your entities. -> github [all] Features works with any toggleable entity 3 actions on tap toggle, more_info and service state display (optional) custom color for on and off state (optional) custom state definition with customizable color (optional) custom size (optional) custom icon (optional) custom css style (optional) automatic color for light (optional) custom default color for lights (when color cannot be determined) (optional) 2 color types icon :…

[prankousky]

Thank you! That should do it.

I just stumbled upon custom:simple-thermostat as well, so now I was going to put the thermostats in another (easier readable) tab, but I will try button card and see if I can get a neat UI by uniting those tabs

[tom_l]

The only disadvantage is that there is a lot of repetition of lovelace code for large numbers of buttons. Look up ‘yaml anchors’ to minimise this.

The other option (that I find has a more logical column/row layout) is the tiles card. Unfortunately I am hesitant to recommend it as it does not appear to be actively maintained and could break at any time:

rodrigofragadf/lovelace-cards

[Mariusthvdb (Marius)]

@tom_l

The other option (that I find has a more logical column/row layout) is the tiles card.

yes, the only reason I keep the tiles card is for the grid option. Button-card is far more advanced at the moment, especially with all the templating options and custom fields (though tiles is still holding a good second position here) but sadly lacks the grid.

@romrider has been speaking about adopting this in a future card, but never spoke of it since ;-( Maybe we could nudge gently ?

btw, prevent duplicating code can be done rather easily with button-card templates, or even decluttering cards. When using the button-card, there’s no need to use the anchors, which can be quite confusing and limited to a yaml file.

[tom_l]

Maybe we could nudge gently

Poke him hard.

With a pointy stick.

Repeatedly.

But seriously, it’s the only thing stopping me changing over to this card. Even though it does have the advantage that I wouldn’t need to use custom:config-template-card to alter the drop shadow when the state changes.

      entities:
        - column: 1
          entity: light.all_lounge_lights
          icon:
            value: 'mdi:alpha-a-circle'
          label_sec:
            value: All
          row: 1
          shadow: >-
            ${states['light.all_lounge_lights'].state === 'on' ? '0px 0px 10px
            3px var(--paper-item-icon-active-color)' : 'none'}

[RichardU (Richard)]

@Mariusthvdb

prevent duplicating code can be done rather easily with button-card templates, or even decluttering cards

FWIW, I’ve used button-card templates, and now I am switching to decluttering cards (install with HACS).

GitHub - custom-cards/decluttering-card: 🧹 Declutter your lovelace...

P.S. I don’t know how much harder you could nudge @romrider. I’m amazed by how much he does already.

[prankousky]

Yes, all this copy&paste (despite using anchors) made me look into decluttering-card once again as well It is actually not as confusing as I thought when I first started Home Assistant. This will safe me a lot of work in the future.

I believe for this scenario, the button-card will do fine, though. I will have to invest some time in the layout so that’ll look the way I want it to. But in general, it is capable of doing what I need it to.