swiss-army-knife-card
swiss-army-knife-card copied to clipboard
AmoebeLabs
Circleslider doesn't work on scale 15-25
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.
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!
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 !!
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!
FYI: bug still exists for me in current release, both on iphone and opera. (was marked as fixed in release notes)
According to my notes, I tested the slider. Yup, the slider, not the circular-slider 🥲
Getting older…
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.