Current Date and Time Widget Tutorial

The Singular Current Data and Time Widget is an advanced widget that allows you to create all sorts of digital and analog clocks.

The Widget uses Moment.js, a free and open source JavaScript library that removes the need to use the native JavaScript Date object directly.

The only way to really harness the power of the Current Date and Time Widget is to start here:

https://momentjs.com/docs/#/use-it/

Moment.js is the key to the kingdom for unleashing the power of the Current Data and Time Widget, specifically the formatting of how yo want the data and time displayed,

For example if you enter this format into the Widget:

dddd, MMMM Do YYYY, h:mm:ss a

the result will be rendered as:

Monday, April 29th 20019, 3:27:55pm (but it will display s the actual time) 

To get started, you'll need to make a new composition in Singular, then add a Subcomposition to the tree and finally add the Current Date and Time Widget inside the Composition.

This is a "more advanced" Widget so it is dependent a dedicated Subcomposition.

Click the Edit button on the bottom of the Current Date and Time tab within the Property Panel.

Screen_Shot_2019-04-29_at_3.19.26_PM.png

 

This is where you build your clock, weather is be Analog or Digital

As you can see in the image below, the Current Date and Time Widget uses what we call Widget Nodes. All this means is that we've done more of the work for you in that all you have to do is connect the various Widget Nodes directly to widget properties in the Composition Tree

Screen_Shot_2019-04-29_at_3.05.31_PM.png

 

So in this case there's a Rectangle Widget in the Composition Tree which is named "MinutesHand" and the rotation variable (Z) is connected to "Minutes Angle" Widget Node. 

Screen_Shot_2019-04-29_at_3.30.39_PM.png

 

As with all Widgets that are dependent on their own Subcompositions,  you will need to go up to the level in the Composition Tree where the Current Date and Time Widget was added to actually see the fruits of your labor.

This example composition, called Time Widget Example, can be downloaded from the Resource section of the marketplace. 

Current-Date-and-Time-Widget-Tutorial.gif

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

Comments

0 comments

Please sign in to leave a comment.