Circular Slider: Enhance circular slider and fix bugs

[AmoebeLabs]

The Problem To Be Solved

The currently released circular slider is in alpha state. It contains several small and big issues regarding cos/sin calculations and thumb position updates.

This fix should solve many of these issues, if not all (being optimistic 😺 )

Additional background:

The circular slider needs support for multiple entities. This change should be included in this issue!

Related Issues (if any)

(Optional): Suggested Solution

With my development version these at least work, but with the current Github version only a few work, so that is progress 😄

You also might see that in card 3 tool parts (brightness part) or - as in card 6 - even the whole toolset disappears depending on the state of the light.

Light switched OFF:

Light switched ON:

Different opacity for slider in card 6 (1.0 instead of 0.3), depending on the brightness slider value:

For this to work, as in the state of an entity 'controls' another entity, there is support for multiple entities (entity_indexes as you can see). Animations can set the required entity index to use!

  - type: 'custom:swiss-army-knife-card'
    entities:
      - entity: light.livingroom_light_duo_right_light
        name: 'CircSlider Test'
      - entity: light.livingroom_light_duo_right_light
        attribute: brightness
        unit: "%"
        format: brightness

    aspectratio: 1/1                          # Card is 100x100 grid
    layout:
      styles:
        card:
      toolsets:
        # ================================================================
        - toolset: circ-slider-test
          position:
            cx: 50
            cy: 50
          tools:              
            # ------------------------------------------------------------
            - type: circslider
              position:
                cx: 50
                cy: 50
                radius: 40
                start_angle: 0
                end_angle: 360
                label:
                  placement: 'position'
                  cx: 50.01
                  cy: 50.01
              # entity_index: 1
              entity_indexes:
                - entity_index: 1     # Entity index 1 is the default (brightness)
                - entity_index: 0     # Entity index 0 is the extra entity
              animations:
                - state: '50'             # Set opacity to 0.3 if brightness >= 50%
                  operator: '>='
                  reuse: true
                  styles:
                    track:
                      opacity: 0.3
                      transition: opacity 1s ease
                - state: '50'              # Set opacity to 1.0 if brightness < 50%
                  operator: '<'
                  reuse: true
                  styles:
                    track:
                      opacity: 1
                      transition: opacity 1s ease

                - state: 'on'
                  entity_index: 0     # Explicitly use entity index (light state) here
                  reuse: true
                  styles:
                    track:
                      stroke: red
                    tool:
                      display: initial # Display tool
                - state: 'off'          # Light switched off: remove complete tool setting display to none.
                  reuse: true
                  entity_index: 0
                  styles:
                    tool:
                      display: none # Remove tool from displaying

(Optional): Alternative Solutions