/clock

Primary LanguageHTML

  • 4 beats per second

Step through a recorded chess game. Encapsulated Transparent Chess Widget

Example of SVG decorations and finer adjustments

  • Browse time zones!
  • 16-segment display for city names
  • Responsive layout for mobile browsers
  • Toggle seconds display by clicking on the time.
  • Color-coded to the day of the week
  • Kanji day of the week
  • 24-hour time with leading zero
  • Standard date format
  • Day of the week and month spelled out in full

Crisply scaled old-school clock in a variety of colors

Pebble Time was the 2nd and final iteration of a smart-watch from a startup that was later acquired by Fitbit, which was later acquired by Google.

The hardware had an always-on LCD display with a similar resolution to a Game Boy, but in portrait with 64 colors. My demo does not take advantage of the full resolution, opting for pixel doubling to ensure legibility, resulting in a blockier aesthetic.

The Pebble SDK isn't very useful unless you have the corresponding hardware, so this watch face demonstration uses HTML canvas.

Similar to other pages, sans many features.

Supplementary content designed for the Pebble Time watch face page.

  • Favicon clock
  • Time offset slider
  • Theme switcher
  • Pixel font printouts
  • Text colors
  • Weather, color-coded
  • Grid background (helps developer line up text visually)

The 5x5 pixel font is called Bagua, as 5 rows and columns is just enough resolution for a trigram. The font was made for this watch face because it can act much like a 7-segment display, with the added benefit of a saner approach to rendering the Roman alphabet and other symbols, typically in the ASCII character set.

Modified to support more than one size of pixel font. Fonts comparable to some Japanese fitness watches, with desired adjustments.