HOW TO: Create an item showing the current Date and Time ?

In OnTheAir CG Designer, there are multiple ways to create an item that will display the current date and/or time.

Using the Analog or Digital Clock items

In the item bar, you can choose between 2 types of clocks. To switch from one type to the other, simply click and hold on the item button, and a popup menu should show up:

Using a "Digital Clock"

When you select the Digital Clock item, the button should look like this:

Once you select it, you can click in the "Composition" area to draw a zone in which the Digital Clock will be shown (or you can simply click and a zone will be automatically drawn).

Once the zone is created, you can edit some of its settings in the inspector:

You can select the font and alignments as well as the format:

For the time format, you can add different items, simply by dragging the tokens to the text area above:

• Hour
• Minute
• Second
• AM/PM

Once they are dropped in the Text area, you can click and hold on any of them to select if you are using 24 hours clock or 12 hours as well as the numbers are displayed (with or without the leading 0):

These are the choices that you have:

• 1-12 (for 12 hours clock where midnight and noon are shown as 12:00:00)
• 01-12 (same as above, but hours 1 to 9 will be shown with a leading zero as 01, 02,...)
• 0-23 (for 24 hours clock where midnight is shown as 00:00:00)
• 00-23 (same as above, but hours 1 to 9 will be shown with a leading zero as 01, 02,...)
• 0-11 (for 12 hours clock where midnight and noon are shown as 00:00:00)
• 00-11 (same as above, but hours 1 to 9 will be shown with a leading zero as 01, 02,...)
• 1-24 (for 24 hours clock where midnight is shown as 24:00:00)
• 01-24 (same as above, but hours 1 to 9 will be shown with a leading zero as 01, 02,...)

Using an "Analog Clock"

When you select the Analog Clock item, the button should look like this:

And as soon as you click on the button, a pane should open to ask you to select a file. At the bottom of this article you will find a photoshop (psd) sample file. If you download it and select it, this will show something like this:

How to create a new clock ?

If you open the sample psd file attached, you will see that there are in fact 4 quadrants in the file:

Each of the quadrant will be either the background, hours, minutes, and seconds. The 4 quadrants are organised as this:

We will then rotate the hours, minutes and seconds quadrants according to the time that they represent. You just need to make sure to align the graphics correctly, you can use the Guides that are included in the file.

Once you have created the design that you want, you can save it either as psd, tga or png. Don't use jpeg as it does not have an Alpha Channel that is needed for the transparency.

Using a "Text" item

In the examples above, you will notice that you can only add time, but what if you want to add the date or week number? For that it is a little more complex. You need to add a simple "Text" item to your project.

Then in the text field of the inspector, enter this: 

<!DC: dateFormat !>

Where you will replace dateFormat by a combination of letters that will set the way the date or time is displayed. So for example if you want to show Thursday 16 May 2024, you will enter this: 

<!DC: EEEE d MMMM yyyy !>

Syntax for text items

Years

 

Syntax	Result (06 May 2024)	Comment
y	2024
yy	24
yyy	2024
yyyy	2024

 

Months

 

Syntax	Result (06 September 2024)	Comment
M	9
MM	09
MMM	Sep
MMMM	September
MMMMM	S

Days

 

Syntax	Result (06 September 2024)	Comment
d	6
dd	06
ddd	006

Quarters

 

Syntax	Result (06 September 2024)	Comment
Q	3
QQ	03
QQQ	Q3
QQQQ	3rd quarter

Weeks

 

Syntax	Result (06 September 2024)	Comment
w	37	(week of year)
W	1	(week of month)
WW	01

Day of week

 

Syntax	Result (06 September 2024)	Comment
E	Mon
EE	Mon
EEE	Mon
EEEE	Monday
EEEEE	M

Day of week (local)

 

Syntax	Result (06 September 2024)	Comment
e	2
ee	02
eee	Mon
eeee	Monday
eeeee	M

Hours 

Syntax	Result (07:03:05 PM)	Comment
H	19	(0-23) so midnight is 00:00:00
K	7	(0-11) so midnight and noon are 00:00:00
h	7	(1-12) so midnight and noon are 12:00:00
k	7	(1-24) so midnight is 24:00:00

Minutes

Syntax	Result (07:03:05 PM)	Comment
m	3
mm	03

Seconds

Syntax	Result (07:03:05.234)	Comment
s	5
ss	05
S	2
SS	23
SSS	234

AM/PM

Syntax	Result (07:03:05 PM)	Comment
a	PM	AM/PM