Rocky.JS is the first step in Pebble journey to run JavaScript directly on the watches (unlike Pebble.JS which runs on your phone). Previously I described how to convert a simple watchface from C to Rocky.js. But that was a static watchface with unchangeable settings.
Here I will show how to create a configurable watchface in Rocky.js similarly how classic SDK faces can be configured. You will be able to reuse your existing config page – and if it was set to work with Pebble emulator as well as real watch – you will reuse it without any changes at all.
First let’s review how classic Pebble SDK calls config page. In PKJS (JavaScript) portion of Pebble code usually there’s a piece like this:
Pebble.addEventListener("showConfiguration",
function(e) {
Pebble.openURL("http://my.cool.server/pebble/my_cool_config.html");
}
);
If user requests config of face/app – this event fires and opens page with configurable options from specified URL. After user modifies settings usually “Save” button is clicked on that page and code similar to this executes:
$('#xbtnSave').click(function () {
var location = (decodeURIComponent(getURLVariable('return_to')) ||
"pebblejs://close#") +
encodeURIComponent(JSON.stringify(settings));
document.location = location;
})
Here, first we determine which location to redirect config page to. If parameter "return_to
” is passed in query string (here custom function getURLVariable()
is used to extract individual parameters – look it up), so if this parameter is passed – it means config page is called form the emulator and we use it for redirection. Otherwise we use standard "pebblejs://close#"
URL to save settings into real watch. We also take settings
object which has our collective options combined, convert it to string and add to the URL as a parameter. Page then is redirected to resulting URL and Pebble emulator or real watch takes care of processing parameters.
So, how can we (re)use it in a Rocky.js watchface? Continue reading →