vue watch配置_先进的Pebble Watch配置

vue watch配置

对于那些从小就看过Power Rangers并梦想着拥有让他们感觉像超级英雄的高档手表的人来说，智能手表是梦想成真。 我可能是前面提到的Power Ranger梦想家之一。 结合开发人员的需求使我充满活力，您就有了90年代的孩子，他很快将成为《回到未来》一书中的灰色疯狂科学家，例如Emmett Brown医生。

我最近写了一篇有关用JavaScript开发Pebble Watch的基础知识的文章。 总而言之，我们制作了一个表盘，使用Foursquare API来告诉用户始终他们最近的星巴克在哪里。 这是实际的样子：

我提到过，JavaScript有更多的可能，而我在那篇文章中没有介绍。 这是我的后续文章，将介绍PebbleKit JavaScript框架的其他功能。

在本文中，我将介绍如何扩展上一篇文章中开发的“ Find Me Starbucks”应用程序，以允许用户选择该应用程序为他们找到的位置类型。 不是每个人都像我一样忠实于星巴克！ 我们将添加一个配置屏幕，使他们可以在自己感兴趣的地方键入内容，并在他们每次使用该应用程序时为他们保存该设置。

如果您希望按照本教程进行操作，则需要：

• 安装并正在运行Pebble应用程序的Android手机或iPhone。
• 一块卵石手表 。
• FourSquare API的 API凭据。
• 可用的Wi-Fi网络可将您的应用转移到移动设备和Pebble手表。
• JavaScript的基础知识。
• 愿意使用命令行并尝试使用C代码。
• 最好阅读上一教程，或者了解使用PebbleKit JavaScript框架进行Pebble应用程序开发的基础知识。
• 一个在线虚拟主机，用于在线存储单个文件，这将是您的配置页面。

本教程的完整代码

您可以在GitHub上查看“查找我的星巴克”的代码，也可以通读上一教程 ，而无需将上一教程的所有代码都投入本文。 我们更新后的应用程序的代码也可以在GitHub的“ Find me Anything”上找到 ，因此，如果您想下载代码并继续学习，请随时进行！

Pebble Apps领域中配置的工作原理

在SDK 2.0版中引入PebbleKit JavaScript Framework之前，Pebble应用程序需要在用户手机上安装一个配套应用程序，以接受任何自定义设置。 如果用户希望气象应用向他们显示摄氏温度而不是华氏温度，那么他们需要先安装配套应用并打开该应用以更改设置（或者在表盘应用本身上有一个粗糙的设置窗口）。

启用JavaScript的设置页面

借助新的SDK，我们现在可以定义一个配置页面，该页面可在Pebble的Android / iOS应用本身中访问。 可以在与用户安装和安排其手表应用程序的位置相同的位置访问设置。 从用户的角度来看更干净，更合乎逻辑。

启用JavaScript的本地存储

新的SDKJavaScript还将W3C建议用于Web存储，使您可以在应用程序中存储设置以备将来使用。 如果用户要求设置摄氏/华氏温度设置，我们可以使用网络存储来记住用户的偏好。 在我们的案例中，我们要存储用户感兴趣的位置类型。

这个怎么运作

设置页面是网络上的单个页面，其中包含用于切换应用程序设置的表单。 应用程序中JavaScript等待所有调整后的设置通过表单提交回应用程序JavaScript，并将接收到的设置存储在本地存储中。

听起来令人困惑？ 在某些情况下，这不是理想的设置，因为这意味着您必须在网络上的某个地方托管自己的设置页面，以供其他人访问。 看来Pebble计划将来有能力将此设置页面与该应用捆绑在一起，这对于其中的某些应用来说将是一个很好的选择。 当前的设置确实带来了好处–如果您只想在设置页面上重新设置外观或进行某些调整，则无需更新应用程序本身，因为设置页面是独立的。

更新您的appinfo.json

首先，要在您的应用程序上启用设置页面，我们将"configurable"添加到功能数组中，该功能数组我们以前用于通过"location"关键字定义对地理位置API的访问：

"capabilities": ["location", "configurable"]

我们还为我们的应用程序添加了一个额外的密钥，称为"searchingFor" ，它将是“ Starbucks”或用户要求的自定义位置类型的字符串：

"appKeys": {
  "location": 0,
  "searchingFor": 1
}

创建设置页面

如上所述，您需要托管一个带有表单的网页，以便用户更改搜索内容。 我的一个像这样：

您需要的基本HTML如下所示（为简单起见，我删除了与样式和框架相关的标记）：

<label for="searchingFor">Whatcha wanna find?</label>
<textarea cols="40" rows="8" name="searchingFor" id="searchingFor"></textarea>
<button type="submit" id="b-cancel">Cancel</button>
<button type="submit" id="b-submit">Submit</button>

然后，我们在设置页面上使用JavaScript将所有更改提交回PebbleJavaScript并预填用户的当前设置。

取消或提交设置

我们提供了两个选项，它们可以取消–阻止保存任何更改，或者可以提交将这些更改传递到要保存的应用程序的表单。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

要取消它们的更改，我们将document.location设置为pebblejs://close 。 这将对我们的Pebble JavaScript代码发送空响应，该响应不会更改任何内容：

$('#b-cancel').click(function() {
  document.location = 'pebblejs://close';
});

如果他们选择提交更改，我们会将来自textarea的输入传递到字符串中。 下面的saveOptions()函数将textarea中的值放入对象中：

function saveOptions() {
  var options = {
    searchingFor: $('#searchingFor').val()
  }
  return options;
}

我们的click函数通过将对象转换为字符串并对其字符进行编码来提交数据，以便我们可以将其放置在我们以document.location目标的URL中（任何单个空格将被编码为%20 ，其他任何特殊字符也将发生变化）：

$('#b-submit').click(function() {
  var location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(saveOptions()));
  document.location = location;
});

这样就可以成功将所需的设置发送到Pebble JavaScript。

如果用户已经选择了东西怎么办？

如果用户已经对设置进行了更改，例如他们已经要求应用程序来找到它们，则我们希望他们先前的“ gelato”设置在打开设置时出现在文本字段中。 为此，我们将在配置HTML页面中向URL中发送一个名为searchingFor的变量。 URL http://www.yourpebbleappsettingpage.com?searchingFor=gelato就是一个例子。

我有一个很久以前发现的函数，为了从URL获取变量，我大量重复使用了该函数：

function getURLVariable(name)  {
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)",
      regex = new RegExp(regexS),
      results = regex.exec(window.location.href);
  if (results == null) return "";
  else return results[1];
}

页面准备就绪后，我们将检查变量并将该变量的文本放入我们的文本字段中。 对该变量进行解码，以便格式化为可在URL字符串中使用的任何字符都将正确显示在文本区域中。 为此，我们使用decodeURI()函数。 这样会将我们的%20和其他特殊字符转换回它们的实际字符以供显示：

$(document).ready(function() {
  var priorSearch = getURLVariable('searchingFor');
  priorSearch = decodeURI(priorSearch);

  if (priorSearch) {
    $('#searchingFor').html(priorSearch);
  }

随意设置该屏幕的样式，使其美观大方！ 您可以对其进行结构化和样式设置，因为它是纯HTML页面，因此您更喜欢它。 Pebble示例设置页面使用jQuery Mobile，因此我坚持使用它，只是重新设置了一些样式以使其更整洁。 使用您想要的任何前端框架或JavaScript验证。 力量属于您！

调整我们JavaScript以接受设置

我们的Pebble应用程序知道我们要允许更改设置，我们在appinfo.json文件中告诉我们。 现在，我们甚至为我们的应用程序提供了一个不错的配置页面，看起来很有希望。 问题是–我们的Pebble应用程序不知道在哪里可以找到我们所承诺的配置屏幕。 它甚至不知道我们要在哪里使用此searchingFor数据来回发送-只是我们打算拥有一个。 这是我们更新pebble-js-app.js文件以连接所有内容的地方。

首先，我们在JavaScript中需要一个新变量。 让我们把它searchingFor符合我们在关键appinfo.json文件（没有必要将它命名相同，但为了一致性和清晰度，我已经这样做了）。 这个变量需要做的是存储用户对Pebble改善生活时我们所要寻找的位置类型的偏好。

Pebble Apps中的Web存储

要在我们的应用程序中保存用户的首选项，我们可以访问Pebble为我们提供的localStorage API。 Pebble非常友善，可以遵循W3C关于Web存储的建议 ，因此该语法对过去使用Web存储的任何人都不会太陌生。 要将某些内容存储在本地存储中，我们调用：

window.localStorage.setItem('ourVariableName', 'Our variable contents');

要检索它：

window.localStorage.getItem('ourVariableName');

因此，在我们的情况下，我们希望将searchingFor数据存储在我们的Pebble应用程序的本地存储中。 我们将使用JavaScript变量在整个应用程序中对其进行访问，但是有时在首次加载应用程序或从配置屏幕返回时，我们将从本地存储中设置这个searchingFor变量。

我们将在运行JavaScript的那一刻开始研究本地存储。 如果在本地存储中找不到我们的searchingFor数据，则将默认值设置为“星巴克”。 将其整齐地放置在pebble-js-app.js文件开头的locationOptions定义之后。

var locationOptions = {timeout: 15000, maximumAge: 60000},
    searchingFor = window.localStorage.getItem('searchingFor') ? window.localStorage.getItem('searchingFor') : 'Starbucks';

然后，我们将此变量添加到我们的AJAX请求中，代替星巴克的提及：

req.open('GET', 'https://api.foursquare.com/v2/venues/search?client_id='+clientId+'&client_secret='+clientSecret+'&v='+version+'&ll='+latitude+','+longitude+'&query='+searchingFor, true);

到目前为止，我们的应用程序将执行与以前相同的操作-找到我们星巴克。 我们需要让它知道用户按下应用程序的“设置”按钮时该怎么做。 我们使用showConfiguration事件侦听器执行此操作：

Pebble.addEventListener('showConfiguration', function() {
  Pebble.openURL('http://www.patrickcatanzariti.com/find_me_anything/configurable.html?searchingFor=' + searchingFor);
});

这会将用户带到表单的页面来填写这些设置。 当他们提交新设置（例如，如上所述的“ gelato”）时，我们希望pebble-js-app.js JavaScript准备就绪并等待该数据。

为此，我们使用了webviewclosed事件侦听器。 在这里，我们从URI字符串（带空格等的%20的编码版本）中解码回去，并再次将其解析为JSON对象。 我们从该JSON对象中获得了searchingFor值，并在JSON字符串中再次对其进行了编码。 编码的最后一点是将其存储起来，可以放入前面讨论的Foursquare API调用的URL字符串中（ https://api.foursquare.com/v2/venues/search?client_id='+clientId+'&client_secret='+clientSecret+'&v='+version+'&ll='+latitude+','+longitude+'&query='+searchingFor request）：

Pebble.addEventListener('webviewclosed', function(e) {
  var options = JSON.parse(decodeURIComponent(e.response));
  searchingFor = encodeURIComponent(options.searchingFor);

如果我们的价值是undefined （可能有多种原因会发生这种情况，但它们只是边缘情况），那么我有最后的选择将其切换回“星巴克”。 将来可能会有更好的处理方式，可能会出现错误，但是为了使此演示简单起见，在最坏的情况下，我默认使用星巴克：

if (searchingFor == 'undefined') {
  searchingFor = 'Starbucks';
}

理解了searchingFor请求并准备好进行存储后，就可以使用上述window.localStorage.setItem()函数将其存储在本地存储中。 这样，下次他们打开应用程序时它将仍然存在。

window.localStorage.setItem('searchingFor', searchingFor);

现在，我们收到了新的设置请求，我们使用新值再次运行window.navigator.geolocation.watchPosition()函数。 当他们关闭设置窗口时，将使用其新请求的设置针对Foursquare API运行我们的地理位置搜索。

locationWatcher = window.navigator.geolocation.watchPosition(fetch_location_data, fetch_location_error, locationOptions);
});

现在，我们JavaScript可以理解此新设置，但是还有更多工作要做。

我们的C代码的一些补充

我们的find_me_anything.c文件不需要更改太多。 我进行了以下添加和更改。

增加消息缓冲区大小

我将消息缓冲区的大小增加到124个字节。 我相信这是您在Pebble手表上可以带给您的最大享受。 额外的缓冲区大小使我可以发送可能更大的位置名称和查询。 新设置会带来更大的数据长度变化，因此我们将为此提供尽可能多的回旋余地！

定义sync_buffer时，在文件的开头进行了更改：

static AppSync sync;
static uint8_t sync_buffer[124];

当我们打开消息同步时，还可以在init()函数中对其进行进一步更改：

app_message_open(124, 124);

向我们的应用添加新密钥

我们还需要添加在Pebble JavaScript和C代码之间传递的新键： searchingFor设置。 在C代码中，我遵循约定，并使用带下划线的大写字母分隔单词。 我们将1定义为十六进制的0x1 ，这意味着当我们在C代码中提及第二个键/值对时，我们现在可以引用SEARCHING_FOR ：

enum {
  OUR_LOCATION = 0x0,
  SEARCHING_FOR = 0x1
};

我更新了init_location_search()函数，以便将SEARCHING_FOR值的初始值定义为'' 。 它是空白的，因为一旦启动JavaScript并告诉C我们正在寻找什么，它将被填充。

Tuplet initial_values[] = {
  TupletCString(OUR_LOCATION, "Loading..."),
  TupletCString(SEARCHING_FOR, "")
};

最后，我们更新sync_tuple_changed_callback()函数，以便它在收到更新的第二个键/值对时知道响应。 完成后，我们所需的C代码要做的就是将手表上的标签更改为“最近的冰淇淋”或它们的新设置，而不是“最近的星巴克”：

switch (key) {
  case OUR_LOCATION:
    text_layer_set_text(text_layer, new_tuple->value->cstring);
    break;
  case SEARCHING_FOR:
    text_layer_set_text(label_layer, new_tuple->value->cstring);
    break;
}

一切就绪后，您现在应该可以使用config窗口更改应用程序的设置。 提交设置时，Pebble应用程序应更新，并且您将拥有一个定制的应用程序，如下所示：

我们JavaScript代码的额外补充

我在实施此新功能时发现的一件事是，有时FourSquare API实际上没有每个场所中需要的地址或值。 一些场所缺少该数据。 当我们将其显示在手表上时，它将返回“ undefined”。 不好！ 因此，我重写了req.onload函数的一部分，以检查条目并使用第一个具有地址和城市的条目：

if (response && response.meta.code == '200' && response.response) {
  var venues = response.response.venues,
      venue = undefined,
      venueIndex = 0;

  // Look for the first instance of a venue with an address
  while (venues[venueIndex] !== undefined && venue === undefined) {
    if (venues[venueIndex] && venues[venueIndex].location.address !== undefined && venues[venueIndex].location.city !== undefined) {
      venue = venues[venueIndex];
    }

    venueIndex++;
  }

  if (venue && venue.location.address !== undefined && venue.location.city !== undefined) {
    Pebble.sendAppMessage(...);

上面我所做的是设置了一个名为venue的变量，该变量以undefined开始。 我遍历从Foursquare返回的response.response.venues数据中的每个项目，如果找到包含地址和城市的数据，则将该对象保存在venue ，我们将不再搜索其余的响应。

我们现在是一个更令人兴奋的应用程序！

多亏了PebbleKit JavaScript框架的强大功能，我们现在让Pebble手表所有者来决定他们希望如何使用我们的应用程序。 它是定制的，更加个性化。 我们现在还使用本地存储，因此我们的应用程序可以记住事情。 这是一个比以前有价值的应用程序，我们正在Pebble手表上充分利用JavaScript的功能。

最终，我的用户现在可以沉迷于自己的痴迷，而不是我个人的星巴克。 即使您不想制作一个可以给您提供地址的时钟，也希望该示例在向您自己的应用程序添加个性化方面提供了一些指导。 尝试让人们将背景从黑色更改为白色，或者让他们选择其他API或供稿来提取数据。 让他们决定一些小事情，最终使您的应用程序更有用，更吸引人。

休假一个周末，像疯了一样去编码，或者在回家的火车上编码一些东西！ 将JavaScript知识用于您从未想到过的事情，并在此过程中获得很多乐趣！

更多资源

• 用JavaScript进行Pebble Watch开发 –我的上一篇文章“ Find Me Starbucks”的诞生。 对于刚起步的人来说，我有很多资源。
• 使用PebbleKit JavaScript框架-Pebble团队提供有关使用其JavaScript框架的更多信息

翻译自: https://www.sitepoint.com/advanced-pebble-watch-configuration/

vue watch配置