Lovelace light control ideas wanted

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

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.

all_lounge_lights:
  name: All Lounge Lights
  entities:
  - 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?

entities:
  - card:
      card_settings:
        align: center
        background: 'rgba(0, 0, 0, 0)'
        column_width: calc(85%/4)
        columns: 4
        gap: 20px
        padding: 0px
        row_height: 75px
      entities:
        - column: 1
          entity: group.test_group
          label_sec:
            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
          label_sec:
            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'
          label_sec:
            value: Place2
          row: 1
          shadow: >-
            ${states['light.test_2'].state === 'on' ? '0px 0px
            10px 3px var(--paper-item-icon-active-color)' : 'none'}
      global_settings:
        background:
          value: 'rgba(0, 0, 0, 0)'
        border:
          color:
            value_off: var(--primary-color)
            value_on: var(--paper-item-icon-active-color)
          radius: 20px
          size: 2px
        icon:
          color:
            value_off: var(--primary-text-color)
            value_on: var(--paper-item-icon-active-color)
          value: 'mdi:lightbulb'
        label_sec:
          color:
            value_off: var(--secondary-text-color)
            value_on: var(--primary-text-color)
      style: |
        ha-card {
          --ha-card-box-shadow: 'none';
        }
      type: 'custom:tiles-card'
    entities:
      - 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.:

button_card_templates:
  light_button:
    hold_action:
      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
    state:
      - styles:
          card:
            - box-shadow: '0px 0px 10px 3px #F9C536'
          icon:
            - color: '#F9C536'
        value: 'on'
    styles:
      card:
        - 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:
        - grid-template-rows: 42px auto 0px
        - grid-template-columns: 42px auto
      icon:
        - width: 30px
        - color: white
      label:
        - font-size: 12px
        - font-weight: bold
        - color: white
      name:
        - justify-self: start
        - align-self: end
        - padding: 9px 10px
        - font-size: 12px
        - font-weight: bold
        - color: white
    tap_action:
      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:

image
image

4 Likes

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.
image

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?

Do you have an example of this?

Screenshot_2021-04-27 Overview - Home Assistant

Card config

entities:
  - type: 'custom:hui-element'
    card_type: horizontal-stack
    cards:
      - entity: light.lifx_top_of_stairs
        template: light_button
        type: 'custom:button-card'
      - entity: light.lifx_bottom_of_stairs
        name: Stairs
        template: light_button
        type: 'custom:button-card'
      - entity: light.lifx_hallway
        template: light_button
        type: 'custom:button-card'
      - entity: light.lifx_linen_cupboard
        name: Linen Cbd
        template: light_button
        type: 'custom:button-card'
show_header_toggle: false
title: Hallways
type: entities

Template (put this at the top of your RAW Lovelace config):

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(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          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
2 Likes

Thank you.

Your theme is awesome. Good job.

How would I edit the config so the buttons are always the same size no matter how many are on a card?