mcElapsedTime Component
Overview
The mcElapsedTime Component
- Converts between total seconds and days, hours, minutes, and seconds
- Supports the capabilities of mcNumber objects - including the mouse wheel
- Is implemented as an class so that multiple instances (objects) can be created
- Each object has its own callback routine
You can examine the source for this file to see exactly how the controls above were implemented.
Basic usage -
Display
Code
| Callback
| Disable
| Method Summary
| IE8 Failure and Fix
Basic usage - Display
The component display is implemented in html as
- 5 input fields
- type="number"
- class=mcNumber
The unique field IDs are based on a common string plus qualifiers.
- xx - No qualifier for the total elapsed time in seconds
- xx_day for days
- xx_hrs for hours
- xx_min for minutes
- xx_sec for seconds
This string is passed to the constructor when the object is initialized.
If it is omitted, then the default value of mcElapsed_time is used.
This following example shows the fields placed is a table.
|
<![CDATA[<table>
<tr>
<td>Elapsed time <td><input type="number" id="second_time" class=mcNumber style="width:80;"
value="0" size="5" maxlength="7" min=0 max=10000000 step=1>
sec
<td width=10> <!-- just a spacer -->
<td>=>
<input type="number" id="second_time_day" class=mcNumber style="width:46;"
value="0" size="5" maxlength="7" min=0 max=1000 step=1>
days
<input type="number" id="second_time_hrs" class=mcNumber style="width:40;"
value="0" size="5" maxlength="7" min=-1 max=24 step=1>
hr
<input type="number" id="second_time_min" class=mcNumber style="width:40;"
value="0" size="5" maxlength="7" min=-1 max=60 step=1>
min
<input type="number" id="second_time_sec" class=mcNumber style="width:40;"
value="0" size="5" maxlength="7" min=-1 max=60 step=1>
sec
</table>]]>
|
The min & max values are one wider than normal
(for minutes and seconds, -1 to 60 instead of 0 to 59)
to allow the mouse wheel to add & subtract
to/from the next higher position.
The associated code ensures that those out-of-range values are never displayed.
Basic usage - Code
Javascript adds functionality to the component, style sheets provide the sunken look
and color the background when the component is disabled.
|
<![CDATA[<script type="text/javascript" src="js/mcUITools.js"></script>
<script type="text/javascript" src="js/mcElapsedTime.js"></script>
<link rel="stylesheet" type="text/css" href="js/mcUITools.css">
<style>
input.mcDisplay {
width:22;
}
</style>
<script>
var t1, t2;
var Elapsed_Time;
window.onload = function(event) {
var xx=0;
mcDisableControlsByClass("mcDisplay");
mcNumber_initByClass("wideNum");
mcNumber_initByClass();
t1 = new TmcElapsed_Time();
t2 = new TmcElapsed_Time("second_time");
}
function mcElapsed_Time_Callback(ElapsedTime)
{
Elapsed_Time = ElapsedTime ;
Update_All();
}
</script>]]>
|
Callback
Once the user (or software) has changed the value, the object will call the function specified
via the constructor.
In the example below,
| object
| base_ID | callback |
|
|---|
| t1
| mcElapsed_time | mcElapsed_Time_Callback
| These are the defaults
|
| t2
| second_time | alternate_Callback
| Alternates - must be specified for each additional component
|
t1 = new TmcElapsed_Time(); // just use the defaults
t2 = new TmcElapsed_Time("second_time", alternate_Callback);
function mcElapsed_Time_Callback(seconds){} // default callback
function alternate_Callback(seconds){}
|
If a callback function is not specified, the code checks to see if mcElapsed_Time_Callback
is defined and, if present, uses that.
When there are multiple components, each one can (and probably should)
have its own callback.
However, callback functions are optional, not required.
(This page does not have one.)
Disable
The example above provides buttons to disable and enable
the component. As you can see, the calls are very straight forward.
<![CDATA[ <input type="button"
value="Enable" size="5" onclick="{ t1.EnableControls()}">
<input type="button"
value="Disable" size="5" onclick="{ t1.DisableControls()}">]]> |
Method Summary
t1 = new TmcElapsed_Time([basename], [callback]); // Create an object by calling the constructor - both arguments are optional
t1 = new TmcElapsed_Time(); // use default values mcElapsed_time and mcElapsed_Time_Callback
t2 = new TmcElapsed_Time("mcElapsed_time", mcElapsed_Time_Callback); // same as default
t3 = new TmcElapsed_Time("second_time"); // alternate basename, must evaluate to a string
t4 = new TmcElapsed_Time("another_copy", xx_time); // alternate basename and callback
|
|
t1.EnableControls();
t1.DisableControls();
|
IE8 Failure and Fix
I used the prototype technique to create objects because
the more advanced methods would not work in IE8
- apparently, this technique also fails.
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727;
.NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E)
Timestamp: Tue, 20 Sep 2016 06:13:10 UTC
Message: 'this.__proto__.hms_Changed' is null or not an object
Line: 191
Char: 3
Code: 0
URI: file:// ... /js/mcElapsedTime.js
|
According to Microsoft,
the prototype property was not supported before IE 11 (Windows 8.1)!
The following fixes the problem in IE8, but I have no way of testing it in other IE browsers
if (this.__proto__ === undefined) // this is to support IE8, it should work up to IE10
this.Elapsed_time_UImcSpinEdit.onInput = this.Elapsed_time_UImcSpinEditChange;
else
this.Elapsed_time_UImcSpinEdit.onInput = this.__proto__.Elapsed_time_UImcSpinEditChange;
|
Author:
Robert Clemenzi