class.exe

PebbleにTwitterのアイコンを表示してみました。

以下を参考にしました。

• Pebbleのアプリを自分で作っちゃおう：Pebble実機レポート後編
• JavaScript で Pebble アプリを開発できる Simply.js をオンライン IDE の CloudPebble 上で試してみた - 凹みTips

CloudPeppleにあるサンプルを組み合わせて、Twitterのアイコンを出してみました。まずはテンプレートのExamples->Draw Bitmapを選びます。

あとは適当に画像の位置を調整して、同じくテンプレートのSDK demos->HelloWorldも参考にしてテキスト表示させたコードが以下になります。

#include "pebble.h"

static GBitmap *image;
static TextLayer *text_layer;

void text_init(Window *window) {
    text_layer = text_layer_create( GRect(0, 128, 144, 32) );

    text_layer_set_text(text_layer, "@netaka");
    text_layer_set_font(text_layer, fonts_get_system_font(FONT_KEY_GOTHIC_28_BOLD));
    text_layer_set_text_alignment(text_layer, GTextAlignmentCenter);

    layer_add_child(window_get_root_layer(window), text_layer_get_layer(text_layer));
}

static void layer_update_callback(Layer *me, GContext* ctx) {
    GRect bounds = image->bounds;
    graphics_draw_bitmap_in_rect(ctx, image, (GRect) { .origin = { 8, 0 }, .size = bounds.size });
}

int main(void) {
    Window *window = window_create();
    window_stack_push(window, true);

    Layer *window_layer = window_get_root_layer(window);
    layer_set_update_proc(window_layer, layer_update_callback);

    image = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_TWITTER);

    text_init(window);

    app_event_loop();

    text_layer_destroy(text_layer);
    gbitmap_destroy(image);
    window_destroy(window);
}

そして表示したい画像をメニューにあるRESOURCESからアップロードしましょう。最後にビルドしてPebbleにインストールすると写真のようになりました。

はじめ、Watch Faceにしたかったのに、どうしてもWatch Appでビルドされてしまうのでどうしてなのかと小一時間悩みましたが、メニューにあるSETTINGSから切り替えられました。

ほんとはTwitterのAPIにアクセスしてアイコン取り寄せるとかそこまでしたいですね。それにしても簡単に画像が表示できるので、LINEのQRコードとかを表示したりすると友達追加の時に便利そうです。