e.toLowerCase() is not a function

martydingo commented 1 year ago

Bug report notice

Before you file a bug, make sure that you did not make a configuration mistake. The Swiss Army Knife in its current state does not yet have full configuration sanity checks!

So make sure your problem is not related to that!

[x ] Yes, I'm sure that it is not a configuration mistake

Swiss Army Knife version

  Version 2.4.6

Bug description

When using an attribute of an entity that returns integers via an array, attempting to use this entity via entity_index and entity_indexes results in the error e.toLowerCase() is not a function. This occurs with rgb_color, as well as hs_color and xy_color

swiss-army-knife-card.js:186 Uncaught (in promise) TypeError: e.toLowerCase is not a function
    at set value (swiss-army-knife-card.js:186:10147)
    at set value [as value] (swiss-army-knife-card.js:220:513)
    at swiss-army-knife-card.js:673:2431
    at Array.map (<anonymous>)
    at xe.updateValues (swiss-army-knife-card.js:673:2299)
    at swiss-army-knife-card.js:926:2527
    at Array.map (<anonymous>)
    at set hass [as hass] (swiss-army-knife-card.js:926:2516)
    at o.value (hui-stack-card.ts:63:17)
    at o._$AE (reactive-element.ts:1380:10)

To Reproduce

Steps to reproduce the behavior:

The following YAML code produces this issue.

type: custom:swiss-army-knife-card
aspectratio: 2/2
entities:
- entity: light.living_room_lamp
- entity: light.living_room_lamp
attribute: rgb_color
layout:
toolsets:
- toolset: debug
  position:
    cx: 50
    cy: 50
  tools:
    - type: name
      position:
        cx: 100
        cy: 33
      entity_index: 0
      styles:
        name:
          font-size: 12em
          text-anchor: center
    - type: state
      position:
        cx: 100
        cy: 80
      entity_index: 1
      styles:
        state:
          font-size: 16em

Expected behavior

I expect the state to reflect the array returned. I actually desire to use this via an animation JS, e.g.

            - state: '[[[ return state ]]]'
              styles:
                circle:
                  filter: url(#nm-1-reverse)
                  fill: >-
                    [[[ return
                    `rgb(${state})`
                    ]]]

Desktop browser (please complete the following information):

OS: Windows, Mac
Browser: Firefox, Chrome
Version: Multiple

martydingo commented 1 year ago

Here is an example that works, watching color_temp which returns an integer, not an array.

          - type: custom:swiss-army-knife-card
            aspectratio: 3/3
            entities:
              - entity: light.office_door_spotlight
              - entity: light.office_door_spotlight
                attribute: brightness
                format: brightness
                unit: "%"
              - entity: light.office_door_spotlight
                attribute: color_temp
                format: color_temp

            layout:
              toolsets:
                - toolset: 3_spotlight_triad
                  position:
                    cx: 50
                    cy: 50
                  tools:
                    - type: "circle"
                      entity_index: 2
                      position:
                        cx: 150
                        cy: 100
                        radius: 47
                      styles:
                        circle:
                          stroke: "var(--secondary-background-color)"
                          filter: url(#sak-nm-default)
                      animations:
                        - state: "[[[ return (state); ]]]"
                          styles:
                            circle:
                              filter: url(#nm-1-reverse)
                              fill: >-
                                [[[ return
                                `rgb(${states["light.office_door_spotlight"].attributes.rgb_color})`
                                ]]]
                        - state: "off"
                          styles:
                            circle:
                              filter: url(#sak-nm-default)
                    - type: "circle"
                      entity_index: 0
                      position:
                        cx: 150
                        cy: 100
                        radius: 50
                      styles:
                        circle:
                          stroke: "var(--secondary-background-color)"
                          filter: url(#sak-nm-default)
                      animations:
                        - state: "on"
                          styles:
                            circle:
                              filter: url(#nm-1-reverse)
                              fill: url(#light-power-gradient-radial)
                        - state: "off"
                          styles:
                            circle:
                              filter: url(#sak-nm-default)
                              stroke: "var(--secondary-background-color)"
                      user_actions:
                        tap_action:
                          haptic: light
                          actions:
                            - action: call-service
                              service: light.toggle
                        hold_action:
                          haptic: light
                          actions:
                            - action: more-info

AmoebeLabs commented 1 year ago

The upcoming v2.5.1 converts all states to a string before processing, including attributes. That would automatically fix this bug.

So in your case, the rgb_color attribute will be converted to something like '10,20,30' as the rgb_color attribute is an array of the RGB values. That would be enough for your use case.

However:

This does not work for objects, as these are converted to the string "Object".
It also doesn't work for lights that don't have the rgb_color attribute (all my RGB led strips use xyz mode), so some extra converters to convert some HSL, or xyz color state to RGB would be nice to have in the future.

AmoebeLabs commented 1 year ago

I have some progress 😄

Ikea light with the temperature only: - SAK: - HA:

RGBW light with color: - SAK: - HA:

These three circles use the following entities:

      - entity: light.livingroom_light_cupboard_light
        attribute: hs_color
        convert: rgb_csv
      - entity: light.livingroom_light_cupboard_light
        attribute: hs_color
        convert: rgb_hex
      - entity: light.livingroom_light_duo_right_light
        attribute: color_temp
        convert: rgb_hex

And the tool with rgb_csv formatting:

      - type: circle
        position:
          cx: 50
          cy: 50
          radius: 22.5
        entity_index: 2
        animations:
          - state: '[[[ return state; ]]]'
            styles:
              circle:
                fill: >-
                  [[[ if (typeof (state) === 'undefined') return 'none';
                      return `rgb(${state})`; ]]]

The tool with rgb_hex formatting:

        - type: circle
          position:
            cx: 50
            cy: 90
            radius: 10
          entity_index: 3
          animations:
            - state: '[[[ return state; ]]]'
              styles:
                circle:
                  fill:  >-
                    [[[ if (typeof (state) === 'undefined') return 'none';
                         return state; ]]]

martydingo commented 1 year ago

Fantastic!

This does not work for objects, as these are converted to the string "Object".

Using JSON.stringify() and JSON.parse() might workaround in these cases, or I can create something using Object.keys(). :)

AmoebeLabs commented 1 year ago

Fantastic!

This does not work for objects, as these are converted to the string "Object".

Using JSON.stringify() and JSON.parse() might be a workaround in these cases, or I can create something using Object.keys(). :)

So far, even without JSON.*, the hs_color attribute which should be implemented by most color_mode variations seems to work. My led strip has a color mode (xy) and a color temperature mode. Both are updated by monitoring the hs_color attribute.

The new state string builder checks the current color_mode and takes the appropriate attribute to calculate and adjust the color for contrast, and returns this as either a CSV formatted string or a hex string.

If the light is switched off, these attributes are removed by HA, and become undefined. This state is passed on to the tool. Hence you can test that state (typeof (state) === 'undefined') to remove the fill.

I can't monitor more than 1 attribute for a single entity, but it works this way, so I'll keep it this way for now.

The redesigned & rewritten state handling and state display makes all these things possible.

State changes: state change --> convert state (convert:) --> new state as string.

State display: new state --> format state (format:) --> localize state --> render state.

It seems to work in my environment, but of course there will be bugs, as I can't test every situation.

AmoebeLabs commented 1 year ago

Closed due to #227

martydingo commented 1 year ago

This works perfectly, thanks.

AmoebeLabs commented 1 year ago

This works perfectly, thanks.

Great. Thanks for the feedback!

AmoebeLabs / swiss-army-knife-card