Tech Talk Tuesday Timer
JavaScript Python
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
5minutes.wav
Bender_Black.otf
LICENSE
README.md
beep.wav
inline.py
t3timer-dev.js
t3timer-dev.svg
t3timer.svg
timesup.wav

README.md

Tech Talk Tuesday Timer

Copyright (C) 2012-2014 A.T.Brask atbrask@gmail.com

This is a self-contained countdown timer for our Tech Talk Tuesdays at OSAA (Open Space Aarhus - http://www.osaa.dk ). It has been implemented from scratch in SVG and Javascript with a dash of embedded CSS and HTML 5. It's totally over-engineered because that's fun to do. The goal was to see whether a single SVG file could contain everything needed for running a simple application like this. Turns out it could!

###The Setup at Open Space Aarhus###

  • An old laptop mounted on the wall
  • An ATI Remote Wonder for remote controlling the thing.

###Usage### The timer has several states, each with its own user interface. Any input device that can act as a keyboard is usable for this.

####Logo Screen####

  • Press 'B' to go to Wallclock Mode.
  • Press 'D' to go to the Configuration Screen.

####Configuration Screen####

  • Press 0..9 and the arrow keys to set the time.
  • Press 'D' to start the timer
  • Press 'C' to go to the Logo Screen

####Running Timer####

  • Press 'D' to pause the timer.
  • Press 'C' to cancel the timer.
  • When there's 5 minutes left, a warning sound is played.
  • When time's up, the alarm goes off.

####Paused Timer####

  • Press 'D' to resume the countdown.
  • Press 'C' to cancel the timer.

####Wallclock Mode####

  • Press 'C' to go back to the Logo Screen.

###How to Build the Final SVG File### One of my "dogma rules" for this project is that the SVG file must be entirely self-contained. Therefore, we need to embed the font and the audio clips in the SVG at Base64-encoded data URLs. This makes editing the file very cumbersome, so I have made another solution.

While editing and debugging the code, one has these files to work with:

  • t3timer-dev.svg
  • t3timer-dev.js
  • Bender_Black.otf
  • 5minutes.wav
  • beep.wav
  • timesup.wav

Once a new version of the code is ready for deployment, all the content files can be inlined into the SVG file by running the bundled Python script:

python inline.py t3timer-dev.svg t3timer.svg

This will create a self-contained file called t3timer.svg.

###Browser Compatibility### SVG is still an evolving format and web browsers support slightly different subsets of it. As of 2014-06-30 the situation is as follows for this project:

Browser Status
Google Chrome Fully supported.
Apple Safari Fully supported, but sound is a bit delayed.
Mozilla Firefox Fully supported, but the animation may stutter a bit.
Opera Fully supported.
Microsoft IE Runs in IE 11, but is missing sound and the custom font.
Microsoft Edge Fully supported.

###Known Issues### Google Chrome seems to have a memory leak somewhere. After some hours the browser window with Tech Talk Tuesday Timer will run out of memory and crash.

###Version History### ####1.0 (2012-07-03)####

  • Initial release. Yay! :-D

####1.1 (2012-07-03)####

  • Flemming requested more accuracy, Rune requested faster blinking.

####1.2 (2012-09-18)####

  • The guys requested sound alerts at 05:00 and when the time is up. I threw in button beeps too.

####1.3 (late 2012)####

  • In Linux it's difficult to setup the ATI Remote Wonder remote control to do anything when the OK button is pushed. Now on we use D instead (for "Do it").

####1.4 (2013-06-04)####

  • Added Firefox compatibility by replacing the embedded SVG font with an embedded Base64-encoded OpenType version of the same font.
  • Added tags instead of procedural sound generation.
  • Added Opera compatibility by doing a lot of small tweaks.
  • Finally, I've added a tool for inlining the external files.

####1.5 (2014-02-18)####

  • Added wallclock mode.

####1.6 (2014-06-30)####

  • Various small changes.
  • Documentation.
  • Uploaded to GitHub.