Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card

This card displays provided Jinja2 template as an HTML content of a card. It uses exactly the same engine as Home Assistant in Developer tools.
https://github.com/PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card

home-assistant jinja2 lovelace-card template

Last synced: 5 days ago
JSON representation

This card displays provided Jinja2 template as an HTML content of a card. It uses exactly the same engine as Home Assistant in Developer tools.

Host: GitHub
URL: https://github.com/PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card
Owner: PiotrMachowski
License: mit
Created: 2019-08-29T22:33:57.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2024-06-18T20:23:23.000Z (5 months ago)
Last Synced: 2024-08-01T15:29:50.554Z (3 months ago)
Topics: home-assistant, jinja2, lovelace-card, template
Homepage:
Size: 283 KB
Stars: 67
Watchers: 7
Forks: 10
Open Issues: 13
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        # Lovelace HTML Jinja2 Template card

[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs)

[![Community Forum](https://img.shields.io/badge/community-forum-brightgreen.svg?style=popout)](https://community.home-assistant.io/t/html-jinja2-template-card/134550)

[![Ko-Fi][ko_fi_shield]][ko_fi]

[![buycoffee.to][buycoffee_to_shield]][buycoffee_to]

[![PayPal.Me][paypal_me_shield]][paypal_me]

[![Revolut.Me][revolut_me_shield]][revolut_me]

This card displays provided Jinja2 template as an HTML content of a card. It uses exactly the same engine as Home Assistant in *Developer tools*.

## Configuration options

| Key | Type | Required | Default | Description |

| --- | --- | --- | --- | --- |

| `title` | `string` | `false` | - | Title of a card |

| `content` | `string` | `true` | - | Content of a card |

| `ignore_line_breaks` | `boolean` | `false` | `false` | Disables changing line breaks to `` tags |

| `do_not_parse` | `boolean` | `false` | `false` | Disables template parsing |

| `always_update` | `boolean` | `false` | `false` | Enables refreshing the card with every change of entity |

| `picture_elements_mode` | `boolean` | `false` | `false` | Enables picture-elements mode |

| `entities` | `list` | `false` | `[]` | List of additional entities whose updates should trigger refresh of the card |

### Templates

 * Entity state, example: `{{ states('sun.sun') }}`

 * Entity attribute, example: `{{ state_attr('sun.sun', 'elevation') }]`

 * Detailed documentation: [*Templating*](https://www.home-assistant.io/docs/configuration/templating/)

 

## Example usage

![Example](https://github.com/PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card/raw/master/example.gif)

```yaml

views:

- name: Example

  cards:

    - type: custom:html-template-card

      title: 'HTML Template card'

      ignore_line_breaks: true

      content: |

        Sun state: {{ states('sun.sun') }}, elevation: {{ state_attr('sun.sun','elevation') }}

        Hello there!
General Kenobi!

        

         Volume: {{ states('input_number.system_volume') }}%

        

```

## Manual Installation

1. Download [*html-template-card.js*](https://github.com/PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card/raw/master/dist/html-template-card.js) to `/www/custom_lovelace/html_template_card` directory:

    ```bash

    mkdir -p www/custom_lovelace/html_template_card

    cd www/custom_lovelace/html_template_card/

    wget https://github.com/PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card/raw/master/dist/html-template-card.js

    ```

2. Add card to resources in `ui-lovelace.yaml` or in raw editor if you are using frontend UI editor:

    ```yaml

    resources:

      - url: /local/custom_lovelace/html_template_card/html-template-card.js

        type: js

    ```

## Hints

* To use mdi icon follow example: ``.

* If content does not contain any template use flag `do_not_parse: true` to increase performance.

* If content does not contain entity id (e.g. because of loop) you have to provide it manually in `entities` to enable refresh of the card when it will be updated.

* If you want to enable refreshing for every change in HA use flag `always_update: true`. **WARNING:** this may cause heavy load of browser/HA. Best to use with flag `do_not_parse: true`.

* To check if your content is correct without changing configuration use *Developer tools*.

* To use this card as an element of picture-elements card use `picture_elements_mode` parameter.

## Support

If you want to support my work with a donation you can use one of the following platforms:

  

    Platform

    Payment methods

    Link

    Comment

  

  

    Ko-fi

    

      
PayPal

      Credit card

    

    

      

    

    

      No fees

      Single or monthly payment

    

  

  

    buycoffee.to

    

      BLIK

      Bank transfer

    

    

      

    

    

  

  

    PayPal

    

      PayPal

    

    

      

    

    

      No fees

    

  

  

    Revolut

    

      Revolut

      Credit Card

    

    

      

    

    

      No fees

    

  

[ko_fi_shield]: https://img.shields.io/static/v1.svg?label=%20&message=Ko-Fi&color=F16061&logo=ko-fi&logoColor=white

[ko_fi]: https://ko-fi.com/piotrmachowski

[buycoffee_to_shield]: https://shields.io/badge/buycoffee.to-white?style=flat&labelColor=white&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhmlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TpaIVh1YQcchQnayIijhKFYtgobQVWnUweemP0KQhSXFxFFwLDv4sVh1cnHV1cBUEwR8QVxcnRRcp8b6k0CLGC4/3cd49h/fuA4R6malmxzigapaRisfEbG5FDLzChxB6MIZ+iZl6Ir2QgWd93VM31V2UZ3n3/Vm9St5kgE8knmW6YRGvE09vWjrnfeIwK0kK8TnxqEEXJH7kuuzyG+eiwwLPDBuZ1BxxmFgstrHcxqxkqMRTxBFF1ShfyLqscN7irJarrHlP/sJgXltOc53WEOJYRAJJiJBRxQbKsBClXSPFRIrOYx7+QcefJJdMrg0wcsyjAhWS4wf/g9+zNQuTE25SMAZ0vtj2xzAQ2AUaNdv+PrbtxgngfwautJa/UgdmPkmvtbTIEdC3DVxctzR5D7jcAQaedMmQHMlPSygUgPcz+qYcELoFulfduTXPcfoAZGhWSzfAwSEwUqTsNY93d7XP7d+e5vx+AIahcq//o+yoAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5wETCy4vFNqLzwAAAVpJREFUOMvd0rFLVXEYxvHPOedKJnKJhrDLuUFREULE7YDCMYj+AydpsCWiaKu29hZxiP4Al4aWwC1EdFI4Q3hqEmkIBI8ZChWXKNLLvS0/Qcza84V3enm/7/s878t/HxGkeTaIGziP+EB918nawu7Dq1d0e1+2J2bepnk2jFEUVVF+qKV51o9neBCaugfge70keoxxUbSWjrQ+4SUyzKZ5NlnDZdzGG7w4DIh+dtZEFntDA98l8S0MYwctNGrYz9WqKJePFLq80g5Sr+EHlnATp+NA+4qLaZ7FfzMrzbMBjGEdq8GrJMZnvAvFC/8wfAwjWMQ8XmMzaW9sdevNRgd3MFhvNpbaG1u/Dk2/hOc4gadVUa7Um425qii/7Z+xH9O4jwW8Cqv24Tru4hyeVEU588cfBMgpPMI9nMFe0BkFzVOYrYqycyQgQJLwTC2cDZCPeF8V5Y7jGb8BUpRicy7OU5MAAAAASUVORK5CYII=

[buycoffee_to]: https://buycoffee.to/piotrmachowski

[buy_me_a_coffee_shield]: https://img.shields.io/static/v1.svg?label=%20&message=Buy%20me%20a%20coffee&color=6f4e37&logo=buy%20me%20a%20coffee&logoColor=white

[buy_me_a_coffee]: https://www.buymeacoffee.com/PiotrMachowski

[paypal_me_shield]: https://img.shields.io/static/v1.svg?label=%20&message=PayPal.Me&logo=paypal

[paypal_me]: https://paypal.me/PiMachowski

[revolut_me_shield]: https://img.shields.io/static/v1.svg?label=%20&message=Revolut&logo=revolut

[revolut_me]: https://revolut.me/314ma