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.

Custom components

Name	Stars	Version	HACS support	Downloads	Last commit	Forum
Antistorm
Burze.dzis.net
Custom Templates
Dom 5
Froggy
GNE Photovoltaic Monitoring
Google Keep
Hydro IMGW
iMPK
Looko2
MPK Łódź
MPK Kraków
MPK Rzeszów
Rozkładzik
Saver
SmartThings Soundbar
Tauron AMIplus
Xiaomi Cloud Map Extractor
Xiaomi Vacuum Map Camera

Custom Lovelace cards

Name	Stars	Version	HACS support	Downloads	Last commit	Forum
Google Keep card
HTML card
HTML Jinja2 Template card
Local Conditional card
Nixie card
Nixie Clock card
Xiaomi Vacuum Map card

Clients

Name	Stars	Version	Downloads	Last commit	Forum
Home Assistant Taskbar Menu

Picture-elements cards

Name	Stars	Last commit
Xiaomi Vacuum Black card

Others

Name	Stars	Version	Downloads	Last commit	Forum
Xiaomi Vacuum garage
Xiaomi Cloud Token Extractor

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

home-assistant-lovelace-html-jinja2-template-card's Issues

Card loading error: No card type found

Jinja card doesn't appear on the list of custom cards in HA

Added HTML Jinja2 xcard successfully to HACS

And it works fine if I manually add the card configuration to a Lovelace dashboard, but the card does not appear in the list of cards when I click on 'Add card' in HA:

HA 2024.1.5

Card background is forced opaque despite semi-transparent card background in theme

When using a theme with semi-transparent card backgrounds, the transparency doesn't work on html-template-card.

Stops updating

Ever since I added this card to my dashboard, the dashboard would stop refreshing data at some point. The graph widgets on the dashboard will draw lines up to "now", but with straight lines, like when there is no new data.

In the console I see an error:

This makes me think the problem could be related to:
home-assistant/frontend#13304
home-assistant/frontend#11132

The template code I use inside the Jinja2 card is:
https://github.com/wernerhp/ha.integration.load_shedding/blob/master/examples/card5.yaml

<script> in custom:html-template-card

Is this the best place to ask questions re: this card? Please advise otherwise...

I have the following:

type: 'custom:html-template-card'
content: >
  <script>function hello() {alert('hi there');}</script>
  <button onclick="hello();"> O </button>

When I click the button nothing happens...
Can I use javascript functions defined in <script>'s in this card?
If not, why not, and is there any other way to generate actions?

More specifically, I am needing to do these two things (among many others):

• Popup up an mp4 video when a preview image is clicked.
• Change the value of an input_text to refer to the "next" motion event image.

Thanks for your help!

Device Control?

Hello,
Is it possible for your plugin to create a hyperlink that runs a home assistant service?

For instance, I would like to make a very simple text-based interface that displays when devices are on with a hyperlink under the device names that toggles the device.

For example,

Bedroom, Bathroom and Living Room lights are on.

Icon size

Hello,

Is there a way to increase the icon size ? Some extra parameters like:

<ha-icon icon="mdi:car-battery" {size=150%}></ha-icon>

Thanks.

How to ignore default card styles?

First of all, Thanks for your awesome custom card. I would like to apply own styles, so i don't need padding and background
I'm trying to do that using card_mod, but it doesn't work. Is there any way to ignore card styling totally?

Bug: `ha-card` theme is lost after refresh

I've got the following card set up for my Pi-Hole, using the custom:html-template-card:

However, when the sensors update and the card refreshes, the card loses the glassy background (provided by the current Lovelace theme), and defaults to a white background:

Ideally, I'd like to keep the themed background. None of the other custom cards I use exhibit this behavior.

Doesn't style with card-mod

Applying styles with card mod doesn't work.

does this still work with ver 0.115 and above

I installed it from HACS and trying to use it but I get error 'no card type configured'

Card doesn't work for non-admin accounts

When trying to view a template card when logged in as a user that's part of the 'users' group, the card won't load due to getting a 401: Unauthorized response from the /api/template API endpoint. Changing the user's group to admin makes it work again.

I don't know the specifics of the endpoint, so this might need a change in Home Assistant, but I suppose at least the documentation should mention it.

Preventing rendering until HA has started.

Not an issue - just seeking guidance:

With 2021.4, and it popping Warnings for undefined variables in Templates, any ideas how we can keep this card from rendering until HA has completed startup?

I tried wrapping my template into an if, but that didn't work:

{% if (as_timestamp(now()) - as_timestamp(states('sensor.uptime'))) |int  < 30 %}
  Waiting to complete start-up ...
{% else %}
  Over 30 sec, assume it's now up.
  Render my template...
{% endif %}

The template code within the else is still being examined before HA completes starting, so the full template is dumped into the log file thanks to this new warning feature.

If I remember to close the browser - to prevent Lovelace from trying to show the card - the log is clear.

Client exceeded max pending messages [2]: 512 after switching to using websocket

After switching to websocket I'm seeing issues similar to this:

Client exceeded max pending messages [2]: 512
22:01 components/websocket_api/http.py (ERROR) - wiadomość pojawiła się po raz pierwszy o godzinie 18:50 i powtarzała się 53942 razy

Related ticket: home-assistant/core#26724

If I disable this card in my HA setup, I get no such error.

Here is the code of my card:

- type: custom:html-template-card
  ignore_line_breaks: true
  entities:
    # - sensor.time
    - sensor.nam_temperature
    - sensor.nam_pm10
    - sensor.nam_pm25
  content: |
    {%- macro pollution() -%}
      {%- set aqi = ["Bardzo dobra", "Dobra", "Średnia", "Zła", "Bardzo zła"] -%}
      {%- set pm10_level = [0, 25, 50, 90, 180]|select("le", states('sensor.nam_pm10')|float)|list|length - 1 -%}
      {%- set pm25_level = [0, 15, 30, 55, 110]|select("le", states('sensor.nam_pm25')|float)|list|length - 1 -%}
      {{ aqi[[pm10_level, pm25_level]|max] }}
    {%- endmacro -%}

    <span style="font-size: 6em; font-weight: bold; color: var(--primary-color)">{{ states('sensor.time') }}</span><span style="padding-left: 10px; font-size: 1.5em; font-weight: bold;">{{ states('sensor.date') }}</span>
    <br/>
    Jest około <span style="font-weight: bold; color: var(--primary-color)">{{ states('sensor.nam_temperature') | round }}{{ state_attr('sensor.nam_temperature', 'unit_of_measurement') }}</span> na zewnątrz. <span style="font-weight: bold; color: var(--primary-color)">{{ pollution() }}</span> jakość powietrza.

I'm not exactly sure about the entities key. I may misuse it. Any hints? I'm happy to refresh this card less often. Say once per minute (time is displayed on the card).

seems core Markdown does this too?

HI,

Please let me ask below, as I am confused a bit as to the why for this card. What you have in your example is like a few cards I use myself, so Ive tested:

type: markdown
content: >-

  Sun state: <b>{{ states('sun.sun') }}</b>, elevation: {{
  state_attr('sun.sun','elevation') }}</br>

  <b>Hello</b> there!<p>General <u>Kenobi!</u></p>

  <img src="https://i.redd.it/ltxppihy4cyy.jpg" width="70%"/></br>

  <ha-icon icon="mdi:speaker"></ha-icon> Volume: {{
  states('input_number.radio_volume') }}%</br>

  <center><img
  src="https://vignette.wikia.nocookie.net/starwars/images/f/fa/Modal_Nodes_02.jpg"
  width={{ states('input_number.radio_volume')|float *100 }}%/></center>

and it seems identical to what you are doing. Note I did change the template in the slider a bit but other than that, seems perfectly fine and identical

What is it you are not seeing in Markdown that makes your new card fill the gap?

No criticism, always cool when people create nice extra cards. Just like to know what I am not seeing.. ;-0

thanks!

List of files from a directory

I would like to get a list of files from a directory. Ideally, I would like to spawn a shell command (ls -t | head) to do this, like node's "child_process" package. Is it possible to:

• require('child_process') in the content: for this card?

If not, is there any way to do this?

The files would be stored in a list which I would traverse... Thanks!!

Raise event with parameters?

Would be great if you could make the onClick call fire an event we can pickup in an automation with parameters.

Thanks

catch invalid templates

As it is now if a template does not render properly the whole card is blank. This makes it difficult to realise the problem. If it would return an error for that template but still render the rest of the html it would be clear that the problem is in the template not in the card. If not at least some kind of error that there is a template problem but its loading.

"Resource type: js" is deprecated

According to HA documentation, resource type should be 'module' not 'js' in:

resources:

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

cards overlap on each other

Hello,
Thanks for creating such a great project. I want to quote part of a weather forecast page and show it as a card in Home Assistant. Your project is able to show specific part of a page which meets my needs. However, when I try to add another card, they overlap on each other and I can't find a solution to that. Could you please help me with that? Thanks.

configuration for card 1:

type: custom:html-template-card
picture_elements_mode: true
ignore_line_breaks: true
content: >

<iframe src="http://products.weather.com.cn/product/radar1/index/procode/JC_RADAR_AZ9200_JB.shtml" frameborder="0" allowfullscreen="false" allowtransparency="false" style="width: 100%; min-height: 1000px; border: 0; margin-top: 0px; margin-bottom: 0px; position: absolute; top: -350px; left: -0px; transform:scale(0.7);"></iframe>

configuration for card 2:

type: custom:html-template-card
picture_elements_mode: true
ignore_line_breaks: true
content: >

<iframe src="http://www.weather.com.cn/weather/101280608.shtml" frameborder="0" allowfullscreen="false" allowtransparency="false" style="width: 100%; min-height: 1000px; border: 0; margin-top: 0px; margin-bottom: 0px; position: absolute; top: -360px; left: -145px; transform:scale(0.7);"></iframe>

cards shown in editing mode:

cards shown in page:

Cannot get logged in user, {{ user }} does not work

In a Markdown card {{ user }} returns the logged in user - great. {{ user }} does not work in this card, yet everything else seems to. What can I use to get the user - {{ hass.user }} doesn't work either. Googled for hours! Everything else seems to work, i.e. states, state_attr etc. If I use {{ user }}, no content renders in the card. Thanks