Lovelace: Versatile Swiss Army Knife Custom Card

Swiss Army Knife Custom card

hacs release

The release is here!

Welcome to the release of the public release candidate of the Swiss Army Knife custom card!

This card has been in development since September 2020. For about 6 months, it has been in private beta with 40 Home Assistant users, and it was finally time to release a release candidate.

In the nearly 2 years of development, the work has been interrupted several times for more important things in life, and also suffered from a bit of feature creep you might say. In January 2022 for example, I felt the available Material Design themes were not enough to get the most out of this custom card, and so the Material 3 themes for Home Assistant were born, including 22 examples :grinning_face_with_smiling_eyes:

As a result, this custom card and its 12 examples, the Material 3 themes with 22 example themes, and the two manuals took about 1.500 hours to make!

Do check the manual to install the card. It is available in HACS, but requires additional manual steps!

I really enjoyed making all of this, so I hope you will like it too once you see your own visualizations!

The manual (around 55 pages) and the 12 examples contain a ton of information about how to define tools and get the visualization you see in the examples.

Please try to use all that available information before asking here! You need to invest some time into this card.

Thanx,
Marco

What is this custom card??

Well, if you look at the examples below, you literally see what kind of card this is: it is a versatile custom card that can be used to create unique visualizations!

YAML to define Tools, Toolsets, CSS styling and Animations

The designs are fully defined in YAML, and with the available 17 basic, advanced, and Home Assistant-specific SVG-based tools you can implement your visualization.


Things like templates make re-use between designs possible. On top of that, several CSS styling and built-in animation options are available.
You can even define your own CSS classes and animations, and use them in your designs.

User interactions and haptic feedback

You can define user interactions per tool to call the ‘more info’ dialog or to control lights or switches. You can even define more than 1 action per tap action.
Haptic feedback can complement the click/tap action if your mobile phone supports that.

Material 3 themes to have nice light/dark themes

If you want to make the most of this card’s styling, use one of the Material 3 themes for Home Assistant. This gives you fully compatible light and dark themes!

Swiss Army Knife card examples 11 and 12 use these Home Assistant Material 3 themes to implement cards that adapt to theme colors and to theme modes (dark/light).

Examples and 10 step tutorials

The documentation contains 12 examples and some (new, new, new) 10 step or less tutorials.

The tutorials are new and show you how to create a card in maximum 10 steps. The examples are sometimes a bit more advanced for some users.

And for whom is it meant?

It is not a standard card. It has no fixed design, nor fixed functionality. It doesn’t do anything out-of-the-box!

This card needs YOU. It needs some time to learn this card, understand its possibilities, and create a design. If that is what you want, this is your card. Let your creativity flow and enjoy the results!

Fun fact…

A year ago, some Home Assistant users happened to see some of the example views on my iPhone. They didn’t recognize Home Assistant as they were curious about what domotica system I was using :grimacing:

If designing is not your thing, but YAML is what you like, use or adapt one of the examples made by me or someone else in the community!

And don’t feel intimidated by the word “design”. Most of my designs look like this: A simple sketch on my iPad that is later implemented in a YAML view using trial-and-error!

Either way, Enjoy!

The manuals…

Because of the numerous possibilities of this custom card, a simple Github README won’t suffice.

The Swiss Army Knife manual is about 55 pages, and the Material 3 themes manual is around 40 pages.

Manual for the Swiss Army Knife custom card…

…and the Material 3 Themes used by some of the cards

The 12 examples from my own installation

The examples are available in their own dashboard. From that dashboard, the examples are manually included. So you can include what you want while trying out this card.

All these examples are available on Github in the ha-config folder, and described in the installation manual. Each example has its own page which describes how to adapt/use them in your own installation.

Some of the examples use a Neumorphic design, while others use a simple and clean flat design.

I must say, I’m curious about what others can create.

You are welcome to flood the forums with all sorts of visualizations!

Examples using a Light Material 3 Theme… Examples using a Dark Material 3 Theme…
Example 11: Boiler and Electricity cards
Example 12: Wide cards showing lots of sensors
48 Likes

i use this card stuff for about 1 month and it’s just amazing :heart_eyes:
it’s will be wonderful with the magic of the community :star_struck:

Looks very nice, will have a look at it later!

Release v1.0.0-rc.1b

Fixed:

  • Updated decluttering_templates.yaml file.
    This was the wrong file and contained all of my decluttering templates. For the examples included in this card, you only need the sak_ templates!

It would be nice if users with a storage-based setup could check the installation steps.

I’m still trying to simplify (both in setup steps as in the description) the installation for both storage mode, full YAML-based, and mixed setups!

Thanx!

3 Likes

I made my first step… looking awesome.

Lets test the installation more with each other and make this even more easy to use by handling tips and tricks for the developer.

Keep up the good work

2 Likes

wow… looking good… can you share the code?

1 Like

You can read the first post of AmoebeLabs.
Install with HACS, also on github and on separate website you see full installation also

No I mean… the AirVisual look very custom, so maybe you can share the code for the lovelace?

All info in opening post

on github complete code

I just came here to say: This looks amazing! Awesome job!

1 Like

That’s an example included in the card installation. Just follow the documentation

2 Likes

There’s a data visualization I’ve been trying to make but it requires custom SVGs. This looks like a perfect tool for me. :smiley:

Can you embed another card inside the card like button-cards?

There’s a data visualization I’ve been trying to make but it requires custom SVGs. This looks like a perfect tool for me. :smiley:

You can use any number of external SVG’s through the use of the UserSVG tool on your card.

A static SVG example is the Weather on SVG background. Dynamic - entity state dependant - use of external SVGs are used by the AirVisual and Weather forecast example.

Can you embed another card inside the card like button-cards?

No, embedding other cards is not possible. This card is solely made with 17 basic, advanced, and Home Assistant specific tools. All tools are SVG based. Mixing HTML is not supported (does not scale and some browsers have troubles supporting this).

You can make every tool respond to user action, so you can make button-like visualizations with for instance rectangles and circles.

2 Likes

Can’t find in HACS and when i copy the repository link and try and add it i get an error.

Tried to follow the manual and still cant get it. Maybe you could share step by step how you were able to get into HA?

Thanks in advance!

Copy GitHub link
it’s not in hacs yet
Then

Hacs - custom repositories

Copy link and select
Select Lovelace

Then the install should go well

1 Like

Thank you!! Will try that!

Simply amazing work, well done!!!

Simply amazing. Thanks
I have a mixed setup yaml plus storage.
Will give you feedback on installation .
What are your preferred tools to design?I have both iOS macOS and intel devices

I have done some steps with my first cards.
Made 2 combination card myself.
A sensor card that has the ability to switch also. Handy for wall plugs
And motion detection with battery state.
Also some adjustments for look and feel still playing with it.

Lots of fun working with this!

See my first examples
Edit: new screenshots
Works with light and dark mode


3 Likes