color-lite-card

Custom card for Home Assistant with color and dimming support. Config and Image Editing Tutorial

Youtube: demo video

This is a simple custom card for Home Assistant that adds easy support for lights, showing color and dimming in a picture elements card.

This card supports both regular white dimmable bulbs, and color bulbs.

Requirements: The referenced light entity must support the 'brightness' attribute for dimming to work, and it must support the 'color_temp_kelvin', 'hs_color' and 'rgb_color' attributes for color to work.

The card currently only works on browsers that support the css filter element. Should be easy for you to add webkit support if you need that.

---

entity

(string)(Required)

Entity id

 

image

(string)(Required)

Path to light image

 

color_image

(string)(Optional)

Path to color image for those bulbs which support color. Hue rotation is based on a red image, so this should be a saturated red image. see tutorial

If the bulb is a color bulb, and needs color effects, but no separate color image is specified, the card will attempt to use the regular light image. Results on this may vary depending on the original image.

---

Example Dimmable Light Usage

      - type: custom:color-lite-card
        entity: light.my_lamp
        tap_action:
          action: none    
        image:
          /local/floorplan/lamp.png                         
        style:
          top: 50%
          left: 50%
          width: 100% 

Example Color Light Usage

      - type: custom:color-lite-card
        entity: light.my_color_lamp
        tap_action:
          action: none    
        image:
          /local/floorplan/CLamp.png   
        color_image:
          /local/floorplan/CLamp-Color.png                         
        style:
          top: 50%
          left: 50%
          width: 100% 

Installation

Installation is the same as any custom card.

1. Copy the file color-lite-card.js to your /config/www/js/ directory

2. Add the following to the resources area of your ui-lovelace.yaml (or add to resources on the lovelace dashboard)

        - url: /local/js/color-lite-card.js
          type: module