Adding date and time to a scene

Using StudioPro you can very easily add a live date and time to your productions. This method can be used to display the current date, time or even an analog clock.

Firstly, navigate to, and click Continue.

From the available templates, select the template that closest suits your requirements. In this scenario we'll use the Standard template. Click Continue.

Next you will need to select the location, or time zone of your clock. This can be achieved by searching, selecting your desired time zone from a list.

Now select the language you would like your clock to appear in, this is only required when incorporating a date. Select the display date and format if required. From here you can also select a 12/24 hour clock and enable/disable time zone abbreviation. When configured, click Continue.

Select the font and font size you would like to use. It is recommended you use the largest font size possible (48), this can be re-sized to smaller further on. From here you can also choose the font colour of your clock, and apply any formatting. When happy with your font settings, click Continue.

If you would like to apply a border or add padding to your clock, you are able to here. . If you are placing on an image, select transparent for clock background and page background colour. Lastly select your horizontal/vertical alignment, in this case we will leave as Center. When you have finalised your clock, click Continue.

Your clock is now ready. From the HTML code section, select and copy only the webpage as highlighted here (i.e

You are now ready to add your clock into your StudioPro production. It is recommended that your clock is added as a DSK source, which will allow you to add throughout a number of scenes and also apply show/hide transitions. More information on DSK can be found in the DSK (Downstream Keyer) article.

To add your clock, select an available Scene. For simplicity it is suggested this is added as a high level Scene (i.e Scene 40-48). Select this scene, then right-click and rename to something friendly such as 'Clock'.

Next, if required, create the background for your clock, this can be a simple Colour Source, image, video and more. Here we will just add a background graphic using the Image source and align at the top-right of our Scene.

Now to add your clock. Click Add Source, then from the Sources, select the Browser source. Click Add Source to add your Browser source.

Enter a friendly name for your click (i.e. Clock Source), then press OK to add your source.

In your Browser source properties, paste the webpage clock URL copied from the dateandtime website into the URL textbox. Click OK.

Your clock will now be added to your production. You can now transform and position your clock over your clock background.

Your date/time clock will now be added. We will now set this up within a DSK (Down Stream Keyer). Ensure you have the clock Scene selected, then within the DSK panel, select an available DSK and select the plus.png icon to add your Scene as a DSK. If the DSK panel isn't fully visible, select the panel to enlarge.

Your clock will now be added as a DSK. By selecting the settings-icon.png icon you can also apply a show/hide transition. This will make your clock smoothly transition when running.

You are now ready to run your clock DSK. Simply select your clock Scene within your DSK panel to run. Your clock will now appear on your program with the Show Transition applied.

Was this article helpful?
3 out of 3 found this helpful
Share it, if you like it.