Lovelace: BigNumber card

Share your Projects! Dashboards & Frontend
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: GitHub - ciotlosm/lovelace-thermostat-dark-card: šŸŒ” Thermostat card with a round and black feel to it

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
23 Likes
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.

3 Likes
4

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

5

Very Good. Iā€™ll try it

6
1 Like
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 )

1 Like
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

1 Like
12

Thanks a lot.

In previous version was working

13

Receiveing this error now on 0.81.4

http://192.168.1.10:8123/local/bignumber-card.js?v=0.0.1:86:52 Uncaught TypeError: Cannot read property ā€˜stateā€™ of undefined

14:25 components/system_log/init.py (ERROR

14

This is the card I was looking for!! Though I use only the ā€œbig numberā€ partā€¦ thank you very much ciotlosm :+1:

15

Thanks a lot, been using it widely in my setup @ciotlosm
I do have a suggestion to make - can we have it so it will open a URL or make another action on-click ?

16

In some reason severity doesnā€™t work for me.

      - type: custom:bignumber-card      
        entity: sensor.living_room_humidity
        title: Living Room
        scale: 20px
        min: 0
        max: 100
        severity:
        - value: 0
          style: '#ff0000'
        - value: 30
          style: 'var(--label-badge-yellow)'
        - value: 50
          style: #FF0000
        - value: 70
          style: 'var(--label-badge-blue)'

All my cards are default blue

1714Ɨ244 26 KB

17

I am trying to use this card to display the current Electricity price and highlight if the current price is within 20% of the min predicted price for the day. My Electricity provider publishes the min and max price for the day via a sensor parameter.

The problem is, if I mention the sensor name against entity I donā€™t have the option to calculate the relative value of the sensor against the min and max.

Can someone suggest a way to use a calculated value instead of the default entity value ?

18

@ciotlosm,

Thanks for this. This is exactly what I am looking for to display time on my panel.

However, I wish I can put my date sensor entity in the title: variable so that the date will appear below the time like thisā€¦

timedate

2 Likes
19

You need proper indent after severity (put 2 spaces before - value)

    severity:
      - value: 0
        style: '#ff0000'
      - value: 30
        style: 'var(--label-badge-yellow)'
      - value: 50
        style: #FF0000
      - value: 70
        style: 'var(--label-badge-blue)'
20

thanks for the reply!
yes, i aware of indentation. the problem was in values order i guess. i treated 30 as 30 and above and should treat as 30 and below. silly mistake.