Light

amoebelabs / swiss-army-knife-card-manual Goto Github PK

View Code? Open in Web Editor NEW

84.0 35.0 2.0 86.23 MB

The documentation repository for the Swiss Army Knife custom card for Home Assistant.

TypeScript 0.04% SCSS 0.38% CSS 0.18% HTML 99.19% JavaScript 0.22%

home-assistant custom-card documentation home-automation lovelace-custom-card swiss-army-knife homeassistant lovelace lovelace-card lovelace-ui

swiss-army-knife-card-manual's Introduction

Swiss Army Knife custom card manual

This is the home of the Swiss Army Knife custom card for Home Assistant documentation.

The custom Swiss Army Knife card for Home Assistant allows you to create your own visualization using 17 basic, advanced and Home Assistant specific SVG-based tools and CSS styling and animation options this card provides.

It is a card with lots of possibilities, fully YAML based, and requires the user to design a card! What you can make is only limited by the 17 provided tools and your own imagination.

Development status as of May 2023:

The card has been released on June 19th, 2022 to the public as a release candidate!

After a few more RC's, I decided that it was time to pick up a normal version numbering in 2023.

Swiss Army Knife Card Examples

There are 12 example views available to learn from.

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

Examples...	Examples...

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

Material 3 themes for Home Assistant

For the Material 3 themes used by some of the cards, see: https://material3-themes-manual.amoebelabs.com/

It has 22 light and dark example themes used by example card 11 and 12!

swiss-army-knife-card-manual's People

Contributors

Stargazers

Watchers

Forkers

panxiaosen ypchou

swiss-army-knife-card-manual's Issues

Create easy to follow tutorials as the existing examples show almost all advanced usage

The Problem To Be Solved

The user manual currently describes the tools and includes the 12 examples.

The tools are described as a kind of reference manual. The 12 examples can be complex to understand for novice users as they contain advanced YAML, template, and CSS stuff.

Additional background:

This card differs from other cards, as it has no fixed-function or fixed layout. It is therefore impossible to describe a card as such for a user.

Related Issues (if any)

(Optional): Suggested Solution

Would it be possible to create simple tutorials that take small steps to create a card, so that a novice user can learn the possibilities of each tool to create a card?

A first step is taken by 10 steps or less tutorials:

(Optional): Alternative Solutions

First public version

Hi Marco,
looks like very promising what you are doing.
Of course this is not an Issue ;-)

Could you give some estimate of when you will feel ready for a public version ?

Thanks

Installation steps for GUI based lovelace

The Problem To Be Solved:
The installation is a bit complex. I get that point that the folder structure (for now) needs to be replicated, but I am not using lovelace in YAML mode, and hence I have no all the conditions mentioned in the doc.

Additional background: I managed to make it work in a way it shows up the cards (not fully functional for the first sight), but the views being in YAML mode, the system does not let me edit the cards easily, so I cannot check what I am changing in the code results in what changes in the graphical representation.

It would be good to have an installation steps and examples for GUI mode, too, as the project itself is very promising!

Update documentation for SAK v2.4.1

The Problem To Be Solved

Update documentation with new and fixed issues in version 2.4.1

Additional background:

Related Issues (if any)

Also check the reported issues and comments in those issues like:

(Optional): Suggested Solution

(Optional): Alternative Solutions

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.