Lovelace: BigNumber card


#1

BigNumber card

With various people requesting larger numbers for sensors we got to here. The card supports showing one big number but also severity colors with bar.

bignumber

You can find the code here

Instructions

The instructions are also found on the above repo.

  1. Download bignumber-card.js
  2. Place the file in your config/www folder
  3. Include the card code in your ui-lovelace.yaml
resources:
  - url: /local/bignumber-card.js?v=1
    type: js

Note: You can change v=1 to a higher number whenever updating code to avoid having to clear cache in all browsers

  1. Write configuration for the card in your ui-lovelace.yaml
- type: custom:bignumber-card
  title: Humidity
  entity: sensor.outside_humidity
  scale: 30px
  from: bottom
  min: 0
  max: 100
  severity:
    - value: 70
      style: 'var(--label-badge-green)'
    - value: 90
      style: 'var(--label-badge-yellow)'
    - value: 100
      style: 'var(--label-badge-red)'
  1. Reload your Lovelace tab (no need to restart Home Assistant or other things) and you should see the card.

FAQ: https://github.com/ciotlosm/custom-lovelace#faq

Options

Name Type Default Description
type string Required custom:bignumber-card
title string optional Name to display on card
scale string 50px Base scale for card: ‘50px’
entity string Required sensor.my_temperature
min number optional Minimum value. If specified you get bar display
max number optional Maximum value. Must be specified if you added min
from string left Direction from where the bar will start filling (must have min/max specified)
severity list optional A list of severity objects. Items in list must be ascending based on ‘value’

Severity object

Name Type Default Description
value number Required Value until which to use this severity
style number Required Color of severity. Can be either hex or HA variable. Example: ‘var(–label-badge-green)’

WARNINGS

  • Make sure you use ascending object values to have consistent behaviour
  • Values are the upper limit until which that severity is applied

#2

Looks good! I have to say I’m impressed with the rate of progress you guys are making!


#3

This is awesome. With the power of Lovelace, I’m worried the community will make awesome cards like this and they’ll get lost in the shuffle. There should be a Lovelace card App Store or even a forum topic here to help organize where users can find custom (non-official) cards.


#4

This also makes me want custom-tiles-ui ported to a Lovelace card.


#5

Very Good. I’ll try it


#6

#7

this is not working anymore?

      - type: custom:bignumber-card
        title: Outside temp.
        entity: sensor.yr_temperature
        scale: 35px
        severity:
          red: 28
          green: 0
          amber: 24

#8

I changed from this

      - type: custom:bignumber-card
        title: Outside temp.
        entity: sensor.yr_temperature
        scale: 35px
        severity:
          red: 28
          green: 0
          amber: 24

to this

  - type: custom:bignumber-card
    title: Outside temp.
    entity: sensor.yr_temperature
    scale: 35px
    severity:
      - value: 0
        style: 'var(--label-badge-green)'
      - value: 24
        style: 'var(--label-badge-yellow)'
      - value: 28
        style: 'var(--label-badge-red)'

now it shows back the cards, but not the colours (its white background )


#9

You need to add min/max otherwise it won’t show.


#10

I see. In my case I would rather have the FULL badge coloured (in temperature if below 20 green, between 20 and 26 yellow and red above 26), and not a bar. Like it was before

Is ithis possible?


#11

I can add that as enhancement


#12

Thanks a lot.

In previous version was working