Change button name color with time

Configuration
1

Hello, I am trying to change the name color of a custom button dependent of time.

Here is the code, but it doesn’t work and I’m wondering what I have wrong? It’s the first if statement part that doesn’t work (everything else is good)

[[[
  if(now().timestamp() | timestamp_custom('%H%M') > 1900){
    if(states['climate.home'].attributes.hvac_action == 'idle') return 'white';
    if(states['climate.home'].attributes.hvac_action == 'heating') return 'orange';
    if(states['climate.home'].attributes.hvac_action == 'cooling') return 'rgb(70,165,255)';
  } else{
    return 'black';
  }
]]]
2

Please define “does not work”. Is it always returning black?

But I think your problem is that you try to mix in Jinja template syntax into a JavaScript template…

3

It just blanks out the button I had completely and throws this error:

ButtonCardJSTemplateError: ReferenceError: now is not defined in ‘if(now().timestamp() | timestamp_custom(’%H%M’) > 1900){ if(states[‘climate.home’].attributes…’

4

I pulled out that portion of code into a separate button to isolate the issue and simply what I’m looking at. Here is the full code for a test button:

type: 'custom:button-card'
entity: climate.home
name: test
icon: 'mdi:fire'
show_label: true
label: label
styles:
  label:
    - color: green
  name:
    - color: |
        [[[
          if(now().timestamp() | timestamp_custom('%H%M'){
            return 'orange'
          } else{
            return 'black';
          }
        ]]]
  card:
    - width: 80px
    - height: 70px
5

You’re missing a “)” in your if-statement.

[[[
  if(now().timestamp() | timestamp_custom('%H%M')) { #<- the second )
    return 'orange'
  } else{
    return 'black';
  }
]]]
6

thank you for the prompt reply. I added the other parenthesis in and sadly I still get the same error.

It doesn’t seem to like the ‘now()’ function call?

I also tried adding a semi-colon after ‘orange’ and that didn’t effect anything

7

Sorry, I didn’t really look at the code after seeing the missing “)”… :open_mouth:

What you’re doing will not work, as you’re mixing Javascript/Jinja2 code with HA template code. “Now()” is a function, that is only available in HA templates, it is not definied in Javascript.

If you want to use now(), you need to set this up in JS first.

8

Using this sensor instead of now() might help:

But yeah as stated twice previously, you cant use jinja template syntax. You have to use JavaScript.

9

Ahh ok, I see what you’re saying. Is there a suitable alternative to that if statement then, to reference a specific time in the appropriate language?

The end goal is to change the label color of my custom custom button. If it’s between 0700 to 1900, I want it orange.

10

I will give this a try!

11

Like I said, no surprise as that’s Jinja, not JavaScript :slight_smile: And that’s what the custom-button-card uses for it’s templates. So think you need to do something with a Date-object.

12

Not very skilled with JS but maybe:

[[[
  var n = new Date();
  var s = new Date();
  s.setHours(19,0,0);
  if(n > s){
    if(states['climate.home'].attributes.hvac_action == 'idle') return 'white';
    if(states['climate.home'].attributes.hvac_action == 'heating') return 'orange';
    if(states['climate.home'].attributes.hvac_action == 'cooling') return 'rgb(70,165,255)';
  }
  else{
    return 'black';
  }
]]]
13

septillion - that code gives me the error of: “ButtonCardJSTemplateError: SyntaxError: Octal literals are not allowed in strict mode. in 'var n = new Date(); var s = new Date(); s.setHours(19,00,0); if(n > s){ if(states[‘clima…’”

14

Made an edit (00 => 0), think / hope that fixes it.

15

septillion - that did it! The problem now is that it doesn’t update without a manual refresh (of the app or webpage). Once I refresh, it does execute correctly and change the color. Any way to have it auto-refresh?

16

This is what I have right now for reference:

type: 'custom:button-card'
entity: climate.home
name: test
icon: 'mdi:fire'
show_label: true
label: label
has_time: true
styles:
  label:
    - color: green
  name:
    - color: |
        [[[
          var n = new Date();
          var s = new Date();
          s.setHours(8,33,0);
          if(n > s){
            return 'orange';
          } else{
            return 'black';
          }
        ]]]
  card:
    - width: 80px
    - height: 70px
17

Mm, that might be harder…

Maybe if you indeed use the a Time & date sensor instead of the Date-object the card may see the update in de sensor and thus refresh. Maybe it even refreshes the template if you just call it. But don’t know when the card will trigger the evaluation of the template.

18

Ok, I appreciate everyone’s inputs. I’ll have to read up on the Time & date sensor Tom posted above - admittedly, all of this is somewhat over my head and I just clunk my way until I find something that works :slight_smile: I never have tried creating my own custom sensor, but I’ll post back if I figure it out, or if any of you could offer a short example/explanation for my specific case.

19

So I watched it for a few minutes with the code septillion posted and even though it doesn’t update at the exact time, it does update after the app is in the background for a few min and I open it back up.

For my purposes, I’ll call this a win as I’m not staring at my app all the time. All I wanted it to do, ultimately, is to change the label color to show when my HVAC is running - before a certain time, one button (the downstairs sensor) will highlight and at night, I have 2 other buttons (the 2 upstairs sensors) running my ecobee and highlighting those. thank you all, again.

20

2 things:
for updating on another entity than the cards entity, you need to use the triggers_update: config option

as it stands it will only update on state changes of the entity, or on reload of the view, which is what you described.

secondly, you have a has_time: true option, which is not a supported config for button-card.