One of the main reasons for using HA for me has been to unify everything into a single app for easy use. However the one item i’ve never gotten satisfactory (mainly for my misses) is the light controls as we both like differing lights on and brightness etc we find ourselves still using the Hue App.
So i’m working on recreating the main functions of the hue app (light control part anyway) and thought i’d document it here incase it was of use to anyone else. I’m using my own knowledge, google AND a little ChatGPT to guide me (its been surprisingly helpful)
This screenshot is what my humble beginnings have led too. A card that closely resembles the “room” interface for Hue with a toggle button for on/off, a slider for brightness, the name and icon and if you press it, it takes you to another view where i plan on having the more expansive light controls i.e. individual lights in that room
type: custom:button-card
tap_action:
action: navigate
navigation_path: /november-2022/light-sub-view-lounge
styles:
name:
- font-size: 140%
- font-weight: bold
- justify-self: start
- margin-top: '-45px'
- margin-left: 120px
icon:
- margin-right: 220px
- '--mdc-icon-size': 50px
card:
- height: 100px
- width: 400px
- border-radius: 0px
- font-size: 10px
- padding-bottom: 0px
- padding-top: 10px
- padding-right: 10px
grid:
- grid-template-areas: '"i toggle" "n t" "slider slider" "l l"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content fr min-content
custom_fields:
toggle:
card:
type: custom:button-card
entity: light.living_room_lights
show_state: false
show_icon: false
show_name: false
color_type: card
styles:
card:
- height: 20px
- width: 40px
- border-radius: 20px
- background-color: '#b1bec8'
- justify-self: end
- margin-top: '-1px'
grid:
- grid-template-areas: '"t"'
- grid-template-columns: auto
- grid-template-rows: auto
state:
- value: 'on'
styles:
card:
- background-color: '#a6d8a6'
- value: 'off'
styles:
card:
- background-color: '#d8a6a6'
icon:
- transform: none
- margin: 0px
- color: '#fff'
- justify-self: center
- font-size: 24px
tap_action:
action: toggle
slider:
card:
full_row: true
type: custom:slider-entity-row
entity: light.living_room_lights
name: Living Room
entity: light.living_room_lights
icon: mdi:sofa
show_icon: true
