Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 115 additions & 10 deletions source/_dashboards/clock.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,78 @@ Screenshot of the clock card

All options for this card can be configured via the user interface.


## Card settings

{% configuration_basic %}
Title:
{% configuration %}
title:
description: Adds a title to the top of the card
Clock Size:
type: string
required: false
clock_style:
description: Allows the clock to be displayed in a digital or analog style. Defaults to digital.
type: list
required: false
default: digital
keys:
digital:
description: Digital clock style.
analog:
description: Analog clock style.
clock_size:
description: Adjusts the size of the text allowing a wider range of use with different types of dashboards. Defaults to small.
Display Seconds:
type: list
required: false
default: small
keys:
small:
description: Small clock size.
medium:
description: Medium clock size.
large:
description: Large clock size.
show_seconds:
description: Shows seconds alongside the clock, providing the time format is in a 12-hour format.
No Background:
type: boolean
required: false
default: false
no_background:
description: Removes the background of the clock card.
Time Format:
type: boolean
required: false
default: false
time_format:
description: Allows the time format to be changed on a per-card level. Defaults to the user profile setting.
Time Zone:
type: string
required: false
time_zone:
description: Change the timezone used for the time on a per-card level. Defaults to the user profile setting.
{% endconfiguration_basic %}
type: string
required: false
analog_options:
description: When using the analog clock style, this allows the user to configure the appearance of the clock.
type: map
required: false
keys:
border:
description: Shows a border around the clock face. Defaults to false.
type: boolean
required: false
default: false
ticks:
description: Shows ticks (indices) on the clock face. Defaults to hour.
type: list
required: false
default: hour
keys:
none:
description: No ticks are shown.
quarter:
description: Quarter hour ticks are shown.
hour:
description: Hour ticks are shown.
minute:
description: Minute ticks are shown.
{% endconfiguration %}

### Examples

Expand All @@ -50,7 +105,6 @@ type: clock
Screenshot of the basic clock card
</p>


Example of a larger clock card for tablet dashboards:

```yaml
Expand Down Expand Up @@ -109,3 +163,54 @@ title: New York 🦅
<img src='/images/dashboards/clock_card_new_york.png' alt='Screenshot of a medium sized, 12 hour clock showing am/pm and seconds based in New York along with a title'>
Screenshot of a medium sized, 12 hour clock showing am/pm and seconds based in New York along with a title
</p>

Analog clock with no border and hour ticks:

```yaml
type: clock
clock_style: analog
clock_size: medium
analog_options:
border: false
ticks: hour
```

<p class='img'>
<img src='/images/dashboards/clock_card_analog_hour_ticks.png' alt='Screenshot of a medium sized, analog clock and hour ticks'>
Screenshot of a medium sized, analog clock and hour ticks
</p>

Analog clock with border and minute ticks showing seconds:

```yaml
type: clock
clock_style: analog
clock_size: medium
show_seconds: true
analog_options:
border: true
ticks: minute
```

<p class='img'>
<img src='/images/dashboards/clock_card_analog_minute_ticks_border.png' alt='Screenshot of a medium sized, analog clock and minute ticks showing seconds'>
Screenshot of a medium sized, analog clock and minute ticks showing seconds
</p>

Analog clock with a title, no ticks and border with seconds:

```yaml
type: clock
clock_style: analog
clock_size: medium
show_seconds: true
analog_options:
border: true
ticks: none
title: Mountain Time
```

<p class='img'>
<img src='/images/dashboards/clock_card_analog_no_ticks_border_title_mountain_time.png' alt='Screenshot of a medium sized, analog clock with a title, no ticks and border showing seconds'>
Screenshot of a medium sized, analog clock with a title, no ticks and border showing seconds
</p>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.