Hue-Like Light Card for Home Assistant

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

* 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

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

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

Key	Type	Required	Since	Default	Description
`entity`	string	yes*	1.0.0	-	Light entity name (eg. `light.my_light`)
`entities`	list of strings	yes*	1.0.0	-	Multiple Light entity names
`title`	string	no	1.0.0	Lights name	Card title
`icon`	string	no	1.0.0	automatic icon	Card icon
`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.)
`offClickAction`	Click Action	no	1.1.0	`default`	Action when tile is clicked and all lights are off
`offClickData`	Click Action Data	no	1.1.0	-	Data for `offClickAction`
`onClickAction`	Click Action	no	1.1.0	`default`	Action when tile is clicked and any of lights is on
`onClickData`	Click Action Data	no	1.1.0	-	Data for `onClickAction`
`scenes`	list of Scenes	no	1.1.0	automatic detection	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	1.0.0	`false`	If turned on, 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.
`resources`	Resources object	no	1.1.0	-	Can change (localize) texts on this card
* At least one of this two must be filled in

Automatic Icon

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

Text template

Since version 1.2.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

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

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

Color

The color can be defined in following ways:

HEX: '#fff', '#ffffff'
RGB: 'rgb(255,255,255)'
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 action

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

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

Simple example to toggle lights on click.

Possible actions

Key	Possible data*	Data required	Since	Action on click
`default`	yes	no	1.1.0	automatic action
`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

Automatic click action

Automatic action is detected based on this diagram.

               ┌─────────────────┐
               │Is any light lit?├────────────┐
               └───────┬─────────┘            │
                       │NO                    │YES
                       ▼                      ▼
           YES┌──────────────────┐   ┌─────────────────┐YES
 more-info◄───┤Is only one light?│   │Are there scenes?├───►hue-screen
              └────────┬─────────┘   └────────┬────────┘
                       │NO                    │NO
                       ▼                      ▼
           YES┌─────────────────┐   ┌──────────────────┐YES
hue-screen◄───┤Are there scenes?│   │Is only one light?├───►more-info
              └────────┬────────┘   └─────────┬────────┘
                       │NO                    │NO
                       ▼                      ▼
                   turn-on                turn-off

Will be changed in the future.

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 name (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	`'lightslategray'`	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.

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.

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, and in the future set light colors (same functionality as Hue App).

Resources object

Using the configuration option resources, you can change all static texts used in this component.

Texts to change

Key	Since	Default	Description
`scenes`	1.1.0	Scenes	Title of Scene picker in Hue Screen

Example of configuration

type: custom:hue-like-light-card
...
resources:
  scenes: My scenes

Examples of configuration

Multiple lights

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

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

No toggle switch

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

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
disableOffShadow: true
hueBorders: false

Custom theme

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

Turnable with slider

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

Non-RGB Light

type: custom:hue-like-light-card
title: Living room
entity: light.livingroom_light
defaultColor: 'rgb(230,230,255)'

Coming soon features

color picker in Hue Screen
reactions on sliding event instead of on change (value will be changed in the moment of sliding, not after)
faster reactions between multiple cards (instant change of value on other cards)
subtext under the main text (how many lights are on, ...)
ui editor?

Name		Name	Last commit message	Last commit date
Latest commit History 81 Commits
.github/workflows		.github/workflows
doc		doc
src		src
tests		tests
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
hacs.json		hacs.json
jest.config.js		jest.config.js
lovelace-hue-like-light-card.code-workspace		lovelace-hue-like-light-card.code-workspace
package.json		package.json
rollup.config.js		rollup.config.js
todo.txt		todo.txt
tsconfig.json		tsconfig.json

License

cas112358/lovelace-hue-like-light-card

Folders and files

Latest commit

History

Repository files navigation