search

custom-cards / gauge-card

Apache License 2.0
46 stars 13 forks source link

readme

Gauge card

Please read ISSUE.md for the change i made to the code

ISSUE.md

A simple gauge implemented in CSS based on https://github.com/JohnrBell/Gauge_CSS.

gauge-card

bedroom-temperature

Options

Name Type Default Description
type string Required custom:gauge-card
title string optional Name to display on card
measurement string optional If not set, uses the unit_of_measurement on the entity
entity string Required sensor.my_temperature
attribute string optional If set, this attribute of the entity is used, instead of its state
min number 0 Minimum value for graph
max number 100 Maximum value for graph
scale string '50px' Base value for graph visual size
severity object optional Severity object. See below

Severity object

Name Type Default Description
red number Required Value from which to start red color
green number Required Value from which to start green color
amber number Required Value from which to start amber color

Example

Using two with stack

- type: horizontal-stack
  cards:
    - type: custom:gauge-card
      title: Temperature
      entity: sensor.random_temperature
      min: -20
      max: 35
    - type: custom:gauge-card
      title: Oil
      entity: sensor.my_oil_sensor
      severity:
        red: 50
        green: 0
        amber: 40

Simple one

- type: custom:gauge-card
  entity: sensor.my_oil_sensor
  scale: 100px

Using an attribute

- type: custom:gauge-card
  entity: climate.living_room
  attribute: current_temperature

Using an attribute with dot notation

- type: custom:gauge-card
  entity: climate.living_room.current_temperature

Credits