Skip to content

This card provides a Hue-like way to control your lights in Home Assistant.

License

Notifications You must be signed in to change notification settings

Gh61/lovelace-hue-like-light-card

Repository files navigation

hacs_badge Tests Donate Downloads

Hue-Like Light Card for Home Assistant

This dashboard card is providing light control. It is inspired by original Philips Hue app.

Screen1 Hue-Screen2 Hue-Screen-Detail1

* intensity of color, shadow and other UI properties may be subject of change

Basic configuration

type: custom:hue-like-light-card
entity: light.livingroom_color

Where livingroom_color is the entity id of some existing light.

For more options see Configuration or let yourself inspire in Examples of configuration

Hue icons

For the best experience use with hass-hue-icons. You can then use icons you are used to (from Philips Hue app).

Also this card will detect these icons installed and will use them prior to HA icons on some places (eg. brightness icon).

Installation

HACS

  • Open HACS
  • Go to "Frontend" section
  • Click button with "+" icon
  • Search for "Hue-Like Light Card"
  • Install repository in HACS
  • Refresh your browser

Manual

  • Download hue-like-light-card.js file from the latest release
  • Save downloaded file somewhere in <ha config>/www/ directory, e.g. /config/www/custom_lovelace/hue-like-light-card.js
  • Add saved file to Lovelace resources
    url: /local/custom_lovelace/hue-like-light-card.js
    type: module
  • Restart HA if you had to create www directory
  • Refresh your browser

Configuration

This table may contain not yet released options.âť—âť—âť—
Some of these options may not be in the latest version. Please always check the Since column.

Key Type Required Since Default Description
entity string yes* 1.0.0 - Light entity ID (eg. light.my_light)
entities list of strings yes* 1.0.0 - Multiple Light entity IDs
area string yes* 1.6.0 - Name or ID of Area with lights
(eg. Living room or living_room)
label string yes* 1.7.0 - Name or ID of Label with lights
(eg. Kitchen - desk or kitchen_desk)
groupEntity string no 1.6.0 - Light entity ID that represents the group of light entities (eg. light.my_light_group). Some platforms (like hue) will provide an entity representing the room, in addition to the individual light entities (might be disabled by default). This can be defined to toggle the lights all at once, rather than successively.
title Text Template no 1.0.0 Lights name Card title
description Text Template OR false no 1.5.0 automatic description Description under the cards title. Placeholder %s can be used for showing number of lit lights. (eg. 'Is on: %s')
If set to false, description will not show.
icon string no 1.0.0 automatic icon Card icon
iconSize Icon size no 1.4.2 original Card icon size
showSwitch boolean no 1.2.1 true When set to false, toggle switch will not be visible on card. This will give more space for title.
(You can then use offClickAction and onClickAction to turn the lights on/off.)
switchOnScene string no 1.6.0 - Scene entity ID (eg. scene.office_bright).
If set, this scene will be activated when switch changes from OFF to ON (instead of just runing all lights on).
slider Slider type no 1.5.0 default You can choose between diferent sliders or hide the slider.
scenes list of Scenes no 1.1.0 automatic detection Scenes shown in Hue screen
sceneOrder Scene Order no 1.5.0 default Order of automatically detected scenes shown in Hue screen
allowZero boolean no 1.0.0 false If turned on, the slider can be moved to and from value 0.
(turning off/on the the lights)
defaultColor Color no 1.0.0 'warm' If selected light (or lights) doesn't have RGB mode,
this value is used as color when the light is on.
offColor ColorExtended no 1.0.0 '#666'
('#363636' for Hue Screen)
The color of the pane, when all lights are off. When set, also used in Hue Screen header (recommended setting also hueScreenBgColor accordingly).
hueScreenBgColor ColorExtended no 1.1.0 '#171717' Background color of Hue Screen
theme Installed theme name no 1.2.1 Global HA theme Will use specific theme for this single card. Other than the current selected globally in Home Assistant.
disableOffShadow boolean no removed in 1.6.0 false If turned on, the card will not have inner shadow, when all lights are off.
offShadow boolean no 1.3.0 true If turned off, the card will not have inner shadow, when all lights are off.
hueBorders boolean no 1.0.0 true If turned off, the card will take border settings from current Home Assistant theme.
apiId string no 1.7.0 - Identifier of the card for the API interface.
isVisible boolean no 1.7.0 true If turned off, the card will be hidden. (Use this if you only want the API functions.)
resources Resources object no removed in 1.5.0 - Can change (localize) texts on this card
Replaced with integrated localization.
style no 1.4.0 - Support for the card-mod.
card_mod no 1.4.0 - Support for the card-mod.
* At least one of these options must be filled in. Only entities of light domain and/or areas and labels with light domain entities are supported.

Click & Hold configuration

Key Type Required Since Default Description
offClickAction Action no 1.1.0 hue-screen Action when tile is clicked and all lights are off
offClickData Action Data no 1.1.0 - Data for offClickAction
onClickAction Action no 1.1.0 hue-screen Action when tile is clicked and any of lights is on
onClickData Action Data no 1.1.0 - Data for onClickAction
offHoldAction Action no 1.6.0 more-info Action when tile is pressed and all lights are off
offHoldData Action Data no 1.6.0 - Data for offHoldAction
onHoldAction Action no 1.6.0 more-info Action when tile is pressed and any of lights is on
onHoldData Action Data no 1.6.0 - Data for onHoldAction

Automatic Icon

  • If label option is set and given label has icon, the icon is taken from label.
  • If the card has one light entity attached, the icon is taken from entity.
    • If the entity has no icon, mdi:lightbulb (lightbulb) is used.
  • If the card has two lights mdi:lightbulb-multiple (lightbulb-multiple) is used.
  • If the card has three or more lights attached, mdi:lightbulb-group (lightbulb-group) is used.

When hass-hue-icons is installed (Since version 1.4.1):

  • If the card has one light entity attached, the icon is taken from entity.
    • If the entity has no icon, hue:bulb-classic (bulb-classic) is used.
  • If the card has two lights hue:bulb-group-classic (bulb-group-classic) is used.
  • If the card has three lights attached, hue:bulb-group-classic-3 (bulb-group-classic-3) is used.
  • If the card has four or more lights attached, hue:bulb-group-classic-4 (bulb-group-classic-4) is used.

Automatic description

Since version 1.5.0

Based on number of lit lights in group, one of the 4 localized text is used (priority from top):

  • 0 lights on
  • ALL lights on
  • 1 light on
  • X/Y lights on

Icon size

Since version 1.4.2

You can set size of the icon on hue card. Possibilities are:

  • big - default icon size for versions <= 1.4.1 [value: 2.0]
  • original - default icon size [value: 1.41666667]
  • small - [value: 1.0]
  • any size you want (as number), examples:
    • 0.5 = 12px
    • 1.0 = 24px
    • 1.5 = 36px
    • 2.0 = 48px
    • ... you got it

Slider Type

Since version 1.5.0

You can set slider to on of following options:

  • default - will use default slider
  • none - will hide the slider entirely (same state, as if the light does not have brightness control)
  • mushroom - will use Mushroom slider.

Mushroom slider

Mushroom must be installed for this option to work.

Mushroom usage

You can customize properties of mushroom slider using Card mod:

Mushroom customization

type: custom:hue-like-light-card-test
entity: light.office
slider: mushroom
theme: synthwave
style: |
  .brightness-slider {
    --mush-control-height: 42px;
    --slider-color: white;
  }

Text template

Since version 1.2.0
Localized since 1.4.0

The text supports showing entity states and attributes using double curly {{ brackets }}. When you insert entity name inside these brackets, entity status will be resolved and shown on given place. You can also show attribute on this entity.

Simple state

type: custom:hue-like-light-card
title: TV - {{ light.tv_backlight }}
entity: light.tv_backlight

Template usage

Attribute ussage

type: custom:hue-like-light-card
title: Kitchen - desk ({{ light.kitchen_desk1.brightness }}, {{light.kitchen_desk2.brightness}})
icon: mdi:wall-sconce-flat
offColor: '#363636'
entities:
  - light.kitchen_desk1
  - light.kitchen_desk2

Template attribute usage

When attribute is not available (or is empty) on entity, state of the entity will be shown instead.

Usage in description:

Since version 1.5.0

type: custom:hue-like-light-card
title: Kitchen - desk 
description: 'Lights on: %s ({{ light.kitchen_desk1.brightness }}, {{light.kitchen_desk2.brightness}})'
icon: mdi:wall-sconce-flat
offColor: '#363636'
entities:
  - light.kitchen_desk1
  - light.kitchen_desk2

Template usage in description

Color

The color can be defined in following ways:

  • HEX: '#fff', '#ffffff'
  • HEX (with alpha): '#fffa', '#ffffffaa' (since version 1.4.0)
  • RGB: 'rgb(255,255,255)'
  • RGBA: 'rgba(255,255,255,0.9)' (since version 1.4.0)
  • WEB name: 'red','salmon','DarkSeaGreen', etc.
  • predefined: 'warm' or 'cold' (in places where it does make sense)

ColorExtended

Since version 1.2.0

Same as Color and can also be defined as

  • theme-color
This will pick the color from currently used Home Assistant theme.

Click (hold) action

When the card is clicked or pressed, something can happen. This can be configured through configuration.

type: custom:hue-like-light-card
...
offClickAction: turn-on
onClickAction: turn-off
offHoldAction: hue-screen
onHoldAction: hue-screen

Simple example to toggle lights on click.

Possible actions

Key Possible data* Data required Since What is happening
default yes no 1.1.0 Click: hue-screen
Hold: more-info
none no no 1.1.0 nothing
turn-on no no 1.1.0 turn on all lights
turn-off no no 1.1.0 turn off all lights
more-info yes (entity) no 1.1.0 Shows system more-info dialog of one light.
If any light is on, the first lit light will be selected.
If all light are off, first light will be selected.
When action data are used, any entity can be selected.
scene yes (scene) yes 1.1.0 activate selected scene
hue-screen no
(is using general scenes config)
no 1.1.0 show Hue Screen

Action data

Some actions can be configured using action data. Action data parameter can have name (as defined in table above) but it is not mandatory. Both styles are possible.

Action data without name:

type: custom:hue-like-light-card
...
onClickAction: more-info
onClickData: media_player.television

Action data with name:

type: custom:hue-like-light-card
...
offClickAction: scene
offClickData:
  scene: scene.tv_citron

API interface

Since version 1.7.0

You can enable the API functions of certain card by passing the apiId identifier in the settings. The identifier can be any string you want (although there could be issues with special characters).

type: custom:hue-like-light-card
...
apiId: room1

If you only want to use the API (dialog) from another cards, you can hide this card using isVisible: false setting.

Javascript usage

When any card on the dashboard has apiId filled in, global object named hue_card will be available on window object.
Api-object
There will be API functions for every card, that has apiId defined. Functions are named {apiId}_functionName.

Available functions

Name Since Description
{apiId}_openHueScreen 1.7.0 Will open Hue Screen of the identified card

URL usage

The API functions can be called by setting the hash part of the current URL. The URL must be in this format:

{anything}#hue_card:{apiId}_{functionName}

For example:

https://10.0.0.1:8123/lovelace/lights#hue_card:room1_openHueScreen

When the URL is correctly set, the API will make the call (in this example to hue_card.room1_openHueScreen() which will open the hue screen). The URL will be then set back to non-hash version (eg. https://10.0.0.1:8123/lovelace/lights).

This is achieved by monitoring the hash part of the current URL and checking for #hue_card: prefix.

This way you can create link, leading to certain lovelace dashboard page and instantly opening Hue Screen for one of your hue-cards. You can also create navigate action from other card. The click will then result in opening the Hue Screen:

type: custom:mushroom-light-card
entity: light.living_room
tap_action:
  action: navigate
  navigation_path: '#hue_card:room1_openHueScreen'

Scenes configuration

To enable switching between scenes, you can configure scenes, that can be activated in Hue Screen.
When no scenes are defined, scenes will be detected automatically.

Scene parameters

Key Type Required Since Default Description
entity string yes 1.1.0 - Scene entity ID (eg. scene.tv_orange)
title string no 1.1.0 Scene name* Text on scene-button
icon string no 1.1.0 Icon of scene or 'mdi:palette' Icon on scene-button
color Color no 1.1.0 'darkgoldenrod' Accent color current scene (shown on scene-button)
activation Service name no 1.2.0 'scene.turn_on' Service called when scene is activated
activationData object no 1.2.0 - Data for activation service.**
* If the scene name begins with the same text as the card title is, this text is removed.
** Data always have entity_id parameter filled with entity name. You can change this value, when another value is supplied with this name.

Example of scenes configuration

type: custom:hue-like-light-card
...
scenes:
  - scene.colors_bluered            # if only entity is used, it can be written directly
  - entity: scene.colors_cyan
    title: My really favorite scene
    color: cyan
  - entity: scene.colors_blue_xmass
    icon: mdi:tree-outline
  - entity: scene.colors_white
    color: white
    icon: ''                        # when you don't want the icon, you can set it to empty string

For the best experience, please fill in both icon and color for all scenes.

Since version 1.6.0

Hue screen will load entity_picture from entity itself.
You can set custom image as entity_picture using the customize_glob option in HA configuration.
As an inspiration look at this project containing OG hue icons and default config for english scene names.

Scenes detection

Automatic scene detection will take place when no scenes are configured.

Scenes are detected from areas where lights are placed.
All scenes from all areas, where configured lights are placed, are taken (duplicates are removed).

Example:

entities:
- light.kitchen_main => 'Kitchen' (area) => ['scene.kitchen_lit', 'scene.sink_lit']
- light.kitchen_corner => 'Kitchen' (area) => ['scene.kitchen_lit', 'scene.sink_lit']
- light.room1 => 'Living room' (area) => ['scene.daylight', 'scene.nighttime', 'scene.reduced']
Scenes Detected: ['scene.kitchen_lit', 'scene.sink_lit', 'scene.daylight', 'scene.nighttime', 'scene.reduced']

Icon of detected scenes is taken from your Home Assistant settings. You can change the icon in entity settings.

Color of scene cannot be detected automatically, for the best experience fill scenes and respective colors manually.

Scene Order

Since version 1.5.0

Automatically detected scenes can be ordered with sceneOrder option. Possible values are:

  • default
    • order of areas depends on order of (first area) light entities.
    • scenes inside areas have default order from Home assistant (alphabetically by scene id).
  • name-asc
    • all scenes (across all areas) are ordered alphabetically by name a -> z
  • name-desc
    • all scenes (across all areas) are ordered alphabetically by name z -> a

This order is not applied, when scenes are configured manually.

Note, that scenes are listed in two rows populated like this:

| 1 | 3 | 5 |
---------------------
| 2 | 4 | ...

Custom activation example (Hue dynamic scene)

type: custom:hue-like-light-card
...
scenes:
  ...
  - entity: scene.colors_tokio
    color: rgb(168, 25, 255)
    icon: mdi:home-city
    title: Tokio (dynamic)
    activation: hue.activate_scene
    activationData:
      dynamic: true
      brightness: 180
      speed: 40

Hue Screen

Hue screen will allow you to activate scenes, set light colors, temp and brightness (same functionality as official Hue App). Function of effects activation will come in the future.

Hue-Screen Hue-Screen2 Hue-Screen-Detail Hue-Screen-Detail1

Examples of configuration

Area

Screen10

type: custom:hue-like-light-card
area: Living room
icon: mdi:sofa
offColor: '#363636'

Multiple lights

Screen2

type: custom:hue-like-light-card
title: TV colors
entities:
  - light.tvlight_color1
  - light.tvlight_color2
  - light.tvlight_color3
  - light.tvlight_color4

Custom title and icon

Screen3

type: custom:hue-like-light-card
entity: light.livingroom_lamp
title: Reading light
icon: mdi:floor-lamp

No toggle switch

Screen7

type: custom:hue-like-light-card-test
title: '[ TV - {{ light.tv_backlight }} ] No switch = more space for title'
entity: light.tv_backlight
icon: mdi:television
showSwitch: false
offClickAction: turn-on
onClickAction: turn-off
offColor: rgb(28,28,28)

Home Assistant-like

Screen4

type: custom:hue-like-light-card
title: TV colors
entities:
  - light.tvlight_color1
  - light.tvlight_color2
  - light.tvlight_color3
  - light.tvlight_color4
offColor: theme-color
hueScreenBgColor: theme-color
offShadow: false
hueBorders: false

Turnable with slider

Screen5

type: custom:hue-like-light-card
title: Living room
entity: light.livingroom_light
allowZero: true

Custom theme

Screen8

type: custom:hue-like-light-card-test
title: Living room
icon: mdi:sofa
offColor: theme-color
hueScreenBgColor: theme-color
offShadow: false
hueBorders: false
allowZero: true
entities:
  - light.livingroom_light
  - light.livingroom_color
theme: synthwave

Non-RGB Light

Screen6

type: custom:hue-like-light-card
title: Bathroom
iconSize: big
entity: light.bathroom
defaultColor: 'rgb(230,230,255)'

No description

Screen9

type: custom:hue-like-light-card
entity: light.office
description: false

Coming soon features

  • reactions on sliding event instead of on change (value will be changed in the moment of sliding, not after)
  • ui editor?