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.
- 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.
- minutes + seconds: http://mike.fi/timepie/#t=5m30s
- just seconds: http://mike.fi/timepie/#t=300s
- short! http://mike.fi/timepie/#15
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.
This project is mainly for me to tinker with some fascinating tech:
- D3 for visualizing
- Gulp for building
- Browserify (+tsify for TypeScript)
- autoprefixer for not having to type CSS vendor-prefixes
- Web Audio API
- Page Visibility API
- Web Notifications API
- 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
- Thanks to anttti for providing a good Gulp boilerplate for getting up to speed
- Thanks to pohjammikko for the beeper MVP!
- This project is a grateful recipient of the Futurice Open Source sponsorship program.
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