Interactive C-API Examples

This example page uses Rocky.js and Tangle.js to build interactive code samples of today's C-API for Pebble. This example uses Rocky.js to ensure pixel-perfect results, and is inspired by Bret Victor's interactive essays.

Scroll down and explore Pebble's classic C API directly in your browser by clicking and dragging the highlighted elements in the code snippets!

graphics_fill_radial

graphics_fill_radial fills a circle clockwise between angle_start and angle_end, where 0° is the top of the circle. If the difference between angle_start and angle_end is greater than 360°, a full circle will be drawn and filled. If angle_start is greater than angle_end nothing will be drawn.


const GRect rect = GRect(, , , );

// Set to true to draw the bounding box
if (falsetrue) {
  graphics_set_stroke_color(ctx, GColorGray);
  graphics_draw_rect(ctx, rect);
}

graphics_fill_radial(
  ctx, rect,
  GOvalScaleModeFitCircleGOvalScaleModeFillCircle,
  , /* inset */
  DEG_TO_TRIGANGLE(), /* angle_start */
  DEG_TO_TRIGANGLE()  /* angle_end */
);

graphics_draw_arc

graphics_draw_arc draws a line arc clockwise between angle_start and angle_end, where 0° is the top of the circle. If the difference between angle_start and angle_end is greater than 360°, a full circle will be drawn. 

const GRect rect = GRect(, , , );

// Set to true to draw the bounding box
if (falsetrue) {
  graphics_set_stroke_color(ctx, GColorGray);
  graphics_draw_rect(ctx, rect);
  graphics_set_stroke_color(ctx, GColorBlack);
}

graphics_context_set_stroke_width(ctx, );
graphics_draw_arc(
  ctx, rect,
  GOvalScaleModeFitCircleGOvalScaleModeFillCircle,
  DEG_TO_TRIGANGLE(), /* angle_start */
  DEG_TO_TRIGANGLE()  /* angle_end */
);
Fork me on GitHub