Pebble prototyping

by Victor

HTML

<script src="http://labs.jayps.fr/pebble/proto_js/pebble_os.js"></script>
<body>
    <canvas id="canvas" width="144" height="168" style="background: #000000;"></canvas>
</body>

JavaScript

/* Get the canvas so we can draw to it */
var ctx = document.getElementById('canvas').getContext('2d');
//screen height
const SCREEN_W = 144;
const SCREEN_H = 168;
const HOURS_HAND_LENGTH   = 35;
const MINUTES_HAND_LENGTH = (SCREEN_W/2 - 20);
const SECONDES_HAND_LENGTH = (SCREEN_W/2 - 12);

function display_layer_update_callback(/*pebble Layer *me, GContext* ctx*/) {
    /* clean screen */
    graphics_context_set_fill_color(ctx, GColorBlack);
    graphics_fill_rect(ctx, GRect(0, 0, SCREEN_W, SCREEN_H), 0, 0);

    get_time(/*pebble &t */);

    graphics_context_set_stroke_color(ctx, GColorWhite);
    graphics_context_set_fill_color(ctx, GColorWhite);

    /*pebble GPoint*/ center  = GPoint(SCREEN_W / 2, SCREEN_H / 2);
    graphics_fill_circle(ctx, center, 3);
    graphics_draw_circle(ctx, center, SECONDES_HAND_LENGTH + 5);

    /*pebble int32_t */ seconde_angle = t.tm_sec * (0xffff/60);
    /*pebble GPoint */ secondes = GPoint(
        center.x + SECONDES_HAND_LENGTH * sin_lookup(seconde_angle)/0xffff,
        center.y - SECONDES_HAND_LENGTH * cos_lookup(seconde_angle)/0xffff
    );
    graphics_draw_line(ctx, center, secondes);

    /*pebble int32_t */ minute_angle = t.tm_min * (0xffff/60);
    /*pebble GPoint */ minutes = GPoint(
        center.x + MINUTES_HAND_LENGTH * sin_lookup(minute_angle)/0xffff,
        center.y - MINUTES_HAND_LENGTH * cos_lookup(minute_angle)/0xffff
    );
    graphics_draw_line(ctx, center, minutes);

    /*pebble int32_t */hour_angle = (t.tm_hour * 60 + t.tm_min) * 0xffff / 60 / 12;
    /*pebble GPoint */ hours = GPoint(
        center.x + HOURS_HAND_LENGTH * sin_lookup(hour_angle)/0xffff,
        center.y - HOURS_HAND_LENGTH * cos_lookup(hour_angle)/0xffff
    );
    graphics_draw_line(ctx, center, hours);
}

function handle_minute_tick() {
    display_layer_update_callback();
}

/* Let's make sure this gets triggered straight away */
handle_minute_tick();

/* We will call the minute function every second to prevent waiting...