[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!
  • Default: True

    image

Possible uses:

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

1.2 Timer 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!
  • By default: True

    image

Note: If the property is set to true in the designer, then the clock will automatically fire as soon as the screen initizalizes.


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!
  • By default: 1000 milliseconds (1 second)

    image

Note: The clock starts to leg when the interval is set to a very small value such as 10 milliseconds.

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. Also have a look at a test done by @ScottFromScott
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.



: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!

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:





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



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.




)

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.





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

For more info on all possible time formats, have a look at this link.

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



2.2.9 .Hour
This method simply returns the hour of the day of the specified instance.
Accepts: Instant
Returns: Number




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




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 bit!


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.


1 year from 1970.

2.2.13 Make Instant from Parts

2.2.14 Get from instant

NOTE: In AppInventor you need to use Clock1.Now block, not SystemTime, for all the following examples: e.g.
image

This block returns the quantity of the given measure from the given instant.

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 –

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




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(1).aia (22.7 KB)

What is in the aia file?

Hope it helps!!
Please give your suggestions
Thank you

22 Likes
Faq Section: Clock
Displaying clock, either digital or analogue
How do I insert select functional in alarm extension
Clock component problem?
Substract days from a given date
How can we make a clock timer
Are there.. any extensions that woud simplify the use of "clock"
Como obter o dia da semana
How do you make a clock?
How can i give in a label the time
Help with the codes
Component that gets the internal date/time of the device
How do I make a pedometer that resets itself ever different day?
How do i calculate duration in mit app inventor
How do you quickly enable/disable visibility of all image sprites?
[PAID] :alarm_clock: Alarm Manager Extension with Notification or Autostart
Some question about clock and time picker
How can I create a delay block to call a method? (schedule when an sms text is sent)
Incrementing dates (using a Clock in a loop)
Time instant vs time text?
How to design MAX7219 dot LED Control App using App Inventor
I need help for school, please!
[PAID] :alarm_clock: Alarm Manager Extension with Notification or Autostart
Clock help please
Screen time tracker app
Date Calculator
How do you make an event last for 5 seconds?
Medication Reminder (again)
Medication Reminder (again)
How do you display current time through a label?
Upload to googleplaystore ( FocusEvent ?)
Having an issue with lists (and saving images converted to base64 )
Ayuda a traducir de este texto a mit app invetor en bloque
Comparing dates and get the difference between them
Aggiungere o sottrarre una combinazione di giorni, mesi e anni a/da una data antecedente 1900
Cuanto tiempo ha transcurrido, Por favor una soluciĂłn
[PAID] :alarm_clock: Alarm Manager Extension with Notification or Autostart
Making the app do an action after choosing the TimePicker's time during said time
Can I use procedures to make an infinite loop?
Device that greets based on the time
Add date to list
A weekly reset for a mood logbook
Help, how do I use Canvas to count Double Tap, blocks look right but not working?
Skulpt launch python code with arguments
Send actual date
[HOWTO] ⏰ Five Ways To Check If A Year Is A Leap Year
Extension To Display Day Or Date
How to set notification when the dates appear?
Format date and time
Clock component problem?
Date in app is effected by the locale language of the phone
How can I add a button that when its clicked it starts a circular progress animation for 5" and after it a notificator appear?
How to add days to a selected date
There are not enough simple examples of the use of blocks
How do I restrict a Timer to be only 30 seconds?
Aktuelle Zeit bei der SMS mit senden
Save dates from date picker
Help with time calculations
Calculating Reaction Time
Notification error
BLE list of devices

Nice Tutorial :partying_face: :+1:

1 Like

I made this guide as a → Wiki with @Alaqmar_Bohori's permission.
So if someone wants to add something important, it can be done now.

3 Likes

It is worth mentioning the perils of Clock Timers.

  1. The Android System timers are used. They are low priority and thus not pin-point accurate, though good for most purposes.

  2. If switching App Screens, all timers in the current screen must be disabled to avoid memory corruption.

  3. When receiving streamed data from an external device such as a microcontroller (e.g. Arduino), the App must be given enough time to complete the processes required and it's time interval must be faster than the device send time interval to avoid data overlap/App lock-up. Rule of thumb is to set both to longest practical time intervals.

  4. It's a good idea to manage timer settings in the Blocks, including initialization, so that nothing gets overlooked because it's hidden in the Designer palette.

  5. Switch a timer off within it's own Block if it's not required to repeat. Leaving redundant timers running affects the performance of the App.

  6. Switch off all timers on App Exit.

5 Likes

Very good Guide Alaqmar.

(added to FAQ)

What is in the aia file?

@Alaqmar_Bohori The screenshot of the app doesn't appear in the MIT AI2 community so I've added it. :wink:

Thanks @Salman_Dev, @ChrisWard and @Anke.

Ooops :grimacing:, my bad.
Thanks for adding it!

1 Like

Bonjour,

J'utilise MIT APP inventor depuis peu.
J'ai lu le tutoriel très intéressant.

Par contre, je dois être niais, mais je n'arrive pas à faire afficher une image pendant une durée défini (Exemple : afficher une image pendant 2 secondes puis elle disparaît).

Merci pour votre aide.

You can for examlple When Screen initialize set image visible to true, Set Clock.Timer Interval to 2000 , set Clock.Timer Enabled to true and then use block when Clock.Timer set image.visible to false and Clock.Timer Enabled to false

Oui c'est logique et si simple. :sweat_smile:

Merci

1 Like

I've been working on a way to set the time on an ESP32 over BLE, eventually I found a way. I used the included Arduino code on the ESP32, adapted with the use of the ESP32Time library, as this allows you to set the RTC directly, most solutions involve connecting to the internet to get the time from an NTP server, my product will be carried around across the world to getting the time from a phone makes much more sense.

Challenges:

  • BLE works with short strings, this meant converting the millis clock to a string, I added "" to it to get that to happen. Other ways are suggested but they didn't work for me.
  • Although the system time took into account the UTC offset, the millis time didn't, adding the result of the 'Z' format didn't work either, the less well-known 'X' format for time zone offset did.

Perhaps it's easier to see by looking at my blocks, there's a bit added for debugging. I'm using a variable tzone1 to pass the UTC offset around.

1 Like

Hey everyone.. i read this article a bunch of times, but i still have no clue on how to make a simple delay.. can anyone help?

2 Likes

Thanx. a wonderfull blog page

Hi, Hope help U
Pause.aia (2,1 KB)

Thanks a bunch! it helped :grin:

1 Like

It will end in tears if you take that approach!! :rage:

Like this:

8 Likes

hi same here i have also not understand. But, follow these step which is above 'how to make a clock' :slight_smile:

Why is a wait procedure generally a bad idea?
The model of event processing in App Inventor by Lyn

Please Wait method by Scott

Taifun

3 Likes