Cicada for MetaWatch, a Preview

Early in the course of developing some of my MetaWatch UI experiments, I started running into problems with coordinating between the multiple watch-compatible apps on my Android phone. My apps were getting button press events through the broadcast intents sent out by an early version of the MetaWatch Manager app. The problem with using broadcast intents for this is that they’re, well, broadcast—all my watch apps would receive the button press event at the same time and often react simultaneously. I could make each app only react to a dedicated button, but it got a bit tedious coordinating all that.

Out of this frustration, and from a desire to reduce the boilerplate involved in writing a new apps for the watch, I began to develop a framework that I called Cicada.

Cicada provides a couple of key things for hackers who want to explore app ideas. First, it provides a menu system to pick between watch-compatible apps installed on the phone. Only the app that’s currently on the watch screen gets the button press events. Second, it has a widget mode that lets you run three independent apps at the same time, with each getting one third of the watch screen, so you can mix and match pieces for your watch display.

Here’s a little walkthrough of the Cicada interface on the phone side:

Cicada mostly runs in the background on your Android phone, but it also has a very basic control UI. It’s nothing I’m proud of, but it’s done the job while I’ve been focused on the APIs and plumbing. This is what it looks like when it’s not running.

When Cicada is active, you see a copy of what’s on the watch screen, which is handy for taking screenshots. Here you can see the app list. Pressing the top and bottom buttons on the right side of the watch move the selection up and down, respectively, and pressing the middle-right button launches the selected app. Cicada automatically detects when you install or uninstall watch-compatible apps from your phone, and updates this app list instantaneously.

Now I’ve launched the “Widget Screen” app that’s built in to Cicada. This app has an associated settings UI, as you can see from the button that appeared. (Pressing the upper-left watch button would bring me back to the app list.)

In any case, the widget screen is showing several different apps at once. How did I set that up?

Tapping that settings button on the phone screen brings up the (similarly unvarnished) widget settings view, where you can see the list of apps that were being shown on the widget screen: an app showing the current status of my London tube line, a basic clock, and an app that shows the next appointments from my Google calendar.

Here I’ve tapped one of the widget slots, allowing you to see the list of apps that have declared that they can run as widgets.

I’ve made a few changes in the widget configuration. You can’t see it here, but as I’ve made each choice, the watch display has updated itself so I can see the new look.

Here’s what the new set of widgets looks like on the watch. I’ve moved the clock to the top, and swapped out the bottom widget for an app that shows bus arrival estimates in San Francisco. Now, if I press the lower-right watch button next to the bus times widget…

…it launches the bus times app in full screen mode, showing more detail. (As before, pressing the upper-left watch button would bring me back to the widget screen.) Note that this is the same thing I’d get if I’d chosen “Next Buses” from the initial app menu.

Anyway, that’s a quick look at Cicada. It’s not quite polished enough to put up on the Android Market yet, but if you’re a developer interested in building Android apps for putting glanceable information on the digital MetaWatch, it’s definitely far enough along to be useful to you. You can find the source code for the framework and many sample apps in the Cicada project on GitHub.

To get an idea of what’s involved in writing a Cicada app, have a look at the source for the Digital Clock sample app (less than 100 lines of code, including the license header). You just subclass the CicadaApp service class, implement onResume(), onPause(), onButtonPress(), and draw your watch screen in onDraw().

I’ll write more about Cicada here soon, but if you have any questions in the meantime, post them in the comments below or in the cicada-dev Google group.

MetaWatch Hacks & Resources

People are starting to hack together some interesting things for the MetaWatch bluetooth watch platform, but the official forums are so hard to navigate that it’s hard to keep track of what’s going on. This post will serve to pull together some of the things I’ve come across, and I’ll update it until I get bored of curating it.

UPDATE

There’s now a MetaWatch Wiki; updated versions of the content below can be found there, particularly in the Hacks and Libraries & Frameworks pages.

Developer Resources

Libraries & Frameworks

Hacks

Assorted app prototypes that I put together

Minecraft Clock, also done by me

Controlling room lights via OpenAMI by Kai Aras

Remote control by Kai Aras

Qt Animation by javispedro

Showing Google Maps for your current location by Zero Cho

Desktop Mac App notifications via Growl by Kai Aras

Jailbroken iOS support by Kai Aras

Album art and song title display by javispedro

Firmware tweaks by Garth Bushell to add a 24-hour toggle to the embedded menu and to add the year to the idle display. (source code)

Let me know what else you find (though I reserve the right to not post everything that I come across).

Crafting a bluetooth Minecraft Watch with MetaWatch

A little bit of Friday silliness for you, wherein I manage to combine two recent pastimes, hacking the MetaWatch and playing Minecraft, by pulling a piece of game UI out into the real world.

Lately I’ve been experimenting with the possibilities of Bluetooth watches. While I was fooling with Travis Goodspeed’s PyMetaWatch library for talking to the MetaWatch from Python code on your PC, I remembered a fun hack that my friend Michael Dales had done to control lights in the real world from actions and switches in the virtual world of Minecraft.

Minecraft is an engrossingly open-ended game that involves exploring caves for minerals, then using those materials to build more tools and buildings. To complicate matters, there’s a day/night cycle, and night time brings zombies, skeletal archers, and other nasty ssssurprises. The upshot is that it’s a lot safer to travel during the day.

If you’re mining deep in a cave, though, how do you know when it’s safe to emerge from your spelunking to haul your loot home? Notch, the game’s creator, eventually added the ability to craft an astronomical clock in the game to tell you what time of day it was.

So, how did I get it on my wrist? Here’s the crafting recipe for this hack: I wrote a little mod for the Minecraft server that spit out the virtual world’s time of day, using V10lator’s lib24time library and the gratifyingly straightforward Bukkit Minecraft modding system. From there, I have a Python script that uses PIL and the assets from the game to render an approximation of the Minecraft watch at the given time of day.

Finally, I’m using my fork of PyMetaWatch to send the image from my Mac to the watch via bluetooth.

It works, but it’s very laggy right now. (Eagle-eyed Minecraft fans might have noticed that my screenshot above is more evocative than accurate.) The slowdown seems to be somewhere in the PyMetaWatch/lightblue combo, which is taking an agonizingly long time to send a bitmap to the watch. I can generally send a bitmap from my Android phone in less than a second, I suspect that either lightblue is configuring the bluetooth RFCOMM link for a ridiculously low speed, or there’s some overhead in the PyObjC bridge that it relies on. Let me know if you have any ideas.

Update (Sept. 17): Today I tried a different tack, involving an Android app loading the clock image from the Mac over wifi and sending it to the watch via MetaWatchManager, and it worked much better. Here are a couple more pictures showing the watch time more or less synced up with the time on the in-game clock:

MetaWatch Experiments

As the MetaWatch bluetooth watches are getting closer to shipping, I figure it’s a good time to talk about some of the UI experiments I’ve been doing with them, to give you an idea of what they might be useful for.

MetaWatch is a line of hacker-friendly wristwatches that can be paired with smartphones to enable new kinds of lightweight interactions. In the same way that glancing at a wristwatch is faster and less disruptive than pulling out a pocket watch to check the time, you can imagine how glancing at a connected watch could be more convenient and sociable than pulling your phone out of a pocket or handbag to see cloud-based information.

After my previous experiments in showing live bus times on an older bluetooth watch, the guys at Fossil got in touch with me, and over the past couple of years I’ve served as an unpaid advisor to the MetaWatch project, in the hopes of helping to make the end products as developer-friendly as possible.1

There are a lot of things to like about the MetaWatch devices:

  1. The screen of the digital version is always on, so the information on it is always a discreet glance away. You don’t need to push or swipe anything to bring it to life.
  2. The battery life is reasonable, so you can wear these things for the better part of a week without having to charge them.
  3. Since they’re designed by experienced watchmakers at Fossil, the MetaWatch devices look more like fashion watches than cookie-sized computers strapped to your wrist.

There are definitely some trade-offs, though, compared to other devices with more horsepower and flashier displays:

  1. As an Android app author, you’re basically treating the MetaWatch as a dumb terminal. You send pixels to the screen, and you get button presses back. This gives you a lot of control, but the downside is that watch-based UIs are a lot less responsive than you’d like.2
  2. The low-resolution monochrome display isn’t as sexy as color touchscreen devices like the iPod Nano or the WIMM Platform. They’ve made the most of it by hiring Susan Kare, designer of the original monochrome Mac graphics, to do the default imagery. You can’t reuse existing designs—for best results any UI is going to have to be custom-designed for this thing.

With that out of the way, here are a few prototypes that I’ve made over the past year or so.3 I hope you’ll excuse the rough graphics in places; I mostly wanted to see how these interfaces would feel if they were always easily accessible on my wrist.

Imagine this: you’re at the airport, hands full of luggage, and you just want to know where and when you need to be at your gate. Wouldn’t it be handy if you could glance at your wrist to find out? Matt Webb called this use “personal signage”, which is a nice way of thinking about it—you can get by with a lot less screen real-estate if your devices know exactly which part of the departure board you’re interested in.

How long do you have to work before your next meeting? It’d be great to be able to see that at a glance.

When you’re driving home, the time that’s really important to you is when you’ll get there. Assuming your phone knew your commute home, it could check current traffic conditions and show you the time you’d get home if you were to leave now.

Since I take the London Underground home instead, what I want to know is how the trains on my line are running.

Of course, the watch has several buttons that can enable you to trigger phone actions. I always text my wife when I’m heading home from work, so I wrote a little app to send a canned message with a single button press as I’m walking out of the building.

If you’re an author who compulsively checks your Amazon rank and social network stats, you could put those things right on your wrist and avoid the distraction of surfing to those sites.

I was curious how my commute time broke down, so put together a custom stopwatch app. I hit the button when I stepped off the bus or got out of the tube, and the app saved that “lap”. (It also used the time of day to know whether to reverse the order of the steps in the list.)

If you want to keep yourself focused on important things, perhaps a little memento mori reminding you how many days you had left (actuarially speaking) would help?

If that’s too morbid, you could try the Pomodoro Technique of staying focused on work in 25-minute increments, and have the watch vibrate when it’s time to take a break.

Finally, a little bit about the development process: to make it easier to quickly build new MetaWatch apps, I put together a little framework called Cicada. It detects watch-compatible Android apps as they’re installed on the phone and automatically adds them to an on-watch menu system.

A Cicada app can run in full screen mode…

…and optionally, the same app can be run in widget mode alongside other apps. Here, the same realtime bus times app is only using the bottom ⅓ of the screen, with other Android applications providing the tube status widget and the digital clock widget.

I’ll talk more about the Cicada framework in a later post.


  1. Disclosure: the MetaWatch guys have provided me with several prototype watches to experiment with over the past couple years. In my day job, I’m employed by Google UK, but my bluetooth watch experimentation is a personal project done on my own time.
  2. You can also modify the firmware that runs on the watch itself, which would be much more responsive, but I haven’t experimented with this yet.
  3. The watches shown here are early prototypes that have slightly different appearances and branding than the shipping devices.