Utilizing multiple entities in custom button card

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

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 %}       

image

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';
         ]]]

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';
        ]]]  

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