It often feels like I’m wrestling an octopus while I’m dressing my son after bath time. Checking the overnight low on my phone to help me choose pyjamas that are warm enough to last him through the night only added to my handicap. I’ve cunningly evened the playing field slightly by writing a Pebble app to check the overnight low with two taps of the device already on my wrist.
What is Pebble?
Pebble is a smart watch that was born from a Kickstarter project. The project had a goal of $100,000 but ended up making over $10 million. The biggest advantage over its competitors is its price point – starting at $99, and up to $199 for the steel model (pictured). The screen is e-paper which means that it’s only black and white, but you get about 7 days of battery life out of the watch.
The Phone App
The watch functionality is tightly coupled with the companion Pebble app running on your smartphone (available for iPhone or Android). The Pebble app on your phone shows the list of apps installed on your watch. You can have up to 8 apps installed on the watch at a time. Other apps which you’ve downloaded to the phone but aren’t installed on the watch live in a section called the “locker”.
The Pebble phone app also includes a section for browsing and searching through the huge range of available apps.
Creating a Pebble App
The easiest way to get up and running is using the cloudpebble.net web based IDE. Once you’re logged in and have your phone connected, click “Create” on the “Projects” page, give it a name, choose “Pebble C API” with the “Empty project” template then click “Create”. Once your new project opens, click “Add new” next to “Source files”, chose “C file”, give it any name (with “.c” on the end) and click create.
The basic layout of the app is shown below,
To start off with we’ll create a blank window, push it onto the stack, enter the run loop, then clean up our window when the app closes,
Clicking the big green play button near the top right of the page will start the compile and deploy process. If all goes well, you should feel a buzz on your wrist and see your app with a blank canvas staring expectantly back at you.
The IDE success message gives you the opportunity to navigate to the logs. This is a good time to familiarise yourself with them. If you exit the app on your Pebble, you should see a line of blue text appear in the logs showing you the available, used and allocated memory. It’s a good idea to keep an eye on the “Still allocated” amount to make sure you’re cleaning up your memory when the app closes.
Adding some text
To display some text on the screen we add a TextLayer to our new window. Add the following code in between creating and showing the window.
This GRect is stipulating that we want the text offset 10 pixels from the left and 10 pixels from the top, with a width of 100 pixels and a height of 40 pixels. These values would normally be more dynamic, based off the screen size or other elements on the screen.
Also don’t forget to clean up the memory before the app exits by making the following call after the event loop finishes,
Next time you click the green play button you should see “Hello” on your watch. Things just got real.
This sets up some code to be called once the app is in flight. Any messages sent to console.log() will be displayed in the logs screen we saw earlier. When you run the project now, you should see this message getting displayed in the latest logs.
Sending a Message From the Phone to the Watch
Adding the following line of code inside the “read” callback will attempt to send data from the phone to the watch,
The message being sent must:
- have an integer for each key
- have values that are strings, numbers or byte arrays (nested data structures are not supported)
- not exceed the maximum message size on the watch
This means you have to be quite careful about how you structure the data being sent from the phone to the watch.
Receiving this message on the watch end also requires some changes. The first thing we create is a callback that will be called whenever a new message is received, something like below,
The function can have any name, but the rest of the signature should be the same. This callback gets the “0” message out of the iterator as a string and logs it out. Placing the next two lines at the start of the main method will register our callback, and set the inbox size,
The parameters to app_message_open() are the inbox size and the outbox size. Here we are setting the inbox size to the maximum size available for this device, and we’re not using the outbox so we’re setting it to zero.
Melbourne Overnight Low
Running the project now should show the overnight low displayed as a log message.
To display the value on the watch we just need to modify the text layer in our message received callback in the C code (I made the text layer global so it was accessible from inside the callback). The complete C program should now look something like this,
Note that the “hello” text has been modified to act as a loading message.
The app works great, I’m like a pyjama ninja now. If you’re planning to develop a Pebble app, there are a couple of user experience considerations to keep in mind. Firstly, you can’t type on the watch – so stuff like search queries don’t really work. Secondly, it needs to be something that you wouldn’t just use your phone to do. There are lots of Pebble apps, but I don’t use many of them because they provide functionality that I’m just as comfortable whipping out my phone for.