In februari 2015 I published a blogpost about a new form of time entry on smart phones. Now I have wrapped this control into an Apex plug-in.
The essence of the control is that you draw the hands of the clock on your smartphone instead of entering or choosing the time in digital format.
In my experience it feels much more intuitive. It is also very fast way for entering time values.
In my experience it feels much more intuitive. It is also very fast way for entering time values.
The next link will take you to a page where you can try this control.
The control is designed for touch devices. In a desktop browser you can click on the numbers in the analog clock to select the hours or minutes.
If you want to try the control on your phone or tablet you can have an email with a link to the demo page sent to you. Enter your email address below and press the 'Send link by mail'. Your mail client will open and you can send the mail.
Send to email address Send link by mail
( Your email address is not stored )
How to use the control
Below is an explanation of the control:
- Touch the clock image next to the time input field and the time input control will appear.
- In the center is the analog clock in which the hands can be drawn.
- Above it you see the digital time with buttons for changing to AM or PM.
- Below it are buttons to Accept of Cancel.
- You can draw a hand by moving your finger from (approx.) the center of the clock outward toward one of the numbers.
- The accuracy of the clock is 5 minutes
- The active hand and the active part of the digital display are indicated by a red color
To enter 10:15 you start at the center of the clock and swipe towards the 10, then release.
The hour in the digital time display above the clock will display 10 and the minutes will have turned red (=active). Then start in the center of the clock again moving toward the 3 this time. When you release you will notice that the digital clock displays 10:15.
The time is initially interpreted as a value between 7:00 and 19:00.
To change to PM touch the PM button.
The hour in the digital time display above the clock will display 10 and the minutes will have turned red (=active). Then start in the center of the clock again moving toward the 3 this time. When you release you will notice that the digital clock displays 10:15.
The time is initially interpreted as a value between 7:00 and 19:00.
To change to PM touch the PM button.
If you are satisfied you can press OK to save the time. Cancel returns to the form without saving the time.
Apex Plug-in
This control is now available as an Apex dynamic action plug-in.You can find it at the plug-in section of apex.world.
The settings of the plug-in allow you to:
- define the output time format ( application attribute )
- define the default time window base ( component attribute), see explanation below
Using a default time window
The analog displays a 12 hour period, while the day consists of 24 hours. This is tackled by the AM/PM indicator. It is however not very user friendly if you have to press the PM button each time you want to enter a time after noon. Therefore the concept of a time window is introduced. In many cases your application will accept times in a certain ranges. For working hours registration this might be between 7:00 and 19:00.It is possible to interpret the chosen times to that specific period. So hour=8 will yield 8:00 and hour=5 will result in 17:00. In this example the time window is from 7:00 to 19:00 and the time window base is 7.
The time window base can be set as component level attribute. The user can overrule this setting by using the AM or PM buttons. So if the user enter hours=5 and presses the button AM, the resulting time will be 5:00.
I would really like to hear whether you think this control useful. Or maybe you have suggestions on improving it.
Happy developing,
No comments:
Post a Comment