Giter VIP home page Giter VIP logo

bignumber-card-icon's Introduction

Big number card icon

A simple card to display big numbers for sensors. It also supports severity levels as background.

bignumber

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
attribute string optional the entity attribute you want to display e.g. current_temperature. The entity state will be shown if not defined.
min number optional Minimum value. If specified you get bar display
max number optional Maximum value. Must be specified if you added min
color string var(--primary-text-color) Default font color. Can be either hex or HA variable. Example: 'var(--secondary-text-color)'
bnStyle string var(--label-badge-blue) Default bar color. Can be either hex or HA variable. Example: 'var(--label-badge-green)'
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'
hideunit boolean optional hide the unit of measurement if set to true. If absent, unit of measurement will be shown
noneString string optional String to use for value if value == None
noneCardClass string optional CSS class to add to card if value == None
noneValueClass string optional CSS class to add to value if value == None
round int optional Number of decimals to round to. (If not present, do not round.)

Severity object

Name Type Default Description
value number Required Value until which to use this severity
bnStyle string Required Color of severity. Can be either hex or HA variable. Example: 'var(--label-badge-green)'
color string var(--primary-text-color) Font color of the severity. Can be either hex or HA variable. Example: 'var(--secondary-text-color)'

WARNINGS

  • Make sure you use ascending object values to have consistent behaviour
  • Values are the upper limit until which that severity is applied
  • Note there is a breaking change with this release. In order to add the flexibility of using card-mod styling, the style configuration options have been changed to bnStyle.

Example

- type: custom:bignumber-card
  title: Humidity
  entity: sensor.outside_humidity
  scale: 30px
  from: bottom
  min: 0
  max: 100
  hideunit: true
  color: '#000000'
  bnStyle: 'var(--label-badge-blue)'
  severity:
    - value: 70
      bnStyle: 'var(--label-badge-green)'
    - value: 90
      bnStyle: 'var(--label-badge-yellow)'
    - value: 100
      bnStyle: 'var(--label-badge-red)'
      color: '#FFFFFF'

Handling None values

If your sensor may result in None (for instance if it is offline), you may wish to handle that separately. Here is an example, which uses card-mod to add special styling for the None case.

- type: custom:bignumber-card
  title: Humidity
  entity: sensor.outside_humidity
  scale: 30px
  from: bottom
  min: 0
  max: 100
  color: '#000000'
  bnStyle: 'var(--label-badge-blue)' 
  severity:
    - value: 70
      bnStyle: 'var(--label-badge-green)'
    - value: 90
      bnStyle: 'var(--label-badge-yellow)'
    - value: 100
      bnStyle: 'var(--label-badge-red)'
      color: '#FFFFFF'
  noneString: Offline
  noneCardClass: none-card-class
  noneValueClass: none-value-class
  style: |
    .none-card-class {
      background-color: yellow;
    }
    .none-value-class {
      font-size: 22px !important;
    }

bignumber-card-icon's People

Contributors

acordill avatar htmltiger avatar iantrich avatar megakid avatar mindfreeze avatar nitobuendia avatar omgimalexis avatar pkscout avatar primevix avatar redlegoman avatar ricardoquecria avatar rr326 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.