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.