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

Impossible to change opacity of 'uom' through animations. #217

Closed stinobook closed 1 year ago

stinobook commented 1 year ago

Swiss Army Knife version

2.4.4

Bug description

Impossible to change opacity of 'uom' through animations. maybe other styles too?

To Reproduce

tested on 2 different cards/entities/... state works but uom doesn't


                        - type: state
                          position:
                            cx: 10
                            cy: 92
                          styles:
                            state:
                              text-anchor: start
                              font-size: 9em
                            uom:
                              opacity: 1 # it is possible to style it here, but not in the animations
                          entity_indexes:
                            - entity_index: 1
                            - entity_index: 0
                          user_actions:
                            tap_action:
                              haptic: success
                              actions:
                                - action: more-info
                          animations:
                            - state: 'on'
                              entity_index: 0
                              styles:
                                state:
                                  opacity: 0.8
                                  transition: opacity 0.5s linear
                                uom:
                                  opacity: 0.8
                                  transition: opacity 0.5s linear
                            - state: 'off'
                              entity_index: 0
                              styles:
                                state:
                                  opacity: 0
                                  transition: opacity 0.5s linear
                                uom:
                                  opacity: 0
                                  transition: opacity 0.5s linear

Expected behavior

for the uom to follow the state animation

Screenshots

image image

AmoebeLabs commented 1 year ago

I’ll check uom, but in the mean time, try the following:

                          animations:
                            - state: 'on'
                              entity_index: 0
                              styles:
                                tool:
                                  opacity: 0.8
                                  transition: opacity 0.5s linear
                            - state: 'off'
                              entity_index: 0
                              styles:
                                tool:
                                  opacity: 0
                                  transition: opacity 0.5s linear
stinobook commented 1 year ago

I also tried that but it didn't do anything at all. I saw 'tools' once as a possibility in one of your examples and figured maybe it was only 'tools' that worked and not a single 'tool'.

image image image

AmoebeLabs commented 1 year ago

Tool styling is indeed broken for at least the enity state tool. I will check what’s changed.

Some of the eslint recommendations broke most of my cards while I was changing the development environment. This is either one of those results, or something completely different. It will be solved though.

Uom styling still unclear. The styleMap for uom is processed by the renderer, so probably the style builder has some error that is causing this bug.

AmoebeLabs commented 1 year ago

Closed with #222

stinobook commented 1 year ago

This is working great now :D Tool still didnt work but uom and state seperately did the trick.

image