#A nice card for the next alarm (e.g. "11:00, in 6 hours and 15 minutes")

1 messages · Page 1 of 1 (latest)

ashen ocean
#

Hey! I have my smartphone next alarm entity available, so now I'm trying to display it on the dashboard in a nice way. However, there's seems to be no good way of doing it – I can either have an entity card that will say something like “in 6 hours”, or I can have an entity card which will show the timestamp for the next alarm. However, I want both, and hopefully in an eye-pleasing way.

I know that I can set up a helper, but that is also somewhat cumbersome as jinja doesn't have any nice way of formatting upcoming dates.

Thoughts? It feels like it's something that should've been done already, but I couldn't find anything related in HACS.

hollow pawn
ashen ocean
viral crater
#

You can use the Mushroom Template(HACS) card and use what ever templating you want to control all the values.

ashen ocean
#

@viral crater this works, too! Thank you! 🫶

neon pewter
#

Whenever I want to make a "custom" card, the custom:button-card is my preferred card. It is really powerful and it's usually possible to get it to do just about anything you want. It is one of the few cards that uses JavaScript instead of Jinja. So, the easy-time-jinja mentioned above won't work. But, it's possible to write your own JavaScript to do the same thing. This is what I came up with:

# 
type: custom:button-card
entity: sensor.s22_ultra_next_alarm
name: My Alarm
show_state: true
show_label: true
show_icon: false
triggers_update: all
label: |
  [[[ 
    var days_str = "", hours_str = "", minutes_str = "", past_str = "";
    const alarm_time = new Date(entity.state);
    var diffMins = Math.round((alarm_time - new Date()) / (1000 * 60));
    if (diffMins == 0) return "Now";
    if (diffMins < 0) {
      diffMins = Math.abs(diffMins);
      past_str = "ago";
    }
    const days = Math.floor(diffMins / 60 / 24);
    const hours = Math.floor((diffMins / 60) % 24);
    const minutes = diffMins % 60; 
    
    if (days == 1) days_str = `1 day`;
    if (days > 1) days_str = `${days} days`;
    if (minutes == 1) minutes_str = `1 minute`;
    if (minutes > 1) minutes_str = `${minutes} minutes`;
    if (hours == 1) hours_str = `1 hour`;
    if (hours > 1) hours_str = `${hours} hours`;
    
    return `${days_str} ${hours_str} ${minutes_str} ${past_str}`;
  ]]]
image.png