Basic questions about dashboard scripting

Configuration
1

I’m trying to do something simple. And the fact that I can’t do it after hours of trying makes things frustrating, but I bet there’s going to be some simple answers that will be super helpful.

Here’s what I’m trying to do - add a custom button card item that shows the sun rise time. That’s it. Something quite simple, and using an entity card it was super easy. But I’m trying to include it in a custom button card this time.

So my basic questions are (and this is the totally confusing part for me):

For let’s say, a label (or name) as part of an custom button card, what’s the difference for these items:

  1. Using a pipe (|) vs a greater than (>) sign? I’ve seen both and don’t know when to use what. This appears right after the “label:” tag, for example.

  2. Do I need [[[ or {{{ or {% to start the code? It’s not clear to me what each of them do.

  3. I think I need to use “return X” to return a value to the name or label, which I understand.

But my timestamp code doesn’t work. For example, this shows the info I need but in a timestamp, unreadable format:

      - type: custom:button-card
        entity: sun.sun
        name: >
          [[[
            return entity.attributes.next_rising
          ]]]

But something like this doesn’t work. And I’ve tried many variations:

return (strptime(entity.attributes.next_rising, "%H-%m"))

I’ve tried as_timestamp, some “custom_time” thing, etc. and nothing works.

Any help and answers to my other questions above?

Thanks in advance

2

I totally get the confusion. It comes from the fact that you are dealing with multiple languages that are mixed together in one file.

Yaml is a way to define structured data. HA defines the structure of the data it understands. That data can be a way to add an integration or define an entity. it can hold an automation, script, dashboard definition, …

Some of the data Home Assistant allows is related to custom integrations, that can in their turn define other data structures, containing other languages. So the data may contain many languages, such as jinja2 templates, css styling, javascript, …

The | |- > >- symbols come from yaml syntax, and are the way to represent data consisting of multiple lines:

Home assistant allows jijnja2 templates to allow dynamic data in many places, those are the {% and {{
https://documentation.bloomreach.com/engagement/docs/jinja-syntax

Because jinja2 templates are often multiple lines, you’ll frequently see it combined with the yaml multiline sequence. A lot of the times it does not matter much which multiline variant you use.

Custom:button card uses the [[[ to be able to embed javascript in the front end, and this delimiter is what you should use here. I’m not that much of an expert on python or javascript, but I think you are trying to use python where javascript is expected.

3

Thank you that all is super helpful!

The jinja2 tag were good to learn about, and the fact that the custom button card uses JS also clarifies things. So the right “google search” was how to do datetime operations in javascript. This ended up giving me the data I was trying to get to put into a custom button element:

      - type: custom:button-card
        entity: sun.sun
        name: |
          [[[
            var t = new Date(states['sun.sun'].attributes.next_rising);
            var options = {hour:'numeric', minute:'2-digit'}
            return "Sunrise " + t.toLocaleTimeString("en-US", options);
          ]]]
        template: standard
        show_state: false
        show_name: true
        show_icon: false

Firefox_Screenshot_2024-07-21T02-53-23.851Z

1 Like