https://github.com/mieky/timepie

a pie-shaped timer
https://github.com/mieky/timepie

Last synced: about 1 month ago
JSON representation

a pie-shaped timer

• Host: GitHub
• URL: https://github.com/mieky/timepie
• Owner: mieky
• Created: 2014-12-21T10:19:29.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-03-28T07:50:32.000Z (over 9 years ago)
• Last Synced: 2023-03-11T15:25:00.139Z (over 1 year ago)
• Language: JavaScript
• Size: 3.91 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
timepie

=======

[![Build Status](https://travis-ci.org/mieky/timepie.svg?branch=master)](https://travis-ci.org/mieky/timepie)

A pie-shaped timer! Live installation at [mike.fi/timepie](http://mike.fi/timepie/).

Useful as an egg timer when cooking an omelette, or as a presentation for events such as [Webbisauna](http://www.webbisauna.fi/).

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.

- minutes + seconds: http://mike.fi/timepie/#t=5m30s

- just seconds: http://mike.fi/timepie/#t=300s

- short! http://mike.fi/timepie/#15

![Screenshot](https://github.com/mieky/timepie/raw/master/screenshot.png)

### 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](http://jsbin.com/dubezaqu/3/) 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

- Thanks to [anttti](https://github.com/anttti) for providing a good [Gulp boilerplate](https://gist.github.com/anttti/a387fa2c87b34de5d9f8) 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](http://futurice.com/blog/sponsoring-free-time-open-source-activities).

### 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```