Kattrack for Pebble

Kattrack was well-received as a site, but I knew the site wasn't the best format for it. So, Kattrack for Pebble.

The "server-side" element of Kattrack was simple - not much logic is required when you pick a random line from a text file. And using my experience with a "scrolling drawer" from the VHS watchface, I wanted to go through and do the same thing here. You flick your wrist, the quote appears (sliding in from the bottom), and it falls away after a few seconds. A new quote each time. Very nice.

The interesting part was making the watchface itself. So, Katharine had made herself known on the Pebble slack for really liking ponies - specifically, My Little Ponies. A little bit of design extrapolation and I came up with the simple little watchface with a nice cyan background, pink text, and a little rainbow.

There was a challenge - the character set on Pebble devices is a little... limited. There's little reason to care about every possible unicode character, so it tends to be a slightly increased ascii character set. But a few quotes on the list have fun unicode characters, like the shrugging face, or were too long to fit on the watchface screen. My solution? Flagging the quotes. The first character of any quote would be checked before being selected - if it was an asterisk (*), it would be skipped. The code on the website was adjusted to strip out these asterisks, and tada! Problem solved.

Now, we had a watchface with Katharine's quotes that was matching Katharine's interests. But I wanted to experiment a little more.

About Configuration

The pebble platform allowed you to create configuration pages for your pebble applications and watchfaces - these were relatively simple things, just an HTML form that you could style as you liked, plug in whatever things you'd like, and it'd return the results to the javascript part of the app. However.

1. You had to host the site yourself, and 

2. HTML can be difficult to style sometimes.

One particular library solved the HTML styling issues, somewhat. Something called "Slate" came along, which worked as a pair of CSS and JS files that let you quickly assemble a functional configuration page that would match a standard styling system for Pebble. You can view the source of the package, as well as some information about it here: (pebble/slate: [Deprecated] Front-end framework for developing Pebble mobile configuration pages. (github.com))

So, I decided to actually create a configuration page for the app. The previous ones had no such functionality, thanks to the limited design of each project, and the inexperience of me in HTML. But now with slate? I could easily do that!

I made assets for each character in Katharine's favorite show. Only "Speedy" had the extra rainbow asset, but for each other it was just a simple color scheme. Easy, quick, and really didn't take much effort.

Afterward

It became quite well-received within pebble, much to my delight. It also became my most popular watchface at the time, with >43 hearts and many more downloads. It's not a high quality watchface, and doesn't really do much, so I didn't expect it to have much longevity, but it did well enough.

You can download it from the Pebble appstore here: https://apps.rebble.io/en_US/application/569a3c6f8b7337e75400003e

As an extra note, someone else actually decided to use the KatQuotes dataset as well - there was a popular service for Pebble that added pins every day to your watch's timeline as you configured, with "Today in History," "Word of the Day," or inspiration quotes. That kind of stuff. The guy reached out to me and asked if it was okay to include.

It absolutely was.