search

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.
224 stars 19 forks source link

Improvement on doc page #194

Closed stinobook closed 1 year ago

stinobook commented 1 year ago

The Problem To Be Solved

Expansion of this page of the docs: https://swiss-army-knife-card-manual.amoebelabs.com/basics/user-interactions/

Additional background:

Currently there is explained that you can put actions on individual SVG elements, yet you seem to have changed how it works.

Previous - entity based - looks like this worked like how we're used to. and im guessing we can then follow all possibilities from: https://www.home-assistant.io/dashboards/actions/

now with your new version, the structure is different and its unclear what all possible actions are, since there is also slider interaction etc for your sliders.

Would it be possible to expand this page with all possible actions ? single tap, double tap? hold? slider, ...

another thing i have also am unable to get working is the confirmation from the default HASS action. does this also work with SAK or is it not implemented? ( https://www.home-assistant.io/dashboards/actions/#options-for-confirmation )

i want to use this to get a confirmation dialog before opening a garage door

stinobook commented 1 year ago

PS: do you want me to keep making issues like this about the documentation or not? you asked about this in one of my other tickets :)

grts

AmoebeLabs commented 1 year ago

PS: do you want me to keep making issues like this about the documentation or not? you asked about this in one of my other tickets :)

grts

Yup. As you said: there is lots of documentation, but due to the vast possibilities of this card, it is very difficult for me to know if there are loopholes that make it difficult to understand.

AmoebeLabs commented 1 year ago

Currently there is explained that you can put actions on individual SVG elements, yet you seem to have changed how it works.

Previous - entity based - looks like this worked like how we're used to. and im guessing we can then follow all possibilities from: https://www.home-assistant.io/dashboards/actions/

now with your new version, the structure is different and its unclear what all possible actions are, since there is also slider interaction etc for your sliders.

Most cards can only handle a single action, defined on the entity. That's how SAK started too, but became problematic after adding a lot of tools and the possibility to use any number of entities:

  • I needed different actions, on different tools, even when using the same entities

So that's why actions were moved to the tools section.

Would it be possible to expand this page with all possible actions ? single tap, double tap? hold? slider, ...

Yes that is possible. The only allowed action is tap and drag: I don't support double tap and hold. Remember that this is all SVG, so I don't / can't use the HTML based libraries / objects that handle real buttons. I would have to find a library to do that for me or write one myself to support double tap and hold.

another thing i have also am unable to get working is the confirmation from the default HASS action. does this also work with SAK or is it not implemented? ( https://www.home-assistant.io/dashboards/actions/#options-for-confirmation )

i want to use this to get a confirmation dialog before opening a garage door

I haven't used confirmation dialogs yet, so this is not supported/implemented. I see that the (retired) custom button card does some sort of confirmation and that HA itself has its support in buttons, which more or less only asks if you are sure to do something or not.

In the case of SAK where you have different tools, that are not technically connected to each other, although it might visually look like they are, implementing this is a bit more difficult.

If you have a button and slider to control the lights, you don't want separate dialogs (I think) for both the button, and the slider. Once you have pushed the button for the light, you assume that you can control the slider, without any confirmation dialog.

The variations I see:

Confirmations on a lower level (tools) take precedence over higher levels (card).

I have no idea if I can re-use the existing HA dialogs, which would be good for the consistency of the UI.

I must have a look in the sourcecode to find out if events are used for this, just like with the "more-info" dialog.

stinobook commented 1 year ago

Would it be possible to expand this page with all possible actions ? single tap, double tap? hold? slider, ...

Yes that is possible. The only allowed action is tap and drag: I don't support double tap and hold. Remember that this is all SVG, so I don't / can't use the HTML based libraries / objects that handle real buttons. I would have to find a library to do that for me or write one myself to support double tap and hold.

idea for hold action: use the ' slider ' code you have right now, but remove the track part? since you can technically hold a slider in place and it doesn't do anything but i presume it still sends its updates and the configured interval then you could just set the 'interval' as the time needed to hold the button until the action gets performed ?

another thing i have also am unable to get working is the confirmation from the default HASS action. does this also work with SAK or is it not implemented? ( https://www.home-assistant.io/dashboards/actions/#options-for-confirmation ) i want to use this to get a confirmation dialog before opening a garage door

I haven't used confirmation dialogs yet, so this is not supported/implemented. I see that the (retired) custom button card does some sort of confirmation and that HA itself has its support in buttons, which more or less only asks if you are sure to do something or not.

I haven't used confirmation yet either, but it looked like a simpler way to imitate the lock function from the custom button card (which is the option i used to prevent me accidentally opening garage doors :p )

i do believe now with your new release and the ability to hide tools, ill manage to make a makeshift lock that just hides the real button behind a fake toggle through helpers in HASS.

stinobook commented 1 year ago

FYI, my fake lock works :') not gonna make one per button but still.

Helper: toggle: cardlock Automation: 

alias: cardlock
description: ""
trigger:
  - platform: state
    entity_id:
      - input_boolean.cardlock
    to: "off"
    for:
      hours: 0
      minutes: 0
      seconds: 10
condition: []
action:
  - service: input_boolean.turn_on
    data: {}
    target:
      entity_id: input_boolean.cardlock
mode: single

add entity to the card and make a rectex as the final invisible layer:


                        - type: rectex
                          position:
                            cx: 50
                            cy: 50
                            width: 100
                            height: 100
                          entity_index: 1
                          user_actions:
                            tap_action:
                              haptic: light
                              actions:
                                - action: call-service
                                  service: input_boolean.turn_off
                          styles:
                            rectex:
                              fill: rgba(0,0,0,0)
                          animations:
                            - state: 'on'
                              styles:
                                rectex:
                                  display: initial
                            - state: 'off'
                              styles:
                                rectex:
                                  display: none

can also kind of use this as a fake double tap since first tap removes the lock and 2nd tap then does the interaction below it.

AmoebeLabs commented 1 year ago

See also

AmoebeLabs commented 1 year ago

The documentation page for User Interactions is updated for SAK v2.4.3

It includes a table for action types (tap and drag at this moment), the actions (more-info, navigate, call-service, and fire-dom-event), and some examples.

Other possible future user actions are described in #202