Monday, August 5, 2013

Pebble Watchface Tutorial - Arabic Numbers

I just created my first Pebble Watchface. I have had my Pebble since February, but it has taken me a little bit of time to think of a good idea for a Pebble Watchface that only required swapping image assets from an example Watchface. The idea: Big Arabic - Arabic-script numbers substituted for Western-script numbers in the Big Time example Watchface. The whole project took me 30 minutes, and I love my new, custom Watchface. Big Arabic looks like this:


First, I created a new project called 'Big Arabic' in CloudPebble, the dead-simple hosted Pebble App IDE. When I created the new project I chose to use the 'Big Time' template available in CloudPebble:


Second, I looked through the files and file structure pre-populated from my template. This is a really simple Watchface. All of the numbers for the Big Time template are individual PNGs that take up a quarter of the Pebble screen (72x84px.)

Next, I found a large image on the web containing Arabic-script numbers 0-9. I wanted to find the absolute simplest way to cut this image up into individual 1/4-Pebble number images, and found this easy tutorial on Preview in OSX: http://mac.tutsplus.com/tutorials/app-training/preview-os-xs-secret-weapon-image-editor/ 

I used Preview to generate 10 72x84 Arabic number images, then I went back to my CloudPebble project and replaced all of the number image resources with my new Arabic-script images. After this I went out on the web and found an icon-sized image of Arabic script, resized it to be the same size as the example menu icon in my CloudPebble project using Preview and replaced the example image with the new icon.

Last, I opened big_time.c in CloudPebble for the first time and made two changes to the code. First, I changed the display name within PBL_APP_INFO from "Big Time" to "Big Arabic". Second, because the original Big Time Watchface is white numbers on black background, and my Arabic number images are black numbers on white background, I changed  window_set_background_color from GColorBlack to GColorWhite

After saving my changes in CloudPebble, I clicked over to the Compilation tab and ran a build. When the build completed, I got a short URL linking to my new Watchface, Big Arabic that i opened on my phone and loaded on to my Pebble.

Super-easy, fast and with barely any coding, I have a cool new custom Watchface. You can get it here yourself: http://builds.cloudpebble.net/4/2/42cc68d25c4c4a3bbe2ab3053dd05b1c/watchface.pbw

Next up, something more involved - I cannot wait for access to the accelerometer in the SDK.

No comments: