add speech timer
This commit is contained in:
parent
1768f47f6c
commit
3d41bb490f
|
|
@ -3,6 +3,8 @@ Title: Toys
|
||||||
Here is some various junk I've done. Maybe you'll find it amusing.
|
Here is some various junk I've done. Maybe you'll find it amusing.
|
||||||
Maybe you'll just wonder why I spend so much time on this garbage.
|
Maybe you'll just wonder why I spend so much time on this garbage.
|
||||||
|
|
||||||
|
* Download my [presentation timer](timer.html) for use in any modern
|
||||||
|
browser
|
||||||
* Play [a fun game](fungame.html)!
|
* Play [a fun game](fungame.html)!
|
||||||
* If you need to write someone a letter but really don't want to, try my
|
* If you need to write someone a letter but really don't want to, try my
|
||||||
[smalltalk generator](smalltalk.cgi).
|
[smalltalk generator](smalltalk.cgi).
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,147 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<!-- Presentation Timer 2011 Neale Pickett -->
|
||||||
|
<!-- Placed in the public domain. -->
|
||||||
|
<!-- Time-stamp: "2011-11-09 18:15:56 neale" -->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Presentation Timer</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<style>
|
||||||
|
#timer {
|
||||||
|
font-size: 10em;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0.1em;
|
||||||
|
}
|
||||||
|
#tools {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var duration = 12000;
|
||||||
|
var beginning;
|
||||||
|
var itimer;
|
||||||
|
|
||||||
|
function pad(i) {
|
||||||
|
if (i < 10) {
|
||||||
|
return "0" + i;
|
||||||
|
} else {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start a timer on [element] for [duration] milliseconds.
|
||||||
|
// When there are [g] milliseconds left, turn the background green.
|
||||||
|
// When there are [y] milliseconds left, turn the background yellow.
|
||||||
|
function startTimer(element, duration, g, y) {
|
||||||
|
var beginning;
|
||||||
|
var itimer;
|
||||||
|
|
||||||
|
function display(remain) {
|
||||||
|
var min = Math.floor(Math.abs(remain / 60000));
|
||||||
|
var sec = Math.abs(Math.floor(remain / 1000)) % 60;
|
||||||
|
|
||||||
|
if (itimer) {
|
||||||
|
element.style.color = "inherit";
|
||||||
|
} else {
|
||||||
|
element.style.color = "#888";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (remain < 0) {
|
||||||
|
element.style.backgroundColor = "#f24";
|
||||||
|
} else if (remain < y) {
|
||||||
|
element.style.backgroundColor = "#ff0";
|
||||||
|
} else if (remain < g) {
|
||||||
|
element.style.backgroundColor = "#0f0";
|
||||||
|
} else {
|
||||||
|
element.style.backgroundColor = "inherit";
|
||||||
|
}
|
||||||
|
|
||||||
|
element.innerHTML = "";
|
||||||
|
if (remain < 0) {
|
||||||
|
element.innerHTML += "-";
|
||||||
|
}
|
||||||
|
element.innerHTML += min + ":" + pad(sec);
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
var now = (new Date()).getTime();
|
||||||
|
var remain = beginning + duration - now;
|
||||||
|
|
||||||
|
display(remain);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stop (clear timer)
|
||||||
|
this.stop = function () {
|
||||||
|
clearInterval(itimer);
|
||||||
|
itimer = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pause/play toggle
|
||||||
|
this.toggle = function () {
|
||||||
|
var now = (new Date()).getTime();
|
||||||
|
|
||||||
|
if (itimer) {
|
||||||
|
this.stop();
|
||||||
|
duration -= now - beginning;
|
||||||
|
} else {
|
||||||
|
beginning = now;
|
||||||
|
itimer = setInterval(update, 33);
|
||||||
|
}
|
||||||
|
display(duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (duration > 120000) { // Over 2m?
|
||||||
|
g = g?g:120000; // Green @ 2m
|
||||||
|
y = y?y:60000; // Yellow @ 1m
|
||||||
|
} else {
|
||||||
|
g = g?g:60000; // Green @ 1m
|
||||||
|
y = y?y:30000; // Yellow @ 30s
|
||||||
|
}
|
||||||
|
|
||||||
|
display(duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
function clicked(id) {
|
||||||
|
var e = document.getElementById(id);
|
||||||
|
var t = document.getElementById(id + " time");
|
||||||
|
|
||||||
|
if (! e.timer) {
|
||||||
|
setTime(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
e.timer.toggle();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setTime(id) {
|
||||||
|
var e = document.getElementById(id);
|
||||||
|
var t = document.getElementById(id + " time").value.split(':');
|
||||||
|
var sec = 0;
|
||||||
|
|
||||||
|
if (e.timer) {
|
||||||
|
e.timer.stop();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (t.length > 3) {
|
||||||
|
e.innerHTML = "What?";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i in t) {
|
||||||
|
var v = t[i];
|
||||||
|
|
||||||
|
sec = (sec * 60) + Number(v);
|
||||||
|
}
|
||||||
|
|
||||||
|
e.timer = new startTimer(e, sec * 1000);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p id="timer" onclick="clicked('timer');">--:--</p>
|
||||||
|
<p id="tools">
|
||||||
|
<input id="timer time" type="time" size="6" value="5:00" onchange="setTime('timer');">
|
||||||
|
<input type="button" value="Set" onclick="setTime('timer');">
|
||||||
|
<input type="button" value="❚❚ ▶" onclick="clicked('timer');">
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
PLAIN += toys
|
PLAIN += toys
|
||||||
|
|
||||||
COPY += $(wildcard toys/*.cgi toys/cards/*.png)
|
COPY += $(wildcard toys/*.cgi toys/cards/*.png)
|
||||||
|
COPY += toys/timer.mdwn
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue