Lovelace light control ideas wanted

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

Use blank cards so there are always 4 in a stack.

  - card_type: horizontal-stack
    cards:
      - entity: light.lifx_spare_bedroom
        name: Ceiling
        template: light_button
        type: 'custom:button-card'
      - entity: light.lifx_sp_bed_lamp
        name: Bedside
        template: light_button
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'

Screenshot_2021-04-29 Overview - Home Assistant

2 Likes

Thanks Tom_I

This really cleaned up my lights part of the gui. Just one tiny thing that is bothering me, and i’m wondering how to solve it. Now the light and border show up in default yellow light if active, but when i’m using colored lights my icon does show the correct color, just the border stays default (yellow)

image

Anyway to “fix” that? so they both show the correct color the lamp is using.

Thanks!

Try this:

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
1 Like

Awesome! Thanks Alot!

works like a charm!

image

Change the bit in brackets for the label color to be the same as in the brackets above if you want the brightness % in the same colour

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) # Inside ( ) here  same as above ( )

I.e. replace --paper-item-icon-active-color with --button-card-light-color-no-temperature

1 Like

Cool! that’s indeed even better.
Thanks again, looks alot nicer this way.

image

Hello everyone,
Thank you for your work and your sharing.
I am a novice and I am trying to reproduce your map.
I don’t have a lovelace.yaml file in my Home Assistant Operating System version, so I can’t add “button_card_template: …” inside.
I find a lot of tutorial but they all ask to add lines of code to a .yaml file that I can’t find in my Home Assistant.
Can you help me on the subject?
Thank you for your help

You put the template here:

The raw Lovelace config is accessed by pressing the three dot icon (top right of your dashboard) to edit Lovelace twice.

Thank you :slight_smile:

Hello, how do I change the background like you did above? Thanks

The background of what?

The card?

The button?

The view?

The background of the dashboard

1 Like

You can do it using themes.

Or by directly editing the view.

Tips:

Put your image in /config/www/backgrounds/ the images will be available at /local/backgrounds/

If you have to create the www folder, you need to restart home assistant after doing it.

Great, Thanks I managed to do it by editing the view.

Now if I want to make my maps a bit more transparent to see the background better, what should I do?

This is getting off topic. Please open a new frontend configuration topic.

But it will involve the use of this:

OK thank you, I already use it for other cards this one. Thanks for your help

I’m getting this error

config

1

I’ve added it to the Resources.

I’ve screwed up somewhere; any idea ?

The resource location should be on your system, not a remote github link.

Thanks for helping @tom_l .
Ok, changed that. It’s still giving me the error when I paste the RAW hui-element.js though; that’s the file I need correct ? I’m assuming yours is the same file but could you share it to test please. Thanks again.