Circleslider doesn't work on scale 15-25

[stinobook]

Bug description

Circleslider somehow bugs out with a scale of 15-25. the sliding doesn't work as it should and is impossible to set once you reach about halfway.

To Reproduce

Steps to reproduce the behavior: create circle slider with said scale:

              - type: 'custom:swiss-army-knife-card'
                aspectratio: 1/1
                entities:
                  - entity: climate.voorplaats
                    attribute: temperature
                    icon: 'mdi:thermostat-box'
                    name: Gewenst
                    decimals: 1
                layout:
                  styles:
                    card:
                    toolsets:
                  toolsets:
                    - toolset: background
                      position:
                        cx: 50
                        cy: 50
                      tools:
                        - type: circslider
                          entity_index: 0
                          position:
                            cx: 50
                            cy: 50
                            start_angle: -130
                            end_angle: 130
                            radius: 43
                          scale:
                            min: 15
                            max: 25
                            step: 0.5
                          user_actions:
                            tap_action:
                              haptic: light
                              actions:
                                - action: call-service
                                  service: climate.set_temperature
                                  parameter: temperature
                          styles:
                            active:
                              stroke: url(#sak-boiler-setpoint-blue-orange-gradient)
                              stroke-width: 5em
                            track:
                              stroke: var(--primary-background-color)
                              stroke-width: 5em
                            thumb:
                              fill: var(--primary-foreground-color)
                            capture:
                              fill: transparent

Expected behavior

it should just slide

Desktop browser (please complete the following information):

opera browser, windows

Companion App on Smartphone/Tablet (please complete the following information):

iphone 12 (normal)

Additional context i tried multiple scales, all work really well except for some reason if its 15-25. tried: scales 0-10 0-100 5-25 ... scales: 0.5, 1, unset.

(Optional): Suggested Solution

temporary solution is setting scale 14-25 or 15-26.

[AmoebeLabs]

It might be the angle that is the actual problem.

There is an upcoming fix for some math related (sin/cos) problems that might solve your problem.

I will add a comment in this issue if I pushed the changes out to Github as a new version!

[stinobook]

tyvm ! it's really weird that it's only with that exact scale (as far as i've found) PS: really loving your card man! it's awesome !!

[AmoebeLabs]

Currently testing with this test-set of circular sliders, see #187

You can see I have sliders in every quadrant (sin/cos related).

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

tyvm ! it's really weird that it's only with that exact scale (as far as i've found) PS: really loving your card man! it's awesome !!

Thanks for the heads up!

[stinobook]

FYI: bug still exists for me in current release, both on iphone and opera. (was marked as fixed in release notes)

[AmoebeLabs]

According to my notes, I tested the slider. Yup, the slider, not the circular-slider 🥲

Getting older…

[AmoebeLabs]

This is a funny bug.

I thought that there was something wrong with the slider itself, ie that the start/stop angle of the circular slider is causing this, but all the sliders in the screenshots above can't handle the 15-25 scale: they all freak out at a value of 20 and go back to 15.

You get the same results with a scale range 25-35, and with 24-35 for instance. But 24-36 also.

Weird stuff. No errors on the console, and no crashes. Just weird results 😨

Must dig deeper.