rocky.js - Pebble Watchface in JavaScript

Create diagital watchface with rocky.js

Pebble is a familiar name in tech world. They were the one's who made the world turn on them when it comes to smart watches. When wearable technology was a dream, their design and approach made them great innovators. They followed it up with Pebble steel which did a wonderful business. Their OS agnostic approach has helped them gain love from both iOS & Android folks. Pebble has made a huge market for itself through its constant innovation and focus. With Pebble2, they have raised the bar a little more. I am not going to review about Pebble2 here. Our interest here is their new JS framework - rocky.js.

Pebble applications have been built with Pebble "C" and to some extent with Pebble JS. With Pebble 4 SDK, rocky.js will be one of the preferred way for pebble apps. rocky.js can be used to develop both watchface's as well as watch apps. Its support for canvas, makes it easy to render complex graphics fast too.

Although, I'd not rank rocky.js to be production ready yet, I'd also not shy away from saying that is is not far off from production grade either. Give it a month, by the time Pebble Time2 comes out to market, I'd say rocky.js may be the face of pebble application development.

What do I need to get started?
Head to developers.pebble.com, register your account and browse into cloudpebble.net, start cranking your code

Let's start by creating a new project, name it "HelloWorld"

You will be taken to cloud studio, from the left navigator, tap/select index.js

We will build our first simple display current time watch face, copy paste the following lines of code

var rocky = require('rocky');



var formatAMPM = function(date) {

  var hours = date.getHours();

  var minutes = date.getMinutes();

  var ampm = hours >= 12 ? 'pm' : 'am';

  hours = hours % 12;

  hours = hours ? hours : 12; // the hour '0' should be '12'

  minutes = minutes < 10 ? '0'+minutes : minutes;

  var strTime = hours + ':' + minutes + ' ' + ampm;

  return strTime;

}



var display_time = function(ctx) {

  // Determine the width and height of the display

  var w = ctx.canvas.unobstructedWidth;

  var h = ctx.canvas.unobstructedHeight;

  var d = new Date();



  // Set the text color

  ctx.fillStyle = 'white';



  // Center align the text

  ctx.textAlign = 'center';

  ctx.font = '30px bolder Bitham';



  // Display the time, in the middle of the screen

  ctx.fillText(formatAMPM(d), w/2, 50, w);



}





rocky.on('draw', function(event) {

  // Get the CanvasRenderingContext2D object

  var ctx = event.context;



  // Clear the screen

  ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);




  display_time(ctx);




});



rocky.on('minutechange', function(event) {

  // Request the screen to be redrawn on next pass

  rocky.requestDraw();

});

Most of the the code is self-explanatory. We start by registering for event-notifications from rocky. One for 'minutechange' (you can try 'secondchange', 'hourchange', etc) and other for redraw. Every minute, code invokes redraw, where-in we display current time through a custom format function.

You are restricted on size and type of fonts, pretty much the same as in "C". However, you can have custom fonts for your applications.

You are all set. Tap on "run", wait and watch your code execute