💡 Lovelace: RGB light card

SeLLeRoNe · October 26, 2019, 1:26pm

I still believe it’s better if you paste the code with your indentation
It’s quite odd, because as far as I know you can use the same condition multiple time, that’s why I think you have the second condition inside the first (due to indentation), or something like that

danbutter · October 26, 2019, 2:23pm

          - type: conditional
            conditions:
              - entity: light.studio_andrea_light
                state: "off"
            card:
              type: entities
              show_header_toggle: false
              entities:
                - type: 'custom:slider-entity-row'
                  entity: light.studio_andrea_light
                  name: Wall Light
                  toggle: true
          - type: conditional
            conditions:
              - entity: light.studio_andrea_light
                state: "on"
            card:
              type: entities
              toggle: false
              entities:
                - type: 'custom:slider-entity-row'
                  entity: light.studio_andrea_light
                  name: Wall Light
                  toggle: true
                - type: 'custom:rgb-light-card'
                  entity: light.studio_andrea_light
                  colors:
                    - rgb_color:
                      - 255
                      - 255
                      - 255
#                      brightness: 255
                      icon_color: '#FFFFFF'
                    - rgb_color:
                      - 51
                      - 102
                      - 204
#                      brightness: 255
                      icon_color: '#3366CC'
                    - rgb_color:
                      - 51
                      - 204
                      - 51
#                      brightness: 255
                      icon_color: '#33CC33'
                    - rgb_color:
                      - 255
                      - 0
                      - 255
#                      brightness: 255
                      icon_color: '#FF00FF'

What happens is that since there are 10 spaces before the first - on the first line is says Cannot read property ‘setConfig’ of undefined as seen here:

Ok so I tried to go through it again just for a screenshot and it didn’t give me the duplicate error. Maybe I deleted the - in front of conditional last time.
Either way now it just keeps the error in the above screenshot.

SeLLeRoNe · October 26, 2019, 4:24pm

It might be that you don’t have the same light as I do, I can still see in your code light.studio_andrea_light

That needs to be your entity name for the light, if the entity doesn’t exists might be the reason why it returns you an error.

danbutter · October 26, 2019, 4:36pm

I very seriously doubt that’s it.
Usually it will just show an entity not available like the following when I copied VGE’s code in the same way:

Do you use the editor for lovelace or are you all yaml?
I’m not a programmer and I’m terrible at the spacing requirements.
That’s why I get stuck in situations like these.

Thanks for trying to help!

SeLLeRoNe · October 26, 2019, 4:41pm

I use YAML.

But keep in mind, that if you put a condition on an entity that doesn’t exists the whole conditon might return an error, so I would put instead of my entity one of yours, just to give it a try

danbutter · October 26, 2019, 5:38pm

Well I tried. I did a find and replace with the entity I’m trying to use and same thing.
I didn’t capture it in the screenshot above, but it actually says “no card type found” in the red section on the right. Strange.
I’m sure it is something simple, but I just can’t find it for now.

Thanks again for trying.

SeLLeRoNe · October 26, 2019, 5:46pm

Have you installed the slider-entity-row and the rgb-light cards?

bokub · October 26, 2019, 5:49pm

Did you forget the type parameter?

danbutter · October 26, 2019, 5:55pm

Yes and yes.
In fact I can get both to work in the same card. I can even get one conditional to work, but when I get to the second one it just complains about the duplicate.

danbutter · October 26, 2019, 5:59pm

Do you mean for the card?
Like: - type: 'custom:rgb-light-card'
it is in there.

Here is the last one I did with my own entity and trying to conform to the editor:

- type: conditional
  conditions:
    - entity: light.hue_color_light_1
      state: "off"
  card:
    type: entities
    show_header_toggle: false
    entities:
      - type: 'custom:slider-entity-row'
        entity: light.hue_color_light_1
        name: Wall Light
        toggle: true
- type: conditional
  conditions:
    - entity: light.hue_color_light_1
      state: "on"
  card:
    type: entities
    toggle: false
    entities:
      - type: 'custom:slider-entity-row'
        entity: light.hue_color_light_1
        name: Wall Light
        toggle: true
      - type: 'custom:rgb-light-card'
        entity: light.hue_color_light_1
        colors:
          - rgb_color:
            - 255
            - 255
            - 255
            brightness: 255
            icon_color: '#FFFFFF'
          - rgb_color:
            - 51
            - 102
            - 204
            brightness: 255
            icon_color: '#3366CC'
          - rgb_color:
            - 51
            - 204
            - 51
            brightness: 255
            icon_color: '#33CC33'
          - rgb_color:
            - 255
            - 0
            - 255
            brightness: 255
            icon_color: '#FF00FF'

It is just a copy of the above with my entity replaced and slid to the left about 10 characters.

SeLLeRoNe · October 26, 2019, 7:12pm

Did you use the “tab” key to create the space?

Holdestmade · October 26, 2019, 7:13pm

Does it work if you add these 2 lines to the top:

type: vertical-stack
cards:
  - type: conditional
  conditions:
      - entity: light.hue_color_light_1
      state: "off"
  card:
      type: entities
      show_header_toggle: false
      entities:
      - type: 'custom:slider-entity-row'
          entity: light.hue_color_light_1
          name: Wall Light
          toggle: true
  - type: conditional
  conditions:
      - entity: light.hue_color_light_1
      state: "on"
  card:
      type: entities
      toggle: false
      entities:
      - type: 'custom:slider-entity-row'
          entity: light.hue_color_light_1
          name: Wall Light
          toggle: true
      - type: 'custom:rgb-light-card'
          entity: light.hue_color_light_1
          colors:
          - rgb_color:
              - 255
              - 255
              - 255
              brightness: 255
              icon_color: '#FFFFFF'
          - rgb_color:
              - 51
              - 102
              - 204
              brightness: 255
              icon_color: '#3366CC'
          - rgb_color:
              - 51
              - 204
              - 51
              brightness: 255
              icon_color: '#33CC33'
          - rgb_color:
              - 255
              - 0
              - 255
              brightness: 255
              icon_color: '#FF00FF'

SeLLeRoNe · October 26, 2019, 7:15pm

Just make sure to mantain your code as you have because the one above look not correctly “alligned”

SeLLeRoNe · October 26, 2019, 7:16pm

More like this:

type: vertical-stack
cards:
  - type: conditional
    conditions:
      - entity: light.hue_color_light_1
        state: "off"
    card:
      type: entities
      show_header_toggle: false
      entities:
        - type: 'custom:slider-entity-row'
          entity: light.hue_color_light_1
          name: Wall Light
          toggle: true
  - type: conditional
    conditions:
      - entity: light.hue_color_light_1
        state: "on"
    card:
      type: entities
      toggle: false
      entities:
        - type: 'custom:slider-entity-row'
          entity: light.hue_color_light_1
          name: Wall Light
          toggle: true
        - type: 'custom:rgb-light-card'
          entity: light.hue_color_light_1
          colors:
            - rgb_color:
              - 255
              - 255
              - 255
              brightness: 255
              icon_color: '#FFFFFF'
            - rgb_color:
              - 51
              - 102
              - 204
              brightness: 255
              icon_color: '#3366CC'
            - rgb_color:
              - 51
              - 204
              - 51
              brightness: 255
              icon_color: '#33CC33'
            - rgb_color:
              - 255
              - 0
              - 255
              brightness: 255
              icon_color: '#FF00FF'

Holdestmade · October 26, 2019, 7:18pm

Yes, copy pasting messed that up

danbutter · October 26, 2019, 7:48pm

Okay I copied it before the last couple of posts and did mess with it to get spacing better and now it works!

Thanks to all who helped!

This is what I ended up with working in case anyone else ever has this issue:

type: vertical-stack
cards:
  - type: conditional
    conditions:
      - entity: light.hue_color_light_1
        state: 'off'
    card:
      type: entities
      show_header_toggle: false
      entities:
        - type: 'custom:slider-entity-row'
          entity: light.hue_color_light_1
          name: Wall Light
          toggle: true
  - type: conditional
    conditions:
      - entity: light.hue_color_light_1
        state: 'on'
    card:
      type: entities
      toggle: false
      entities:
        - type: 'custom:slider-entity-row'
          entity: light.hue_color_light_1
          name: Wall Light
          toggle: true
        - type: 'custom:rgb-light-card'
          entity: light.hue_color_light_1
          colors:
            - rgb_color:
                - 255
                - 255
                - 255
              brightness: 255
              icon_color: '#FFFFFF'
            - rgb_color:
                - 51
                - 102
                - 204
              brightness: 255
              icon_color: '#3366CC'
            - rgb_color:
                - 51
                - 204
                - 51
              brightness: 255
              icon_color: '#33CC33'
            - rgb_color:
                - 255
                - 0
                - 255
              brightness: 255
              icon_color: '#FF00FF'

VGE · October 27, 2019, 2:21pm

@bokub Size works like a charm. I find 30 to be perfect for mobile use.

Konrad_Lindblad · October 28, 2019, 7:40pm

Is it possible to add “white_value” to a preset color? I have an RGBW light, so RGB + white_value (0-255).

bokub · October 30, 2019, 3:27pm

As said in the documentation, this card supports all the options of the light.turn_on service, because the card actually calls the light.turn_on service.

Therefore, white_value is supported

kslb · November 6, 2019, 9:03am

How would look configuration for only “white” LED stripe.
For RGB all is working fine, but my goal is also to make some “dimming” preset, so that you would only set brightness value, and night mode.