Lovelace: Time Picker Card

Share your Projects! Dashboards & Frontend
1

Time Picker Card

time-picker-card

Hey all, this is a custom lovelace card for selecting the time of Input Datetime entities.

I developed this because I often found myself trying to change my alarm time on my phone, which can be a bit frustrating with the default datetime card. I wanted a more mobile friendly UI - buttons you can tap to quickly change the time.

The design is not that great :sweat_smile: Iā€™m open to suggestions.

Hope someone else finds this useful! Let me know what you think :slight_smile:

For more details and examples, see the Github repo:

21 Likes
2

So basically you can now time automations from the front end (essentially custom alarms)? If so: this what I needed for so long!

3

Not sure what you mean by ā€œtime automationsā€?

If you want to trigger an automation at a specific (variable) time, you can define a Input Datetime and use that as a trigger.

And then, yes, you can set the time value of that Datetime with this card :slight_smile:

4

This just displays input_datetimeā€™s in a friendly manner for mobile platforms. How you use the datetimes depends on what you setup in your system.

For what itā€™s worth, weā€™ve always had the ability to make time automations from the frontend. You just have to make all the pieces.

5

Any reason you didnā€™t make the default text color var(--primary-text-color)?

6

All the elements that render text have a --dark-primary-color background, and I thought in most themes --primary-text-color wonā€™t look good on that.

Hereā€™s the default theme with text using primary color:
image

7

I was just thinking about itā€™s interactions with themes. Most of the themes on HACS wonā€™t have your variables and the text will always be white in those situations.

8

Thatā€™s fair. I use only --primary-text-color, --dark-primary-color and --accent-color, which I know are defined in ha-style.

Do you have a suggestion for a better input/header background color - something to replace --dark-primary-color?

9

Oof, man, I am not the one to ask about style. I have no style. I just rip off what (more creative) people come up with in regards to colors/themes.

Some people with a good sense of style are @jimpower & @jimz011. They may have some good input.

1 Like
10

Can any one give example of alarm automation to use with this card. I cannot get it work. Lost in automation.

11

Yes, exactly that. So I can control the starting time of an automation from the frontend.

12

Sure, but just to reiterate what @petro said - this is a generic card for setting an input_datetime. So donā€™t expect it to do the automations for you :slight_smile:

Hereā€™s an example in yaml:

# Create input_datetime.
input_datetime:
  alarm_time:
    name: Wake up time
    has_date: false
    has_time: true

# Create a time sensor, so you can use it in automations:
sensor:
  - platform: time_date
    display_options:
      - "time"

# Automation that triggers at the time specified by input_datetime.alarm_time
automation:
  - alias: wake up
    trigger:
      platform: template
      value_template: "{{ states('sensor.time') == states('input_datetime.alarm_time')[0:5] }}"
    action:
       - service: media_player.select_source
         data:
           entity_id: media_player.bedroom
           source: "Wake Up Playlist"

Then, you can use this card to change input_datetime.alarm_time - put this in your lovelace config:

type: custom:time-picker-card
entity: input_datetime.alarm_time
1 Like
13

By that I take it you mean tight jeans with joggers right? images.jpeg-1

1 Like
14

Do you have to use the themes set in your card? Or at least make them optional?

What happens if you just leave any themes out of your card and let the system decide the theme?

15

You donā€™t have to set any themes.

This is how the card looks without any theme customization, with the default Lovelace theme:
default_with_name default_without_name

16

Ah, OK.

That wasnā€™t clear from the docs. Also not clear from the docs is if you can select a theme and how to do it if you can.

On a related note, I suggest using ā€˜ā€“disabled-text-colorā€™ for the unselected AM/PM option and use the primary color for the one that is selected. I think that would make it more obvious which one is selected.

Right now the accent color being used for the selected value is kind of visually jarring. And since the times use the primary color then the everything that is currently active would all be the same color.

17

@finity, I think using --disabled-text-color is a great idea, thanks! I just released v 0.0.4 using that.

Here are some screenshots after the update:
default_with_name default_without_name

Iā€™m not sure where the confusion for the themes is coming from. I added this to the doc, hope it clears things up:

Time Picker card will automatically pick up colors from your lovelace theme, but if you want to customize some of them, you can use the following theme variables

1 Like
18

Iā€™m glad you liked that idea.

The reason for the theme confusion is that you donā€™t show any way to incorporate those theme variables into your card setup.

You have an example of a card config but none to show how the variables are used.

Again, unless Iā€™m completely missing something.

19

Theme variables are usually setup in your theme config, not in the card config. Say youā€™re using a custom theme like noctis, you can add theme variables to the theme yaml file.

For example, noctis changes the theme variables for mini-media-player by default.

You can do the same to customize Time Picker card, for example adding:

  time-picker-elements-background-color: 'var(--background-color)'

to your theme.yaml file will change the corresponding colors.

20

Hmmmā€¦

I never knew that was available in the theme file itself. Good to know.

Iā€™ve created a few lovelace control rows for various items and I just coded the custom themes directly into my ā€œcardā€ config.

See here for an example:

In my mind it makes more sense to configure those variables at the card level instead of the theme file level. That way all of the config for the card is all in the same place instead of being spread out between the card config and multiple theme files.