Lovelace Alarm Clock

rdehuyss · September 5, 2018, 8:00pm

In the quest for a perfect Alarm Clock, I’m getting closer, thanks to home assistant.

This card was designed for a tablet which I use on my nightstand with a resolution of 1280px on 800px.
The idea is to have a really minimalistic, readable clock with some Home Assistant love.

Screenshots love…

Note:

This card is still in beta and it scratches my own itch. No support/guarantees/… It may eat your dog or the alarm may not go off and you can thus miss a date with the love of your live, …
I tried to solve the alarm in the backend using timers, … but did not succeed due to some outstanding bugs. So, this means that the logic to fire the alarm is in the frontend. If you close your browser, it will not go off. But, since it was designed for an always on tablet (for me a Nexus 7 2013 which is always running and has this constantly open), it appears to work

Features

User interface

The card exists out of two parts:

the clock part (65% of the height of the screen) with:
- the clock of course
- the options to setup alarms
- the option to override/update the next alarm
- a nap timer option
the lower part (35% of the height of the screen) which:
- can show up to 3 other home-assistant cards
- shows the snooze and dismiss button when the alarm is ringing

a non-disturb mode is activated when clocking on the clock, which then makes the clock 100% of the screen

Alarm - and PreAlarm options

You can define multiple entities that will turn on when the alarm goes off, including lights, input_booleans, scripts and media_players. Configuration is as follows:

  ...
  alarm_entities:
    - entity_id: input_boolean.alarm_clock
    - entity_id: media_player.gpm_desktop_player
  ...

You can also specify pre-alarm options, think off having your Philips Hue light slowly starting an half hour before the alarm. Configuration is as follows:

  ...
  scripts:
    - entity: script.start_lights_bedroom_slowly
      when: '-00:30'
    - entity: light.bathroom
      when: on_dismiss
      service: light.turn_on # not necessary as default is homeassistant.turn_on
  ...

Holiday integration

But wait, that’s not all! It also integrates with:

a holiday calendar so that when you have a holiday the next day, your alarm will automatically disable.
the workday sensor so that when you have a holiday the next day, your alarm will automatically disable.

Updates

2018-09-07: more features…
2018-09-05: first beta release

Installation instructions

can be found on https://github.com/rdehuyss/homeassistant-lovelace-alarm-clock-card

Note:

In my example, the configuration also uses Simple Weather Card

rdehuyss · September 6, 2018, 7:56am

The card now also supports full screen mode where only the clock is shown to have even less distraction while sleeping.

To enable it, just click on the clock…

tottow · September 6, 2018, 9:08am

Fantastic project!

This might be a very newbie question - however - do you call this as a separate page on your tablet, or do you just call it via the frontend on a separate tab/view?

Would love to see this integrated with wake-up lights from Hue/Trådfri and Sonos playlist firing when alarm goes off. Probably possible to do on service/actions with some modification?

TJ

s.takens · September 6, 2018, 5:19pm

I tried to install this (on hassio), and it works sort of …

Mostly I get a lot off errors:

Thu Sep 06 2018 19:13:59 GMT+0200 (Central European Summer Time)

https://xxx/frontend_latest/app-1fe7ad4f.js:2:12805 Uncaught ReferenceError: flatpickr is not defined

Does that look/sound familiar, did I miss something ?

I am happy to share more info with you. I just don’t know what I am looking for.

petro · September 6, 2018, 5:31pm

What tablet are you using? Does the tablet stay awake at all times?

rdehuyss · September 6, 2018, 6:22pm

Hi @s.takens,

sorry for that - I missed something in the installation instructions. I fixed them on github. Concretely, there were some resources missing. It should be as follows:

  - url: https://unpkg.com/[email protected]/min/moment.min.js
    type: js
  - url: https://cdn.jsdelivr.net/npm/flatpickr
    type: js
  - url: https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css
    type: css

rdehuyss · September 6, 2018, 6:23pm

Hi Petro,

I’m using a nexus 7 2013 tablet with the latest chrome.

It indeed stays awake all the time.

Cheers,
R

rdehuyss · September 7, 2018, 12:21pm

Hi @tottow,

since there is an input_boolean changing from state, you can do all the automations you want (including starting Sonos, …)

Other integrations (starting a script x minutes before the alarm, e.g. to start your wakeup light) are on my wish list… I’ll keep you posted.

Cheers,
R

tottow · September 7, 2018, 4:08pm

Thanks! I’ll have a look at it. Never worked with boolean before so I’ll give it a go.

Ref my question on how you get this up on the tablet, so you just navigate to frontend and use a view? Or is it possible to call a full web page only?

TJ

rdehuyss · September 7, 2018, 6:50pm

It is indeed a view (e.g. http://home-assistant:8123/lovelace/4?kiosk&no_scrollbar) and with kiosk mode, I hide the top navigation from home_assistant.

rdehuyss · September 7, 2018, 9:37pm

@tottow Good news: I added some features you may like

You can now choose what should happen when the alarm goes off, including starting a media_player. You can also specify pre-alarms, which allows you to slightly turn on your hui lamps a specified time before the alarm.

tottow · September 8, 2018, 11:06am

Fantastic! I need to try this one out asap. Thank you very much!!

tottow · September 11, 2018, 6:39am

Hi again, just checking - is this the code you are using for kiosk?

gist.github.com

https://gist.github.com/ciotlosm/1f09b330aa5bd5ea87b59f33609cc931

Readme.md

# Kiosk mode

## Installation

Add `kiosk.js` file with the content below to your `www` folder in config.

Like any other custom script, use `ui-lovelace.yaml` resources section to reference the `kiosk.js` file.

Make sure you add `kiosk` somewhere in your URL. You can use it in the id of your view or in the query string.

This file has been truncated. show original

kiosk.js

if (window.location.href.indexOf('kiosk') > 0) {
    setTimeout(function () {
        try {
            const home_assistant_main =  document
                  .querySelector("body > home-assistant").shadowRoot
                  .querySelector("home-assistant-main");
            
            const header = home_assistant_main.shadowRoot
                  .querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot
                  .querySelector("hui-root").shadowRoot

This file has been truncated. show original

ui-lovelace.yaml

resources:
  - url: /local/kiosk.js
    type: js
  - url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=0.1
    type: module
title: Lovelace Demo
views:
  - title: Home
    icon: mdi:heart
    id: kiosk_thermostat

This file has been truncated. show original

Seems to be the “only” way to put lovelace into kiosk mode…

MomoB · December 14, 2018, 2:39pm

Hi,

I used your custom card but since 0.84, i have this in my log.
I’ve updated variable.py already

2018-12-14 23:32:51 ERROR (MainThread) [frontend.js.es5.201811211] http://192.168.10.9:8123/local/custom_ui/alarm-clock-card/alarm-controller.js:27:113 Uncaught TypeError: Cannot read property 'attributes' of undefined

Ranur · February 21, 2019, 5:50pm

So. Not having used Lovelace before 0.86 and therefore without a lovelace.yaml file - how do I make this nifty alarm clock work?

Edit:
#nevermind I looked, tried, learned and conquered!

MomoB · March 14, 2019, 10:36pm

Hello.

Does anyone use this card with 0.89 ?
With the migration of the custom components, I’m not sure how to make it work.

homio · March 22, 2019, 3:03am

It may of interest to skin this:
Universal Persistent Timer
It can add a timer to anything including multiple scripts, lights etc. with separate start and stop actions, and will resume in the event of downtime and requires no programming skills once installed. All lights, switches etc can be accessed from auto populated lists; and you can specify days of the week, repetitions, intervals, and much more. Timers can be paused, backed up and give activation notifications etc.
https://youtu.be/rUeTIU1uAP0

MichaelJ2600 · March 23, 2019, 5:12pm

Hello rdehuyss

Thank you for a, probably very nice alarm card.
I’m seeing the strangest thing though. I set the alarm, and it counts down nicely “a few more minutes / seconds…”. And then at the alarm time, nothing happens, other than it suddently starts to count up - ex. 2 minutes after alarm time, it says 2 more minutes of wonderfull sleep…"

Any idea, why nothing happens, and that it on top of that starts counting up ?

/Michael

Before alarm time:

after alarm time:

but no alarm (I’ve asked it to call a script that turns on my bedroom Sonos)

MichaelJ2600 · March 23, 2019, 6:26pm

Ahh, figured it out myself. The JS code stumbled, because I didnt have the “/local/icons/weather_icons/animated/thunder.svg” for the weather card, and dont have the holidays declared /entered. If I comment out these two it works.

Michael

rdehuyss · March 23, 2019, 8:47pm

Nice work - it fits my needs, didn’t test it without holidays.