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 14 January 2016, you will enter this: 

<!DC: EEEE d MMMM yyyy !>

 

Syntax for text items

 

Years

 
Syntax Result (06 January 2015) Comment
y 2015  
yy 15  
yyy 2015  
yyyy 2015  
 

 

Months

 
Syntax Result (06 September 2016) Comment
M 1  
MM 01  
MMM Sep  
MMMM September  
MMMMM S  

 

Days

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

 

Quarters

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

 

Weeks

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

 

Day of week

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

 

Day of week (local)

 
Syntax Result (06 September 2015) 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
Have more questions? Submit a request

Comments

Powered by Zendesk