Lovelace: Versatile Swiss Army Knife Custom Card

It does not appear so. If you want the visual appearance of multiple cards as the same card, have a look at the stack-in card. I have not tried this card yet but have been looking at it. Depending on what your goal is, it might be worth experimenting with.

Ok no problem James! :wink:

Ok I will try this! :slight_smile:

@jwaz73 & @AmoebeLabs - and whomever may know something about this card.

There’s a billion things I need to understand… but to ask 1 thing that puzzles me…

On the website - looking at the documentation for lights… I see an example card that calls a decluttering template…

  1. how the devil do I interpret the template?
  2. having installed the example dashboard(s) … and playing around with that… I notice that in the dashboard examples the decluttering template is NOT used - all the template code is directly in the example yaml?
    I took the code from the example and made a template file… and after moving stuff around so indentation etc. was correct I can use that template in my card.

I must say… the learning curve for this is huge… at least when you’re not a template/css guru…

92% of everything I do not understand…

Hi, I installed the Examples dashboards and the sake5 is working but when i use it on my dashboard “storage” de card only shows when I do a refresh on sake5 page.
On my phone nevers appears on my dashboard.

Can anyone help?
I can’t put the
sak_sys_templates:
!include www/community/swiss-army-knife-card/sak_templates.yaml
sak_user_templates:
!include lovelace/sak_templates/sak_templates.yaml
on my ui dashboard because its not YAML

Hello, I don’t have the same as osvaldocipriano, but it’s close.
I cannot get the cards to work at all. I also use “storage mode”
In the installation, I get to step 2b and don’t know where to put the sak_sys_templates: !include and the sak_user_templates: !include.
I tried putting in the raw edit of the Lovelace UI, but I’m not able to save them there.
When I save them, I get the error “YAML Exception: unknown tag !<!include>”.
So any help please!

If you are using this magnificent card, you have probably noticed that it doesn’t work since upgrading to Home Assistant 2023.4.0 or above. Well, have no fear, for I have found the issue.

This appears to be caused by a change in 2023.4.0 that makes custom-card-tools (which swiss-army-knife-card uses) break. I have a pull request in against custom-card-tools to fix this here:

In the meantime, to get swiss-army-knife-card working, you can grab the file from here:

https://raw.githubusercontent.com/cerebrate/custom-card-helpers/master/dist/index.m.js

place it in the www/community/swiss-army-knife-card/ directory under your Home Assistant configuration directory under the name custom-card-helpers.m.js, and then very carefully find the part at the top of swiss-army-knife-card.js in the same directory that reads

import{fireEvent,stateIcon,getLovelace}from"https://unpkg.com/[email protected]/dist/index.m.js?module";

and change that and only that to

import{fireEvent,stateIcon,getLovelace}from"/local/community/swiss-army-knife-card/custom-card-helpers.m.js?module";

Since the browser will use the compressed version of the .js file if it can, after you have edited swiss-army-knife-card.js, delete swiss-army-knife-card.js.gz, and then make a new compressed version of your edited file with

gzip -k swiss-army-knife-card.js

Don’t omit the -k, because you need both the .js and the .js.gz there. You’ll need to do this any time you edit the .js.

Clear caches, reload resources, refresh, etc., and otherwise do the needful to get your browser to notice the changes, and you should have a working swiss-army-knife-card again.

Hope this is of use.

3 Likes

try to get this work but no luck…

on my location
\192.168.x.x\config\www\community\swiss-army-knife-card
I put the custom-card-helpers.m.js module

in the swiss-army-knife-card.js

I had the rule changed to
import{fireEvent,stateIcon,getLovelace}from"/local/community/swiss-army-knife-card/custom-card-helpers.m.js?module";

but also to
import{fireEvent,stateIcon,getLovelace}from"/config/www/community/swiss-army-knife-card/custom-card-helpers.m.js?module"

without any luck…

on my github put the helpers file should be okay in my opinion.
Github dvine2000

reboot, reload and try other browser nothing makes this fix work…
I think I do something wrong

back to old version with this line
import{fireEvent,stateIcon,getLovelace}from"/config/www/community/swiss-army-knife-card/custom-card-helpers.m.js?module"

and cards are working…

So think to location and helpers.n.js are working and okay

Just realized after people couldn’t get this to work that I accidentally forgot to mention a step. If you’re having trouble with this, check you did the gzip step I’ve edited into the above procedure.

1 Like

yes that seems to work.

I did it with 7-zip in windows there is a option to archive to .gz
lots of clear cache, restarts needed but goog to go now.

Question,
when I implement e toggle switch, always when I click on it, the -more dialog- box pops up. So instead of toggling the switch, the dialog box pops up and there I can turn the switch. I used helper switch, real switch but no succes.

- toolset: colomn-XAB
          position:
            cx: 150
            cy: 145
          tools:
            - type: switch   
              entity_index: 6                # #3
              position:
                cx: 50
                cy: 50
                # track:
                #   width: 100
                #   height: 30
                #   radius: 1
                # thumb:
                #   width: 25
                #   height: 25
                #   radius: 1
                #   offset: 12
                orientation: 'horizontal'
              user_actions:
              tap_action:
                haptic: light
                actions:
                  - action: call-service
                    service: switch.toggle       

wehereas entity_index 6 =


      # 6 als test switch, weer te verwijderen bij werkende config
      - entity: switch.ac_1c1331f_3

Thanks for any help

Indentation error… fixed it. tap_action was not correct indeted

user_actions:
     tap_action:
          haptic: light
          actions:
              - action: call-service
                service: switch.toggle      

Works like a charm !

1 Like

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

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.

  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 :slight_smile:

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

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 :cry:

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

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 :+1:

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.

1 Like

Here is what I was able to accomplish:

image

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.

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.

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!

This might be due to:

  • user error
  • cors_allowed_origins
  • time-out

Which version of SAK are you using?