dklemm/rgb-light-card

💡 A Lovelace custom card for RGB lights

RGB Light Card

A Lovelace custom card for RGB lights

Installation

You can either install this card through HACS, or follow these simple steps:

1. Open the Raw Config Editor

(Click to expand)

1. Go to your Lovelace view

2. Click on the three dots menu (top-right) and click on Configure UI.

3. Click in the three dots menu again and click on Raw config editor.

2. Add the rgb-light-card to the resources

Add the following resource to your Lovelace configuration (typically at the top) :

resources:
    - url: https://cdn.jsdelivr.net/npm/rgb-light-card
      type: js

Updating

The RGB Light Card will auto-update automatically a few days after every new release (once your browser cache expires)

However, you can enforce a specific version by adding @X.X.X at the end of the URL (e.g: - url: [email protected])

Configuration

The rbg-light-card is meant to be included in the Lovelace Entities Card

Example configuration:

type: entities
entities:
    # Displays the light entity. It's optional
    - entity: light.example_light

    # Card configuration starts here
    - type: 'custom:rgb-light-card'
      entity: light.example_light
      colors:
          # Any option of the light.turn_on service can be used in each color
          - rgb_color:
                - 255
                - 127
                - 255
            brightness: 220
            transition: 1
          - hs_color:
                - 60
                - 30
            icon_color: '#fff8b0' # Override icon color

Options

Name	Type	Requirement	Default	Description
type	string	Required		custom:rgb-light-card
entity	string	Optional		Light entity to control. If not set here, entity_id must be set in each color
colors	array	Required		Colors to display. Check out color options below
justify	string	Optional	left	How to distribute free space between icons. Possible values are left,right,center,between and around. Check out examples below
size	number	Optional	32	Diameter of the icons, in pixels

Colors options

Name	Type	Requirement	Default	Description
rgb_color, hs_color, brightness, transition etc...	any	Optional		When you click on a color, it will call the service light.turn_on with all the options you put here as service data Click here for the full list of options
icon_color	string	Optional		Override icon color. Check out examples below
type	string	Optional	light	Can be set to light, script or scene to change the click action. Read the explanation just below
entity_id	string	Optional		Override the entity option for this specific color

Calling scripts and scenes

By default, clicking an icon calls the service light.turn_on with the defined options, but you can also call a script or a scene instead. That's what the type option is made for.

Scripts and scenes are good ways to set multiple lights at once, as well as other entities

Example configuration:

type: entities
entities:
    - type: 'custom:rgb-light-card'
      colors:
          # First icon calls a script
          - type: script
            entity_id: script.night_mode
            icon_color: 'linear-gradient(#777777, #151515)'
          # Second icon calls a scene
          - type: scene
            entity_id: scene.romantic
            icon_color: 'linear-gradient(25deg, #ba71ff, #ff53b9)'

As you can see, an entity_id must be set for each script or scene

The icon_color is still optional, but will be grey by default

Note that you can mix lights, scripts and scenes in the same card

Examples

Icon color

The icon_color option accepts the same values as the CSS background property.

This means your icon_color can be:

• A HTML color name:   icon_color: gold
• A hexadecimal code:   icon_color: '#FBB48C'
• Any other color compatible with background-color:   icon_color: rgba(42, 204, 77, 0.5)
• A color gradient:   icon_color: 'linear-gradient(15deg, #0250c5, #d43f8d)'
• Or even an image:   icon_color: center/120% url('https://www.home-assistant.io/images/favicon-192x192.png')

The 5 examples above will render like this:

⚠️ You must wrap your value between quotes if it contains the # character

Justify

There are 5 possible values for the justify option: left,right,center,between and around. The default value is left.

Here are how the different values are handled:

License

MIT © Boris K