Utilizing multiple entities in custom button card

Configuration
,
1

Upfront warning… I’m very new to home assistant and trying my best to wrap my head around the amount of options and settings you can play with. I am attempting to setup a custom button card for pool information (mqtt) and I’m finding myself running into some struggles with understanding commands. My first path was to have a custom “name” based on state of another entity.

This command was: name: ‘[[[ return ${states[''sensor.pool_water_temp''].state} °F ]]]’

I would like to duplicate this to change the icon color based on pool_heater_status (off, hpheat, hpcool) using the status as a variable in a template (long term) but I find myself struggling to make this work and I think it’s due to struggling to figure out what everything in the statement is doing and when I need quotes and when I don’t.

Does anyone have any documentation they can point a newbie to in order to help figure stuff out? for example I can’t figure out what the “return” command is doing above or what states[“sensor.pool_water_temp”].state is doing (seems confusing because state is used twice).

Sorry for the basic question but I have searched a ton and can’t quite seem to figure it out. If i need to start with a wemo or hue device becuase MQTT is more complicated please let me know.

Thank You

2

I’ve been trying to play with this using and researching but I can’t find the right syntax. I got the title working so I know the state of the sensor… What am I doing wrong?

type: custom:button-card
entity: switch.pool
show_state:
variables:
  - test: "red"
name: '[[[ return `${states[''sensor.pool_heater_status''].state}` ]]]'
styles:
  icon:
    - color: >
         {% if states['sensor.pool_heater_status'].state,'off') %}
           return Red
         {% endif %}
3

image

4

custom button card uses js templates only. The template you have for color is a mixture of js and jinja.

You have to use all js. Also, you need to return color names that js understands. Keep everything lowercase and a string.


    - color: |
         [[[
           if states['sensor.pool_heater_status'].state === 'off'
             return 'red';
         ]]]
5

Thank you for the reply (I’ll do some digging on how to program js) i’ve only used MATLAB before. I copied over your chode but i get a error “ButtonCardJSTemplateError: SyntaxError: Unexpected identifier in ‘if states[‘sensor.pool_heater_status’].state === ‘off’ return ‘red’;’”

I think the error lies in the if statement line but I’m struggling to find it.

type: custom:button-card
entity: switch.pool
variables:
  - test: "red"
name: '[[[ return `${states[''sensor.pool_heater_status''].state}` ]]]'
styles:
  icon:
    - color: |
        [[[
          if states['sensor.pool_heater_status'].state === 'off'
            return 'red';
        ]]]
6

I think I got it… Missing ( ) and off was capital

type: custom:button-card
entity: switch.pool
variables:
  - test: "red"
name: '[[[ return `${states[''sensor.pool_heater_status''].state}` ]]]'
styles:
  icon:
    - color: |
        [[[
          if (states['sensor.pool_heater_status'].state === 'Off')
            return 'red';
        ]]]
1 Like