Style value - when using sensors with numerical value

[andyblac]

Is your feature request related to a problem? Please describe. At the moment when using styles with a sensor that has a state of a number (ie number of lights on 4), we have to code a style for every possible permutation.

Describe the solution you'd like Would it be possible to allow the value field to use functions like value: ">0" or value: ">0 && <6".

Additional context It is very bloating to use the method that is now ie if I want to have a button color of yellow if 'any' lights are on i have to add a style value and color mapping for every number of lights in my house.

[mlohus93]

Related to using sensors with numerical values, I have found that button-card is NOT utilizing the precision setting of the entity. For example, a temperature sensor is providing 73.59F but with the precision setting recently added to the entities in home assistant, I can have that show as 73.6F in the entity and on a standard home assistant entity card. Unfortunately, the custom-button-card still tries to show 73.59F. Please update button-card to utilize the precision as set in the entity.

[Mariusthvdb]

Additional context It is very bloating to use the method that is now ie if I want to have a button color of yellow if 'any' lights are on i have to add a style value and color mapping for every number of lights in my house.

Did you even try to read the documentation and understand the options of this card?

You can create a button_card_template (with the styling settings you desire using a single js template in that button_card_template), and inject that into any card you may use in the dashboard.

Please close as this is core functionality of the current card

to @mlohus93

please dont mix questions, for otherwise the topics cant be followed up correctly.

Your FR is a different and valid one, aas it asks button card to follow the new state display functionality in HA Core Frontend. Others have already posted the FR too, so maybe join those and +1?

[andyblac]

I did try to read and styles, there no need to be like that. jeez, think you need to chill out bud.

the instruction says

  state:
    - value: 'on'
      styles:
        card:
          - yyyy: value
        icon:
          - yyyy: value
        entity_picture:
          - yyyy: value
        name:
          - yyyy: value
        state:
          - yyyy: value
        label:
          - yyyy: value

but as I stated for a sensor that uses numbers ie 1,2.3.4. etc for total number of lights on, having the - value: 'on' does NOT work and this means that you have to do a state style for EVERY state, IF you are saying there another way, then please take the time and explain it.

[Mariusthvdb]

yes, that is 1 part of the docs, on using state: now consider using smth like:

  styles:
    icon:
      - color: >
          [[[ return (entity.state > 0) ? 'red' : 'green'; ]]]

and build on that if you desire more granularity. you can make it as detailed as you'd like with some extra states to evaluate.

even set variables for those colors, based on other entities/attributes:

variables:
  text_color: >
    [[[ var index = Math.round(entity.attributes.uv_index);
        var colors = ['green','green','green','green',
                      'orange','orange','blue',
                      'maroon','maroon',
                      'red','red'];
        return colors[index] || 'grey'; ]]]

and use that inside the config option:

  custom_fields:
    notification:
      - border-color: var(--primary-color)
      - color: >
          [[[ return (entity.state === 'on') ? variables.text_color : 'white'; ]]]

hope that helps? if you want a straightforward js template for changing colors for lets say a temp sensor, you can use smith like this:

          icon_color: >
            if (state < 0.5) return 'lightblue';
            if (state < 1.5) return 'paleturquoise';
            if (state < 3.3) return 'aquamarine';
            if (state < 5.5) return 'greenyellow';
            if (state < 7.9) return 'lime';
            if (state < 10.7) return 'mediumspringgreen';
            if (state < 13.8) return 'yellowgreen';
            if (state < 17.1) return 'navy';
            if (state < 20.1) return 'gold';
            if (state < 24.4) return 'orange';
            if (state < 28.4) return 'tomato';
            if (state < 32.6) return 'orangered';
            return 'crimson';

[andyblac]

yes, thank you, that is really helpful.

I came up with this

    ulm_active_state: >
      [[[
        let not_active = ['0','disarmed','off','closed','not_home','standby','idle','docked','unknown','unavailable','paused']
        function containsNumbers(str) {
          return /\d/.test(str);
        }
        if (!not_active.includes(entity.state)) {
          if (containsNumbers(entity.state)) {
            return entity?.state;
          }
          return entity?.state; 
        }
      ]]]

  state:
    - value: "unavailable"
      styles:
        custom_fields:
          notification:
            - border-radius: "50%"
            - border: "2px solid var(--card-background-color)"
            - width: "24.5px"
            - height: "24.5px"
            - position: "absolute"
            - left: "50%"
            - top: "50%"
            - transform: "translate(-50%,-50%)"
            - margin-top: "-8%"
            - margin-left: "-25%"
            - line-height: 0
            - background-color: "[[[ return 'rgba(var(--color-red),1)'; ]]]"
    - styles:
        name:
          - color: "[[[ return 'rgba(var(--color-'+variables.ulm_card_status_color+'),1)'; ]]]"
        label:
          - color: "[[[ return 'rgba(var(--color-'+variables.ulm_card_status_color+'),1)'; ]]]"
        icon:
          - color: "[[[ return 'rgba(var(--color-'+variables.ulm_card_status_color+'),1)'; ]]]"
        img_cell:
          - background-color: "[[[ return 'rgba(var(--color-'+variables.ulm_card_status_color+'),0.2)'; ]]]"
      id: "on"
      value: "[[[ return variables.ulm_active_state ]]]"

but, I will now try to recode with a cleaner way. thanks,