Pebble JavaScript example

helloworld.c

/* Native C code for sending an AppMessage when the Select button is pressed. */
/* The response is shown on the watch screen. */
 
#include <pebble.h>
 
static Window *window;
static TextLayer *text_layer, *text_layer2;
static const uint32_t LOCATION_KEY = 123;
static const uint32_t WEATHER_KEY = 124;
 
static void received_callback(DictionaryIterator *iterator, void *context) {
  Tuple *msg = dict_find(iterator, WEATHER_KEY);
  if (msg && msg->type == TUPLE_CSTRING) {
    APP_LOG(APP_LOG_LEVEL_DEBUG, "got appmessage: %s", msg->value->cstring);
    text_layer_set_text(text_layer, "Current weather:");
    text_layer_set_text(text_layer2, msg->value->cstring);
  }
}
 
static void select_click_handler(ClickRecognizerRef recognizer, void *context) {
  DictionaryIterator *iterator = NULL;
  if (app_message_outbox_begin(&iterator) == APP_MSG_OK && iterator != NULL) {
    dict_write_cstring(iterator, LOCATION_KEY, "Helsinki,fi");
    app_message_outbox_send();
    text_layer_set_text(text_layer, "Requesting weather...");
    text_layer_set_text(text_layer2, "");
  }
}
 
static void click_config_provider(void *context) {
  window_single_click_subscribe(BUTTON_ID_SELECT, select_click_handler);
}
 
static void window_load(Window *window) {
  Layer *window_layer = window_get_root_layer(window);
  GRect bounds = layer_get_bounds(window_layer);
  text_layer = text_layer_create((GRect) { .origin = { 0, 62 }, .size = { bounds.size.w, 20 } });
  text_layer_set_text(text_layer, "Press SELECT");
  text_layer_set_text_alignment(text_layer, GTextAlignmentCenter);
  layer_add_child(window_layer, text_layer_get_layer(text_layer));
  text_layer2 = text_layer_create((GRect) { .origin = { 0, 82 }, .size = { bounds.size.w, 20 } });
  text_layer_set_text(text_layer2, "to update weather");
  text_layer_set_text_alignment(text_layer2, GTextAlignmentCenter);
  layer_add_child(window_layer, text_layer_get_layer(text_layer2));
}
 
static void window_unload(Window *window) {
  text_layer_destroy(text_layer);
  text_layer_destroy(text_layer2);
}
 
static void init(void) {
  window = window_create();
  window_set_click_config_provider(window, click_config_provider);
  window_set_window_handlers(window, (WindowHandlers) {
    .load = window_load,
    .unload = window_unload,
  });
  const bool animated = true;
  window_stack_push(window, animated);
  app_message_open(app_message_inbox_size_maximum(), app_message_outbox_size_maximum());
  app_message_register_inbox_received(received_callback);
}
 
static void deinit(void) {
  window_destroy(window);
}
 
int main(void) {
  init();
  app_event_loop();
  deinit();
}

pebble-js-app.js

// JavaScript code for receiving AppMessages and responding with the weather.

Pebble.addEventListener('appmessage', function(e) {
  var location = e.payload[123];
  console.log('Requested weather for:', location);
  var req = new XMLHttpRequest();
  req.onload = function () {
    var response = JSON.parse(this.responseText);
    Pebble.sendAppMessage({124:response.weather[0].main});
  };
  var url = 'http://api.openweathermap.org/data/2.5/weather?q=' + location;
  req.open('GET', url, true);
  req.send();
});