javascript - Pebble AppSync 元组仅使用初始值

Question

我使用的是 Pebble 天气示例程序，除了两个更改外未修改:我添加了一些用于调试的 app_log 调用，并且我使用配置屏幕而不是应用程序来发送数据。问题是，app_log 调用显示实际上没有变量从配置中更新。

这是主应用 weather.c:

#include "pebble.h"

static Window *window;

static TextLayer *temperature_layer;
static char temperature[16];

static BitmapLayer *icon_layer;
static GBitmap *icon_bitmap = NULL;

static AppSync sync;
static uint8_t sync_buffer[32];

enum WeatherKey {
  WEATHER_ICON_KEY = 0x0,         // TUPLE_INT
  WEATHER_TEMPERATURE_KEY = 0x1,  // TUPLE_CSTRING
};

static uint32_t WEATHER_ICONS[] = {
  RESOURCE_ID_IMAGE_SUN,
  RESOURCE_ID_IMAGE_CLOUD,
  RESOURCE_ID_IMAGE_RAIN,
  RESOURCE_ID_IMAGE_SNOW
};

static void sync_error_callback(DictionaryResult dict_error, AppMessageResult app_message_error, void *context) {
  APP_LOG(APP_LOG_LEVEL_DEBUG, "App Message Sync Error: %d", app_message_error);
}

static void sync_tuple_changed_callback(const uint32_t key, const Tuple* new_tuple, const Tuple* old_tuple, void* context) {
  switch (key) {
    case WEATHER_ICON_KEY:
      if (icon_bitmap) {
        gbitmap_destroy(icon_bitmap);
      }
    app_log(APP_LOG_LEVEL_DEBUG, "icon", new_tuple->value->uint8, "precedes");
      icon_bitmap = gbitmap_create_with_resource(WEATHER_ICONS[new_tuple->value->uint8]);
      bitmap_layer_set_bitmap(icon_layer, icon_bitmap);
      break;

    case WEATHER_TEMPERATURE_KEY:
      // App Sync keeps new_tuple in sync_buffer, so we may use it directly
    app_log(APP_LOG_LEVEL_DEBUG, "temperature", 0, new_tuple->value->cstring);
      text_layer_set_text(temperature_layer, new_tuple->value->cstring);
      break;
  }
}

static void window_load(Window *window) {
  Layer *window_layer = window_get_root_layer(window);

  icon_layer = bitmap_layer_create(GRect(32, 10, 80, 80));
  layer_add_child(window_layer, bitmap_layer_get_layer(icon_layer));

  temperature_layer = text_layer_create(GRect(0, 100, 144, 68));
  text_layer_set_text_color(temperature_layer, GColorWhite);
  text_layer_set_background_color(temperature_layer, GColorClear);
  text_layer_set_font(temperature_layer, fonts_get_system_font(FONT_KEY_GOTHIC_28_BOLD));
  text_layer_set_text_alignment(temperature_layer, GTextAlignmentCenter);
  text_layer_set_text(temperature_layer, temperature);

  Tuplet initial_values[] = {
    TupletInteger(WEATHER_ICON_KEY, (uint8_t) 1),
    TupletCString(WEATHER_TEMPERATURE_KEY, "1234\u00B0C"),
  };
  app_sync_init(&sync, sync_buffer, sizeof(sync_buffer), initial_values, ARRAY_LENGTH(initial_values),
      sync_tuple_changed_callback, sync_error_callback, NULL);

  layer_add_child(window_layer, text_layer_get_layer(temperature_layer));
}

static void window_unload(Window *window) {
  app_sync_deinit(&sync);

  if (icon_bitmap) {
    gbitmap_destroy(icon_bitmap);
  }

  text_layer_destroy(temperature_layer);
  bitmap_layer_destroy(icon_layer);
}

static void init() {
  window = window_create();
  window_set_background_color(window, GColorBlack);
  window_set_fullscreen(window, true);
  window_set_window_handlers(window, (WindowHandlers) {
    .load = window_load,
    .unload = window_unload
  });

  const int inbound_size = 64;
  const int outbound_size = 16;
  app_message_open(inbound_size, outbound_size);

  const bool animated = true;
  window_stack_push(window, animated);
}

static void deinit() {
  window_destroy(window);
}

int main(void) {
  init();
  app_event_loop();
  deinit();
}

(同样，除了 app_log 调用外，它没有被修改。)这是 javascript 文件:

var initialized = false;

Pebble.addEventListener("ready", function() {
  console.log("ready called!");
  initialized = true;
});

Pebble.addEventListener("showConfiguration", function() {
  console.log("showing configuration");
  Pebble.openURL('https://dl.dropboxusercontent.com/u/10948026/pebble/weather.html');
});

Pebble.addEventListener("webviewclosed", function(e) {
  console.log("configuration closed");
  // webview closed
  var options = JSON.parse(decodeURIComponent(e.response));
  console.log("Options = " + JSON.stringify(options));
  Pebble.sendAppMessage(options);
});

这是配置的 html 文件:(我知道它的值与温度或图标编号不对应，但据我所知它应该仍然有效。)

<!DOCTYPE html>
<html>
  <head>
    <title>Configurable</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  </head>
  <body>
    <div data-role="page" id="main">
      <div data-role="header" class="jqm-header">
        <h1>Earth Daylight Time settings</h1>
      </div>

      <div data-role="content">

        <div data-role="fieldcontain">
          <label for="day-date">Display icon:</label>
          <select name="day-date" id="day-date">
            <option value="3">On</option>
            <option value="2">On</option>
            <option value="1">On</option>
            <option value="0">Off</option>
          </select>
        </div>

        <div data-role="fieldcontain">
          <label for="gmt-offset">Please select a temp:</label>
            <select name="gmt-offset" id="gmt-offset">
                  <option value="-12">(GMT -12:00) Eniwetok, Kwajalein</option>
                  <option value="-11">(GMT -11:00) Midway Island, Samoa</option>
                  <option value="-10">(GMT -10:00) Hawaii</option>
                  <option value="-9">(GMT -9:00) Alaska</option>
                  <option value="-8">(GMT -8:00) Pacific Time (US &amp; Canada)</option>
                  <option value="-7">(GMT -7:00) Mountain Time (US &amp; Canada)</option>
                  <option value="-6">(GMT -6:00) Central Time (US &amp; Canada), Mexico City</option>
                  <option value="-5">(GMT -5:00) Eastern Time (US &amp; Canada), Bogota, Lima</option>
                  <option value="-4">(GMT -4:00) Atlantic Time (Canada), Caracas, La Paz</option>
                  <option value="-3">(GMT -3:00) Brazil, Buenos Aires, Georgetown</option>
                  <option value="-2">(GMT -2:00) Mid-Atlantic</option>
                  <option value="-1">(GMT -1:00 hour) Azores, Cape Verde Islands</option>
                  <option value="0">(GMT) Western Europe Time, London, Lisbon, Casablanca</option>
                  <option value="1">(GMT +1:00 hour) Brussels, Copenhagen, Madrid, Paris</option>
                  <option value="2">(GMT +2:00) Kaliningrad, South Africa</option>
                  <option value="3">(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg</option>
                  <option value="4">(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi</option>
                  <option value="5">(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent</option>
                  <option value="6">(GMT +6:00) Almaty, Dhaka, Colombo</option>
                  <option value="7">(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
                  <option value="8">(GMT +8:00) Beijing, Perth, Singapore, Hong Kong</option>
                  <option value="9">(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk</option>
                  <option value="10">(GMT +10:00) Eastern Australia, Guam, Vladivostok</option>
                  <option value="11">(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
                  <option value="12">(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
            </select>
          <legend>(Note: This will not change the time on the watch, just the accuracy of the Earth display.)</legend>
          </div>
        </div>

        <div class="ui-body ui-body-b">
          <fieldset class="ui-grid-a">
              <div class="ui-block-a"><button type="submit" data-theme="d" id="b-cancel">Cancel</button></div>
              <div class="ui-block-b"><button type="submit" data-theme="a" id="b-submit">Submit</button></div>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
    <script>
      function saveOptions() {
        var options = {
          'day-date': $("#day-date").val(),
          'gmt-offset': $("#gmt-offset").val(),
        }
        return options;
      }

      $().ready(function() {
        $("#b-cancel").click(function() {
          console.log("Cancel");
          document.location = "pebblejs://close";
        });

        $("#b-submit").click(function() {
          console.log("Submit");

          var location = "pebblejs://close#" + encodeURIComponent(JSON.stringify(saveOptions()));
          console.log("Warping to: " + location);
          console.log(location);
          document.location = location;
        });

      });
    </script>
  </body>
</html>

最后，示例日志:

[PHONE] pebble-app.js:?: weathertest__1/pebble-js-app.js:9 showing configuration
[PHONE] pebble-app.js:?: {'runhost client uuid' = bec5b2fa-eb94-407b-8296-08e0b5c5fa22}:{'webapp uuid' = bec5b2fa-eb94-407b-8296-08e0b5c5fa22}: ++_JS_LIFECYCLE_++:KILLED
[PHONE] pebble-app.js:?: {'runhost client uuid' = bec5b2fa-eb94-407b-8296-08e0b5c5fa22}:{'webapp uuid' = bec5b2fa-eb94-407b-8296-08e0b5c5fa22}: ++_JS_LIFECYCLE_++:KILLED
[PHONE] pebble-app.js:?: weathertest__1/pebble-js-app.js:14 configuration closed
[PHONE] pebble-app.js:?: weathertest__1/pebble-js-app.js:17 Options = {"day-date":"3","gmt-offset":"-12"}
[DEBUG] icon:1: precedes
[DEBUG] temperature:0: 1234°C
[PHONE] pebble-app.js:?: weathertest__1/pebble-js-app.js:14 configuration closed
[PHONE] pebble-app.js:?: {'runhost client uuid' = 00000000-0000-0000-0000-000000000000}:{'webapp uuid' = 362b81ee-f906-429a-807b-75a54367b715}: ++_JS_LIFECYCLE_++:PREVIOUSLY-RUNNING
[PHONE] pebble-app.js:?: {'runhost client uuid' = 00000000-0000-0000-0000-000000000000}:{'webapp uuid' = 362b81ee-f906-429a-807b-75a54367b715}: ++_JS_LIFECYCLE_++:PREVIOUSLY-RUNNING

Answer 1

已解决，感谢 Pebble forums. 上的 pedrolane我忘记在 appinfo.json 中添加 AppKeys:

“appKeys”:{ “日期”:0， “格林威治标准时间偏移量”:1 },

(注意:如果您使用的是 CloudPebble，请在“设置”页面上像这样定义它们:

{ “日期”:0， “格林威治标准时间偏移量”:1 }

即没有"appKeys":，否则设置页面可能无法保存)