Lovelace: Button card

[max5962]

Hello,

After hours of debugging i didn’t find the reason of the bug.
My button do not change of color, text did, but not the color :

chips_icon:
  template: chips
  show_icon: true
  size: 80%
  show_state: false
  tap_action:
     action: more-info  
     entity: '[[[ return variables.entity ]]]'
  variables:
    icon: "mdi:arrow-left"
    entity: "alarm_control_panel.tyxal_alarm"
    prefix: ""
  icon: '[[[ return variables.icon ]]]'
  label: |
    [[[
      if (states[variables.entity].state == 'disarmed'|| states[variables.entity].state == 'off'){
         return variables.prefix + ` Désactivée`
      }
      if (states[variables.entity].state == 'armed' ||  states[variables.entity].state == 'on'){
         return variables.prefix + ` Activ..e`
      }
      return '??' ;
    ]]]
  styles:
    grid:
      - grid-template-areas: '"i l"'
    label:
      - justify-self: center
      - padding: 0px 6px
      - font-weight: bold
      - font-size: 14px
      

chips_color:
  template: chips
  show_icon: true
  size: 80%
  show_state: false
  triggers_update: all
  tap_action:
     action: more-info
     entity: '[[[ return variables.entity ]]]'
  variables:
    icon: "mdi:arrow-left"
    entity: ""
    prefix: ""
    min: 0
    max: 6
  icon: '[[[ return variables.icon ]]]'
  label: |
    [[[
      if (states[variables.entity].state < variables.min)
        return variables.prefix + " bas"
      if (states[variables.entity].state > variables.min && states[variables.entity].state < variables.max)
        return variables.prefix + " moyen"
      if (states[variables.entity].state > variables.max)
        return variables.prefix + " haut"
      return '??' ;
    ]]]
  states:
    - operator: '>'
      value: variables.max
      styles:
        icon:
          - color: 'rgba(var(--color-red),1)'
        img_cell:
          - background-color: 'rgba(var(--color-red),0.2)'
        card:
          - background-color: 'rgba(var(--color-background-red),var(--opacity-bg))'
        name:
          - color: 'rgba(var(--color-red-text),1)'
        label:
          - color: 'rgba(var(--color-red-text),1)'
    - operator: '<'
      styles:
        icon:
          - color: 'rgba(var(--color-green),1)'
        img_cell:
          - background-color: 'rgba(var(--color-green),0.2)'
        card:
          - background-color: 'rgba(var(--color-background-green),var(--opacity-bg))'
        name:
          - color: 'rgba(var(--color-green-text),1)'
        label:
          - color: 'rgba(var(--color-green-text),1)'
      value: variables.min
    - operator: 'default'
      styles:
        icon:
          - color: 'rgba(var(--color-yellow),1)'
        img_cell:
          - background-color: 'rgba(var(--color-yellow),0.2)'
        card:
          - background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
        name:
          - color: 'rgba(var(--color-yellow-text),1)'
        label:
          - color: 'rgba(var(--color-yellow-text),1)'
      
  styles:
    grid:
      - grid-template-areas: '"i l"'
    label:
      - justify-self: center
      - padding: 0px 6px
      - font-weight: bold
      - font-size: 14px

              - template: chips_color
                variables:
                   icon: "mdi:sunglasses"
                   entity: "sensor.wattignies_uv"
                   prefix: "UV :"
                   min: 3
                   max: 6
                type: 'custom:button-card'

any idea ?

EDIT : theme :

      #main interface colors
      primary-color: '#434343'
      google-red : '#F54436'
      google-green : '#01C852'
      google-yellow : '#FF9101'
      google-blue : '#3D5AFE'
      google-violet : '#661FFF'
      google-grey: '#BBBBBB'
      color-red : 245, 68, 54
      color-green : 1, 200, 82
      color-yellow : 255, 145, 1
      color-blue : 61, 90, 254
      color-purple : 102, 31, 255
      color-grey : 187, 187, 187
      color-pink : 233, 30, 99
      color-theme : 51,51,51
      color-background-yellow : 250, 250, 250
      color-background-blue : 250, 250, 250
      color-background-green : 250, 250, 250
      color-background-red : 250, 250, 250

      color-yellow-text: 'var(--primary-text-color)'
      color-blue-text: 'var(--primary-text-color)'
      color-green-text: 'var(--primary-text-color)'
      color-red-text: 'var(--primary-text-color)'
      opacity-bg: '1'

thanks

[paddy0174 (Patrick)]

Nothing wrong with th card, it shows exactly like it should. Smaller screen = card get’s fitted. Everything is there, the border, the margins/paddings, looks fine! What do you want to have different?

Forget it, just realised, the last line of buttons is missing… I’ll have to look again.

[paddy0174 (Patrick)]

What exactly is not working? Colors is, unfortunately, not specific enough.

My guess, you’re getting always the “default” styles, as the variables in value should normally be a javascript template. So first change

states:
    - operator: '>'
      value: variables.max

to

states:
    - operator: '>'
      value: "[[[ return variables.max ]]]"

and see if it works like you want. Otherwise specify a little more, or just show a picture of what it looks with this code, and what you want to have in the end.

[paddy0174 (Patrick)]

After looking at it again, my guess would be the aspect_ratio. Remove the aspect ratio and see how hard it hits the design … I’m quite sure, you’re limiting the resize (because of the aspect_ratio) and therefor it get’s cut in smaller windows.

Try experimenting with it in the browser window, where you can make the window bigger and smaller to see the result.

EDIT: Google Chrome has a good develper tool, there you can view your layout in different sizes (pre-configured)

[KameDomotics]

If I delete aspect_ratio, the card disappears…

[paddy0174 (Patrick)]

That’s unfortunate, but it is the source of the display problem…

I’d say you’d have to start again, as with aspect_ratio you won’t get the result you wanted. I can only speak for the Minimalist “theme”, and there the alarm card is handled a lot different than other cards. You might want to take a look at the alarm_card clemalex made, maybe this helps you?

Lovelace UI • Minimalist

[animate] [image] J’ai retravaillé la carte alarme pour qu’elle colle mieux au désign. Je laisse le code pour ceux qui veulent l’améliorer I reworked the alarm card to match the minimalist design. I share the code for those who want to improve it type: vertical-stack cards: - card: entity: alarm_control_panel.alarme states: - arm_home style: .: | ha-card > ha-label-badge{ --alarm-state-color: var(--google-green-500) !…

[max5962]

Thanks for your help.

Chips_icon is the “UV : HAUT” card

The card do not update the style (text-color or background color) according the entity state.

If entity.uv > max (6), the card should display “prefix” + “haut” (works well) and change the background color to red (not working)

Edit : I tried your fix but it doesn’t work

[paddy0174 (Patrick)]

I can’t try it myself, can’t get to my PC right now, sorry. So bear with me…

Have you tried using the template function instead for the operator? Like so:

states:
  - operator: template
    value: >
      [[[
        if (states[variables.entity].state < variables.min)
          return true;
      ]]]
    styles:
      [...]

And for the other states as well. The value needs to return true, to use the style underneath its definition.

And you should leave the “fix” from before in place. Even if it wasn’t the culprit here, it is the best way to use it like this.

EDIT: any error messages in the developer console of the browser?

[max5962]

Yes template works well ! Thanks a lot !!

[Pirol62 (Jörg Nauen)]

Hi,
I have the following issue:
In order to display an adress I readout the subattribute of a places sensor:

var street = states['sensor.joergs_location'].attributes.street

Sometimes, this attribute is null.
Then an error appears:

ButtonCardJSTemplateError: TypeError: Cannot read properties of null (reading 'substring') in 'var street = states['sensor.joergs_location'].attributes.street var number = states['sensor.jo...'

How can I manage this error so that the card is simply displayed with ‘unknown’?
I tried to insert an if clouse 'If states[‘sensor.joergs_location’].attributes.street is not null or != null

That doesn’t work. Has anybody an idea?

Maybe for better understanding, the whole code looks like this and basically works:

name: |
  [[[
      var street = states['sensor.joergs_location'].attributes.street
      var number = states['sensor.joergs_location'].attributes.street_number
      street = street.substring(0,30)
      if (states['sensor.joergs_location'].attributes.devicetracker_zone == 'not_home') 
         return street + ' ' + number;
      else return states['person.jorg'].state;
  ]]]
label: |
  [[[
     var town = states['sensor.joergs_location'].attributes.city
     var postal = states['sensor.joergs_location'].attributes.postal_town
     town = town.substring(0,30)
     postal = postal.substring(0,30)
     if (town == '-') return postal;
     else return town;
  ]]]

[Mariusthvdb (Marius)]

thats probably because the entity doesnt exist or has unknown/unavailable state. you need to test for that:

          [[[ if (entity && entity.attributes && entity.attributes.templates) {
                const tpl = entity.attributes.templates;
                if (tpl.icon_color) {
                  return new Function('state', `'use strict'; ${tpl.icon_color}`).call(this, entity.state);
                }
              }
              return null; ]]]

sorry if this is a bit of a complex example, but the crux is in the first line…

also you might be better of by setting the var to states['sensor.joergs_location'] and reference that in the rest of the template, to make it shorter and more readable

this one is a better example:

    styles:
      card:
        - background-color: var(--background-color-off)
        - color: >
            [[[ if (entity) return entity.attributes.icon_color;
                return 'var(--secondary-text-color)'; ]]]

[Pirol62 (Jörg Nauen)]

Thanks Marius,

I understand, that you check if the entity is valid in the first if clause.
But my problem is, that the entity is valid but the content of the attribute is null.
in other languages, I can simply check with a function like ‘ISNULL(value) = true’
I tried this

if (states['sensor.joergs_location'].attributes)

this doesn’t work because the entity is valid

[Mariusthvdb (Marius)]

it’s either the entity itself you check for existence (the above set of template checks does that), and one could even use this for that:

exist:
  styles:
    card:
      - display: >
          [[[ if (!entity) return none; ]]]

or if it does exist but still throws the error of null or none, you should check if the entity.state is not in [‘unavailable’,‘unknown’]. In fact you should always do that…

like this in jinja templates for automation conditions:

    condition:
# first check if the state (the entity) itself exists
      - >
        {{trigger.to_state is not none and
          trigger.from_state is not none}}

# next check if the states state is not unknown
      - >
        {% set x = ['unavailable','unknown'] %}
        {{trigger.to_state.state not in x and
          trigger.from_state.state not in x}}

# finally check if the old and new states are not identical
      - >
        {{trigger.to_state.state != trigger.from_state.state}}

[Pirol62 (Jörg Nauen)]

@Mariusthvdb

if (!entity) return none

  [[[
    if (!states['sensor.yvonnes_location'].attributes.street) return 'unknown';
    else
      var street = states['sensor.yvonnes_location'].attributes.street
      var number = states['sensor.yvonnes_location'].attributes.street_number
      street = street.substring(0,30)
      if (states['sensor.yvonnes_location'].attributes.devicetracker_zone == 'not_home')
         return street + ' ' + number;
      else return states['person.yvonne'].state;
    ]]]

result is the error described above, because the entity is valid but the attribute “street” returns null and that cannot be computed.
All what I need is a method that handles this return value.

if  states['sensor.yvonnes_location'].attributes.street is null return 'unknown';

I tried it, but it doesn’T work

this is the state of the entity:

[Mariusthvdb (Marius)]

hmm, ok, so the entity exists, it even has a state, but none of the attributes has a valid value.

simple check for ‘null’ on the attributes, where you now check for ‘unknown’

or maybe even better the integration. that creates these entities … which is that?

you can check the template editor in dev tools with a jinja template

{{state_attr('sensor.yvonnes_location','street')}} and
{{is_state_attr('sensor.yvonnes_location','street','null')}} to see if it actually returns the string ‘null’ ? Or whether it is in fact not yet set, and thus still null (so not the string), in which case you can check for none

[Pirol62 (Jörg Nauen)]

@Mariusthvdb

{{state_attr(‘sensor.yvonnes_location’,‘street’)}}

{{state_attr('sensor.yvonnes_location','street')}}

simply returns nothing

[Mariusthvdb (Marius)]

exactly, test for none on the attribute
{{state_attr('sensor.yvonnes_location','street') is none }} will return true ?

[Pirol62 (Jörg Nauen)]

Yes, that works

{% if state_attr('sensor.yvonnes_location','street') is none  %} 'test' {% else %} 'huhu' {% endif %}

[Mariusthvdb (Marius)]

right, so no you know what to test for in those JS templates

return none;

[Pirol62 (Jörg Nauen)]

Thanks for your help! Now I have the approach!
In the end I still have the possibility to define a sensor That’s maybe easier.