Lovelace: Versatile Swiss Army Knife Custom Card

[Dadafrenk]

good morning everyone… first of all, I congratulate the creator of the card… very beautiful and intuitive. i just have a problem for the second time. in the first I managed to solve by reinstalling the application, while now I can’t solve this error:

" i.setConfig is not a function"

I lawn several ways but I assume it is due to a HA update. if someone with a good heart can help me i will be grateful. following is my example yaml file…

type: custom:swiss-army-knife-card
aspectratio: 1/1
entities:
  - entity: sensor.temperatura_sala_temperature
    name: sala
layout:
  toolsets:
    - toolset: just-a-name
      position:
        cx: 50
        cy: 50
      tools:
        - type: circle
          position:
            cx: 50
            cy: 50
            radius: 45
          styles:
            circle:
              stroke-width: 2em
              stroke: red
              stroke-opacity: 0.5
              fill: bisque
              fill-opacity: 0.5
        - type: state
          position:
            cx: 50
            cy: 70
          entity_index: 0
          styles:
            state:
              font-size: 15em

[AmoebeLabs (Marco)]

It has been a while since I was here on the forums, but here you have a message from me again!

After finishing handling my sister’s legacy in January, I experienced some emotional stress as the grieving finally took over, as I had nothing to do anymore after two years. All those feelings and emotions started running through my head made me very tired. The normal day-to-day things were already a lot to handle.

But then something nice happened: I hadn’t updated Home Assistant for a while, and when I did I discovered that Home Assistant made ‘some’ breaking changes and nothing worked anymore

I had to manually switch lights, push physical buttons, even climb stairs to switch lights (no light button on the ground floor), and more

So, I had broken automations and about all the custom cards I use didn’t work anymore. It was time to get everything working again and so I started to work on SAK again for which had been no room in my head the months before.

In the last couple of weeks, I was able to publish a few releases

v2.4.1:
This had the Lovelace fix that broke most custom cards

The fact that others on Github already found and fixed the Lovelace problem was a great help to me. That made it possible to test that fix in my own environment and release v2.4.1. Thanx everybody for this

v2.4.2:
This one had a big change in my development environment and the return of the UserSVG tool styling.

The change in the development environment means that there is no need anymore to load external files (packages): everything is included in the distributed JavaScript file.

As loading sometimes didn’t work, or timed out, a lot of the “Card does not exist”, “i.setConfig is not a function” messages should be gone for the most part from now on!

Another change that came with the new development environment (vscode with remote docker containers, eslint for quality control, and rollup.js to build the resulting file) was the possibility to split up the single source file into - at this moment - 28 JavaScript files. This makes maintenance a lot easier.

The single package also makes it not necessary anymore to define cors_allowed_origins links in the configuration.yaml file to include all the packages loaded from https://unpkg.com/.

While catching up reading the Github issues and this forum, I saw some nice things made with SAK, like the stuff from @Djal, @D-Vine, @alisa, @jwaz73, and @ValMarDav to name a few.

I will make some separate posts after this one for some questions and remarks that I think should be Github issues (bugs, features).

I also have to update the documentation, which will also take some time to reflect the changes with the v2.x versions.

Marco.

[AmoebeLabs (Marco)]

Here is what I was able to accomplish:

The fan icon button calls the fan.toggle service and the three buttons on the right side call the fan.set_preset_mode service providing their respective mode.

I know you solved this already by using a different operator, but as far as I could find out, the state for a null value should be “None”. So not none or “none”…

I don’t have any sensors that show a null value, so can’t check if this is indeed true.

[AmoebeLabs (Marco)]

After I login to my devices and open my specific dashboard with sak cards I get following error;

I can solve this after I do a “reconfiger” under the sak example dashboard, and also do a refresh of my HA.

@jwaz73

I don’t see this condition regularly but it has appeared occasionally and only when using templates for layouts or toolsets. I’m thinking it has something to do with the speed and order in which the various !include statements are processed by the SAK environment. As you mentioned, a refresh of the view or reloading the page seems to fix it. I haven’t looked into it any further than this though.

It just might have something to do with the loading of external packages, which take - together with the loading of the templates - too much time, hence the result you get.

Since I’m using a single package, I haven’t seen this problem in my own environment anymore, so I wonder if v2.41 and v2.42 made any difference with this problem!

[AmoebeLabs (Marco)]

@Dadafrenk

" i.setConfig is not a function"

This might be due to:

• user error
• cors_allowed_origins
• time-out

Which version of SAK are you using?

[AmoebeLabs (Marco)]

@amyvgordon

I’m working on a thermostat card intended to mimic the nest thermostats, but have a couple of problems I’m hoping someone out there will have some thoughts on.

1. Wondering if anyone has any ideas on how I could add scale markers to either a circular slider or a segmented arc? The markers in the screenshot are colorlist items with a gap of 1. I put this in here so I could get a sense of the look and feel whilst I was working, but it would be awesome if someone could think of a way to get them at actual scale points (one line every half degree, for example). The nest thermostat also uses slightly bolder lines for the markers between the actual and target temperatures, so I’m hoping getting standard markers will get me one step closer to achieving that.

You have been creative at least by using a colorlist with a gap

A scale is not supported on both the circular slider and the segmented arc.

There is however an issue on Github that requests the same about an marker/indicator where the example also shows scale indicators:

SEGARC value indicator · Issue #175 · AmoebeLabs/swiss-army-knife-card (github.com)

2. I’m assuming that because I’ve not seen any in the documentation that templating isn’t supported? I’ve tested a template to return a different colour depending on whether the system is heating or cooling, but got a black background when I tried to replace the orange value with the template.

Thanks so much in advance for your help

Templating is still limited: some fields have templating support, while others don’t. I’m planning to extend this to more fields, as it extends the functionality in an easy way!

[AmoebeLabs (Marco)]

@ValMarDav

Did you manage to use the new function which allows to have several entity_index:? I can’t get it to work.

          - type: state
            position:
              cx: 82
              cy: 60
            entity_indexes:
              - entity_index: 6
              - entity_index: 7
              - entity_index: 8
              - entity_index: 9
              - entity_index: 10
              - entity_index: 11
              - entity_index: 12
              - entity_index: 13
            show:
              uom: none
            derived_entity:
              state: |
                [[[ if (state == 'cool') return 'Climatisation'
                    if (state == 'heat') return 'Chauffage'
                    if (state == 'dry') return 'Déshumidification'
                    if (state == 'off') return 'Hors fonction'
                    return 'Inconnu'
                ]]]
            styles:
              state:
                text-anchor: start
                font-size: 10em
                font-weight: 500
                opacity: 0.7
            animations:
              - state: 'off'
                entity_index: 7
                reuse: true 
                styles:
                  icon:
                    fill: gray
              - state: 'off'
                entity_index: 8
                reuse: true 
                styles:
                  icon:
                    fill: gray
              - state: 'off'
                entity_index: 9
                reuse: true 
                styles:
                  icon:
                    fill: gray
              - state: 'off'
                entity_index: 10
                reuse: true 
                styles:
                  icon:
                    fill: gray
              - state: 'off'
                entity_index: 11
                reuse: true 
                styles:
                  icon:
                    fill: gray
              - state: 'off'
                entity_index: 12
                reuse: true 
                styles:
                  icon:
                    fill: gray
              - state: 'off'
                entity_index: 13
                reuse: true 
                styles:
                  icon:
                    fill: gray

This should work, but if it doesn’t its either a bug or configuration error.

According to this definition:

• entity index 6 is your default entity index which is used in the derived_entity
• other indexes are used to style the tool. That’s what I’m using too.

The only thing is, that I haven’t tested this new feature with a derived_entity, so can you tell me what is not working? Does the derived_entity work? Or is the problem the styling?

Be aware that only a change in entity index 6 will get the tools animations be evaluated.

Other questions:

• is it different if you don’t use reuse: true ?
• is it different when you only use one of the entities in the 7-13 range?

[AmoebeLabs (Marco)]

@jwaz73

I was able to solve this issue. I could not find a way to capture hold or double-tap actions but to put multiple actions on the same toolset I simply configured tap actions on multiple ‘items’ on the card.

In this case, I’m using a group entity to show the status of a light group. Tapping on the icon produces a navigation action to a sub-view that shows all the lights. I put a power icon in the upper-right corner of the card and tapping that icon will toggle the state of the group.

This is exactly how I’m using my cards: separate tools for separate tap actions.

However, since I get more questions about this, I have created a Github issue to add more user actions to each tool:

Explore new user actions like click, double click, hold, hold-repeat and drag on a single tool · Issue #202 · AmoebeLabs/swiss-army-knife-card (github.com)

This issue already has some basic implementation examples regarding the combined logic that is needed to catch all these different actions. ChatGPT helped with that, although I know that these solutions won’t work out of the box combined with SAK and the Lit web-component library, it is a good starting point.

[AmoebeLabs (Marco)]

@alisa

Nice designs!

But, did anyone manage to open custom popup from it? I can’t make it work for some reason.

Hmmm. I don’t use custom popups, so I guess it is not supported yet.

If I look at my code, the following actions are supported:

• more-info
• navigate
• call-service

I don’t know how other cards configure custom popups, but if I implement this, it would be nice if it follows those definitions. I will have a look at it!

Github Issue:
Support for custom popups in the actions configuration · Issue #203 · AmoebeLabs/swiss-army-knife-card (github.com)

Update:
Custom popups are supported using browser_mod in v2.4.3!

[Dadafrenk]

thanks for the reply… i read your comments above and i’m sorry what happened… but thanks to HA you manage to distract yourself somehow…
Let’s say that I was able to solve it thanks to the older installation, v1.0.0-rc3… but I had the problem with the latest one… I’ll try to install the latest one and see if the error persists

[ValMarDav]

Hi, thank you for your feedback.

I hope everything is going well for you.

I used one of your templates to control my heat pump. The first section contains a thermostat which controls the heat pump, the second section controls the fan speed and the third section provides information on the status of the heat pump. When I click on an icon in the section that controls the fan, the speed is adjusted, the icon turns orange and it’s spins on itself, all the other statuses turn gray and stop spinning.

Everything works fine, except when I click on the power button to turn the heat pump off, the icon that indicates the last selected fan speed remains orange and continues to spin.

What I want to do is that all icons become grayed out and stop spinning

entity index 6 is your default entity index which is used in the derived_entity.

Yes

other indexes are used to style the tool.

Yes

Does the derived_entity work?

No

is it different if you don’t use reuse: true ?
No changes

is it different when you only use one of the entities in the 7-13 range?

No

Here is my whole card:

MichelJourdain/Thermostat/blob/6507e085192d1454f81d9d0f6b91a44dbd19480c/Thermostat

[AmoebeLabs (Marco)]

Ok. I think I can help!

First, your animations:

When switching to ‘off’, I have no idea if there is still an update for the entity, but if there is an update, your animations probably won’t work anymore.

          - type: icon
            position:
              cx: 50
              cy: 50
              align: start
              icon_size: 20
            entity_index: 7
            user_actions:
              tap_action:
                haptic: success
                actions:
                  - action: call-service
                    service: climate.set_fan_mode
                    service_data:
                      fan_mode: quiet

            animations:
              - state: "quiet"
                styles:
                  icon:
                    animation: spin 5s linear infinite
                    fill: var(--md-fg-color--alert)
                    color: var(--md-fg-color--alert)
              - state: "low"
                styles:
                  icon:
                    fill: gray # var(--theme-sys-color-secondary)
              - state: "medium"
                styles:
                  icon:
                    fill: gray # var(--theme-sys-color-secondary)
              - state: "medium_high"
                styles:
                  icon:
                    fill: gray # var(--theme-sys-color-secondary)
              - state: "high"
                styles:
                  icon:
                    fill: gray # var(--theme-sys-color-secondary)
              - state: "auto"
                styles:
                  icon:
                    fill: gray # var(--theme-sys-color-secondary)
              - state: "strong"
                styles:
                  icon:
                    fill: gray # var(--theme-sys-color-secondary)

If you replace the animations with the following (for each fan_mode), then IF there is an update with a state other than “quiet” in this case, at least the icon is changed to gray.

            animations:
              - state: "quiet"
                styles:
                  icon:
                    animation: spin 5s linear infinite
                    fill: var(--md-fg-color--alert)
                    color: var(--md-fg-color--alert)
              - state: "quiet"
                operator: '!=' # Use unequal state
                styles:
                  icon:
                    fill: gray # var(--theme-sys-color-secondary)

Second, the derived_entity:

A derived entity works as follows:

• A state is received from Home Assistant
• The derived entity calculates a new state, and REPLACES that state as the new state
• After that, the animations are evaluated

So in your case, the state ‘off’ is replaced by the state ‘Hors fonction’ for entity index 6:

            derived_entity:
              state: |
                [[[ if (state == 'cool') return 'Climatisation'
                    if (state == 'heat') return 'Chauffage'
                    if (state == 'dry') return 'Déshumidification'
                    if (state == 'off') return 'Hors fonction'
                    return 'Inconnu'
                ]]]

As to your animations like this one:

            animations:
              - state: 'off'
                entity_index: 7
                reuse: true 
                styles:
                  icon:
                    fill: gray

I’m not sure if this will work. The animation is only evaluated if entity index 6 changes state. In this case, the animation checks if entity index 7 equals ‘off’, and should fill the icon with gray.

I guess changing the other animations with the ‘!=’ operator will already fix your issue.

[ValMarDav]

Thanks for the suggestion to use !=. This will simplify the template code.

The error I made is that I thought that the state to control the other indexes, referred to the main index, here index 6. When index 6 is off, I could change the animation of the other indexes. If I turn the unit off with the power button, the status of the fan_mode parameter which is used for the other indexes, does not change, it remains at the last selection. This is why the animation does not stop.

I don’t see how I can make the fan speed animation stop when I turn the unit off.

[AmoebeLabs (Marco)]

@ValMarDav

I don’t see how I can make the fan speed animation stop when I turn the unit off.

What if you add entity index 6 to the fan mode animations? So multiple indexes.

Then add an animation state for ‘off’, and entity index 6. And then set the icon color to gray.

Example:

Circular slider test card with the light switched off:

Same with the light switched on:

You see that the complete tool is hidden when the light is off.

This is done using multiple indexes for the circular slider tool:

        - 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

And the animations section:

                    entity_indexes:
                      - entity_index: 1     # Brightness
                      - entity_index: 0     # On/Off
                    animations:
                      - state: '50'
                        operator: '>='
                        reuse: true
                        styles:
                          track:
                            opacity: 0.3
                            transition: opacity 1s ease
                      - state: 'on'
                        entity_index: 0
                        reuse: true
                        styles:
                          track:
                            stroke: red
                          tool:
                            display: initial
                      - state: 'off'     # If On/Off is Off
                        reuse: true
                        entity_index: 0
                        styles:
                          tool:
                            display: none     # Disable/hide this tool

This should also work for your fan modes.

          - type: icon
            position:
              cx: 50
              cy: 50
              align: start
              icon_size: 20
            entity_indexes:
              - entity_index: 7     # Fan mode Quiet
              - entity_index: 6     # On/Off
            user_actions:
              tap_action:
                haptic: success
                actions:
                  - action: call-service
                    service: climate.set_fan_mode
                    service_data:
                      fan_mode: quiet

            animations:
              - state: "quiet"
                styles:
                  icon:
                    animation: spin 5s linear infinite
                    fill: var(--md-fg-color--alert)
                    color: var(--md-fg-color--alert)
              - state: "quiet"
                operator: '!=' # Use unequal state
                styles:
                  icon:
                    fill: gray
              - state: "off"
                entity_index: 6
                styles:
                  icon:
                    fill: gray

The whole reason behind multiple entities is the fact that some integrations just don’t update sub states anymore after being switched off. There is no update to for instance the substate ‘undefined’.

Home Assistant does this a lot better: if you switch off a light, you get an update for the brightness attribute with ‘undefined’, on which the animation can do its thing!

In the above example, I decided to use the on/off state of the light to do this.

[ValMarDav]

I followed your example and it doesn’t work. Even the icon is no longer displayed correctly for the quiet mode. If I click on it, I get an error message.

          - type: icon
            position:
              cx: 50
              cy: 50
              align: start
              icon_size: 20
            entity_indexes:
              - entity_index: 7     # Fan mode Quiet
              - entity_index: 6     # On/Off
            user_actions:
              tap_action:
                haptic: success
                actions:
                  - action: call-service
                    service: climate.set_fan_mode
                    service_data:
                      fan_mode: quiet
            animations:
              - state: "quiet"
                styles:
                  icon:
                    animation: spin 5s linear infinite
                    fill: var(--md-fg-color--alert)
                    color: var(--md-fg-color--alert)
              - state: "quiet"
                operator: '!=' 
                styles:
                  icon:
                    fill: gray 
              - state: "off"
                entity_index: 6
                styles:
                  icon:
                    fill: gray

[AmoebeLabs (Marco)]

@ValMarDav

I followed your example and it doesn’t work. Even the icon is no longer displayed correctly for the quiet mode. If I click on it, I get an error message.

Ok. You found a bug.
If you add `entity_index: 7’ to the definition, I think the service is called again.

It appears that the service call still assumes a single entity, and doesn’t check for entity_indexes list. That will be fixed in the next release.

          - type: icon
            position:
              cx: 50
              cy: 50
              align: start
              icon_size: 20
            entity_indexes:
              - entity_index: 7     # Fan mode Quiet
              - entity_index: 6     # On/Off
            user_actions:
              tap_action:
                haptic: success
                actions:
                  - action: call-service
                    service: climate.set_fan_mode
                    service_data:
                      fan_mode: quiet
            animations:
              - state: "quiet"
                styles:
                  icon:
                    animation: spin 5s linear infinite
                    fill: var(--md-fg-color--alert)
                    color: var(--md-fg-color--alert)
              - state: "quiet"
                operator: '!=' 
                styles:
                  icon:
                    fill: gray 
              - state: "off"
                entity_index: 6
                styles:
                  icon:
                    fill: gray

As for the icon: I haven’t changed that, so the wrong icon is either caused by the crash/bug, or the icon definition now is different from before.

If you add the single entity_index: 7 again, and the icon is ok again, than it is the crash that’s causing this.

Update:
See: Action doesn't work with multiple entity indexes · Issue #207 · AmoebeLabs/swiss-army-knife-card · GitHub

I was able to reproduce the action/service call bug, and fix it. Has been released in v2.4.3!

[ValMarDav]

The Icon is added as a parameter for index 7. I didn’t change anything for that. It is a standard MDI icon.

[AmoebeLabs (Marco)]

Ok. Then 2 questions.

• is the reuse flag still there and set to true?
• any idea what icon that is, that replaces the fan? Is that from entity 6?

I’m just guessing that the ‘off’ state animation for entity 6 is overwriting the icon somehow.

[ValMarDav]

The animation works great with the update. Thank you for your work. But with the double index the icons are still not displayed correctly. No, the reuse parameter is not present. The icon that replaces the fan comes from climate.sensibo_cuisine.

[AmoebeLabs (Marco)]

@ValMarDav

The animation works great with the update. Thank you for your work. But with the double index the icons are still not displayed correctly. No, the reuse parameter is not present. The icon that replaces the fan comes from climate.sensibo_cuisine.

Great to here, that animations work, but that there is still a problem with the icon getting overwritten.
If the reuse parameter doesn’t help, I will have to debug the code using something similar as your configuration.

Progress in small steps

BTW, what happens with the icon of you put the ‘off’ state in front of the other states in the animations section?