durgnomis-drol/google_home_timers_card

Card for Home Assistant Google Home integration.

DEPRECATED

As the main integration does not work for me anymore, i won't be updating this. Feel free to fork, copy or ask to be a collaborator here if you want to maintain this.

---

Original Readme

Card for Home Assistant Google Home integration

Important to know!

It will not be a smooth countdown (It will jump some seconds), but it will always be done at the right time.

Installation

Prerequisites

Make sure you have Home-Assistant Google home integration installed.

HACS

Since the integration is under active development, it is not yet added to HACS default repository, only manual installation is available for early testers

To install the integration follow HACS description to add custom repository. Provide https://github.com/DurgNomis-drol/google_home_timers_card as repository URL and select the "Lovelace" category. We recommend you select the latest release.

Manual installation

1. Download googletimers-card.js and right click and save it.
2. Copy it into the 'www' folder. If 'www' does not exists in your config folder, then just create it.
3. Add it to lovelace by going to lovelace Dashboards and then Resources.
4. and then input /local/googletimers-card.js and change resourcetype to javascript-module
5. Restart Home Assistant or clear browser cache.

YAML installation - Not recommended

Follow step 1 -> 2 above and then add this to your ui-lovelace.yaml file.

lovelace:
  resources:
    - url: /local/googletimers-card.js
      type: module

Usage

The countdown is done client-side. This means that it will always fire at the correct time.

Options

Name	Type	Default	Supported options	Description
type	string	Required	custom:googletimers-card	Type of the card.
entity	string	Required	sensor.kitchen_timers	Has to be a timer sensor from google_home integration.
title	string	Optional	Any string that you want	Name displayed in the header. Defaults to the entity name.
icon	string	Optional	mdi:kitchen	Icon displayed in the header. Defaults to the entity icon.
hide_header	boolean	false	true or false	Whether to show the header or not.
show_fire_time	boolean	false	true or false	Whether to also show the time when it's done.
alarms_entity	string	Optional	sensor.kitchen_alarms	To show alarms as well.

Example

type: 'custom:googletimers-card'
entity: sensor.kitchen_timers
alarms_entity: sensor.kitchen_alarms
title: Kitchen

Bugs/Features

Please open a issue if you have found a bug or even better make a PR if you can fix it 😄

google_home_timers_card's Issues

Alarms as well as timers

Is it possible to add a second sensor to the card for the alarms of a device please? Or adjust the card to accept either an alarm or a timer sensor please?
Thank you.

Add Do Not disturb toggle

When that is implemented in ha-google-home, add a toggle at the top to enable/disable Do Not Disturb mode.

Card not showing alarms

Describe the bug
Alarms are set for a google home. I see them in the developers tool, e.g.,:

However, they are not listed in the timers card:

I double checked that the card has the correct sensors listed, and it's been more than 8 hours but the alarms don't show up. The alarms were set before I last rebooted HA (if it makes a difference). I'm not sure when it should refresh, or how to force it.

To Reproduce
Unclear.

I'm running HA 2021.3.4, Google Home 1.1.0, latest googletimers-card.js
(Btw, there doesn't seem to be version comment in the code. That would be useful, I think.)

Thanks.

Use card in conditional card

First of all, thank you for making this nice card.

I was trying to use the card in a conditional card but found that OR statement is not possible in conditions.
I find this difficult to do since I have to choose either alarm or timer as condition.

I have a google home units and would only show the card if it has a timer OR an alarm.
I have tried to make two separate conditional cards which works fine until I have both an alarm and a timer running. Then I get two equal cards which is not that nice.

If I could get an option to not show both alarms and timers I think it would be better.

Display problem, possibly due to 24 hour clock setting

Thank you for your work on this project, very useful!

I have this timer running:

fire_time: 1615584610
id: timer/22cf8018-489d-9f30-bc1e-f4c10cd3c79f
local_time: 2021-03-12 13:30:10
local_time_iso: 2021-03-12T13:30:10-08:00
duration: 0:05:00
device: Living Room Speaker next_timer
integration: google_home
friendly_name: Living Room Speaker next_timer
icon: mdi:timer-sand

and the display via your card shows:

    - type: custom:googletimers-card
      entity: sensor.living_room_speaker_timers
      title: Livingroom Google Home Timers

It correctly shows 'Timer Done' when the timer finishes the 5 minutes it was set for.

Inconsistency in font & sizing?

I'm running HA 2021.3.4 and core-2021.3.4 with just the default Lovelace theme. (Browser is Chrome 89.0.4389.90)
For your cards, the title & body fonts and sizes differ from other cards. I don't know if this is intended behavior or not, so I don't know if this is a bug or a feature :) (I see font sizes in the code, but not the font itself.)

Here's a screen shot comparing to a couple of other cards:

Adding "fire" time

Thanks for a great card, @DurgNomis-drol! 💥

I like the design of it! Pretty cool that you show how much time is left and the duration of the timer. Would it be useful to add the time when the alarm will go off?

Perhaps it can be an optional setting? So when you add a card you can say something like

type: 'custom:googletimers-card'
entity: sensor.kitchen_timers
show_fire_time: true
title: My own title

And it will show the full time when it will go off on the card, for example "18:30:00"?

Update example image to reflect changes

Possibility of deleting alarms/timers

Is your feature request related to a problem? Please describe.
I was looking for a convenient way to delete alarms/timers from google home integration but didn't see a simple option. I think it would be interesting to add it here.

Describe the solution you'd like
I think the ideal would be to be able to click on the alarms and get a form to confirm the deletion. If the user confirms, a call would be made to the google home service indicating the entity_id and timer_id.

Perhaps it would be convenient to have an option to disable this operation.

Describe alternatives you've considered
To half solve it, I had to create a script to which the entity_id is passed as a parameter. This is because in lovelace it is not possible to use templates to extract the timer identifier. Also, with this solution the first timer/alarm is deleted when it doesn't always have to be that way but I ran out of imagination.

Additionally, this solution doesn't look too pretty.

Add visual add/edit card

Is your feature request related to a problem? Please describe.
Now the card can only be configured through yaml, configuring it through UI would be nicer.

Describe the solution you'd like

A graphic configuration for the card.

Describe alternatives you've considered

Using yaml, and it works fine as-is, but it could be nicer/better :)

Name change to googlehome-card

When converting to Typescript and basing it on boilerplate-card, change name to googlehome-card instead.

Fix Numbers showing as NaN on IPAD/ IOS

Uncaught TypeError: Cannot read property 'state' of undefined

Describe the bug
A clear and concise description of what the bug is.
In the latest HA beta (2021.04.0b0 ) this card crashes the dashboard. It stays blank in Vivaldi and Chrome.
Haven't tested it on other browsers.

To Reproduce
Steps to reproduce the behavior:
Update to the latest HA beta
Open HA with the card in Vivaldi or Chrome.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Logs from dev console

Uncaught TypeError: Cannot read property 'state' of undefined
    at HTMLElement.set hass [as hass] (google-timer-card.js:192)
    at HTMLElement.value (chunk.2e1e64ca1084a10e4e49.js:2813)
    at HTMLElement.value (chunk.2e1e64ca1084a10e4e49.js:2813)
    at HTMLElement.t.addEventListener.once (chunk.2e1e64ca1084a10e4e49.js:2813)
    at i (app.e3b77d50.js:12793)
    at chunk.6987f5572b26ac8b641c.js:2538

More functions?

Hey man!

This card really works great and I'm really happy to use it!

Is it possible to add an option to have no title on the card?

Thanks in advance :)

Add possibility to change Font Size with themes or card-mod

Would it be possible to be able to have an option for the size of the timer font? I have this showing on my kitchen tablet but I can't see the time from too far away - I tried to use card-mod to try and make it bigger but it didn't work (but that absolutely could be me doing it wrong too haha)