Looking to add different information based on button card state

Configuration Frontend
1

I have a button card that checks the status of my dishwasher, and when the state is in “run” it flashes, and goes to green when in “stop.” What I am trying to achieve is, when the state is in “run” I want the label below to show the completion time, which is another entity completely, however, when it is in “stop” state, I just want it to say “Dishwasher.”

Is this possible with the custom button card? Here is my current code.

type: custom:button-card
entity: sensor.dishwasher_dishwasher_machine_state
icon: mdi:dishwasher
show_state: false
show_name: true
name: Dishwasher
state:
  - color: green
    value: stop
  - color: red
    value: run
    icon: mdi:dishwasher-alert
    styles:
      icon:
        - animation: blink 1.5s ease infinite
2

try this one.
I guess you want the name to change, not the “label”?
if so, let me know and I’ll change to code accordingly.

type: custom:button-card
entity: sensor.dishwasher_dishwasher_machine_state
icon: mdi:dishwasher
show_state: false
show_name: true
name: Dishwasher
state:
  - value: run
    color: red
    name: |
      [[[
      var a = entity.state;
      var b = states['sensor.completion_time'].state;
      if (a == 'run') return b;
      else return '';
      ]]]
    styles:
      icon:
        - animation: blink 1.5s ease infinite
  - value: stop
    name: DISHWASHER
    color: green
3

So this definitely does achieve exactly what I asked for, however it presents me another issue. If I view the completion time sensor in the device list, it says “in 24 minutes,” however, when I view it in dev tools (and on the button) it gives me the UTC time stamp. I wonder how to make the output more “friendly” to match the smartthings integration device list.

4

first of all, I have a minor correction for my previous code.
you could change the entity name from “Dishwasher” to “STATE UNKNOWN”.
this way when state is lost, you’ll get “state unknown”.

type: custom:button-card
entity: sensor.dishwasher_dishwasher_machine_state
icon: mdi:dishwasher
show_state: false
show_name: true
name: STATE UNKNOWN

for your second issue, could you provide an image of the differences between the device list and dev tools?

5

Yea, I tried uploading pictures but I kept getting errors.

This is what the card said when it was running:
2023-11-10T09:21:13+00:00

When I navigate to Devices and open up the dishwasher, under the same sensor, it renders in a “friendlier” way and it said “in 18 minutes”

I’m sure it is doing some back end calcs to render that. Would be awesome if I could recreate it for sure. If not, it’s not the end of the world.

6

hard to tell without a picture, it could be an attribute you’ll have to use and not the state.

7

Uploaded the pictures to imgbb. Let me know if that works

8

OK great, I can see the pictures now.
can you go to devices and click on the line where it says Dishwasher Completion, then go to the cogwheel in the right top corner and look for the entity ID?
that should give you the correct sensor to use.

replace the sensor name in the var b = part of the code where it says HERE:

var b = states['sensor.HERE'].state;
9

I have simplified the code:

type: custom:button-card
entity: sensor.dishwasher_dishwasher_machine_state
icon: mdi:dishwasher
show_state: false
name: STATE UNKNOWN
state:
  - value: run
    name: '[[[ return states["sensor.dishwasher_completion"].state; ]]]'
    color: red
    styles:
      icon:
        - animation: blink 1.5s ease infinite
  - value: stop
    name: DISHWASHER
    color: green
10

Yea, that’s why I was surprised to see the output so different, because that’s where I got the entity ID from. It just seems that on the device list, it is running some calcs on the backend to come up with the friendly output, while the sensor itself shows the UTC timestamp in raw form on the button. Long story short, it’s the same one I have in the code when I was running it last night. That being said, I will plug in the new code you simplified, and give it a shot tomorrow when I run the dishwasher again and I’ll report back what it says.

Thanks for all of your help. I’ll talk to you soon!

11

ok strange.
I must admit, I don’t have enough knowledge to know why there’s a difference, never had something similar on my system.
does the entity have attributes perhaps?

is the timestamp you get the current time or the time when the dishwasher will stop?

12

The only two attributes on that sensor is device class and friendly_name, but the friendly_name attribute just outputs “Dishwasher Dishwasher Completion Time” haha

I was, however, able to play around with this template and I got it to output in dev tools exactly what I am looking for. I just need to put it into the code you simplified and am not having any luck with that.

{{ (as_timestamp(states('sensor.dishwasher_dishwasher_completion_time')) - as_timestamp(utcnow())) | timestamp_custom('%HH:%MM:%SS', false) }}
13

ok great, I was doing the same thing lol. (hence my question about the timestamp)
try adding the following to your templates.yaml
it will create a new sensor called sensor.time_left you can use in the code for your card, instead of sensor.dishwasher_dishwasher_completion_time.

# time left
  - sensors:
      time_left: 
        friendly_name: time left
        value_template: "{{ (as_timestamp(states('sensor.dishwasher_dishwasher_completion_time')) - as_timestamp(utcnow())) | timestamp_custom('%HH:%MM:%SS', false) }}"
14

Booyah. Works perfectly. I also created one for my range and it looks great as well. Thank you again for all of your help. Here is the final product, in case anybody in the future wants the code.

Credit: Krivatri

Dishwasher Sensor Code

##### time_left sensor dishwasher ###############
- platform: template
  sensors:
    time_left_dishwasher: 
      friendly_name: time left dishwasher
      value_template: >-
        {{ (as_timestamp(states('sensor.dishwasher_dishwasher_completion_time')) - as_timestamp(utcnow())) | timestamp_custom('%HH:%MM:%SS', false) }}

Dishwasher Button

type: custom:button-card
entity: sensor.dishwasher_dishwasher_machine_state
icon: mdi:dishwasher
show_state: false
name: STATE UNKNOWN
state:
  - value: run
    name: '[[[ return states["sensor.time_left_dishwasher"].state; ]]]'
    color: red
    styles:
      icon:
        - animation: blink 1.5s ease infinite
  - value: stop
    name: Dishwasher
    color: green

Range Sensor

##### time_left sensor range ###############
- platform: template
  sensors:
    time_left_range: 
      friendly_name: time left range
      value_template: >-
        {{ (as_timestamp(states('sensor.range_oven_completion_time')) - as_timestamp(utcnow())) | timestamp_custom('%HH:%MM:%SS', false) }}

Range Button

type: custom:button-card
entity: sensor.range_oven_machine_state
icon: mdi:stove
show_state: false
name: STATE UNKNOWN
state:
  - value: running
    name: '[[[ return states["sensor.time_left_range"].state; ]]]'
    color: red
    icon: mdi:fire
    styles:
      icon:
        - animation: blink 1.5s ease infinite
  - value: ready
    name: Range
    color: green
15

nice!
glad we found a solution.
I guess you could go one further if you like, by changing the notation of your timestamp.
see Convert date and time template