Current Date and Time Widget

The Current Date and Time Widget is an Advanced Widget that allows you to create all sorts of digital and analog clocks that display the current date and time.


To learn how to add a Widget to your Composition, click here.

Remember, any underlined widget properties can be connected to a Control Node or a Data Node.

Properties 

As seen above, select the "Table" tab in the Property Panel to update this widget's following property types:

Settings

current_date_2.png

Update Frequency - How often the time updates. Options are .1 Second, Second and Minute

Time Zone - Time zone options are the usuals such as Beijing, London, Chicago and more.

Offset (Sec) - The amount of time offset in seconds. 

Display

current_date_3.png

Format - Format display of the time. This can be "dddd D MMMM Y" for example or other time formats that can be found here.

Leading Zeros - Option to activate leading zeros.

Language - A large variety of language display options are available.

Composition - The Current Date and Time Widget is an Advanced Widget. This means it requires another layer of customization. In order to build the contents of this Current Date and Time Widget (that will be linked to Widget Nodes), you have to hit this Edit button.

Widget Nodes

Widget Nodes are dedicated, pre-defined Control Nodes available for Advanced Widgets. The following are Widget Nodes in the Current Date and Time Widget:

  • Days
  • Format
  • Hours
  • Hours %
  • Hours Angle 12 hours
  • Hours Angle 24 hours
  • Milliseconds
  • Minutes
  • Minutes %
  • Minutes Angle
  • Month Name
  • Months
  • Seconds
  • Seconds %
  • Seconds Angle
  • Seconds & Milliseconds
  • Seconds & Milliseconds %
  • Seconds & Milliseconds Angle
  • Years

Usage Tutorial

The Current Date and Time Widget is an Advanced Widget. This means it requires another layer of customization. In order to build the contents of this Current Date and Time Widget (that will be linked to Widget Nodes), you have to hit the Edit button next to the Composition property field.

Now add widgets to build the visual components of your clock. If you decide on building an analog clock, you'll have to add some circle widgets, rectangle widgets and more to build the base and hands of the clock. You can also decide to build a digital clock.

Click here to download a Composition with pre-built clock elements inside the Current Date and Time Widget.

Building Analog Clock Elements

 

Once you've added the widgets and built the clock components to your liking, you'll have to connect these Widgets to the provided Widget Nodes. The Widget Nodes come built-in with the widget and range all the way from Days to Milliseconds to Seconds Angle to Years.

Connecting Clock Elements to Widget Control Nodes

Here's a tip: to make analog clock hands move, you'll have to connect each of those components "Rotation" property within the Transform Tab of the Property Panel to the Seconds Angle, Minutes Angle and Hours Angle Widget Nodes.

current_date_6.png

Was this article helpful?
0 out of 15 found this helpful

Comments

2 comments

  • Hello, The Download link doesn't work. Can you reconnect this link. Thanks

    Click here to download a Composition with pre-built clock elements inside the Current Date and Time Widget.

    0
  • brroch Thank you for spotting that. Here is the link in the Template Library: app.singular.live/dashboard?templateLibraryItem=83

    0

Please sign in to leave a comment.