Design Your Own Clock

Regardless of which time (device time or time zone) you want to display on the clock, you always need the same following elements:

  • Dial
  • Hands (hour and minute hands, optional second hand)

You can create your own clock in two different ways:

  • Using a predefined clock
    You select and modify a widget from the HTML5 Editor library.
  • Creating your own clock
    You create your own clock in the HTML5 Editor.

Using Predefined Clock

  1. Select a predefined clock from the library of the HTML5 Editor → Widgets folder and add it to your screen (see the following illustration as an example screen → in the further description the clock New York).
  1. Right-click the clock you want to modify and choose → Edit Group.
  1. Now select the desired element in the Screen Elements area that you want to modify. In the example, the dial (screen element → dial) is to be changed.
  2. Then click on the → Media button in the Add Element area to open the Mediapool.
  1. Select the dial you want to use and then click → Okay.
  1. The dial has been replaced. Click → Apply to save the clock group.
  1. Your clock will now be displayed on the screen with the changed dial. In the same way you can also change other clock elements, e.g. the hands of the clock.
  1. Once you have finished your entries, click → Save.

Create Your Own Clock

  1. In the HTML5 Editor, open the screen in which you want to create your own clock.
  2. Go to the Add Element area and click the button → Media to open the Mediapool.
  3. In the Mediapool, select your desired dial and click on → Okay.
  1. In the editing area, move the dial to the desired position.
  2. Fix the dial by clicking the → Opened Lock in the Screen Elements area.
  1. Open the Mediapool by clicking the button → Media in the Add Element area.
  2. Download the images that you want to use as clock hands to the → Mediapool.
  3. Select the image for the hour hand and add it to the screen with → Okay.
  1. Click on the Hour Hand. This provides you the Animation Effect area in the column on the right side.
  2. Click on the → Plus sign.
  3. Select the menu item → Clock hand from the drop down menu.
  4. Then select the menu item → Hours.
  5. Now you can choose between the Device time of your output device and a Time zone of your choice. By default, the Device time is selected. In this example, a time zone is set.
  1. Now add the clock hand you want to use for displaying the minutes to the screen.
  2. Click on the element → Minute Hand.
  3. Open the drop-down menu in the Animation Effects area and select the menu item → Minutes for this clock hand.
  4. Otherwise you should use the same settings as for the hour hand (described in the previous section using the example of time zone -5).
  1. When you have finished your entries click on → Save.

Note:
In addition, if you want to use a clock hand to display the seconds, you can add it in the same way and then set it to seconds.