Lovelace light control ideas wanted

How are you laying out your light control?

Obviously this is unacceptable:

Are there any custom cards that do a better job of exposing brightness controls for lights?

2 lights per card if you want it to look uniform.

Either that or switch over to a picture-entity and use the hold action to control brightness Then you can do up to 4 without it looking bad, you just have to add an extra step for brightness control

I just tap on the light and it brings up a colour wheel as well as brightness, warmth and effect controls… I don’t see any real benefit in using those lovelace cards for that - no benefit that I can see…

Yeah, I get the whole more-info pop-up thing. It’s how I was doing it originally (with the states based UI and originally converted Lovelace UI). I was just interested to see what other ways people were doing this.

I guess I’ll go back to using an entities card.

Yeah I don’t see any killer improvement on that for lights.

I thought I’d try a horizontal row of entity buttons. Maybe not 0_o

I use the custom “slider-entity-row” card by @thomasloven

it works great.

ex

1 Like

Ah! That’s what I’m looking for.

Much better:

2 Likes

Tonight I have been completely redesigning my lights page. I could not for the life of me work out the layout of the custom button card so I went with the more logical tiles card. Unfortunately to get the fancy looks I had to invoke a couple of other custom cards, lovelace-card-mod and config-template-card.

There’s a lot of wasted space and I’m not completely sold on the layout yet but it does work well from desktop to mobile.

Example card:

title: Laundry
type: entities
show_header_toggle: false
entities:
  - type: 'custom:config-template-card'
    entities:
      - light.lifx_laundry
      - light.lifx_washing_spot
    card:
      type: 'custom:tiles-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
          row: 1
          entity: light.lifx_laundry
          label_sec:
            value: Laundry
          shadow: >-
            ${states['light.lifx_laundry'].state === 'on' ? '0px 0px 10px 3px
            var(--paper-item-icon-active-color)' : 'none'}
        - column: 2
          row: 1
          entity: light.lifx_washing_spot
          icon:
            value: 'mdi:track-light'
          label_sec:
            value: Spotlight
          shadow: >-
            ${states['light.lifx_washing_spot'].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:fold-entity-row'
    padding: 0
    group_config:
      toggle: false
      type: 'custom:slider-entity-row'
    head:
      label: Light Settings
      type: section
    items:
      - entity: light.lifx_laundry
        name: Laundry
      - entity: light.lifx_washing_spot
        name: Spotlight
style: |
  ha-card {
    border: solid 2px var(--primary-color);
  }
4 Likes

Compacted the layout a bit:

what is the light settings with scenes that you have for each group and sunrise simulation. can you share your config?

thank you in advance.

How were you able to get multiple lights on the same card? I have been trying unsuccessfully.

I use the tiles-card (modified by card-mod and config-template-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: light.lifx_spare_bedroom
          label_sec:
            value: Ceiling
          row: 1
          shadow: >-
            ${states['light.lifx_spare_bedroom'].state === 'on' ? '0px 0px 10px
            3px var(--paper-item-icon-active-color)' : 'none'}
        - column: 2
          entity: light.lifx_sp_bed_lamp
          icon: 'mdi:lamp'
          label_sec:
            value: Bedside
          row: 1
          shadow: >-
            ${states['light.lifx_sp_bed_lamp'].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.lifx_spare_bedroom
      - light.lifx_sp_bed_lamp
    type: 'custom:config-template-card'
  - entities:
      - entity: light.lifx_spare_bedroom
        name: Ceiling
      - entity: light.lifx_sp_bed_lamp
        icon: 'mdi:lamp'
        name: Bedside
    group_config:
      toggle: false
      type: 'custom:slider-entity-row'
    head:
      label: Light Settings
      type: section
    padding: 0
    type: 'custom:fold-entity-row'
  - entities:
      - entity: automation.spare_bedroom_sunrise_simulation
        name: Enable
      - entity: input_boolean.spr_bed_sunrise_sim_ignore
      - entity: input_boolean.spr_bed_sunrise_sim_workday
      - entity: input_datetime.spr_bed_sunrise_sim_time
    head:
      label: Sunrise Simulation
      type: section
    padding: 0
    type: 'custom:fold-entity-row'
show_header_toggle: false
style: |
  ha-card {
    border: solid 2px var(--primary-color);
  }
title: Spare Bedroom
type: entities

Light settings is just a list of slider-entity-rows to allow brightness and colour setting. Scenes is an input select to select the room scene. Sunrise simulation is a brightness alarm that wakes me up by increasing the light from a dim red to a bright white over 30 minutes.

e.g.

Screenshot_2019-09-20%20Home%20Assistant(1)

I adapted this for the sunrise simulation:

1 Like

ikea do same but much much cheaper, you just need to add zigbee2mqtt to your hassio
add a nice automation for white in the morning, and yellow in the evening, job done :slight_smile::slight_smile:

Sure, if I want to shit all over my wifi bands with zigbee (I do not want this).

Also you misunderstand what the automation does. It’s an alarm clock. It starts off deep dim red 30 minutes before I want to get up. By the time I should be awake, 30 minutes later, it is a brilliant white.

2 Likes

How did you get the brightness control next to the names of each light? For me I have to click into each name to change the brightness?

Tom_I,
I mimic your code but I did not get button on my screen. Please take a look what I am missing here?

Thanks,

  - title: Lights
    icon: mdi:home-lightbulb-outline
    cards:
      - type: entities
        title: Lighting
        show_header_toggle: false
        entities:
          - type: 'custom:config-template-card'
            entities: 
              - light.kitchen
              - light.dining_room
            card:
              type: 'custom:tiles-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
                  row: 1
                  entity: light.kitchen
                  label_sec:
                    value: Kitchen
                  shadow: >-
                    ${states['light.kitchen'].state === 'on' ? '0px 0px 10px 3px
                    var(--paper-item-icon-active-color)' : 'none'}
                - column: 2
                  row: 1
                  entity: light.dining_room
                  icon:
                    value: 'mdi:ceiling-light'
                  label_sec:
                    value: Dining Room
                  shadow: >-
                    ${states['light.dining_room'].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:fold-entity-row'
            padding: 0
            group_config:
              toggle: false
              type: 'custom:slider-entity-row'
            head:
              label: Light Settings
              type: section
            items:
              - entity: light.kitchen
                name: Basement
                toggle: false
              - entity: light.dining_room
                name: Dining Room
                toggle: false
        style: |
          ha-card {
            border: solid 2px var(--primary-color);
          }

Capture