Hi @AmoebeLabs wonderful work.
As anticipated trying to install it on a mixed mode UI.
First steps straightforward (Hacs, copy of files from zip file to Lovelace
I am stuck at step 2.b since I do not have an ui-lovelace,yaml file
So I do not know where to add the SAK template includes
Any advice?
I might switch to yaml 
but I find useful to quick setup via ui a card to test stuff often
so that’s the reason for a mixed
If you don’t have a lovelace.ui file yet you can use the sak-examples-dashboard.yaml
in section 3b is say’s how to set it up into the configuration file
I had first time a exact copy of the sak-examples-dashboard.yaml in my lovelace.ui. (just make a new file name it like that and put it into you config filder to use)
This way I could play arround more and see examples for use.
I have the final floor sections into a other folder than the examples now.
See my lovelace.ui at this moment, I just # marked out the examples when I was done with it.
and I deleted the configuration file section of 3b now that is all.
# Decluttering Templates
decluttering_templates:
!include lovelace/decluttering_templates/decluttering_templates.yaml
# Swiss Army Knife Templates
#
# The system templates come with the HACS install and can be updated
# with a new release. That part is automatic!
sak_sys_templates:
!include www/community/swiss-army-knife-card/sak_templates.yaml
# The user templates are created by the user, and won't be updated
# with a new release. If changes are required, then the user has to
# update the template configuration files.
sak_user_templates:
!include lovelace/sak_templates/sak_templates.yaml
title: Noordwal
views:
- !include lovelace/views/weather.yml
- !include lovelace/views/begane-grond.yml
- !include lovelace/views/1e-verdieping.yml
- !include lovelace/views/2e-verdieping.yml
- !include lovelace/views/view-sake7.yml
- !include lovelace/views/view-sake11-m3.yml
- !include lovelace/views/view-sake99-m3.yml
# Swiss Army Knife example views...
#
# Each example is manually included, so you can select just a
# few for testing and integration...
##- !include lovelace/views/sak-example-views/view-sake1.yml
#- !include lovelace/views/sak-example-views/view-sake1-m3.yml
##- !include lovelace/views/sak-example-views/view-sake43-test.yml
#- !include lovelace/views/sak-example-views/view-sake2.yml
#- !include lovelace/views/sak-example-views/view-sake3.yml
#- !include lovelace/views/sak-example-views/view-sake4.yml
#- !include lovelace/views/sak-example-views/view-sake5.yml
#- !include lovelace/views/sak-example-views/view-sake6.yml
#- !include lovelace/views/sak-example-views/view-sake6-m3.yml
##- !include lovelace/views/sak-example-views/view-sake7.yml
#- !include lovelace/views/sak-example-views/view-sake8.yml
#- !include lovelace/views/sak-example-views/view-sake9.yml
#- !include lovelace/views/sak-example-views/view-sake10.yml
##- !include lovelace/views/sak-example-views/view-sake11-m3.yml
##- !include lovelace/views/sak-example-views/view-sake12-m3.yml
##- !include lovelace/views/sak-example-views/view-sake99-m3.yml
1 Like
Thanks will try
Ok. Installed.
Using Mixed mode UI
@AmoebeLabs
Issues: local paths vs your paths to adjust, I had to add manually the resource for decluttering card.
Trying your examples (have no modified entity yet) I notice that some times the svg becomes not responsive / disappears (SAK3, SAK11-M3)
1 Like
Uhm.
No values shown.
Even using the simplest example (Sake8) with my entity
edit: fixed by removing card-mod
Anyway the behaviour is quite strange.
I need to refresh the screen to get values.
Could be due to mixed mode for ui + a lot of custom cards?
Uhm.
No values shown.
Even using the simplest example (Sake8) with my entity
edit: fixed by removing card-mod
Card-mod is known to causing issues in the past, but I’m not aware of current issues. I don’t use that ard anymore, so can’t test…
Anyway the behaviour is quite strange.
I need to refresh the screen to get values.
Could be due to mixed mode for ui + a lot of custom cards?
That is indeed weird behavior. Haven’t seen that one.
Did you clear the browser cache to be sure nothing old stuff is left? Card-mod may be cashed!
And if you use Chrome, could you check the console in the inspector (right click, and select inspect) for error messages?
1 Like
What are your preferred tools to design?I have both iOS macOS and intel devices
For simple sketches, I use Procreate on my iPad. In general, that is enough for me to dump my thoughts on something that remembers those brainwaves 
The step to HA is just to copy some framework from another card containing those tools (yes I’m lazy), and then adjust/reposition everything to where I want it.
Then the last step is to adjust styling and font sizes to my liking.
If I want to re-use it, I generally embed it into a decluttering-card (SAK can’t yet handle card templates) and define CSS for consistent styling.
Some things I’m working on now (example functional cards) is this:
A lot of copy/paste in the beginning before I streamline it using SAK Toolset templates and CSS Classes.
The initial copy/paste “process” gives me fast results: some cards only take 5 minutes to make!
But documenting them takes me a lot more time 
2 Likes
I have to refresh once the page before having the actual values.
Also the slider seems to work just for the first interaction
On Safari/MacAir
Unfortunately cannot embed a video to show it.
Anyway I am pretty sure it depends on my installation
Did you restart Home Assistant to make sure that there are no side effects present from installing/removing cards? Because if you have to refresh the page once, and then stuff works, it might be that some leftovers cause this.
If the card is created, it requests data from the HA backend for the entities in the card. That is pretty standard stuff, so it seems something is interfering with that.
I do test Safari on my iPhone and iPad. That should give the same results using Safari on a Mac.
Unfortunately cannot embed a video to show it.
The ‘recordings’ you see from my installation are recorded on my iPad, and later converted to .gif using online converters:
-
You can convert an .mp4 to .gif: Video to animated GIF converter
-
And for original .mov files, I use this one: MOV to GIF (Online & Free) — Convertio
I want to share my custom settings.
everything is on github and hope I can inspire people what is capable with this fine dashboard.
You can just copy paste cards of my for own use and see how I build my configuration.
I only have added my custom files not the complete code.
note:
I just started with this but made already something great.
3 Likes
This looks great!
I’m trying to get this going but the installation steps are a bit confusing.
Following the steps for “Hybrid install using HACS Custom”.
Adding the repository and installing the card i could figure out.
It is not clear where to continue in the steps.
My guess is I need to create folders like the example file structure? Or is this only for “Full Manual install” ?
Where and how should these folders be created ? I can’t find a folder named “homeassistant-data” on my HASSOS.
1 Like
homeassistant-data that is not a folder just a tekst.
You can download form github everything to compare the folders like it should be
should be something like this zip
swiss-army-knife-card-master
everthing in this folder you need it also in you system
swiss-army-knife-card-master\ha-config
I did a manual install so I dont know what addidng the SAK manual in HACS did with creating the folders.
But first step is this to check or create like I have it below
These folders you need to have in config dir.
and the yaml files in the config
.
├─ lovelace/
├─ themes/
├─ www/
│
├─ configuration.yaml
├─ ui-lovelace.yaml
└─ sak-examples-dashboard.yaml
after that you can go to step 1 and step 1c for comple and check the installation.
If things are unclear leave a note to @AmoebeLabs
I took a screen shot video and converted to gif.
You can see the 2 behaviors
need to refresh for first values
slider not working after initial slide
I removed almost all custom cards . no change
With that light cards below I had also problems, reported this at dutch tweakers where the beta was released.
But my slider was working and the middle card did not work, and real strange thing that on pc web browesers I did see the changes I made but in HA app on android the middle card did not change on the settings I made.
Should be something in the code, but it’s a RC version so good to report so these things can be fixed by the developer
When I switched to SAK 10 example cards no problems anymore. When tested I saw I can do more with info on the card so I stick to those cards.
I’m getting an error in my configuration.yaml file. Can someone please help me out? I’m pulling my hair out here…
About Example SAKE8:
I see 5 cards in your video, and miss one card (Livingroom / Movement). Did you remove that card, or is it crashing and causing the update problems?
About Example SAKE2:
There is definitely something wrong there as I also don’t see the segmented arc (top right) changing with the slider: that one should display the 0…100% brightness as you see in my screenshot below.
As if the slider/brightness update is not received by Home Assistant, and therefore not updated to the frontend. As a result, the slider doesn’t know its value anymore, and thus the thumb can’t be selected anymore.
As @D-Vine already mentioned: check SAKE10 if that works. The tools are the same, so I have - at this moment - no idea why that specific light card is causing trouble with some people.
I also made a set of example functional cards (currently 28). One of them is a Light card with slider. Every example has its YAML code added to the documentation for easy copy/paste into a view.
Some examples with a purple Material 3 theme:
This example set of cards might be easier for many people to try and understand than the 12 examples, which are a bit more complex.
2 Likes
That is a strange error, “Integration … not found” 
The Swiss Army Knife is a frontend plugin, so should not be an integration AFAIK.
The files mentioned are yaml files, which should be included by the Lovelace Frontend;
- the
sak_sys_templates.yamlfile is included by SAK itself and is part of the distribution - the
sak_user_templates.yamlfile is one that must be created by the user (or gotten from Github).
As SAK hasn’t been properly merged into HACS yet as a default repository, installation should be using a custom repository added to HACS. See: https://hacs.xyz/docs/faq/custom_repositories
Yes – I was able to install via custom repository in HACS as the installation documentation stated. From there I followed the remaining manual setup steps. If I comment out the template references in the configuration.yaml file the example views will load, but they are blank of course.
Your configuration.yaml should contain the dashboard definition in the lovelace section:
lovelace:
dashboards:
sak-examples:
mode: yaml
filename: sak-examples-dashboard.yaml
title: Swiss Army Knife Examples
icon: mdi:hospital-box
show_in_sidebar: true
And the sak-examples-dashboard.yaml` file should include the templates:
sak_sys_templates:
!include www/community/swiss-army-knife-card/sak_templates.yaml
Is your folder structure different?