https://github.com/jcwillox/lovelace-canary

🐤 Adds many useful extensions to lovelace, such as templating secondary info, stacking within a card and more!
https://github.com/jcwillox/lovelace-canary

canary-card extensions home-assistant lovelace

Last synced: 24 days ago
JSON representation

🐤 Adds many useful extensions to lovelace, such as templating secondary info, stacking within a card and more!

• Host: GitHub
• URL: https://github.com/jcwillox/lovelace-canary
• Owner: jcwillox
• License: mit
• Created: 2020-03-05T12:35:39.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-10-24T20:17:30.000Z (6 months ago)
• Last Synced: 2024-10-25T04:25:11.988Z (6 months ago)
• Topics: canary-card, extensions, home-assistant, lovelace
• Language: TypeScript
• Homepage:
• Size: 315 KB
• Stars: 103
• Watchers: 1
• Forks: 4
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🐤 Canary

[![HACS Badge](https://img.shields.io/badge/HACS-Default-41BDF5.svg?style=for-the-badge)](https://github.com/hacs/integration)

[![License](https://img.shields.io/github/license/jcwillox/lovelace-canary?style=for-the-badge)](https://github.com/jcwillox/lovelace-canary/blob/main/LICENSE)

[![Latest Release](https://img.shields.io/github/v/release/jcwillox/lovelace-canary?style=for-the-badge)](https://github.com/jcwillox/lovelace-canary/releases)

[![GZIP Size](https://img.badgesize.io/https:/github.com/jcwillox/lovelace-canary/releases/latest/download/canary.js?style=for-the-badge&compression=gzip)](https://github.com/jcwillox/lovelace-canary/releases)

The idea behind Canary is to extend the functionality of Lovelace in a non-drastic way. This is done mainly, by adding extra configuration options (extensions) to pre-existing Lovelace elements.

This plugin could be thought of as almost a staging ground for features that if suitable could end up in core Lovelace, hence the name borrowed from Chrome Canary. It's unclear how well that statement will hold, it could also be called "Extensions".

## Usage

Much like [card-mod] Canary extends the default lovelace cards, so you don't need to actually define a `canary-card` for these options to work. The options are added to their respective cards as 'extensions'.

### Available Extensions

- [Generic Entity Row](https://github.com/jcwillox/lovelace-canary/wiki/Generic-Entity-Row)

  - [`secondary_info`](https://github.com/jcwillox/lovelace-canary/wiki/Generic-Entity-Row#secondary_info)

  - [`canary_style`](https://github.com/jcwillox/lovelace-canary/wiki/Generic-Entity-Row#canary_style)

  - [`canary_theme`](https://github.com/jcwillox/lovelace-canary/wiki/Generic-Entity-Row#canary_theme)

  - [`hide_warning`](https://github.com/jcwillox/lovelace-canary/wiki/Generic-Entity-Row#hide_warning)

- [Generic Card](https://github.com/jcwillox/lovelace-canary/wiki/Generic-Card)

  - [`no_card`](https://github.com/jcwillox/lovelace-canary/wiki/Generic-Card#no_card)

  - [`canary_style`](https://github.com/jcwillox/lovelace-canary/wiki/Generic-Card#canary_style)

  - [`canary_theme`](https://github.com/jcwillox/lovelace-canary/wiki/Generic-Card#canary_theme)

- [Glance Card](https://github.com/jcwillox/lovelace-canary/wiki/Glance-Card)

  - [`align`](https://github.com/jcwillox/lovelace-canary/wiki/Glance-Card#align)

- [Vertical Stack](https://github.com/jcwillox/lovelace-canary/wiki/Vertical-Stack)

  - [`in_card`](https://github.com/jcwillox/lovelace-canary/wiki/Vertical-Stack#in_card)

- [Canary Card](https://github.com/jcwillox/lovelace-canary/wiki/Canary-Card)

  - `style`

  - `theme`

For more information head over to the [wiki](https://github.com/jcwillox/lovelace-canary/wiki).

## Credits

I'd like to recognise Thomas Lovén's influence on this card, his work on [card-tools] made the creation of this vastly quicker and easier. Reference to his and other people's lovelace cards is, at this point, like 90% of my knowledge on JavaScript and polymer UI. Code from Thomas Lovén's [card-mod] is the backbone of the extensions to lovelace and what gave me this idea in the first place.

## Installation

```yaml

resources:

  - url: /hacsfiles/lovelace-canary/canary.js

    type: module

```

[card-mod]: https://github.com/thomasloven/lovelace-card-mod

[card-tools]: https://github.com/thomasloven/lovelace-card-tools