dylandoamaral / uptime-card Goto Github PK

Absolutely love what you've done with this card: it's gold!

One request I'd really appreciate is the ability to set custom status text based on jinja templates (or similar). I have a range of binary_sensors keeping track of service status; I use custom attributes to provide more detail on the status of the service. So it would be nice to be able to do something like:

  status: '{{ state_attr('binary_sensor.solar_system', 'detail') }}'

Examples of how I use these currently (with a boring entities card and custom:secondaryinfo-entity-row to extract the detail attribute):

I'd much prefer to be able to use your card instead!

Nick

Right now, the footer follows the following format:

<hours_to_show> hour/s ago <line> <average_template> <line> Now

Would be nice if this could be specified.

I add card from example, but card show always night (sun icon work ok)

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

Screenshot:

Hi, is it possible to put a glance to uptime card? A red blink when it is down

Following the upgrade to v0.8.1, I've discovered that Safari and Chrome are handling the new title_template field differently:

• In Safari, the title is rendered from title_template
• In Chrome, the title is rendered from name

I've configured both fields to the same thing so that I get consistent results in both browsers (I tend to use Chrome on the desktop, while the iOS HA app uses Safari). But I'm assuming this is not the intended behaviour!

Since the version 0.0.3 the card seems to blink. I think this is due to #23. I should try to get data from cache instead of setting a default hass value...

In general I should try to handle asynchronous stuff correctly, handling together the hass, setConfig and updateData process.

Can you please add support for specifying custom thresholds, that overwrite the default set levels? Thanks!

Currently the icon is black by default and can be changed in the configuration, which is already nice. However it is one color for all users.
It would be nice for the icon to follow the chosen theme so it looks nice for all users.

For example in the screenshot the standard entity card has the icon in theme color vs the uptime-card which has it black.

I was hoping to replicate the Ecobee system chart (top half) based on your card. Here's how the card appears on Ecobee.

The orange bar represents the time during which the HVAC was heating. The status of the thermostat is available in the attribute hvac_action in the climate entity. Here's my config:

      - type: 'custom:uptime-card'
        entity: climate.bedroom
        attribute: hvac_action
        ko: 'heat'
        ok: 'cool'
        icon: 'mdi:thermostat'
        name: Master Thermostat
        status_adaptive_color: true
        color:
          ok: '#2DA8E0'
          ko: '#F27720'
        alias:
          heat: Heat
          cool: Cool
        show:
          footer: false
        alignment:
          status: spaced
          header: left
          icon_first: true

But, the card is not what I was expecting. here's how it looks:

Basically, I am looking for blue or orange bars only when the HVAC status is cool or heat respectively. Ideally, it should be blank when the status is idle.

Right now, each bar is 40 minute interval. Does that mean that we can only have equally spaced intervals? The HVAC may run for different amount of time depending on the various conditions.

Hi, can you add logo support?

• entity: sensor.overseerr_online
  name: EspHome
  image: /local/custom_icon/ombi_logo.png

Feature Request
I would like to be able to select an attribute of a sensor to monitor. For example, the Certificate Expiry integration produces a sensor with a timestamp but also has an attribute for "is_valid" which is binary.

Would it be possible to add an option to track not only binary sensors, but by any property of an entity?

For example, tracking if a light is on by checking "state" property.
or checking if temperature in a room is over or under a set value.

Right not to do this it requires creating in HA config an extra binary sensor that tracks this property, and passing that into the card. Seems very redundant, especially with a large number of entities.

I refuse to add breaking changes that force the user to change the configuration until version 1.0.0. However, version 1.0.0 should set up good foundation for the rest of the lifetime of the card.

The first thing that should be rethink and adapt is the configuration, let's discuss about it and how to make it easy to use.

Ideas for the moment (Tell me if you have some advices/opinions about configurations below):

• Replace ok/ko by on/off --> In home assistant, a binary sensor has two states on and off, we should stick with it.
• Setup sub options either by component name, icon, timeline, state or by category color, show but not both. I am not sure about which one to use but today we have both of them, maybe use only one of them.

Is it possible to show the actual value of the entity rather than an average?

I'm using this to show battery level. If it moves from 40% to 100% it should show green but doesn't because of the it average.

If I tap on the graphs to view info, the details modal launches. It does so when I tap anywhere on the card.

Can the details modal only be brought up when tapped on the name or the icon?

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Function

Hi!

Color thresholds seems buggy...

1. Historical data is showing different colors randomly
2. I'm seeing an undefined color (white), also randomly

color_thresholds:
  - value: 95
    color: '#C66445'
  - value: 97
    color: '#C6B145'
  - value: 99
    color: '#45C669'

Unsure if its simply my setup but using the example configurations result in extra padding on the footer ...

ha-card > div {
padding: 0px 16px 16px;
}

Today, the card is too limited with the only two state possibilities. A sensor can be ON or OFF and only binary sensors works. However we can imagine a sensor with 3 states or more and the card should handle them. It should also handle non binary sensor if the user provide a function to transform the current value into a state such as: sensor > 10 then state Loading.

We should have the possibilities to choose the color for each state.

The only problem is state "in between", such as #53 where the user want to define threshold between the states, but what happen if there is three state, maybe setup a strategy option such as (the stronger state win, we blend the color according to the value) and so on.

Could somebody tell me if it can be useful for him or not ?

Bug Report

I don't seem to be able to hover/click on the points in Safari 14.0.3.

I noticed if the entity has no recorded history, the card does not render at all, and I get various console errors:

As soon as I update the entity's state (e.g., from Online to Offline & back to Online):

The card then renders without issue:

Excluding of course the 'map' console errors I mentioned in #13 -

This particular entity's not showing any recorded history does seem odd to me, even though its state has not changed in the last 24 hours. Still, might be best to default in some sort of blank/unavailable state.

            entity: sensor.zwave_system
            icon: 'mdi:raspberry-pi'
            ok: Online
            alias:
              ok: Fully Online
            bar:
              height: 23
              round: 1
              spacing: 3
              amount: 24
            name: ZWave
            hours_to_show: 24
            icon_adaptive_color: true
            status_adaptive_color: true
            average_text: '% uptime'

recorder:
  db_url: !secret db_url
  purge_keep_days: 1

Hello,

I really like the look and ability to customize the look of this card, so thank you for your efforts with it!

I would like to display multiple entities using this card. Currently I am using a separate card for each device, which looks OK but takes up more space than it needs to. Since I am using identical settings but for multiple devices, it would be tidier to have multiple device names or nicknames to the left, then the graphs to the right. Then you could have a single footer at the bottom that indicates all of the graphs.

Here is an example of what I attempted to do using a Grid card with some Markdown cards for labels. I think that there would be much better spacing and alignment if a single card were configured to handle all of this natively.

I do understand that this may not be a typical use case for people and may not be high priority, but I wonder if there would be any potential overlap with some efforts in #8. Thank you for your consideration.

Would it be possible for you to add haptic feedback when the card is tapped on (and the details screen launches?)

Hi there,

First thanks for the great work of this card.

Maybe one thing that could be great would be to have a tooltip on each bars to have at least the time range of this bar and may be other values that could be useful ( or could be defined via the editor ) like in the reddit status page.

Thanks

Time range aways displayed using 12h am/pm format. Not possible to see 24h time.
Time string should use the format set in users preferences.

I started using the cool button-card this weekend and I was astonish by the huge customisation they provide.

Honestly their solution seems appropriate for an advanced customisation of my component and I would to replace the whole customisation of the card by the system of grid for the header part at least and the system of style (like here).

This card is a great way to display more history in a compact way! I suspect when people see this card, they will be interested in this for displaying data other than "uptime" - could be any sort of history. In fact, your very first example is such a thing: you are showing a "New Update" available, which of course, isn't "uptime" :-)

As such, it would be nice if the text below the bars was user-definable:

Perhaps by introducing these two config var's:

Global configuration

If footer_text is present but empty, it wouldn't show any text or even a % sign.

Show configuration

This would allow for not having a number there when it isn't wanted, while still keeping the footer_text.

Footer discussion

Having said all that, I found it ever so slightly confusing that the footer line is showing two unrelated things: the date range labels, and the computed average - yet they are connected together with a line. I'm not sure removing the line would really fix it though. I appreciate that the whole thing is compact, but I wonder about moving the computed average and footer_text up to the left of the icon. This could allow for displaying the those things while not displaying date range labels. Just a random idea to consider.

I think that the editor is very useful for beginners and that it is a good addition to the card. However it is actually not that pretty and it is missing many features. As an example I can't create nested of nested object (from de editor), as an example, for tap_action, the confirmation object is missing since I can't add it with the actual editor code.

According to my mind, it should be a library to handle the editor that anyone can use, however I don't think it actually exists :/.

I would also like to add the feature to select a color for color field instead of a plain text input.
I would also like to insert an array of element (again useful for confirmation as an example).

The card should allow actions when you click on it, I have two ideas for the moment:

• As many other cards show the history of the sensor
• Link to another website

In the android application I can not see "rainbow" bars with different colors. I see all columns with same last color.

My use case is probably uncommon, but might be worth hiding any single-line overflow via an ellipsis -

Hi, is it possible to put a glance to uptime card? A red blink when it is down.

Math isn't my strongest suit but when so many blips are below 98%, surely the total uptime % is less than 99.5%?

Please add all code from the three samples in your readme to the readme

Thanks!

Can we get the ability to set the number of decimal places? Thanks!

It seems though that this option gives you 01:00-24:59 instead of 00:00-23:59

Originally posted by @filikun in #89 (comment)

It would be nice to be able to use this card with the autoentities card, but in order for this to work properly, the name property needs to be able to accept a template so that each item can be named in a custom fashion by the data provided to the entity variable.

Most of my binary sensors I used for this card have a device class set problem. From the HA documentation:

problem: on means problem detected, off means no problem (OK)

So it means that out of the box, this card reverse all the states for my binary sensors. I have to set the ok value to off and the ko value to on.

What do you think to apply a specific logic for this device class?

At this moment, the update function rerender the card three times instead of one.

I use browser-mod to control almost every part of my Lovelace interface, and currently, I'm not able to use fire-dom-event as a "tap-action". Please add support for this, as all my more information popups are custom, and I would love to use those with this great-looking card.

Thanks!

Hi, if I turn on true to show status, the uptime-card appear on PC, but not visible on Iphone HA app or chrome browser too.
uptime-card.zip

On both Chrome and Edge, I'm getting a ton of console errors... even with a very basic card config. Apologies if this represents misconfiguration on my part, but any ideas?

            entity: sensor.broadcasting_system
            icon: 'mdi:raspberry-pi'
            ok: Online
            alias:
              ok: Fully Online
            bar:
              height: 23
              round: 1
              spacing: 3
              amount: 24
            name: Broadcasting
            hours_to_show: 24
            icon_adaptive_color: true
            status_adaptive_color: true
            average_text: '% uptime'

Above sensor is usually 'Online', but it can be set to 4 or 5 different values. Even so, I tried the same config with a simpler 'ping' binary sensor, and the console errors remained.

As you may have noticed, my level of English is not very good and the README must not be very easy to understand because of that. It would be really nice if someone could correct the mistakes of the README.

When I create a Uptime card with a Severity of zero and edit this card again, the Severity gets automatically reset. Meaning the former value (0) is deleted and you see the grey default value.

I dove all in with the uptime-card and love the look and feel of it. I should probably list these as two different feature request but they are similar in nature.

Easy Mode) Multiple rows. If I want to be able to see the past 4 weeks with each block representing 1 day I currently would have 28 skinny lines. I would like to be able to specify rows: 4 and amount: 28 and have it render 4 rows of 7.

Hard Mode) Calendar view. I would like to see a copy of https://www.redditstatus.com/uptime/

Bonus Points) Include the day of the month in the colored block.

Tried to install the latest version through hacs and it appears that the files were put in the correct place. config\www\community\uptime-card
I added this to my resource file:

- type: module  
  url: /hacsfiles/uptime-card.js

and get the error uptime-card not loaded in hacs.

The release notes give the wrong variable name to use (should be title_template) please fix it to avoid confusion. Also it would be gret to update the docs accordingly as well

Discussed in #87

Hi,
Thank you for this awesome addon. I've been looking for something like this for a long time (default history graph is a bit ugly).

I have an issue on browsers (firefox and chrome on both android and windows 10, all up-to-date).
I tried to reproduce your example with the ping status and it's working fine on the mobile app but when I connected to lovelace on chrome/firefox, all bars are grey except the last one that is orange (with uptime value at ~ 0.xx percent).
I took screenshots to illustrate.

On chrome (and firefox too)

On Home Assistant app on Android

Versions of HA:
Core: core-2021.3.4
Supervisor: supervisor-2021.03.6
HACS: 1.11.3 (frontend: 20210214110032)
uptime-card: v0.0.1 & v0.0.2 (installed and upgraded using HACS)
Home Assistant Android: 2021.3.1-full

I also have a question regarding your example 3. Why do you set 'ko' to 'o'? Looking at the documentation I would have expected something like 'ok: ok' and 'ko: ko' but it's not working untill I set to 'ok: on' and 'ko: off' or 'ko: o'.

config (I used mainly the lovelace UI to configure):

type: vertical-stack
cards:
  - type: 'custom:uptime-card'
    icon: 'mdi:router-wireless'
    severity: 100
    hours_to_show: 72
    color:
      ok: '#45C669'
      ko: '#C66445'
      none: '#C9C9C9'
      half: '#C6B145'
    bar:
      height: 46
      round: 1
      spacing: 4
      amount: 36
    alias: {}
    entity: binary_sensor.router_ping
    name: Routeur
    ok: 'on'
    ko: 'off'
  - type: 'custom:uptime-card'
    entity: binary_sensor.netplus_dns_1
    icon: 'mdi:dns'
    severity: 100
    name: DNS1
    ko: 'off'
    bar:
      height: 46
      round: 1
      spacing: 4
      amount: 36
    hours_to_show: 72
    ok: 'on'

Firstly, great job on the card. I've been looking for a replacement for binary sensors over the native graph and I think I've found it.

After I've added the card, it looks like it populates new data in the browser and existing/old data seems to be ignored.

That means I get different data depending on the device. Could this be changed so it uses existing data? Thanks!