Lovelace light control ideas wanted

Unfortunately the tiles-card has been abandoned and no longer works with home assistant.

My tiles-card still seems to be working. Not sure what the issue that is expected with it.

Hi, could you post a snippet of one of you “All” - buttons, for example of your Lounge card? Im not able to get the grouping to work, to turn all lights off or on of a complete room.

Thank you =)

It’s just a light group presented as an entity in Lovelace.

  name: All Lounge Lights
  - light.lifx_lounge_entrance_lamp
  - light.lifx_lounge_front_left
  - light.lifx_lounge_front_right
  - light.lifx_lounge_middle_left
  - light.lifx_lounge_middle_right
  - light.lifx_lounge_rear_left
  - light.lifx_lounge_rear_right

The card I’m currently using for displaying the button is no longer supported and I would not recommend use of it.

The issue is that this card has been abandoned by the developer. If you upgrade home assistant it may break and there is no support to get it fixed. Some people already require editing it locally to make it work.

ah ok, thank you. i’ll try this. I just liked the shadow pretty much if an entity is in use… so i also got the tiles card. i also saw theres a legacy version of it which is abandoned, the normal one also has been abandoned?

you can do the drop shadows with ‘custom: button-card

cool, ill give it a try… i just want the borders to light up which is pretty nice. cause of the amount different custom plugins this might be possible anyway =)

@sparkydave could you maybe help me a bit to get this test card converted to the custom button-card?

  - card:
        align: center
        background: 'rgba(0, 0, 0, 0)'
        column_width: calc(85%/4)
        columns: 4
        gap: 20px
        padding: 0px
        row_height: 75px
        - column: 1
          entity: group.test_group
            value: null
          row: 1
          shadow: >-
            ${states['group.test_group'].state === 'on' ? '0px 0px 10px  3px
            var(--paper-item-icon-active-color)' : 'none'}
        - column: 3
          entity: light.test_1
            value: Place1
          row: 1
          shadow: >-
            ${states['light.test_1'].state === 'on' ? '0px 0px
            10px 3px var(--paper-item-icon-active-color)' : 'none'}
        - column: 4
          entity: light.test_2
          icon: 'mdi:lightbulb'
            value: Place2
          row: 1
          shadow: >-
            ${states['light.test_2'].state === 'on' ? '0px 0px
            10px 3px var(--paper-item-icon-active-color)' : 'none'}
          value: 'rgba(0, 0, 0, 0)'
            value_off: var(--primary-color)
            value_on: var(--paper-item-icon-active-color)
          radius: 20px
          size: 2px
            value_off: var(--primary-text-color)
            value_on: var(--paper-item-icon-active-color)
          value: 'mdi:lightbulb'
            value_off: var(--secondary-text-color)
            value_on: var(--primary-text-color)
      style: |
        ha-card {
          --ha-card-box-shadow: 'none';
      type: 'custom:tiles-card'
      - light.test_1
      - light.test_2
      - group.test_group
    type: 'custom:config-template-card'
show_header_toggle: false
style: |
  ha-card {
    border: solid 2px var(--primary-color);
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.6);
title: Lights
type: entities

I’m not very good at the coding of the button card to be honest. I got this from the forum thread. Put the below in your lovelace raw editor down the bottom / out of the way.:

      action: more-info
    label: >
      [[[ var bri = Math.round(entity.attributes.brightness / 2.55);  if
      (entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
    layout: icon_label
    show_label: true
    show_name: true
      - styles:
            - box-shadow: '0px 0px 10px 3px #F9C536'
            - color: '#F9C536'
        value: 'on'
        - width: 100px
        - height: 100px
        - border-radius: 15px
        - margin: 5px 5px 0px 0px
        - padding: 0px 0px
        - '--paper-card-background-color': 'rgba(40, 40, 40, 0.7)'
        - grid-template-rows: 42px auto 0px
        - grid-template-columns: 42px auto
        - width: 30px
        - color: white
        - font-size: 12px
        - font-weight: bold
        - color: white
        - justify-self: start
        - align-self: end
        - padding: 9px 10px
        - font-size: 12px
        - font-weight: bold
        - color: white
      action: toggle

and then this in lovelace where you want the button:

type: 'custom:button-card'
entity: light.dining_lights   # change only this entity to suit your config
template: light_button

and you will get this:



Very nice! thank you. That helps a lot. ill modify this to my needs =)

another thing im facing right now… is there a way to order multiple entities horizontal inside one card?
meaning, is there a way to orientate multiple entities horizontally while the normal card design is used as a “frame” for the group of entities?
with the horizontal stack i can order them as i want, but all the entities are seperated without a frame… i hope this makes sense ^^

This looks really good, do you know how I would create the template when I am using YAML mode?

Sorry for the post, figured it out. I needed to add it to my ui-lovelace.yaml file.

It looks like the tiles-card is old (2 years since update) but got just about everything working on the latest version of HA. The only thing I’m not seeing is the icon. If anyone has any ideas. I copied the example from tom_l and only changed the entity names.

The error I see:
Expected a value of type {entity,name,icon} | entity-id for entities.0.type but received "custom:config-template-card".

I’ve dropped it completely in favour of Rom Rider’s button card. You should really look into it. Takes a bit of effort to get your head around it as there are so many options but it is well worth it. Using the templates option has reduced the size of my Lovelace config considerably.

can you share the lovelace code of yours that is displaying this card?