Lovelace light control ideas wanted

[dexstar]

@tom_l , nevermind it is now working. Thanks again

[Rilleboy]

how did you manage to get 4 icons in a row in “outside lights” and the other three in below??
When i try to put 5 butoons in they all get in the same row…

[tom_l]

I use a combination of horizontal and vertical stack cards, inside an entities card. This requires the custom:hui-element card.

You may also need blank button cards in the rows with fewer numbers of buttons.

entities:
  - card_type: horizontal-stack
    cards:
      - entity: light.deck_front_downlights
        name: Deck Front
        template: light_button
        type: custom:button-card
      - entity: light.deck_side_downlights
        name: Deck Side
        template: light_button
        type: custom:button-card
      - entity: light.lifx_deck_spot
        name: Deck Spot
        template: light_button
        type: custom:button-card
      - color_type: blank-card
        type: custom:button-card
    type: custom:hui-element
  - card_type: horizontal-stack
    cards:
      - entity: light.lifx_front_porch
        name: Porch
        template: light_button
        type: custom:button-card
      - entity: light.lifx_washing_spot
        name: Washing
        template: light_button
        type: custom:button-card
      - color_type: blank-card
        type: custom:button-card
      - color_type: blank-card
        type: custom:button-card
    type: custom:hui-element
show_header_toggle: false
title: Outside Lights
type: entities

[Rilleboy]

Thanks a lot it really helped me

[Nico39 (Nicolas)]

Hello,

Since the penultimate update of home assistant, the borders of my maps are no longer displayed in yellow:

My cards:

entities:
  - type: custom:hui-element
    card_type: horizontal-stack
    cards:
      - entity: switch.lumiere_cuisine_plafonnier_etage
        name: Plafonnier
        icon: mdi:chandelier
        template: light_button
        type: custom:button-card
      - entity: group.lumieres_meubles_cuisine
        icon: mdi:led-strip
        name: Meubles
        template: light_button
        type: custom:button-card
show_header_toggle: false
title: Cuisine
icon: mdi:countertop-outline
type: entities

Here is the template I am using:

button_card_templates:
  light_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    label: >
      [[[ var bri = entity.attributes.brightness &&
      Math.round(entity.attributes.brightness / 2.55);  if
        (entity.state === 'on') return (bri ? (bri+"%") : 'On'); else return "Off"; ]]]
    layout: icon_label
    show_label: true
    show_name: true
    state:
      - styles:
          card:
            - border: solid 1px var(--button-card-light-color-no-temperature)
            - box-shadow: 0px 0px 10px 3px var(--button-card-light-color-no-temperature)
          label:
            - color: var(--paper-item-icon-active-color)
        value: 'on'
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
        value: 'off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.4
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i l l" "n n n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: 33% auto
      icon:
        - width: 28px
        - padding: 0px 0px 0px 0px
        - color: var(--button-card-light-color-no-temperature)
      label:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
        - white-space: normal
    tap_action:
      action: toggle

On the other hand for RGB lights the border always works with the color of the lamp:

Did you encounter the same problem?
Do you have any idea how to solve it?
Because of that I forgot a light that stayed on for 24 hours

Thanks in advance for your feedback.

[psion]

I have the same problem

[Ricks88]

Hi Tom,

The default color does not work anymore, did you find a fix maybe?

[wesleyaa]

Do you have any youtube video teaching how do it for beginners?

I’m referring to this post: Lovelace light control ideas wanted - #11 by tom_l