💡 Lovelace: RGB light card

I’m aware of that - waiting for delivery of NodeMcu CH340 and NRF24L01+ :slight_smile:

However have one more question… It is possible to change only lights color without turning them on? For example I have group of 3 lights, but only one is on. When I change color, all the lights turn on. But I only want to change the color of the light which is on…Maybe I should create some fake light entity and use it as a rgb colors source?

No, only for lights that are on.

I also use a fake light to change lights properties only for the ones that are on. Basically, the topic update includes only delta commands (ie. single commands like change state from on to off, change RGB, change color_temp, etc, not two commands). By forwarding update topic from fake light to the command topic of the real light we can filter out change state commands and only keep light properties commands.

As a result of the following commands, even if the three lights are from the same group and you send the command to group 0 (which comprise all three of them) only the one that is on will react.

We can start another topic in order not to pollute this one.

- alias: sync light properties
  initial_state: true
  trigger:
    - platform: mqtt
      topic: "milight_gw/update/0xD/rgb_cct/1" # update topic with the ID of the fake light
  condition:
    condition: and
    conditions:
      - condition: template
        value_template: '{{ "state" not in trigger.payload }}'  
  action:
    - service: mqtt.publish
      data_template:
        topic: "milight_gw/0x1/rgb_cct/1" # command topic with the ID of the real light
        payload_template: >
          {{ trigger.payload}}

How did you create a fake/virtual light? I’m struggling to create a light template which could be controlled by rgb-light-card.

If it would be possible to create such light, controlling other lights (e.g .only enabled) will not be a problem since I’m using node-red for automations.

The process is the same for both real and virtual lights (the ID doesn’t need to be pertaining to a real light). See below one of my lights:

Summary
- platform: mqtt
  schema: json
  name: "Hall"
  state_topic: 'milight_gw/state/0xD/rgb_cct/1'
  command_topic: 'milight_gw/0xD/rgb_cct/1'
  brightness: true
  rgb: true
  color_temp: true
  effect: true
  effect_list:
    - 0
    - 1
    - 2
    - 3
    - 4
    - 5
    - 6
    - 7
    - 8
    - white_mode
    - night_mode
  optimistic: true
  qos: 0
  xy: false
  white_value: true
  hs: true

Any light that is available in HA would work with this card.

I see, it’s quite easy with MiLight HUB to create a fake light. Without one it was impossible for me…
Anyway, with this hub I achieved my goal :slight_smile: Thanks for hints.

What is your yaml card code for this? Would really appreciate it if you could paste it!

This is great work! I use this card and love it. So much easier than trying to hit an exact point on a color wheel every time to make an adhoc color scheme in a room.

1 Like

Thanks, this is awesome
i use mine with a conditional card, so it only shows when the lights are turned on.

- type: conditional
    conditions:
      - entity: light.bedroom_all_lights
        state: 'on'
    card:
      type: entities
      show_header_toggle: false
      title: Bedroom Lights
      entities:
        - entity: light.bedroom_all_lights
          name: Turn On / Off
        - type: 'custom:slider-entity-row'
          entity: light.bedroom_all_lights
          name: Brightness
          hide_state: true
        - type: 'custom:rgb-light-card'
          entity: light.bedroom_all_lights
          colors:
            - color_temp: 195
              brightness: 200
              transition: 1
            - color_temp: 276
              brightness: 200
              transition: 1
            - color_temp: 357
              brightness: 200
              transition: 1
            - color_temp: 405
              brightness: 200
              transition: 1
            - color_temp: 451
              brightness: 200
              transition: 1

image

1 Like

hello, very nice modification. can i have some help on that please? how do i implement it on my setup? i tried the code on a “conditional card” but is not working. thanks

You could even display “on/off” and “brightness” on the same line, and use the hide_when_off option to hide only the icons!

Here is what I use on my dashboard:

Animated screenshot

type: entities
entities:
  - entity: light.example
    type: 'custom:slider-entity-row'
    name: LED
    toggle: true
  - entity: light.example
    type: 'custom:rgb-light-card'
    hide_when_off: true
    justify: left
    colors:
      - brightness: 200
        hs_color:
          - 195
          - 42
        transition: 1
      - brightness: 255
        hs_color:
          - 22
          - 93
        transition: 1
      # - ...
      # - ...
      # - ...
3 Likes

AWESOME! thank you

is your last one a color picker? (the multi colored circle?)

my code now:

type: entities
show_header_toggle: false
entities:
  - entity: light.bedroom_all_lights
    icon: 'mdi:bed'
    type: 'custom:slider-entity-row'
    name: Bedroom Lights
    toggle: true
  - entity: light.bedroom_all_lights
    type: 'custom:rgb-light-card'
    hide_when_off: true
    justify: around
    colors:
      - color_temp: 195
        brightness: 254
        transition: 1
        label: Crisp
      - color_temp: 276
        brightness: 200
        transition: 1
      - color_temp: 357
        brightness: 150
        transition: 1
        label: Cosy
      - color_temp: 405
        brightness: 100
        transition: 1
      - color_temp: 451
        brightness: 50
        transition: 1
        label: Warm

image

1 Like

Weird question maybe : But can i hook up an action when clicking a color? I have a full automated light setup, so if i click a color, it will turn-off within in a minute again. So i would like to switch the “light mode” to “Manual” when someone clicks a color!

Of course, you can configure service and service_data on every icon and call a service or a script of your choice when clicked.

Everything is explained in the documentation, in the “Calling services” section :page_facing_up:

This is EXACTLY what I was looking for
Creating mini dashboards for my kids and this is great for smaller fingers to use.
The hide_when_off option - I dont suppose you could make one for hide_when_unavailable ?
I know there aren’t many use cases for that but I have one, the power of the smart bulb is controlled by power that isnt always on and currently when it the entity is not available it will display the colour options.

is this possible to add?

1 Like

Version 1.8.0 is out! :tada:

If you use the hide_when_off option, icons will now hide if entity is unavailable

Screenshot

@wzwick It should fix your problem

Brilliant thanks - will test this out later in the week.

I had some free time lately, so…version 1.9.0 is out! :tada:

You can now choose the RGB Light Card from the Lovelace card picker.

The card will be pre-configured with one of your lights, and some sample colors !

3 Likes

is there a way to use MDI icons on the buttons??

Yes, I have created a tool to convert material design icons into pure CSS compatible with this card

2 Likes