Change icon or text based on states/entities

stinobook commented 1 year ago

Hello,

Im trying to replace all my custom button cards with SAK cards since its unmaintained and you can do so much more with SAK than the custom button card (layout-wise). Now with most cards you can use template code to edit certain things (going to take the example of changing an icon). Now i'm trying to remake my 'people' card with SAK but can't seem to figure out how or if its even possible. i checked the javascript part but that is only supported on 2 places in the entire SAK.

The Problem To Be Solved

Possibility to run code inside card or change tool value based on states.

Additional background:

this is an example of the code i use to change a badge icon on a mushroom template card:

        {% if states('person.stino') == 'home' %} mdi:home {% elif
        states('person.stino') == 'not_home' and
        states('sensor.stiphone_activity') == 'Automotive' %} mdi:car {% elif
        states('person.stino') == 'Work' %} mdi:briefcase {% else %}
        mdi:home-export-outline {% endif %}

running that same code inside the icon tool to change the icon based on those states doesn't work.

Related Issues (if any)

(Optional): Suggested Solution

allow the 'animations' part of a tool to also change the 'main value' of said tool (text for text, icon for icon, ... ) instead of only the style/...

(Optional): Alternative Solutions

if this is already possible and i'm just doing it wrong, apologies ! haven't found this yet in your documentation.

PS: Loving the card so far!

grts Stijn

github-actions[bot] commented 1 year ago

Thank you for creating your first issue for the Swiss Army Knife custom card!

stinobook commented 1 year ago

Found solution here.

                      animations:
                        - state: 'home'
                          icon: mdi:home

instead of:

                      animations:
                        - state: 'Work'
                          styles:
                           icon: 
                            icon: mdi:briefcase

https://github.com/AmoebeLabs/swiss-army-knife-card/issues/104

AmoebeLabs commented 1 year ago

@stinobook , is this functionality to change the icon not documented well enough? Ie should I add some example about this?

Sidenote:

The mushroom cards rely on custom code to get this functionality. SAK does not support this, as it uses animations / state changes to accomplish these kind of things.

stinobook commented 1 year ago

Even though you have a LOT of documentation, i do feel that there is a lot of it missing on what is possible and how to achieve it. the things possible with this card is just so vast i understand how hard it is to document it all.

for instance, im currently working on my light-switch-card and was trying to use a slider but couldn't get it to work. https://swiss-army-knife-card-manual.amoebelabs.com/tools/slider-tool/

i tried coding my first slider but it just wouldn't show up so i copy/pasted some of your code. apparantly you NEED

    capture:
      width: 80
      height: 15

defined or otherwise it will just not work. which isnt clear in the 'basic usage' part of the documentation.

further down it says:

  #
  # The action for the slider if value has changed
  slider_action:
    update_interval: 200      # Update every 200 ms while dragging
    service: light.turn_on
    parameter: brightness_pct

but i found this code in one of your examples, so i think its an error in the documentation about how to use the slider:

                    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

entity-index was something to figure out at the start as well but i've gotten how it works now.

regarding this post as well, i managed to find a work-around for my person cards. i made 2 helpers: input_select and input_text then i made an automation to change those values according to what i want it to do and then used this as a 'state' in your card so i can make it change to whatever i need. wrwrw ( dont mind the busy until 00:00, she put an all-day event instead of a timed event so it shows up like that instead )


              - type: 'custom:swiss-army-knife-card'
                aspectratio: 1/1
                entities:
                  - entity: input_select.person_status_maddie
                  - entity: input_text.person_status_maddie
                layout:
                  styles:
                    card:
                      overflow: visible
                      background: transparent
                      border: none
                      box-shadow: none
                  toolsets:
                    - toolset: card
                      position:
                       cx: 50
                       cy: 50
                      tools:
                        - type: usersvg
                          position:
                            cx: 50
                            cy: 50
                            height: 100
                            width: 100
                          style: 'images'
                          images:
                            - default: /...
                          clip_path:
                            position:
                              cx: 50
                              cy: 50
                              height: 100
                              width: 100
                              radius:
                                all: 5
                        - type: rectex
                          position: 
                            cx: 50
                            cy: 92.5
                            height: 15
                            width: 100
                            radius: 
                              bottom: 5
                          styles:
                            rectex:
                              opacity: 0.8
                              fill: rgba(97, 69, 71, 1)
                        - type: state
                          position: 
                            cx: 50
                            cy: 92.5
                          styles:
                            state:
                              font-size: 8em
                          entity_index: 1
                    - toolset: badge
                      position:
                        cx: 97.5
                        cy: 2.5
                      tools:
                        - type: circle
                          position:
                            cx: 45
                            cy: 55
                            radius: 10
                          styles:
                            circle:
                              fill: white
                          entity_index: 0
                          animations:
                            - state: 'Home'
                              styles:
                                circle:
                                  fill: var(--label-badge-green)
                            - state: 'Work'
                              styles:
                                circle:
                                  fill: var(--label-badge-blue)
                            - state: 'Away'
                              styles:
                                circle:
                                  fill: var(--label-badge-red)
                            - state: 'Busy'
                              styles:
                                circle:
                                  fill: var(--label-badge-red)
                            - state: 'Driving'
                              styles:
                                circle:
                                  fill: '#850101'
                        - type: icon
                          position:
                            cx: 45
                            cy: 55
                            icon_size: 16
                          styles:
                            icon:
                              fill: white
                          entity_index: 0
                          animations:
                            - state: 'home'
                              icon: mdi:home
                            - state: 'Work'
                              icon: mdi:briefcase
                            - state: 'Away'
                              icon: mdi:home-export-outline
                            - state: 'Driving'
                              icon: mdi:car
                            - state: 'Busy'
                              icon: mdi:calendar-clock-outline

AmoebeLabs / swiss-army-knife-card