Custom button card - color based on two variables giving me errors

Configuration Frontend
1

I am trying to get a custom button card to change background color based on two variables. The variables are:

variables:
  color_background: red
  color_text: white
  dypriggdybde: '[[[ return states[''sensor.dypriggdybde'']?.state; ]]]'
  dypriggbunnavstand: '[[[ return states[''sensor.dypriggbunnavstand'']?.state; ]]]'

The statement I’m trying to get to work is this:

styles:
  card:
    - border-style: none
    - background-color: >
        [[[ if ((variables.dypriggdybde != 0) and (variables.dypriggbunnavstand ==5)) return variables.color_background; ]]]
    - name:
        - color: >
            [[[ if ((variables.dypriggdybde != 0)  and (variables.dypriggbunnavstand ==5)) return
            variables.color_text; ]]]

But I get an error message:

ButtonCardJSTemplateError
SyntaxError: Unexpected identifier 'and' in 'if ((variables.dypriggdybde != 0) and (variables.dypriggbunnavstand ==0)) return variables.color_b...'

It works when I remove one of the variables and the “and”, like this:

styles:
  card:
    - border-style: none
    - background-color: >
        [[[ if (variables.dypriggdybde != 0) return variables.color_background; ]]]
    - name:
        - color: >
            [[[ if (variables.dypriggdybde != 0) return
            variables.color_text; ]]]

But why can’t I evaluate two variables in these? I tried to replace the and with a | but that seems like it’s only evaluationg the last variable.

2

I have not used Custom button card, but in the docs it says that it uses JS templates JS Templates - custom:button-card documentation (java script). Java script seems to use && for and, according to Logical AND (&&) - JavaScript | MDN . Have you tried that?

3

Bingo! Thank you very much! :grinning:

4

Try to use " && " instead of " and " , and please separate 5 from ==

geesus this forum “update feature” sucks after latest update … first saw the 2 post above after i clicked post, and refreshed browser

5

Yeah, it’s rather slow in that department. But maybe you could help me with this: The text field is a custom field, and I am having problems getting that to obey the color_text variable. This is the full code:

type: custom:button-card
variables:
  color_background: red
  color_text: white
  dypriggdybde: '[[[ return states[''sensor.dypriggdybde'']?.state; ]]]'
  dypriggbunnavstand: '[[[ return states[''sensor.dypriggbunnavstand'']?.state; ]]]'
custom_fields:
  dypriggbunnavstand: |
    [[[
      return `<span style="align: center; font-size: 280px">${ Math.round(states['sensor.dypriggbunnavstand'].state)  }</span> `
    ]]]
show_icon: false
show_name: false
styles:
  card:
    - border-style: none
    - background-color: >
        [[[ if ((variables.dypriggdybde != 0) && (variables.dypriggbunnavstand
        <= 5)) return variables.color_background; ]]]
    - name:
        - color: >
            [[[ if ((variables.dypriggdybde != 0) &&
            (variables.dypriggbunnavstand <= 5)) return variables.color_text;
            ]]]
    - height: 365px
  grid:
    - grid-template-areas: '"dypriggbunnavstand"'

When the two variables are within parameters, it looks like this:

image
image608×462 7.7 KB

What I would like is to get the 0 in the custom field (which of course will vary with depth - this is a setup to show when I’m fishing too deep for the depth under the boat) to be white when the the background is red, for better contrast. So the color_text should be applied based on the same variables as the colo under name (which is not used, name isn’t shown). I have tried a bunch of variations, but haven’t gotten anywhere.

6

Well i haven’t looked at the button_cards lately, but i see in mine that i have “defined” everything within the Custom_field, meaning the “Style tag also”
In 1 Card i have 7 custom_fields :laughing:, so it’s nothing i can control in the card#style.(
Beside most of my button_cards have button_card_templates, in the view Header, to define the “common” structure and “default style” )

As both your background-color and -name: color is a result of same “equation” it could be inside your Custom_field

I think your just “lucky” that the “Card” background_color , is the same “size/place” as your Custom_field … thou maybe i don’t see the whole card

You need to add a

custom_fields:
      dypriggbunnavstand: |
        [[[
          return

Here is 1 of my more common , where i style the icon and state ( in a custom_field )


                      return `<ha-icon
                        icon="mdi:weather-dust"
                        style="width: 18px; height: 18px; color: #FFBF00">
                        </ha-icon>&nbsp;<span>GUST: <span style="color: #FFBF00">${parseFloat(states['sensor.annerstad_wind_speed_max'].state)} m/s</span></span>`
                    ]]]

And 1 where i only style the icon

return `<ha-icon
          icon="fapro:arrow2"
          style="width: 25px; color: #6495ED; transform: rotate(270deg)">
          </ha-icon>

So i would “combine” your “if” with an “else” And style inside. I.e
Not tested ! , just a “rough example” copy paste, from here an my views :laughing:

custom_fields:
  dypriggbunnavstand: |
    [[[ if ((dypriggdybde != 0) &&
            (dypriggbunnavstand <= 5)) 
        return ` >>>>>> State(as below) + style of background+state_color
          `;
        else
        return `return ( Your Style for default ) ${ Math.round(states['sensor.dypriggbunnavstand'].state)  }</span> `]]]

Well i see you already have the style tag inside you custom_field, so use this and place the whole shebang inside

Note: Skip the variables, as they are kind of “static” and strict related to you “equation”
You can also "add as many “If” after each other( before the final else)

I Use the “rotate” above for a Wind-direction Icon, covering 8(if) directions and a “crashed” for (else)

7

Since you are using a custom field instead of name, move the name style to custom field’s style:

8

true, if he also have defined the default color , but still i think this use of “Variable” is not efficient, and causes more templates(5) for 1 single “Change”

9

Thanks for the help, both of you! It may be that variables aren’t efficient, but it works. I’m sure my Pi 5 8G can take it. :grin: So now it looks like I want it to!

image
image591×461 7.59 KB