neale/homepage
neale
/
homepage
1
0
Fork 0
Code Pull Requests Actions Activity

add speech timer

This commit is contained in:
Neale Pickett 2011-11-09 19:10:47 -07:00
parent 1768f47f6c
commit 3d41bb490f
3 changed files with 150 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
toys/index.mdwn
View File

@ -3,6 +3,8 @@ Title: Toys
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.
* Download my [presentation timer](timer.html) for use in any modern
browser
* Play [a fun game](fungame.html)!
* If you need to write someone a letter but really don't want to, try my
[smalltalk generator](smalltalk.cgi).

147
toys/timer.html Normal file
View File

@ -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
toys/toys.mk
View File

@ -1,3 +1,4 @@
PLAIN += toys
COPY += $(wildcard toys/*.cgi toys/cards/*.png)
COPY += toys/timer.mdwn