Convert Light Groups to Button Cards?

1

Dear community

Is there a simple method in Lovelace which allows the conversion of a light group to a button card (with the toggle feature perhaps)?

I have made the light groups via the built-in lovelace Entity card. They all work perfectly, however I have a lot of lightbulbs and they just take a lot of screen space. I just want to simplify my cluttered interface. - see below

Thanks in advance

T :smiley:

LG2BC
LG2BC1615×1305 166 KB

2

BTW that probably will make it more cluttered. Think about the lights you actually use, and just put them there. All other lights go on another tab.
And there’s no automated tool, but it shouldn’t be too hard.
So when you’re ready, replace it like this:

type: entities
entities:
  - entity: light.light1
  - entity: light.light2

type: horizontal-stack
entities:
  - entity: light.light1
  - entity: light.light2

type: horizontal-stack
cards:
  - entity: light.light1
  - entity: light.light2

type: horizontal-stack
cards:
  - entity: light.light1
    type: button
  - entity: light.light2
    type: button

Tip: Go into YAML mode. And you can copy/paste type: button from the first line to the second:


    type: button
3

Thank you for your quick and concise response KTibow :+1:

5

KTibow was right. It is just as cluttered

Any ideas if this can be done?

cards:
  - entity: light.light1
  - entity: light.light2
  - entity: light.light3
  - entity: light.light4
  - entity: light.light5
  - entity: light.light6
  - entity: light.light7
  - entity: light.light8
  - entity: light.light9
  - entity: light.light10
    name: Kitchen
    show_icon: true
    show_name: true
    show_state: true
    tap_action:
      action: toggle
    type: button`````
6

Add a picture element of the size you want and place icons for the various lights on it.

7

Here’s one I prepared earlier…

Light panel example

type: picture-elements
elements:
  - entity: light.hue_white_candle_1
    style:
      left: 9.5%
      top: 38%
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.living_room_spotlights
    style:
      left: 26%
      top: 38%
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.study_spotlights
    style:
      left: 42%
      top: 38%
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.bedroom_spotlights
    style:
      left: 58%
      top: 38%
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.hallway_1
    style:
      left: 74%
      top: 38%
    tap_action:
      action: toggle
    type: state-icon
  - entity: switch.landing_socket_1
    style:
      left: 90%
      top: 38%
    tap_action:
      action: toggle
    type: state-icon
image: 'http://homeassistant.local:8123/local/light_panel.png'
8

Thanks for the suggestion - I will try the picture element if all fails. :+1:

After some more researching, I am hoping to add a few light groups.

Then somehow assign each lightgroup to a corresponding switch.

1 Like