Custom Button Card with rounded temp values

Configuration
1

Hi All,
I’m trying to round my temperature value in a custom button card (see below). Cannot find any clues in the documentation how to do this. Probably javascript Math.round somewhere, but where?
PPee

cards:
  - type: horizontal-stack
    cards:
      - type: "custom:button-card"
        entity: sensor.ch_rte
        name: Room
        icon: mdi:thermometer-lines
        size: 50%
        show_state: true
        styles:
          name:
            - font-size: 80%
          state:
            - font-size: 70%
          grid:
            - grid-template-areas: '"n" "i" "s"'
          icon:
            - color: >
                [[[
                  if (states['sensor.ch_rte'].state < 18 ) return "steelblue";
                  if (states['sensor.ch_rte'].state >= 18 && states['sensor.ch_rte'].state <= 21) return "green";
                  else return "red";
                ]]]
2

When searching for JS functions, use google , not these forums.

For example, I just googled: js round to 2 decimal

and the top result is this link with the answer:

3

as a side note, I have no idea where you’re even rounding in your configuration… Is that intentional? Your JS has nothing to do with showing the state.

4

Hi Petro,
Yes I know how to find js instructions for rounding. The question is how to integrate that into the card config. In the enclosed code it is not integrated yet

5

with state_display

state_display: >
  [[[
    template here using entity.state
  ]]]

Also, make sure you reply using the direct reply button, replying to the thread does not notify the person you’re responding to

image
image870×343 26.5 KB

6

OK Thx Petro,
Tried state_display like below, but no errors and no change in the display. Any suggestions?

  - type: horizontal-stack
    cards:
      - type: "custom:button-card"
        entity: sensor.ch_rte
        name: Room
        icon: mdi:thermometer-lines
        size: 50%
        show_state: true
        styles:
          name:
            - font-size: 80%
          state:
            - font-size: 70%
          state_display: >
            [[[
              return "Math.round(['sensor.ch_rte'].state)"
            ]]]
          grid:
            - grid-template-areas: '"n" "i" "s"'
          icon:
            - color: >
                [[[
                  if (states['sensor.ch_rte'].state < 18 ) return "steelblue";
                  if (states['sensor.ch_rte'].state >= 18 && states['sensor.ch_rte'].state <= 21) return "green";
                  else return "red";
                ]]]
7

first, you’re wrapping your template in quotes, that turns it into a string. Second, states are strings and they need to be numbers. Thrid, you can use the entity attached to the button card. Fourth, you need to add the sigfig rounding.

return Math.round(Number(entity.state)).toFixed(2);

another option…

return Math.round((Number(entity.state) + Number.EPSILON) * 100) / 100;

EDIT, unless you don’t want 2 sig figs and just want to round…

return Math.round(Number(entity.state));
2 Likes
8

Thanks again Petro,
Maybe it is something stupid in my card config, but it does not work. I tried all three solution, but no visible change in the card display. Even when I make an intentional typo in the state_display syntax, like Mathhhh.round … , no errors and no change.

    cards:
      - type: "custom:button-card"
        entity: sensor.ch_rte
        name: Room
        icon: mdi:thermometer-lines
        size: 50%
        show_state: true
        styles:
          name:
            - font-size: 80%
          state:
            - font-size: 70%
          state_display: >
            [[[
              return Math.round(Number(entity.state)).toFixed(2);
            ]]]
          grid:
            - grid-template-areas: '"n" "i" "s"'
          icon:
            - color: >
                [[[
                  if (states['sensor.ch_rte'].state < 18 ) return "steelblue";
                  if (states['sensor.ch_rte'].state >= 18 && states['sensor.ch_rte'].state <= 21) return "green";
                  else return "red";
                ]]]
'''
1 Like
9

state_display doesn’t go in styles, it goes in the root config.

1 Like
10

OK that did it. Thx and kudoos

11

Would someone mind actually showing the solution in code form? I must not understand what you mean by root config.

12

like:

type: custom:button-card
template:
  - main_config
  - styles_card
  - styles_label
  - styles_name_left
  - styles_state
  - styles_img_cell
entity: cover.slaapkamers
state_display: >
  [[[ return 'Cover: ' + entity.state; ]]]

root as in the top level of the button-card config

13

Would anyone be able to kindly advise how I can round up tp 1 decimal place the sensor values in the below button card? I have read this thread and tried few options but not much luck. Many Thanks

Code
Code789×496 67.7 KB

Card

      - type: custom:button-card
        name: Side Access
        icon: mdi:gate
        custom_fields:
          cons: >
            [[[ return '<ha-icon icon="mdi:home-lightning-bolt"
            style="color:orange; width:20px; height:20px;"></ha-icon>' +
            states['sensor.my_home_load_power'].state + 'kW']]]
          bat: >
            [[[ return '<ha-icon icon="mdi:battery-charging"
            style="color:orange; width:20px; height:20px;"></ha-icon>' +
            states['sensor.my_home_charge'].state + '%']]]
          sol: >
            [[[ return '<ha-icon icon="mdi:solar-power-variant-outline"
            style="color:orange; width:20px; height:20px;"></ha-icon>' +
            states['sensor.my_home_solar_power'].state + 'kW']]]
          grid: >
            [[[ return '<ha-icon icon="mdi:transmission-tower"
            style="color:orange; width:20px; height:20px;"></ha-icon>' +
            states['sensor.my_home_site_power'].state + 'kW']]]
          btn:
            card:
              type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  icon: |-
                    {% if is_state(entity, 'locked') %}
                    mdi:lock
                    {% else %}
                    mdi:lock-open
                    {% endif %}  
                  entity: lock.side_gate_2
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'red' if is_state('lock.side_gate_2', 'locked') else 'darkgreen' }};
                        padding: 5px;
                        border-radius: 100px;                           }
                                   }
                - type: template
                  tap_action:
                    action: more-info
                  icon: mdi:cctv
                  entity: camera.side_gate_side_gate
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'green' if is_state('camera.side_gate_side_gate', 'on') else 'Darkblue' }};
                        padding: 5px;
                        border-radius: 100px;   
        styles:
          grid:
            - grid-template-areas: '"n n" "cons btn" "bat btn" "sol btn" "grid btn" "i btn";'
            - grid-template-columns: 1fr min-content min-content min-content min-content;
            - grid-template-rows: min-content min-content min-content min-content min-content 1fr;
            - grid-gap: 10px 0px
          img_cell:
            - justify-content: start
            - position: absolute
            - width: 85px
            - height: 85px
            - left: 0
            - bottom: 0
            - margin: 0 -8px -10px
            - background: '#D2691E'
            - border-radius: 200px
          icon:
            - width: 65px
            - color: white
            - opacity: '0.6'
            - padding-left: 10px
          card:
            - padding: 22px 4px
            - border-color: '#D2691E'
            - height: 300px
          custom_fields:
            cons:
              - justify-self: start
              - font-style: 14px
              - color: orange
            bat:
              - justify-self: start
              - font-style: 14px
              - color: orange
            sol:
              - justify-self: start
              - font-style: 14px
              - color: orange
            grid:
              - justify-self: start
              - font-style: 14px
              - color: orange
            btn:
              - justify-content: end
              - align-self: start
          name:
            - justify-self: start
            - align-self: start
            - font-style: 18px
            - font-weight: 500
            - color: white
          state:
            - min-height: 80px
            - justify-self: start
            - align-self: start
            - color: violet
type or paste code here
14

did you google that exact same question? add javascript, because that is what Button card uses:

btw, you can make your card much simpler to read by using the helpers.localize() function that were introduced in the recent updates. it would at least no longer be required to add the units.

there are also several nifty time functions you can use

15

Thanks for the tip and guidance, will look into this. I am quite new to HA and not coming from any sort of developer background. Whatever I have already setup on my HA is based on reading forums like this and loads of Google search, and experimenting.

I did Google for this for the last 1-2 days and read posts on how to round-up sensor values on HA, but none worked for me. Having said that, my Google search was not specifically related to Javascript, did not even know that button card is that.

16

I know this is an old thread, but it was one that came up when searching on my issue.

Button-card offers a numeric_precision option
numeric_precision: 0 or whatever number of decimals you would like.

17

Yeah, but it doesn’t work when using custom code, like:

type: custom:button-card
entity: sensor.bathroom_temperature
show_icon: false
numeric_precision: 1
name: |
  [[[
    return "Bathroom: " + states['sensor.bathroom_temperature'].state + "°C"
  ]]]

with above card temperature still shows with two decimals.
So numeric_precision appearently only works for original states, like this card works:

type: custom:button-card
entity: sensor.bathroom_temperature
show_icon: false
show_state: true
numeric_precision: 1
1 Like
18

Thus, in a button-card with 2 entities:

  1. Base/main entity, rounded values - no issue. This can be done with the JS functions highlighted here, or the numeric_precision parameter at the root level of the button card. I normally change the precision in the underlying entity settings, which then carries into the button card (eg. default is 2 decimals, changed precision to 1 decimal place, 1 decimal place is displayed in the button-card).

  2. Custom_fields, rounded value - have tried the options here, but none work. Have also tried changing the entitiy’s default precision level in the entity settings, but the change in precision does not carry into the button-card (eg. default is 2 decimals, changed precision to 1 decimal place, the custom_fields still shows the default 2 decimals).

Checking if this understanding is correct, as am still hoping that there is a solution for custom_fields rounding …!

Edit: I solved the custom_fields issue by creating a template sensor which rounds to 1 decimal place, then using the template sensor entity in the custom_fields, instead of the original entity. Not elegant and inefficient, but it works …!

19

Thank you so much! This solved my problem perfectly :slight_smile:

Before my Cards looked very wired because of the too high precision. Here an example, The row “Wohnzimmer” with the couch icon is with rounding, the row “Küche” with the pot icon is without rounding.

IMG_B9239EB7125C-1
IMG_B9239EB7125C-11170×1072 101 KB

1 Like