AmoebeLabs / swiss-army-knife-card

The versatile custom Swiss Army Knife card for Home Assistant allows you to create your unique visualization using several graphical tools, styling options and animations.
244 stars 21 forks source link

Slider tool does not work without a label when controlling brightness/color temp #193

Open stinobook opened 1 year ago

stinobook commented 1 year ago

Bug description

entity slider tool (to control brightness or whatever) of a light does not work without a label

below code from your examples works until you remove the label in position/style or you put placement: none

To Reproduce

from examples:

                 - type: slider
                    descr: '#3 test slider'
                    position:
                      cx: 50
                      cy: 81
                      capture:
                        width: 90
                        height: 15
                      track:
                        width: 90
                        height: 4
                        radius: 1
                      thumb:
                        width: 5
                        height: 5
                        radius: 2.5
                      label:
                        # placement can be none, thumb, position (cx,cy)
                        placement: position
                        cx: 83
                        cy: 17
                    entity_index: 1
                    derived_entity:
                      input : '[[[ return state ]]]'
                      state: >
                        [[[
                          if (typeof(entity) === 'undefined') return;
                          if (typeof(state) === 'undefined') return;

                          var bri = Math.round(state / 2.55);
                          return (bri ? bri : '0');
                        ]]]
                      unit: >
                        [[[
                          if (typeof(state) === 'undefined') return undefined;
                          return '%';
                        ]]]
                    user_actions:
                      drag_action:
                        update_interval: 200          # Update every 200msec
                        haptic: selection
                        actions:
                          - action: call-service
                            service: light.turn_on
                            parameter: brightness_pct
                      tap_action:
                        haptic: light
                        actions:
                          - action: call-service
                            service: light.turn_on
                            parameter: brightness_pct
                    scale:
                      min: 1
                      max: 100
                      step: 1
                      steps: '[1,2,5,6,7,8,9,20]'
                      stepsnew:
                        - stop: 0
                          step: 1
                        - stop: 10
                          step: 5
                    styles:
                      label:
                        text-anchor: middle
                        font-size: 10em
                        font-weight: 600
                      track:
                        fill: url(#sak-light-color-temperature-gradient)
                        fill-opacity: 1
                        stroke-width: 0.1em
                        stroke: white
                      thumb:
                        stroke-width: 1.2em
                        stroke: var(--primary-background-color)
                        stroke-opacity: 1
                        fill: var(--primary-text-color)
                        fill-opacity: 0.8

Expected behavior

working slider. showing both current state and slideable to change it.

Additional context label can NOT be 'position label placement 'none' thumb works and position works.

(Optional): Suggested Solution

Any suggested solution to this bug.

stinobook commented 1 year ago

current workaround i found:

use this for style to make it invisible:

                          styles:
                            label:
                              font-size: 0em