a pie-shaped timer
JavaScript Other
Switch branches/tags
Nothing to show
Clone or download

README.md

timepie

Build Status

A pie-shaped timer! Live installation at mike.fi/timepie.

Useful as an egg timer when cooking an omelette, or as a presentation for events such as Webbisauna.

Should work smoothly on Chrome and Safari, and remain functional on Firefox.

Features:

  • set custom duration
  • nicely visualize the remaining time
  • beep when done (also from the background in desktop Chrome, Firefox)
  • works for the most part on Android / iOS too

You can also pass the time via URL parameter, e.g.

Screenshot

Running

npm install
gulp

... and then http://localhost:8000/.

Play/pause with a mouse doubleclick or spacebar. Reset with spacebar. On touch devices, you scan swipe to set duration, and double-tap to play.

Tech

This project is mainly for me to tinker with some fascinating tech:

  • TypeScript
  • D3 for visualizing
  • Gulp for building
  • Browserify (+tsify for TypeScript)
  • autoprefixer for not having to type CSS vendor-prefixes
  • RxJS
  • Web Audio API
  • Page Visibility API
  • Web Notifications API

TODO

  • use declared interfaces instead of window["pirate-ninja"] hacks
  • animate tab title when in background
  • prevent screen sleep (this hack seems to work on iOS 8)
  • use event streams instead of callbacks for memorizing durations
  • possibly remove tweening for mobile devices
  • get rid of timeouts if possible
  • rounded corners without graphics bugs

Acknowledgements

Miscellanous notes

Does (at least partial) Livereload and source maps for Typescript.

The command-line equivalent of 'gulp ts':

watchify src/index.ts -p tsify --debug -o build/index.js