Multi-line Jinja template configuration error on Picture Elements card

I’m trying to create this Picture Elements card ( Integrating your Tesla with Home Assistant (synapselabs.io)) using his provided code ( Home Assistant - Lovelace Tesla Card (github.com)). If I put that code in the Developer Template Tool then paste that output to the Picture Elements card directly, I get the desired result, but when putting it in the Picture Elements Card Configuration, I get this error:

Configuration errors detected:
missed comma between flow collection entries (4:2)

1 | type: picture-elements
2 | image: /local/TeslaModel3.png
3 | elements:
4 | {% set sensors = [
------^

I’ve done some research and think it has something to do with multi-line Jinja template syntax, but I cannot seem to figure out the correct spot to put single/double quotes and or (-) signs. :thinking:

Can someone please point me in the right direction for correcting this?

Thank you

Most standard cards don’t support Jinja2 templates. The linked example you posted won’t work unless you are using lovelace-gen. The author mentioned this important pre-requisite in a subsequent comment.

@123 Thanks. I realized that yesterday, so I started to dabble with YAML mode and lovelace_gen leading me to write this post - Attempting to switch to YAML mode and lovelace_gen - Configuration / Frontend - Home Assistant Community (home-assistant.io)

Subsequently, I noticed that Tesla post is from 2020 and that the Developer Template Tool specifically says “Templates are rendered using the Jinja2 template engine…”

So, I figured YAML mode and lovelace_gen is no longer necessary (and I’d prefer to use the UI for most of my dashboard designs). I’m able to get the desired result from the same code he shared in the Template Tool, but it doesn’t work in the card which is confusing.

Ok. This seems like something that should be implemented. But, I cannot help that.

In the meantime, as a workaround, is there a way to dynamically store the string created by the Jinja2 code (e.g. as an attribute of a dummie entity) that I could then reference in a simple template string for use anywhere Jinja2 is not yet implemented?

Alternatively, is there another non-standard card you’d recommend for this use case (i.e. a more feature rich Picture Element card)?

Yaml only loads on startup/reload. What you want is not possible without lovelace_gen. So your options are: Learn lovelace_gen, manually program everything by hand, or use the template editor to generate your yaml and copy/paste it into your lovelace-ui.yaml file.

@petro Thanks. I’ve been playing around with switching back and forth between the UI Editor (using the Raw configuration editor) and YAML mode (using the ui-lovelace.yaml), but must still be missing something in the configuration as I haven’t been able to get a dashboard to render in YAML mode.

Some follow up questions:

  1. To be sure, do I just create a ui-lovelace.yaml from scratch or did I miss a step wherein HA would automatically create it (e.g. based on the existing UI cards) upon switching to YAML mode and restarting? So far, I tried to create it using the code from the Raw configuration editor.

  2. I did see what you commented about YAML only being referenced on startup/reload. Does that mean that all templates used throughout HA are also loaded only at those times?

  3. Is there talk about adding the features of lovelace_gen into the UI editor (or perhaps more specifically, certain cards)? I’m probably not asking that one quite right. :thinking:

@123 OK, thank you for your help. I understand the general concept of Templating, but all I really need in this case is the string of characters it produces formatted in YAML. So, it seemed to me there might be a workaround (to a card not supporting templating). Maybe not. :man_shrugging:

You’re right, my original question is answered. Now I’m just trying to learn. :wink:

Yes, you create it from scratch. All yaml. Jinja can only be used in included files. You 100% cannot use the UI at all with lovelace_gen. Everything has to be done through files.

All templates are loaded at startup only. Templates are resolved when a state change occurs. The templates only listen to entity state change based on what’s found at startup. I.e. if a template uses entity xyz, it will only resolve when xyz changes state.

This will never happen. It’s not feasible. Lovelace_gen is not a card. It’s an integration that changes how yaml is loaded.

…or as you said previously, I can go back and forth, right?

.
.
.

Ah! Good to know. I didn’t see that explained elsewhere (probably missed it).

Thanks!

on separate dashboards. Once you make a dashboard lovelace_gen, you have to use all yaml all the time outside the UI.

@petro Thanks. After reading this and messing around a bit more and saw that. So, it’s not as global of a change as I previously understood. I think I’ll keep a UISandbox dashboard to generate YAML that I can then copy/paste into the main YAML dashboard.

But, I cannot seem to get this approach to work with custom cards. That’s what produces the red errors. Does YAML only recognize standard (non custom) cards or is there something else I need to do for that?

If you use any yaml dashboard, you need to specify the resources for custom cards in yaml. Not the UI.

Ah, thanks. I got it working now! The hybrid approach to dashboard configuration seems like a good way for me to learn more before I go all in on YAML mode exclusively.

@petro Now that I understand how to properly switch to YAML mode and have come to understand YAML syntax more, I’m trying to get lovelace_gen working for the original purpose of this post. I’ve carefully reviewed and checked all of the steps mentioned here ( thomasloven/hass-lovelace_gen: :small_blue_diamond: Improve the lovelace yaml parser for Home Assistant (github.com)) including setting up the custom component directory with the contents, switching to YAML mode, and including # lovelace_gen at the top of the referenced .yaml file (not ui-lovelace.yaml), but I"m still getting this error:

while scanning for the next token found character ‘%’ that cannot start any token in “/config/YAMLTesla.yaml”, line 6, column 2

I don’t think it’s a YAML syntax error because (1) I copied the raw code straight from the Tesla poster’s github and (2) as mentioned earlier, the same code pasted in the template editor produces usable YAML code.

Instead, I suspect something with my lovelace_gen configuration still isn’t right resulting in Jinja2 still not working on HA load.

What do you think should be my next steps to troubleshoot?

That usually means you need to reload the page from the …, or you have a syntax error.

Thanks. I suspect syntax, but as mentioned, I think I’m out of places to triple check. Should I share the files here?

I don’t have an overflow menu (…) available to refresh that dashboard. Here’s what it looks like.

clear your cache and refresh the page

Thanks, but I got it sorted out. It was my lovelace_gen configuration. More here (Attempting to switch to YAML mode and lovelace_gen - #26 by GoodyGizmos).

But, I could use some help over here (Change CSS property (e.g. badge color) based on state w/ lovelace_gen and card-mod). :wink: