[Guide] How to use the CLOCK

Hello everyone,
I have made a basic guide on how to use the clock component.

Here, I will explain all the blocks associated to the clock component and a few sample projects which use the clock.

1.DESIGNER PROPERTIRES OF THE CLOCK
1.1Timer Always Fires

This is a Boolean property, i.e it accepts only true or false.
If you wish the clock to run even if the application is not the active screen, i.e the user is using some other application.
Can this be set using blocks? Yes!
By default: True
Possible uses:

  • To run a timed game
  • While the user is giving a quiz
    image

1.2Timer Enabled

This is a boolean property, i.e it accepts only true or false.
When you want the clock to run it’s timer, then you have to set it to true.
Can this be set using blocks? Yes!
Note: If the property is set to true in the designer, then the clock fill automatically fire as soon as the screen initizalizes.
By default: True
image

1.3 Timer Interval
This property accepts a number.
With this property we can specify the interval (in milliseconds) between each time the click.timer event is called.
Can this be set using blocks? Yes!
Note: The clock starts to leg when the interval is set to a very small value such as 10 milliseconds.
By default: 1000 milliseconds (1 second)
image

2.BLOCKS
2.1 EVENTS

There is only 1 event for this component that is the .timer event.
This is called every time the timer interval is completed.
Note: After executing all the blocks in the event is when the next interval begins. That is why a lag can be produced.
Example usage –
image

2.2 METHODS

2.2.1 “Add”
This method is used to add the amount of time specified to the given instance of time.
Under the add method, we can add the following quantities.
image

  • Days
    Result:image

:thinking: How to use this blocks and why does the clock1.now return 18598 days, will be explained later in the guide. For now, it is important to notice that when we added 1 to the days, it worked!

  • Year
    Result:
    image
    image

  • Month
    Result:
    image

  • Weeks
    Result:
    image

  • Hours
    Result:
    image

  • Minutes
    Result:
    image

  • Seconds
    Result:
    image

I had to use a variable as 2 Do It’s in a second isn’t possible :sweat_smile:

  • Duration:
    image

Here duration accepts milliseconds, so using 5000 milliseconds resulted in 5 seconds being added.

2.2.2 Get day of the month.
This is a simple method and just returns the day of the month in the given instance.
Accepts: instant
Returns: Number

Usage:
image
image

2.2.3 Duration
With the help of this block, we can get the duration between two instances in milliseconds.
Accepts: Milliseconds or Instance
Returns: Milliseconds
image

2.2.4 Duration to…
The Duration to blocks can process milliseconds to the amount of the time mentioned on them.
They can accept milliseconds and give an output of seconds, minutes, hours, days and weeks.
Remember: All duration parameters accept number as milliseconds.
All these blocks have already been used in explanation of the “add” blocks, please refer them.

2.2.5 Format Date
The format date block is useful when we want to return an instant into a properly formatted date.
Accepts Instant and Text.
Return Text.

image

image
image
image

These are some formats the pattern accepts.
We can separate the year, date and time by a comma (,), a slash (/) or a hyphen (-).
2.2.6 Format Date and Time
This block is an add on to the Format Date block. It also allows us to format the date along with the time in the given instance.
Accepts: Instant and text
Returns: text.

image
image

2.2.7 Format Time
This block is used to format time in a particular instance. Here there is no option for specifying the format of the output and always returns time in the format – hh:mm:ss a
image
For more info on all possible time formats, have a look at this link.
https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html

2.2.8 Get Millis
The get Millis block is used to get the milliseconds occurred between 1970 and the specified instance.
And this is the answer to why we had received 18598 days in the start.
Accepts: Instant
Returns: Number
image
2.2.9 .Hour
This method simply returns the hour of the day of the specified instance.
Accepts: Instant
Returns: Number

image
2.2.10 Make Date
The make date method takes in an input of year, month and date and forms an instant from the given data.
Accepts: Numbers
Returns: Instant

image
image
2.2.11 Make Instant
Make Instant makes an instant of the text specified in the format MM/dd/YYYY hh:mm:ss or MM/dd/YYYY hh:mm.
Accepts: Text
Returns: Instant

TO clear the usage of this method, I have just complicated stuff a bitimage here

2.2.12 Make Instant from Millis
The make instant from millis block makes an instant of time from the specified milliseconds calculated since 1970.
For your information a year has 3.154e+10 milliseconds. So, let us test it now.
image
1 year from 1970.
2.2.13 Make Instant from Parts

  • Date and Time
    This block makes an instant from time combining the user inputs of year, month, day, hour, minute and seconds.
    Acepts: Numbers
    Returns: Instant
    image

  • Time

image
2.2.14 Get from instant
This block returns the quantity of the given measure from the given instant.

  • Minute
    image
    System time was 11:36 AM.

  • Month and month name
    image

  • Weekday and Weekday Name
    Weekday returns number (position of day in the week starting from Sunday).
    image

  • Year
    image

2.2.15 Clock1.Now
This is the method I have used the most in the guide and expect that those who did not know about it would have understood it by now.
Still here what it is.
It returns the instant of time that has occurred when it was called.

For more info on what is an instant of time, see here –
https://docs.oracle.com/javase/8/docs/api/java/time/Instant.html

2.2.16 System Time
This is a method that returns the number of milliseconds elapsed since 1970 and the time at which the method was called.

Difference b/w .Now and .System Time

The only difference between them is that .Now returns an instance of the current time whereas . System Time returns milliseconds.
An example
image

2.3 Properties
All the properties have been explained in the start already.
We can set these properties by blocks using these blocks –
image

We can get the current values of the properties by using these blocks –

image



That was the end of the guide.
Here is the aia file.

Clock.aia (17.5 KB)

What is in the aia file?




Should I Explain .aia file?

  • Yes
  • No

0 voters

Hope it helps!!
Please give your suggestions
Thank you

36 Likes
Button click 10 times only after 24hours
Stopwatch Extensions
How to convert millisecond into Hour:Minute:Second
Summary of the time spent on the screen
Error adding days on date
Daily free task
Calculate the length of the day
How to automatically add and calculate age (in months) based on the Birthdate and Date of Weighing Picker?
Date Picker not getting updated
Mathematics of Hours
Millisecond cannot accept the arguument
Substract calendar
Can anyone help me to calculate days using datepicker and add days block
Online Current Date
How to get duration of 2 dates ? i use this block but it show wrong duration
Want to delete tag in firebase after 365 days
Timer and countdown
Using a variable in Day Difference
How to convert date into day of the year
How to convert date and time to milliseconds kodular
Time diffrence bitween 2 clock value is not giving correct result
I want to store only online current date
I Want to Give Date Picker . But I Want To Show Only Upcoming 3 Dates
Subtract typed date from system date
Clock Component Displays Error
DateTools : Some tools to work with date and time
Simulate AM Scanning
set local duration to (global endTime - global startTime) / 1000
How to calculate milliseconds from a given DD/MM/YY/HH:SS to current Time?
Modifying Date Time Format
What to write in the "instant" field of the Clock.Format
How to increase my coin price every 24hrs weather the app is open or closed?
Can someone help me using dates? I want to get days between 2 dates
Due Date Function
Getting error on dynamic component when using schema
Illegal date and time
Kodular Calendar App
Help Me in Group Chat App
Convert date to unix
Show that user is online or offline
Adding a number to DatePicker and displaying the results
How to set label to get the date of the day automatically?
String exp_date
How to make images change over device time
Timestamp problem
How To i make , wheen click a new page then loading a few sec
Compare date time

The tutorial is really good and the steps are complete. Good job . :sunglasses: :+1:t2:

thank you @Alaqmar_Bohori i always a full detailed information of clock blocks
thank you again!

Really nice and helpful guide. Thank you.

1 Like

Excellent guide, congratulations.
Continue

:clap:t3:

A Comprehensive Guide about Clock, Nice :clap:

1 Like

Loved how detail this guide is. I hope you will also mention the add days, add month etc.

1 Like

Amazing guide :heart_eyes: :star_struck:
I consumed lot of time understanding these few blocks at beginning

Thank you @sugarlesscreator

Good to know it helped you :slight_smile:

Thank you @lxmipaudel

Thank you @Douglas_Maueski

Thank you @themaayur

Thank you @WatermelonIce

I have mentioned them

See here

Thank you @Titan_geek

3 Likes

Really great

Thank you @Avijit

Amazing Guide. :star_struck:

Thanks @Kshitij

This topic can be a wiki. Would be appreciated if any staff or mod can make it.
@Kodular

3 Likes

This decision can only be made by @Alaqmar_Bohori himself.
He alone has the copyrights from it.

6 Likes

I don’t think i can because i am on tl2

Yes, but only you can authorize / allow it.

3 Likes

Very Detailed Guide
@Alaqmar_Bohori
:+1: :+1: :+1:

Well If It Will Be Made Wiki, I Will Edit The Post This Way. To Make It Look A More Cleaner In Presentation.

1. Properties

-------1.1 Timer Interval

Property Type - Number

Default Value - 1000 Milliseconds

From Designer Screen
Untitled

From Blocks
blocks

Usage -
This Block Sets the Time Interval (in Milliseconds) Betweem Each Firing of Clock.Timer Event.


-------1.2 Timer Enabled

Property Type - Boolean

Default Value - True

From Designer Screen
Untitled

From Blocks
blocks
blocks

Usage -
This Block will Enable the Clock Timer Interval Countdown.


-------1.3 Timer Always Fires

Property Type - Boolean

Default Value - True

From Designer Screen
Untitled

From Blocks
blocks
blocks

Usage -
This Block will Continuously Fire the Clock.Timer Event in a Loop at Frequent Intervals Set by the Timer Interval Property.

Note -
This will Fire even when Application is Not Showing on the Screen if set to True.



2. Event

component_event

Usage -
This Block Fires when Timer Interval is Completed.

Note -
After Executing all the Blocks within the Event is when the Next Interval Begins.



3. Methods

9 Likes

Btw, I approved your guide in the AI2 forum.
I could make it a Wiki there (if you want).

3 Likes

Sure you can

3 Likes