Controlling WLED Secondary Color

Since most of the effects of WLED involve a secondary color and I couldn’t seem to figure out through the WLED integration how to control I tried and make a way to do and it works. You can use the built in color picker.

Example card using Mushroom:
image

Disclaimer:

  1. There is probably already a great way to do this, but I couldn’t find one by searching
  2. I am still learning Home Assistant so there is probably a way better way to code this than what I did. If you have any suggestions or edits to make it better PLEASE let me know.

The main idea is to create a light template, add that to a card, and each time the color of the light changes send it to WLED through the JSON API. All the the changes are in configuration.yaml. Then you can use the light you created in a light card and change the color in that card.

You will need to enter an IP address of your WLED strip and change a couple entries to your WLED entity

configuration.yaml
# I got these from looking on the forum on how to create a light template. Maybe everything isn't needed, but I basically copied and pasted the different parts
# Creates a boolean that tracks whether the light is on or not 
input_boolean:
  testlighttwo:

# This part creates:
# an entity to track the brightness. This never changes, and I never use it but I think it breaks without it.
# an entity to track the hue
# an entity to track the saturation
input_number:
  testlighttwo_brightness:
    min: 0
    max: 255
    name: "Test Light Color Two Brightness"
  testlighttwo_h:
    min: 0
    max: 360
    name: "Test Light Color Two H"
  testlighttwo_s:
    min: 0
    max: 100
    name: "Test Light Color Two S"

# Creates the light entity. This entity is only used so that I can have a color picker. 
# Whenever the color changes, it runs the service to send the colors to the WLED by its IP address and the JSON API
# Make sure to change the entity_id and the entities in the color_template part if you change anything above

light:
  - platform: template
    lights:
      testlight_colortwo:
        friendly_name: "Test Light Color Two"
        color_template: "({{states('input_number.testlighttwo_h') | int}}, {{states('input_number.testlighttwo_s') | int}})"            
        turn_on:
          service: input_boolean.turn_on
          entity_id: input_boolean.testlighttwo
        turn_off:
          service: input_boolean.turn_off
          entity_id: input_boolean.testlighttwo
        set_level:
          service: input_number.set_value
          data_template:
            value: "{{ brightness }}"
            entity_id: input_number.testlighttwo_brightness
        set_color:
          - service: input_number.set_value
            data:
              value: "{{ h }}"
              entity_id: input_number.testlighttwo_h
          - service: input_number.set_value
            data:
              value: "{{ s }}"
              entity_id: input_number.testlighttwo_s
          - service: light.turn_on
            data_template:
              entity_id:
                - light.wled
          - service: rest_command.wled_send_colors
            data: {}

# This is the command that will send the colors to the WLED everytime the color of the second light changes
# In the payload, the first three state_attr should be your WLED light, and the second 3 are the light you created above

rest_command:
  wled_send_colors:
    url: http://192.168.1.153/json
    method: POST
    headers:
      accept: "application/json, text/html"
    payload: '{"seg":[{"col":[[ {{ state_attr("light.wled", "rgb_color")[0] }}, {{ state_attr("light.wled", "rgb_color")[1] }} , {{ state_attr("light.wled", "rgb_color")[2] }} ],[ {{ state_attr("light.testlight_colortwo", "rgb_color")[0] }}, {{ state_attr("light.testlight_colortwo", "rgb_color")[1] }} , {{ state_attr("light.testlight_colortwo", "rgb_color")[2] }} ]]}]}'
    content_type:  'application/json; charset=utf-8'

You now have a light entity that you can add to a card to choose its color. Whenever the color of the light is changed it will send the colors of your WLED light entity and the colors of this secondary light to the API.

Example card:

Example Card
type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-light-card
    entity: light.wled
    show_brightness_control: true
    show_color_control: false
    use_light_color: true
    layout: horizontal
    name: Sauna LEDs
    show_color_temp_control: false
    fill_container: true
    primary_info: name
    collapsible_controls: true
    icon: mdi:led-strip-variant
  - type: conditional
    conditions:
      - entity: light.wled
        state: 'on'
    card:
      square: false
      columns: 2
      type: grid
      cards:
        - type: custom:mushroom-light-card
          entity: light.wled
          show_color_control: true
          primary_info: none
          secondary_info: none
          icon_type: none
          card_mod:
            style: |
              ha-card {
                border: 0px;
                box-shadow: none;
              }
        - type: custom:mushroom-light-card
          entity: light.testlight_colortwo
          primary_info: none
          secondary_info: none
          icon_type: none
          show_color_control: true
          card_mod:
            style: |
              ha-card {
                border: 0px;
                box-shadow: none;
              }

Good Luck!

4 Likes

Been trying to figure out a way to do this. It’s puzzling why a hack is required to achieve this very common requirement.