<!DOCTYPE html>
<title>RaspBerry Formula Kart-Land</title>
<meta charset="utf-8">
<style>
h1 {
display : none;
}
table {
width : 200px;
}
td {
width: 85%;
padding : 0;
}
</style>
<h1>Stop Watch</h1>
<table border="1" id="TIMELIST">
<thead>
<tr>
<th>Laps
<th>Time
</thead>
<tfoot>
<tr>
<th>Best
<td>
<tr>
<th>Total
<td>
</tfoot>
<tbody>
<tr>
<th>1
<td>
<tr>
<th>2
<td>
<tr>
<th>3
<td>
<tr>
<th>4
<td>
<tr>
<th>5
<td>
<tr>
<th>6
<td>
<tr>
<th>7
<td>
<tr>
<th>8
<td>
<tr>
<th>9
<td>
<tr>
<th>10
<td>
</tbody>
</table>
<p><input type="button" value="Start" onclick="start ();"></p>
<p><input type="button" value="Count" onclick="count ();"></p>
<p><input type="button" value="Reset" onclick="reset ();"></p>
<script>
(function () {
function SwingBack (cbFunc, swingStrength, backStrength, reactionTime) {
this.cbFunc = cbFunc;
this.swingStrength = swingStrength;
this.backStrength = backStrength;
this.reactionTime = reactionTime;
this.state = 0;
this.time = null;
this.direction = null;
this.disabled = false;
}
function handler (event) {
var value = event.rotationRate.gamma;
var time = event.timeStamp;
var direction = (value < 0) ? -1: 1;
var strength = Math.abs (value);
if (this.disabled)
return false;
switch (this.state) {
case 1:
if (this.reactionTime > (time - this.time)) {
if (this.direction === direction) {
if (this.backStrength < strength) {
this.state = 0;
this.cbFunc (time);
this.time = null;
this.direction = null;
}
}
}
else {
this.state = 0;
}
break;
case 0: default :
if (this.swingStrength < strength) {
this.state = 1;
this.direction = -direction;
this.time = event.timeStamp;
}
break;
}
}
function create (cbFunc, swingStrength, backStrength, reactionTime) {
var swingBack;
if (1 > arguments.length)
throw new Error ('Arguments are invalid.');
if (! swingStrength)
swingStrength = 400;
if (! backStrength)
backStrength = swingStrength / 10;
if (! reactionTime)
reactionTime = 200;
swingBack = new SwingBack (cbFunc, swingStrength, backStrength, reactionTime);
window.addEventListener ('devicemotion', swingBack, false);
return swingBack;
}
SwingBack.prototype.handleEvent = handler;
SwingBack.create = create;
this.SwingBack = SwingBack;
}) ();
(function () {
function LapTimeWatch (laps) {
this.laps = laps;
this.timeList = [];
}
function start () {
this.timeList = [(new Date).getTime ()];
}
function count (timeStamp) {
var len = this.timeList.length;
var tmp = this.timeList[len - 1];
if (1 > arguments.length)
timeStamp = (new Date).getTime ();
this.timeList[len] = timeStamp;
return (timeStamp - tmp);
}
function create (laps) {
var obj = new LapTimeWatch (laps || 10);
return obj;
}
LapTimeWatch.prototype.start = start;
LapTimeWatch.prototype.count = count;
LapTimeWatch.create = create;
this.LapTimeWatch = LapTimeWatch;
}) ();
var timeList = document.querySelectorAll ('#TIMELIST tbody td');
var watch = LapTimeWatch.create ();
var start = function () {
reset ();
watch.start ();
};
var reset = function () {
Array.prototype.forEach.call (timeList, function (td) {
td.textContent = '--:--.---';
});
};
var count = function () {
var index = watch.timeList.length - 1;
var time = watch.count ();
timeList[index].textContent = createTimeString (time);
if (watch.laps == index) {
alert("end");
return;
}
};
var createTimeString = function (timeStamp) {
return [
padding ((timeStamp % 86400000) / 1000000|0),
padding ((timeStamp % 3600000) / 100000|0),
padding ((timeStamp % 60000) / 1000|0) +
'.'+ padding (timeStamp % 1000, 3)
].join (':');
};
var padding = function (num, length) {
return ((new Array (length || 2)).join ('0') + num).slice (-length || -2);
};
SwingBack.create (count);
</script>
