Custom Button Card with rounded temp values

[PPee]

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

[petro]

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:

Round to at most 2 decimal places (only if necessary)

[petro]

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.

[PPee]

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

[petro]

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

[PPee]

@petro

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

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

[petro]

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));

[PPee]

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

[petro]

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

[PPee]

OK that did it. Thx and kudoos

[michaelltaylor (Michael Taylor)]

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

[Mariusthvdb (Marius)]

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

[VasMan]

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

      - 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

[Mariusthvdb (Marius)]

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

How do you round to one decimal place in JavaScript?

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

[VasMan]

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.