Add Clock Item

Using elements like the clocks from the library of the HTML5 Editor, you can transform static images into animations that inspire emotions.

In this chapter you will read how to insert a predefined clock as an element in a screen and how to define the display of the time in the element settings.

Add a Clock

1. In the HTML5 Editor, go to → Add Element and open the category → Library.
2. In the folder → Widgets, select the clock you desire and apply it to your screen by
    double-clicking on it.

Widget Clock

The individual elements of the clocks from the → Widgets folder are grouped together due to a default setting.

The elements responsible for displaying the time (clock hands) are also preset to the setting → Device time, so that when they are displayed on the screen, they are based on the time set in the output device.

Notice:

Please check regularly if the time of your output device is set correctly. 

If you want the clock you inserted to display a different time than the device time of your output device, you can of course change the setting → Change Device Time setting to Time Zone setting. For this purpose, the clock is automatically selected for further editing after insertion into the screen.

For later editing, simply select the clock again in the screen.

Set Clock

  1. Select the clock in the screen.
  2. Open the context menu with a right click.
  3. Click the menu item → Ungroup.

Set Time

  1. In the → Screen Elements area, select the → Hour Hand element.
  2. This allows you to find the element → Clock hand in the right column of the program window under the category → Animation Effects.
  3. Now activate the setting → Time zone by clicking in the box in front of it and then enter the time zone you want in the input field next to it.

According to the principle described above, the minute and second hands in the predefined clocks from the library are also preset to display the device time of the output device. Please edit these hands accordingly as well.

If you design your own clock, please also make sure that you edit all hands according to the procedure described above.

Please read the following chapter → Design Your Own Clock.