YAML, visual editor, Jinja, Java script, triple square brackets... how does it hang together?

Configuration
1

Well I knew it was going to be a steep learning curve, that’s how it goes. But that doesn’t make it less frustrating :slight_smile: I’m grateful for the community and the documentation! But after days of reading up on both I’m still struggling to put the puzzle together. Apologies if its clearly described somewhere and I missed it.

On a dashboard card editing there’s an option to use the ‘code editor’. Is that YAML? if so, I’ll request that as a change to say something like ‘code editor (YAML)’

Thanks to a post in a long thread somewhere I now understand YAML is not a programming language and you can’t do much logic in it. Thank you community! We use Jijna for that. But there are also many references to JavaScript. are they related, the same, or different? and if there are these 2 options, are there more? Are they all included inside YAML?

What about the triple square brackets, I guess that demarcates a different code inside YAML - Jinja code? or JavaScript? or something else? I also see {{{ and {% (I think) and I wonder if I should know about that. It would help me interpret the many great examples.

Grateful for your answers, or links to documentation.Cheers!
Bas

2

Only custom frontend cards use javascript as their template engine.

They are not related at all. Every single one uses different syntax. They all attempt to provide similar syntax.

JS, only for custom button card.

{{ }} and {% %} is Jinja. That’s the only official template engine provided by HA. I don’t think I’ve ever seen any card use {{{, you’d have to point that to me and I could tell you what language it is.

2 Likes
3

Thank you for this @petro, that helps a lot. I think ‘templates’ in my world have always meant something completely different and it threw me off, assuming it’s not something I would need. I may have made up the {{{, confused by all the brackets. I’ll let you know I’ll find one in the real world :slight_smile:

4 
...     
        service_data:
          rgb_color:
            - |
              [[[
                return parseInt(
                states['[[Preset]]'].state.split(',')[0] );
              ]]]
            - |
              [[[
                return parseInt(
                states['[[Preset]]'].state.split(',')[1] );
              ]]]
            - |
              [[[
                return parseInt(
                states['[[Preset]]'].state.split(',')[2] );
              ]]]
        card_mod:
          style: |
            ha-card {
              height: 40px;
            }
            :host { --card-mod-icon-color: rgb(
              {{states('[[Preset]]').split(',')[0]}},
              {{states('[[Preset]]').split(',')[1]}},
              {{states('[[Preset]]').split(',')[2]}}
            )}

I hate YAML. Just give me XML, C# & C++.

The only reason I delve into this stuff is because HomeAssistant doesn’t give you the UI to customize it. They only expose a bare minimum and you need loads of plugins from the community store, all because they don’t give a shit about exposing things like a color selector, rgb & white brightness in a light.

They have the code for it in a stupid light popup that’s 3 clicks away, (massively inconvenient) but they don’t expose it via a tile feature and they sure as hell don’t allow you to present that as a wheel, slider in hsv / rgb values or style it in any way.

So instead they force this hell upon you, where you need to create helpers for each light, add plugins, add yaml, add css and then maintain it in each overview tab. Just to have a somewhat decent UX.

I love HomeAssistant because it allows me to tie all my stuff together. But it’s super high maintenance.

5

You know, instead of complaining you can just ask a question. This is the second post in 2 days where you just complain and ask nothing.

Custom mushroom card which looks almost identical to tile card supports this with the UI, no yaml needed.

image
image532×175 26.7 KB

image
image778×800 29.4 KB

And before you complain about using a custom card, the developer of custom mushroom card works for home assistant and is working towards getting that color slider into the tile card.

1 Like
6

Wow, somebody is buthurt and went out of his way to check what and when I’m posting so you can give a snarky reply. Compaining comes with the territory. That’s how stuff gets done and things improve.

The small snippet I posted was part of a much, much, much larger script that add lots of other lighting controls. It was just a simple illustration of what HA asks their users to do just to add basic functionality. That was the point.

I’m working on adding a lot of stuff to a github repo to spare other people the hassle of figuring this out. So no, just using the mushroom card is not enough by a long shot as that one is also missing lots of features.

Additionaly, I’m aware that the mushroom dev has joined the HA team, but it’s been 2.5 years and hue as a tile card feature still isn’t available.

7

I did not go out of my way, you replied to my threads. It’s very easy to notice repeated toxic behavior when you get notifications for it.