Finally made a light control card with 10/10 wife acceptance. 💪

Share your Projects!
1

My wife wanted simple, minimal tapping, way to adjust the lights.
This is where we landed.

image
image654×1327 57.5 KB

From this single card she can do literally everything she could possibly want with our lights. A big thing that she loves and hates is having Adaptive Lighting on when she wants to completely control things herself. A key to this designis her ability to turn it off if she wants.

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      background: var(--ha-card-background,var(--card-background-color,#fff));
      box-shadow: var(--ha-card-box-shadow,none);
      box-sizing: border-box;
      border-radius: var(--ha-card-border-radius,12px);
      border-width: var(--ha-card-border-width,1px);
      border-style: solid;
      border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
      color: var(--primary-text-color);
      display: block;
      transition: all 0.3s ease-out 0s;
      position: relative;
      padding-bottom: 8px;
      margin-bottom: 12px;
    }
card:
  type: custom:layout-card
  layout_type: custom:vertical-layout
  cards:
    - type: custom:layout-card
      layout_type: custom:grid-layout
      layout:
        grid-template-columns: auto 72px 72px
      cards:
        - type: custom:button-card
          icon: mdi:silverware-fork-knife
          label: Dining Room
          show_label: true
          show_icon: true
          tap_action:
            action: navigate
            navigation_path: '#dining_room'
          styles:
            grid:
              - grid-template-areas: '"i l"'
              - grid-template-columns: 12% auto
            icon:
              - width: 100%
              - margin-top: '-2px'
            card:
              - background: none
              - border: 0px
              - margin: 0px
            label:
              - margin-top: '-2px'
              - margin-left: 8px
              - justify-self: start
              - align-self: start
              - font-weight: bold
              - font-size: 24px
        - type: tile
          entity: switch.adaptive_lighting_dining_room
          hide_state: true
          vertical: false
          name: ' '
          icon: mdi:white-balance-sunny
          card_mod:
            style: |
              ha-card {
                margin-left: 26px;
                border-width: 0px;
                background: none;
                margin-top: -8px;
              }
        - type: tile
          entity: light.dining_room
          hide_state: true
          name: ' '
          icon: mdi:power
          card_mod:
            style: |
              ha-card {
                margin-left: 8px;
                border-width: 0px;
                background: none;
                margin-top: -8px;
              }
    - type: custom:mushroom-light-card
      entity: light.dining_room
      use_light_color: true
      show_brightness_control: true
      show_color_control: true
      show_color_temp_control: true
      collapsible_controls: true
      layout: horizontal
      fill_container: false
      primary_info: none
      secondary_info: none
      icon_type: none
      card_mod:
        style: |
          ha-card {
            border-width: 0px;
            background: none;
            margin-top: -16px;
          }
    - type: custom:mushroom-chips-card
      card_mod:
        style: |
          ha-card {
            border-width: 0px;
            background: none;
            margin-top: -4px;
            margin-left: 10px;
          }
      chips:
        - type: entity
          entity: scene.dining_room_cool_bright
          name: Bright
          content_info: name
          icon_color: white
          tap_action:
            action: toggle
        - type: entity
          entity: scene.dining_room_read
          name: Read
          content_info: name
          icon_color: yellow
          tap_action:
            action: toggle
        - type: entity
          entity: scene.dining_room_relax
          name: Relax
          content_info: name
          icon_color: amber
          tap_action:
            action: toggle
        - type: entity
          entity: scene.dining_room_rest
          name: Rest
          content_info: name
          icon_color: accent
          tap_action:
            action: toggle
9 Likes
2

Can we have the code please?

3

Should have done that initially. Sorry.
Added now. :+1:

1 Like
4

This looks awesome - some-day I will get my HA to this level.

5

You can get 70% of the way there by just using the lights card from Mushroom Cards.

Most of my approach was wrapping a few other things around the mushroom card.

6

Hi,

I see you use the adaptive lightning plugin, would you mind sharing your configuration for this? Thanks for sharing your code for the card, i’m using it now and got a happy wife too!

7

I have no wife, but i’m very pleased with it. I also got the same question as prinshendrik about the adaptive lighting.

8

this is a great topic and a huge challenge, this is my approach:
image

features:
  - type: custom:rgb-light-card-feature
    entity: light.luminaria_home
    colors:
      - rgb_color:
          - 241
          - 235
          - 156
        brightness: 125
        transition: 1
      - rgb_color:
          - 255
          - 255
          - 255
        brightness: 99
        transition: 1
      - rgb_color:
          - 255
          - 244
          - 229
        brightness: 152
        transition: 1
      - rgb_color:
          - 255
          - 197
          - 143
        brightness: 180
        transition: 1
      - rgb_color:
          - 255
          - 163
          - 76
        brightness: 127
        transition: 1
      - rgb_color:
          - 255
          - 147
          - 41
        brightness: 151
        transition: 1
  - type: light-brightness
type: tile
entity: light.luminaria_home
name: Luminária
hide_state: true
vertical: false
layout_options:
  grid_columns: 4
  grid_rows: 3
tap_action:
  action: toggle
10

Thank you SO much for sharing this! Absolutely love the card. I’m trying to add another button to toggle a motion automation. Can’t for the life of me to get it to work. Any ideas? Cheers!

11

This card is amazing! Thank you for posting the code and sharing a demo.

Is there any way to make it so the power button controls an entire “area” instead of a single light?

12

Change the tile dining room light entity, to a light group that controls all lights in an area:

        - type: tile
          entity: light.ALL_LIGHTS_IN_AREA_X
          hide_state: true
          name: ' '
          icon: mdi:power
          card_mod:
            style: |
              ha-card {
                margin-left: 8px;
                border-width: 0px;
                background: none;
                margin-top: -8px;
              }
13

Do you know how I can create a group that combines lights and switches into one group to accomplish this?

14

Disregard, I figured it out. Thanks!

1 Like