Skip to main content

How to add and edit Analogue Clocks in the Time Widget

In the time widget, there is the option to show a preset or custom Analogue clock. Here's all you need to know.

Written by Drew Harding

With the Time Widget added to a playlist, go into the 'Customise' area.

Clock Type

Under the option for Clock Type, select 'Analogue'

Clock Style

Under Clock Style, choose a preset option or Custom to build your own.

Example of the presets available along with a custom clock:

Timezone

Next choose the 'Timezone' to display. Options include:

  • Device Timezone (shows time directly from device being displayed on)

  • Search and select another timezone (i.e. New York)


Making a Custom Clock

Select 'Custom' for the clock style.

Now you have options to add your own images for the various elements of the clock.

Upload your images to the media section, then select 'change image' for each element to set your image.

Quick Design Tip:

We recommend using png or svg for the images.

Hour, minute and second hands should be rendered either horizontal or vertical and you should avoid rendering with unnecessary blank space.

Here is an example of a png that has been uploaded and selected for the clock face:

Here is the hour hand image. You'll note that there are extra options for the hands - these are:

  • 90° left / right rotation buttons - use these to flip your hand image left or right to show correctly on the clock face.

  • Scale - this allows you to increase / decrease the size of the hand on the clock

  • Offset - this allows you to position the hand from the centre the clock face

Here's the minute hand - again the same options as the hour hand:

Finally, the second hand:

With all the custom elements added, you can see that the custom clock face appears like this:

Now, save your changes:

Finish editing the rest of your layout and publish to your device.

If you have any questions, please feel free to contact us.

Did this answer your question?