From 3d41bb490fdf1f3ac71768a52ce4ff3526136bc2 Mon Sep 17 00:00:00 2001
From: Neale Pickett <neale@woozle.org>
Date: Wed, 9 Nov 2011 19:10:47 -0700
Subject: [PATCH] add speech timer

---
 toys/index.mdwn |   2 +
 toys/timer.html | 147 ++++++++++++++++++++++++++++++++++++++++++++++++
 toys/toys.mk    |   1 +
 3 files changed, 150 insertions(+)
 create mode 100644 toys/timer.html
diff --git a/toys/index.mdwn b/toys/index.mdwn
index 4a4ca05..08172dd 100644
--- a/toys/index.mdwn
+++ b/toys/index.mdwn
@@ -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).
diff --git a/toys/timer.html b/toys/timer.html
new file mode 100644
index 0000000..710adbe
--- /dev/null
+++ b/toys/timer.html
@@ -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>
diff --git a/toys/toys.mk b/toys/toys.mk
index 935755e..bdd72cd 100644
--- a/toys/toys.mk
+++ b/toys/toys.mk
@@ -1,3 +1,4 @@
 PLAIN += toys
 
 COPY += $(wildcard toys/*.cgi toys/cards/*.png)
+COPY += toys/timer.mdwn
