Uptime Card

A minimalist card inspired by the reddit status UI to display binary sensors in a nice way.

Install 🏠

⚠️ Versions 0.x.x are not very stable and still have many bugs, please create an issue if you encounter a bug or have a feature request.

HACS (recommended)

This card is available in HACS (Home Assistant Community Store).

Manual install

1. Download and copy uptime-card.js from the latest release into your config/www directory.
2. Add the resource reference inside your configuration.yaml with URL /local/uptime-card.js and type module.
3. Add the custom card to your panel and 🚀 .

Configuration ⚙️

Uptime card is highly customizable.

Global config

Bar config

Parent key: bar

Color config

Parent key: color

Name	Type	Default	Since	Description
ok	color	#45C669	v0.0.1	Set the ok color.
ko	color	#C66445	v0.0.1	Set the ko color.
half	color	#C6B145	v0.0.1	Set the half color.
none	color	#C9C9C9	v0.0.1	Set the none color.
title	color	grey	v0.0.2	Set the title text color, title_adaptive_color must be false.
status	color	grey	v0.0.2	Set the status text color, status_adaptive_color must be false.
icon	color	--paper-item-icon-color	v0.0.2	Set the icon text color, icon_adaptive_color must be set to false.
tooltip	color	grey	v0.1.0	Set the tooltip text color, tooltip_adaptive_color must be false.

Show config

Parent key: show

Alias config

Parent key: alias

Tooltip config

Parent key: tooltip

Action config

Parent key: tap_action

Examples 📊

Example 1

type: 'custom:uptime-card'
entity: binary_sensor.updater
icon: 'mdi:raspberry-pi'
name: HA update
alias:
  ok: Update available !
  ko: No update for the moment...
color:
  icon: grey
hours_to_show: 168
show:
  footer: false
status_adaptive_color: true

Example 2

type: 'custom:uptime-card'
bar:
  spacing: 4
  height: 10
  round: 4
icon: 'mdi:weather-sunny'
entity: sun.sun
name: Sun
ko: below_horizon
color:
  ok: '#F9d71C'
  ko: '#053752'
  half: '#EF810E'
icon_adaptive_color: true
show:
  average: false
  status: false

Example 3

type: 'custom:uptime-card'
entity: binary_sensor.ping_google 
# Home Assistant ping integration - https://www.home-assistant.io/integrations/ping
icon: 'mdi:heart'
bar:
  height: 46
  round: 0
  spacing: 10
  amount: 6
show:
  status: false
  icon: false
title_adaptive_color: true
hours_to_show: 72
name: 'https://www.google.com/'
average_text: '% uptime'

Roadmap 🗺️

• Clickable card (link to website or show history)
• Calendar mode
• More customizations

Additional information ℹ️

ok and ko options

For non binary sensors, the uptime card will be in unknown state because the card cannot ascertain whether it's state corresponds to ok or ko.

These can be indiviually specified with either ok or ko.

These options follow these rules:

• if ok is not defined and ko is not defined -> unknown
• if ok is defined and ko is not defined:
  • if the state name equals ok -> ok
  • if not -> ko
• if ok is not defined and ko is defined:
  • if the state name equals ko -> ko
  • if not -> ok
• if ok is defined and ok is defined:
  • if the state name equals ok -> ok
  • if the state name equals ko -> ko
  • if not -> unknown

Templating

Custom templates can be used to customize the displayed text of status and tooltip.

Generally speaking, templates allows the ability to print either current values from the sensor or special variables, available either for the status or the tooltip.

Either generic or specific interpolations exist using [[ my.key ]] structure.

Generic interpolations

By default, for both status and tooltip you can print sensor data.

For example, using sensor sun.sun has the following attributes:

next_dawn: 2021-04-03T04:35:43+00:00
next_dusk: 2021-04-02T18:49:59+00:00
next_midnight: 2021-04-02T23:43:38+00:00
next_noon: 2021-04-02T11:44:03+00:00
next_rising: 2021-04-03T05:10:32+00:00
next_setting: 2021-04-02T18:15:16+00:00
elevation: 38.83
azimuth: 148.33
rising: true
friendly_name: Sun

The attribute friendly_name can be used using template, [[ sun.sun.attributes.friendly_name ]].

Specific interpolations

By default each template has their own interpolations.

Status

status has the following interpolations:

• [[ current ]]: the current status.
• [[ ok ]]: the ok status.
• [[ ko ]]: the ko status.

Tooltip

tooltip has the following interpolations:

• [[ from_date ]]: the start date of the bar.
• [[ to_date ]]: the end date of the bar.
• [[ average ]]: the percentage of on during the period.

Example

These can be combined to create a sentence.

As an example, to retrieve the status of a sun.sun entity, template [[ sun.sun.attributes.friendly_name ]] is [[ current ]] can be specified.

Which will print Sun is Above Horizon (if the sensor is in ok state and if alias is Above Horizon.)

Contribution

Don't hesitate to ask for features or to contribute by yourself ⭐ .

For developers 👨‍💻

If you want to add a feature or fix a bug by yourself, follow these instructions:

1. Inside a Home Assistant environment, clone the repository into config/www.
2. Add the resource reference.

resources:
  - url: /local/uptime-card/dist/uptime-card.js
    type: module

3. Install dependencies (requires nodejs and npm).
4. Start the auto build on save.

npm start

5. Make changes.

Inspiration

This repository is inspired by two other cards, mini-graph-card and boilerplate-card.