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 / Options	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	var(--state-icon-color)	v0.0.2	Set the icon text color, icon_adaptive_color must be set to false.
ko_icon	color	same as icon	v0.15.0	Set the ko icon text color, same as icon if not set, 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.
footer	color	#AAAAAA	v0.15.0	Set the footer text color.

Show config

Parent key: show

Alias config

Parent key: alias

Tooltip config

Parent key: tooltip

Action config

Parent key: tap_action

Parent key: tap_action.confirmation

Alignment config

Parent key: alignment

Blink config

Parent key: blink

Initialisation config

Parent key: init

Clipping config

Parent key: clip

Examples 📊

Example 1

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

Example 2

type: 'custom:uptime-card'
entity: sun.sun
title_template: Sun
icon: 'mdi:weather-sunny'
ko_icon: 'mdi:weather-sunny-off'
ko: below_horizon
icon_adaptive_color: true
title_adaptive_color: true
color:
  ok: '#F9d71C'
  ko: '#053752'
  half: '#EF810E'
bar:
  spacing: 4
  height: 10
  round: 4
show:
  average: false
  status: false
alignment:
  status: spaced
  header: left
  icon_first: true
tap_action:
  action: more-info

Example 3

type: 'custom:uptime-card'
entity: binary_sensor.ping_google
# Home Assistant ping integration - https://www.home-assistant.io/integrations/ping
title_template: 'https://www.google.com/'
icon: 'mdi:heart'
hours_to_show: 72
title_adaptive_color: true
average_template: '[[[ return variables.uptime.toFixed(2); ]]]% uptime'
bar:
  height: 46
  round: 0
  spacing: 10
  amount: 6
show:
  status: false
  icon: false
tap_action:
  action: url
  url_path: 'https://www.google.com/'
alignment:
  status: spaced
  header: center

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.

The none state mapping could be used if you need to consider some states as unknown. For example, if your sensor has on, off, unknown and unavailable state values, you can pass [unknown, unavailable] to none and those states will be visible as unknonw.

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 the state name equals none -> unknown
  • if not -> ko
• if ok is not defined and ko is defined:
  • if the state name equals ko -> ko
  • if the state name equals none -> unknown
  • if not -> ok
• if ok is defined and ko is defined:
  • if the state name equals ok -> ok
  • if the state name equals ko -> ko
  • if not -> unknown

Color thresholds

You can specify the color of the bars using color.ok, color.ko, color.half and the severity, however you can have only three colors for your bars and you can't control them as much as you may want. That's the reason why color_thresholds exists.

You can specify color_thresholds to erase the color.ok, color.ko, color.half behaviour by specifing a list of thresholds with the following data structure:

Example:

color_thresholds:
  - value: 20
    color: red
  - value: 40
    color: blue
  - value: 60
    color: orange
  - value: 100
    color: green

With the above configuration, if the uptime of the current bar is less or equal than 20 then the bar will be red or else if it is less or equal than 40 then the bar will be blue and so on. The repartition looks like:

|________]________]________]________]
0        20       40       60      100
    red     blue    orange    green

Initialization

Since v0.9.0 you can customize the initialization animation.

You have three choices:

Raise

Reveal

Slide

Templating

Custom templates can be used to customize the displayed text of status, average 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.function ]]] structure.

Under the hood, since v0.5.0, it uses the javascript Function. It allows you to freely customize the fields using javascripts.

Generic interpolations

By default, for both all templates you can print sensor data using the variable entity.

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, [[[ return entity.attributes.friendly_name ]]].

Since v0.7.0, you can get the yaml card configuration inside the template using the variable configuration.

As an example, you can print the average uptime as HH:MM:SS instead of the average pourcentage using the following code in average_template:

[[[
let date = new Date(0);
seconds = Math.trunc((configuration.hours_to_show * 3600) * variables.uptime / 100);
date.setSeconds(seconds);
return date.toISOString().substr(11, 8)
]]]

Specific interpolations

By default some templates has their own interpolations using the variable variables.

Status

status has the following interpolations:

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

Tooltip

tooltip has the following interpolations:

• [[[ return variables.from_date ]]]: the start date of the bar.
• [[[ return variables.to_date ]]]: the end date of the bar.
• [[[ return variables.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 [[[ return entity.attributes.friendly_name ]]] is [[[ return variables.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. Open the project inside a devcontainer.
2. Run npm start.
3. Open the browser and go to http://localhost:8123/.
4. Make changes and see the changes into the home assistant instance.

Inspiration

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