Category Archives: 13-pebbleclock


27 Jan 2015

For my pebble watch app I wanted to somehow link linguistic pacing in poetry with the pace of time. So I took phrases pertaining to time from poems and quotes and arranged them on the screen in order of months, days and hours (top to bottom). Each quantity is linked to a phrase that changes when that time unit changes. In arranging these I hoped to create multidimensional/random poems.

Screen Shot 2015-01-27 at 8.15.08 AM


static Window *s_main_window;
static TextLayer *s_mon_layer;
static TextLayer *s_day_layer;
static TextLayer *s_hour_layer;

// write a function that gets the words to display based on the hour, minute and second, and sets them

static void update_time() {
  time_t temp = time(NULL);
  struct tm *tick_time = localtime(&temp);
  //array for months  a
  const char *a[12];
  a[4]= "Time!"; a[1]="on whose arbitrary wing"; a[2]= "the varying hours must flag or fly";
  a[3]="whose tardy winter"; a[0]="o spring"; a[5]= "of all"; a[6]="the marvelous";
  a[7]="achievements of modern science"; a[8]="the electric telegraph"; a[9]="is transcendentally";
  a[10]="the whole earth will be";  a[11] = "palpitating with human thoughts and emotions";
  //arrays for days
  const char *day[7];
  day[2]= "The earth is not an echo-";
  day[1]= "Is to-day nothing?";
  day[0]= "Is the beginningless past nothing?";
  day[3]= "If the future is nothing";
  day[4]= "They are just as surely nothing";
  day[5]= "The sky coninues beautiful";
  day[6]= "You are not thrown to the winds--";  
  //hours  b
  const char *b[24];
  b[0]="tomorrow"; b[1]="the hearts"; b[2]="of the civilized";
  b[3]="world will"; b[4]="tomorrow the hearts of the world beat in a single pulse"; b[5]= "and from that time";
  b[6]="forevermore"; b[7]="the continental divisions"; b[8]="of the earth"; 
  b[9]="will, in a measure"; b[10]="lose conditions"; 
  b[11]= "of time and distance"; b[12]="which now mark"; 
  b[13]="their relations"; 
  b[14] = "It is impossible";
  b[15] = "that old";
  b[16] = "prejudices and hostilities";
  b[17] = "should longer exist";
  b[18] = "while such an instrument";
  b[19] = "has been created";
  b[20] = "for an exchange";
  b[21] = "of thought";
  b[22] = "between all nations";
  b[23] = "of the earth";
  text_layer_set_text(s_mon_layer, a[tick_time->tm_mon]);
  text_layer_set_text(s_day_layer, day[tick_time->tm_wday]);
  text_layer_set_text(s_hour_layer, b[tick_time->tm_hour]);


static void tick_handler(struct tm *tick_time, TimeUnits units_changed) {

/* manage sub-elements of window */
static void main_window_load(Window *window) {
  // Create mon TextLayer
  s_mon_layer = text_layer_create(GRect(0, 20, 144, 50));
  text_layer_set_background_color(s_mon_layer, GColorBlack);
  text_layer_set_text_color(s_mon_layer, GColorClear);

  // Create day TextLayer
  s_day_layer = text_layer_create(GRect(0, 70, 144, 100));
  text_layer_set_background_color(s_day_layer, GColorClear);
  text_layer_set_text_color(s_day_layer, GColorBlack);
    // Create hour TextLayer
  s_hour_layer = text_layer_create(GRect(0, 120, 144, 140));
  text_layer_set_background_color(s_hour_layer, GColorBlack);
  text_layer_set_text_color(s_hour_layer, GColorClear);
  //text_layer_set_text(s_minute_layer, "til");
  // Improve the layout to be more like a watchface
  text_layer_set_font(s_mon_layer, fonts_get_system_font(FONT_KEY_BITHAM_42_BOLD));
  //text_layer_set_text_alignment(s_time_layer, GTextAlignmentCenter);*/

  // Add it as a child layer to the Window's root layer
  layer_add_child(window_get_root_layer(window), text_layer_get_layer(s_mon_layer));
  layer_add_child(window_get_root_layer(window), text_layer_get_layer(s_day_layer));
  layer_add_child(window_get_root_layer(window), text_layer_get_layer(s_hour_layer));

static void main_window_unload(Window *window) {
    // Destroy TextLayer

/* manage overall app/watchface */

static void init() {

  // Create main Window element and assign to pointer
  s_main_window = window_create();

  // Set handlers to manage the elements inside the Window
  window_set_window_handlers(s_main_window, (WindowHandlers) {
    .load = main_window_load,
    .unload = main_window_unload

  // Show the Window on the watch, with animated=true
  window_stack_push(s_main_window, true);
  // Make sure the time is displayed from the start
  // Register with TickTimerService
  tick_timer_service_subscribe(MINUTE_UNIT, tick_handler);

static void deinit() {
  // Destroy Window


int main(void) {


Yeliz and I happened to come up with the same idea, and we figured it was challenging enough for us to work on it together.

The clock we designed is a digital sundial — it works by getting your current latitude and longitude and calculating the plot points for an accurate sundial specific to your location. The sundial updates twice daily to adjust for your current location. With this site-specific sun dial the clock can also understand your orientation relative to north. That means that you can actually know your orientation relative to the sun, and you have to align your watch to the appropriate sun dial position in order to get the shadow to point to the correct time, just like a real sun dial. If the clock is not oriented properly, the sun orientation will still cast a shadow.

This clock proved very challenging and fun to work on. Current functionalities completed are the sun dial calculator and its appropriate clock face setup. The north is also implemented on to the face so that the user can know exactly what to orient the clock to. What is left to be done is the dynamic shadow responding to the sun.

Code here:


27 Jan 2015

I chose to represent the time with a set of twelve circles, configured in a 4 x 3, to represent the hour, and a linear bar graph to represent the minutes. At a glance, the minutes can be quickly read to a 15-minute-mark since the minute bar spans the 4 circles, and I felt like that, visually, this was a way to present time information that could be translated easily. I presented this watch face to a few different people, who were able to understand what was being represented.

It took me awhile to understand how to draw shapes and graphics in this program; studying some of the examples helped me to build off them. I wish I could have incorporated the accelerometer to incorporate some motion or playfulness, but did not have time.

Here’s a time lapse of the watch face over 15 minutes:

And some stills from different parts of the day (12:45, 2:41, 10:17) :


#include "pebble.h"

Window *window;
Layer *display_layer;

// Defines for the 4 x 3 table of circles representing hour
#define HOUR_CIRCLE_RADIUS_PIXELS         16


#define HOUR_CELLS_PER_ROW     4

#define HOURS_ONE_FOUR_ROW    0
#define HOURS_NUM_COLS        4
#define HOURS_NUM_ROWS        4

// Defines for the bar representing minute
#define MAX_MINUTE_BAR_VAL 144  
void draw_and_fill_circle(GContext* ctx, GPoint center, bool fillcircle) {
  graphics_context_set_fill_color(ctx, GColorWhite);

  graphics_fill_circle(ctx, center, HOUR_CIRCLE_RADIUS_PIXELS);

  if (!fillcircle) {
    graphics_context_set_fill_color(ctx, GColorBlack);
    graphics_fill_circle(ctx, center, HOUR_CIRCLE_RADIUS_PIXELS - HOUR_CIRCLE_EDGE_STROKE_PIXELS);


void draw_minute_bar(Layer *me, GContext* ctx, unsigned short minute_value) {
    //draw rectangle to represent 60 minutes
    GRect minute_bar_rect;
    minute_bar_rect.origin = GPoint(0,130);
    minute_bar_rect.size = GSize(144,16);
    graphics_context_set_stroke_color(ctx, GColorWhite);
    graphics_draw_rect(ctx, rect1);
    //draw a filled rectangle to represent the minute
    unsigned short minute_fill = (minute_value * MAX_MINUTE_BAR_VAL) / 60;
    GRect minute_fill_rect;
    minute_fill_rect.origin = GPoint(0,130);
    minute_fill_rect.size = GSize(minute_fill,16);
    graphics_context_set_fill_color(ctx, GColorWhite);
    graphics_fill_rect(ctx, rect3, 0, GCornerNone);

GPoint get_circle_center(unsigned short x, unsigned short y) {

void draw_table_for_hour(GContext* ctx, unsigned short hour_value, unsigned short max_columns, unsigned short row) {
  for (int cell_column_index = 0; cell_column_index< max_columns; cell_column_index++) {
    draw_and_fill_circle(ctx,get_circle_center(cell_column_index, row), ((hour_value - (HOURS_NUM_ROWS * row) - cell_column_index) > 0));

unsigned short get_display_hour(unsigned short hour) {
  unsigned short display_hour = hour % 12;

  // Convert "0" hour to "12"
  return display_hour ? display_hour : 12;


void display_layer_update_callback(Layer *me, GContext* ctx) {

  time_t now = time(NULL);
  struct tm *t = localtime(&now);

  unsigned short display_hour = get_display_hour(t->tm_hour);

  draw_table_for_hour(ctx, display_hour, HOURS_NUM_COLS, HOURS_ONE_FOUR_ROW);
  draw_table_for_hour(ctx, display_hour, HOURS_NUM_COLS, HOURS_FIVE_EIGHT_ROW);
  draw_table_for_hour(ctx, display_hour, HOURS_NUM_COLS, HOURS_NINE_TWELVE_ROW);
  draw_minute_bar(me, ctx, t->tm_min);

static void tick_handler(struct tm *tick_time, TimeUnits units_changed) {

static void do_init(void) {
  window = window_create();
  window_stack_push(window, true);

  window_set_background_color(window, GColorBlack);

  Layer *root_layer = window_get_root_layer(window);
  GRect frame = layer_get_frame(root_layer);

  // Init the layer for the display
  display_layer = layer_create(frame);
  layer_set_update_proc(display_layer, &display_layer_update_callback);
  layer_add_child(root_layer, display_layer);

  tick_timer_service_subscribe(MINUTE_UNIT, tick_handler);

static void do_deinit(void) {

int main(void) {


27 Jan 2015

Hours LastSecond

These are the initial ideas of my watch face.

My goal is to present time, with motion sensitive squares falling off. Last Tuesday’s workshop worked well for me, cause that workshop just told me how to get the motion sensor done. Although this part might be technically harder than the creative idea part, the latter part really took me a lot of time to think of.

Finally, this is my work.

屏幕快照 2015-01-27 上午4.19.07

I think I have done a good work which is exactly I anticipated.

Epic Jefferson

27 Jan 2015



This app indicates my anxiety and desperation level as they rise, from the moment I leave the comfort of my partner and apartment until I return. The pattern of work, or any other daily event, likely has a direct relation to the level of anxiety, so that can be a fairly accurate gauge for time. We all have things we do with regularity to relieve stress, so whatever that is, it can be plugged into the app and the countdown to your next fix can begin.