Pebble development with Visual Studio Code on OS X

It’s been a while since I last posted, due to my (not so) new job with Microsoft in Redmond, WA. Now that it’s been about 8 months since the move and things have settled, I find myself having some more time to code, tinker and blog again. While I’ve been a happy Microsoft Band user since early November 2014, I wanted to check out some other smartwatches to see what they have to offer. The Pebble Time Round caught my eye, mainly due to its design (thin 7.5mm body in a round, steel body). I read a bunch of reviews and decided to go ahead and order one. Naturally, I wanted to check out the Pebble development options for watchfaces and apps and thought it’d be a great opportunity to start using Visual Studio Code on OS X to get some hands-on experience with it. This post describes my first experiences and hopefully gives you some useful tips if you want to do something similar.

Setting up Visual Studio Code

The first thing was to set up Visual Studio Code on a Mac. Now, if you’ve read my blog previously or know me at all, I’m sure you’re aware that I’m a Windows user and usually cover developing apps for Windows. That being said, it doesn’t hurt to get some experience on competitive platforms, so I decided to do all this on a Mac with OS X El Capitan. There’s not much to say about the installation of Visual Studio Code, other than following the installation instructions.

Installing the Pebble SDK

I decided to follow the manual installation steps for the Pebble SDK to get a better grasp of what was actually going on. Alternatively, you can use Homebrew to install the SDK automatically. Homebrew is needed at some point, anyway, as you need freetype, boost-python, glib and pixman for custom fonts and the emulator.

A thing of note is that I had to manually install libjpeg through Homebrew (‘brew install libjpeg‘), as trying to deploy my app to the emulator initially gave me a timeout message (Emulator launch timed out) and the following error:

My first Pebble app

The folks over at Pebble have some really good documentation to help you get started with Pebble development. I skipped the basic C tutorials and jumped to the Hello, Pebble! one. Running the ‘pebble new-project hello-pebble –simple‘ command as indicated as one of the first steps on the page actually triggered the SDK installation, which was a bit of a surprise, but turned out to be pretty hands-off. After the SDK installed, it created my hello-pebble project and I proceeded to open the hello-pebble.c file in Visual Studio Code.

Something I want to mention here is that you can open up the .c file itself and edit it without issues. However, as I found out when trying to set up Tasks (explained below), some of VS Code’s commands only work when working in a folder. So, opening up VS Code and doing a File > Open on the hello-pebble folder is a good habit to get in to right away.

After following the tutorial to get the right code in your hello-pebble.c file, it’s time to build and test the app: run the ‘pebble build‘ command from a Terminal window inside the hello-pebble folder to build the project. If all is well, the output should end with a successful build message.

As mentioned, I bought the Pebble Time Round, which corresponds to the “Chalk” platform. If you have a different Pebble smartwatch, replace the ‘chalk‘ references below with either ‘aplite‘ or ‘basalt‘ for the original Pebble or Pebble Time/Steel respectively.

As mentioned above, make sure you install libjpeg if you run into that dyld error when trying to deploy the app to the emulator. The command is ‘pebble install –emulator chalk‘ and should open the “qemu-pebble” application, install the Pebble app to it and run it. You can use the left arrow key to get back to the main screen of the emulator, which instructs you to either press the right arrow to get back to the app or use the up/down arrows to browse the timeline on the Pebble.

Developer lifecycle automation

We’re all set to do Pebble development now, but it seems somewhat of a waste to only use VS Code as a glorified text editor. The IDE is actually quite powerful and one of the things you can do is use Tasks to automate some of the back-and-forth flow we currently have between VS Code and the Terminal.

The first thing we need to do is set up the task configuration. To do this open the Command Palette with F1 and type in ‘Configure Task Runner‘, press Enter to select it. This will create a sample tasks.json file in the .vscode folder. Remember, the task commands only show up if you have a folder opened in VS Code, versus just a file. After some experimentation, I ended up with the following tasks.json:

A few things to explain here:

  1. The command property assumes your project folder is next to the pebble-sdk-4.1-mac one. If not, you’ll need to adjust this accordingly
  2. The isShellCommand property is used to tell VS Code that the command needs to be executed in the shell (Terminal). You’ll get an error without it
  3. echoCommand will show the entire output of the command within VS Code. This is helpful, as any build errors will show up in VS Code
  4. The tasks represent the various tasks we want to be able to execute in VS Code. You might want to tweak these, but I configured these to be able to build and run them against the three available platform emulators. You can add a task with parameters “install” “–phone” “” to deploy to your physical Pebble
  5. isBuildCommand and isTestCommand can be assigned to one task respectively to make use of the Command+Shift+B and Command+Shift+T keyboard shortcuts. In this case, the build shortcut builds the app and the test shortcut deploys to the Chalk emulator
  6. suppressTaskName is necessary if the task name should not be used as an argument for the command. In the above case, build is fine, as that’s the argument to build, but the others have names that don’t correspond with the argument that needs to be used

Now that that’s set up, you can simply use the Command+Shift+B keyboard shortcut to build the app and if there are no build errors, use the Command+Shift+T keyboard shortcut to run the app on the Chalk emulator. If you want to deploy to your physical pebble, simply follow the Pebble Developer Connection setup steps, add a task and deploy.

I hope that this post helps you set up the Pebble development environment on OS X with Visual Studio Code and helps make you more productive when developing for Pebble. Let me know in the comments what you think or if you have additional tips!

Pin It

Leave a Reply

Your email address will not be published. Required fields are marked *