#An alternative to custom:bignumber-card

1 messages · Page 1 of 1 (latest)

glad mantle
#

@craggy sinew After looking into it a bit more, the custom:bignumber-card just doesn't have the flexibility for styling and can make the card difficult to read. The card has not been updated in a year and issues seem to go unanswered. This sucks because the gauge portion of the card was really nice. So, I set out to recreate the general look of the card albeit the gauge portion. In the screenshot, from left to right, is my rendition, the bignumber-card with some limited styling applied, and the stock bignumber-card:

image.png
# 
type: custom:button-card
entity: sensor.outside_temperature
name: '[[[ return parseInt(entity.state)]]] '
label: Outside
show_icon: false
show_state: false
show_label: true
show_name: true
variables:
  background_color: |-
    [[[ 
      var temp = parseInt(entity.state);
      if (temp > 85) return 'red';
      else if (temp >= 70) return 'yellow';
      else if (temp >= 50) return 'lime'
      else if (temp >= 30) return 'blue'
      else return 'white';
    ]]]
  text_color: |-
    [[[ 
      var temp = parseInt(entity.state);
      if (temp > 85) return 'white';
      else if (temp >= 70) return 'black';
      else if (temp >= 50) return 'white'
      else if (temp >= 30) return 'white'
      else return 'black';
    ]]]      
styles:
  card:
    - width: 150px
    - height: 150px
    - background-color: '[[[ return variables.background_color ]]]'
    - border-radius: 20px
    - border: 5px solid 
    - border-color: '[[[ return variables.text_color ]]]'
    - '--ha-card-box-shadow': none
  name:
    - color: '[[[ return variables.text_color ]]]'
    - padding-top: 90px
    - font-weight: bold
    - font-size: 65px
  label:
    - color: '[[[ return variables.text_color ]]]'
    - padding-top: 0px
    - font-weight: bold
    - font-size: 22px
    - font-variant: small-caps```
#

In my rendition, I use the custom:button-card. https://github.com/custom-cards/button-card I set variables for background and text colors with five different "levels", rounded the corners a bit more, added a thicker border which matches the text_color. The name, in this case, uses the value of a temperature sensor and returns just the integer. This code could easily be turned into a template and several buttons can be created with minimal repetition. (Basically, if you're going to use this card more than once, make a template for it: https://github.com/custom-cards/button-card#templates-support)

celest lion
#

Cool! I downloaded that button card a while back with the intention to using it. Now I have the spark to explore it more with your help! I like how you did your alternative. I noticed that with the default theme, sometimes the cards in the original one (Big number -card) would not properly change, or stay static as blue when it should have been red. I also noticed the inactivity in the project.

glad mantle
#

The custom:button-card is probably one of the most versatile cards. A lot can be done with it. This is an example that I collaborated on a while back for a custom person card. The ring around the icon changes colors depending on location. Plus, it is capable of four added bits of info: phone's battery percentage, Wifi connection, location, and steps tracked.

image.png