This document is split into two major sections:
Rocky.js exposes a number of helper functions outside Pebble's C-Style API to help you work with Rocky.js in a browser based environment.
The bindCanvas method creates an instance of Rocky.js, binds that instance to the supplied canvas element, then returns the instance to be used later in code.
// Create an instance of Rocky.js and bind it to a canvas with id="pebble"
var rocky = Rocky.bindCanvas(document.getElementById("pebble"));
Rocky exposes a subset of Pebble's C-Style that can be invoked with rocky.c_api_function_name(...). The export_global_c_symbols adds all of the available methods from the C-Style API to the global namespace, removing the need to preface each API call with rocky..
The following two examples demonstrate how rocky.export_global_c_symbols() affects a simple implementation:
// Calling a C-Style API without rocky.export_global_c_symbols
var rocky = Rocky.bindCanvas(document.getElementById("pebble"));
rocky.update_proc = function (ctx, bounds) {
rocky.graphics_context_set_stroke_color(ctx, rocky.GColorRed);
rocky.graphics_context_set_stroke_width(ctx, 10);
rocky.graphics_draw_line(ctx, [50, 0], [100, 50]);
};
// Calling a C-Style API after rocky.export_global_c_symbols
var rocky = Rocky.bindCanvas(document.getElementById("pebble"));
rocky.export_global_c_symbols();
rocky.update_proc = function (ctx, bounds) {
graphics_context_set_stroke_color(ctx, GColorRed);
graphics_context_set_stroke_width(ctx, 10);
graphics_draw_line(ctx, [50, 0], [100, 50]);
};
NOTE 1: This method should only be invoked in isolated playgrounds when there is a single instance of Rocky.
NOTE 2: Adding functions to the global namespace is generally considered an anti-pattern. The export_global_c_symbols may be invoked with an optional parameter (a namespace object) - when invoked in this way, the functions will be bound to the namespace object rather than the window.
The mark_dirty method indicates to the specified instance of Rocky that rocky.update_proc should be invoked.
var rocky = Rocky.bindCanvas(document.getElementById("pebble"));
var value = 0;
rocky.update_proc = function(ctx, bounds) {
graphics_context_set_stroke_color(ctx, GColorRed);
graphics_context_set_stroke_width(ctx, 10);
graphics_draw_line(ctx, [value, 0], [100, value]);
};
// Update value and mark the canvas as dirty 20/sec
setInterval(function() {
value += 1;
rocky.mark_dirty();
}, 1000 / 20);
Instances of Rocky.js include a property, update_proc, that will be invoked each time the instance is marked dirty with rocky.mark_dirty. The update_proc method should be set to a callback function with parameters:
ctx: A JavaScript version of the GContext object.bounds: A JavaScript version of the GRect object indicating the bounds of the virtual display.See rocky.mark_dirty for sample usage.
Rocky.js currently implements a subset of Pebble's C-Style API. This section of the document outlines what methods have been implemented, as well as recommendations for how to manage some of the sections of the API that are not implemented.
| C API | Status | Notes |
|---|---|---|
| Accelerometer Service | Standard JS/HTML5 API | Use Device Motion and Orientation APIs |
| Animation | Standard JS/HTML5 API | Use setInterval |
| AppFocus Service | Planned | |
| AppMessage | Planned | Will use WebWorker semantics |
| AppSync | Not Currently Planned | |
| Battery Service | Standard JS/HTML5 API | Use BatteryStatus API |
| Bitmap | Implemented | |
| BitmapSequence | Implemented | |
| Clicks | Not Currently Planned | |
| Compass Service | Standard JS/HTML5 API | Use Device Motion and Orientation APIs |
| Connection Service | Planned | |
| DataLogging | Not Currently Planned | |
| Date/Time | Standard JS/HTML5 API | Use Date |
| Dictation | Standard JS/HTML5 API | Use Web Speech API |
| DrawCommand | Implemented | |
| Drawing Paths | Implemented | |
| Drawing Primitives | Implemented | Framebuffer APIs will not be part of Rocky.js |
| Drawing Text | Implemented | |
| Fonts | Implemented | |
| Graphics Context | Implemented | |
| Graphics Types | Implemented | |
| Heap | Not Currently Planned | Still investigating memory management |
| Launch Reason | Not Currently Planned | |
| Layer | Not Currently Planned | |
| Logging | Standard JS/HTML5 API | Use console.log |
| Light | Planned | |
| Persistant Storage | Standard JS/HTML5 API | Use localStorage API |
| SmartStraps | Not Currently Planned | |
| TickService | Standard JS/HTML5 API | Use setInterval |
| Timer | Standard JS/HTML5 API | Use setInterval, and setTimeout |
| Vibes | Standard JS/HTML5 API | Use Navigator.vibrate |
| Wakeup | Not Currently Planned | |
| WatchInfo | Planned | |
| Window | Not Currently Planned | |
| WindowStack | Not Currently Planned | Or similar functionality |
| Worker | Not Currently Planned |