Pebble JS、GitHub 和图像资源答案

【问题标题】：Pebble JS, GitHub, and Image ResourcesPebble JS、GitHub 和图像资源
【发布时间】：2015-03-10 19:00:54
【问题描述】：

我正在处理一个从 GitHub 存储库加载的 pebble.js 项目。我基本上是在本地编写代码，推送到 GitHub，然后拉入 CloudPebble 进行构建，因为我的计算机不适合运行 SDK。 CloudPebble 正确地看到了我的图像资源，但我不知道如何引用它。最初，直到我将子路径移动到resources 文件夹中，它才能找到图像。这允许正确导入，但每当我引用我的图像时，我都会在应用程序日志中得到这个：

JavaScript Error:
send@[native code]
    at load (ui/windowstack.js:2654:22)
    at load (lib/image.js:165:11)
    at load (ui/imageservice.js:85:16)
    at resolve (ui/imageservice.js:109:60)
    at ImageType (ui/simply-pebble.js:41:32)
    at lib/struct.js:161:32
    at menuItem (ui/simply-pebble.js:814:10)
    at _resolveItem (ui/menu.js:161:30)
    at _preloadItems (ui/menu.js:170:22)
    at _resolveSection (ui/menu.js:151:25)
    at section (ui/menu.js:239:23)
    at updateActivityMenu (app.js:44:18)
    at app.js:167:21
    at onreadystatechange (lib/ajax.js:109:17)

这是我的项目结构示例：

/project/resources/images/some_image.png
/project/src/app.js
/project/appinfo.json

这是appinfo.js的相关位

    "media": [
        {
            "file": "images/some_image.png",
            "name": "MY_IMAGE",
            "type": "png"
        }
    ]

最后是来自app.js的相关位

    var item = {
        title: data.Response.data.activity.activityName,
        subtitle: data.Response.data.activity.activityDescription,
        icon: 'MY_IMAGE' 
    };

我也尝试直接引用icon 属性的图像路径，但图像永远不会显示，我得到相同的JavaScript Error。我可以在构建日志中看到正确添加的图像：

[ 6/29] some_image.png.pbi: resources/images/some_image.png ../../app/sdk2/Pebble/tools/bitmapgen.py -> build/resources/images/some_image.png.pbi

此时我不知所措 - 任何帮助将不胜感激。

【问题讨论】：

你试过icon: 'images/some_image.png'吗？这也受支持。
@sarfata 是的，两种方法我都试过了。
愚蠢的问题，但我不得不问：你试过“resources/images/some_image.png”或“/resources/images/some_image.png”或“../resources/images/some_image .png”还是使用 .pbi 扩展名？我对鹅卵石一无所知，只是想让你的路径结论密不透风。
@phatskat 你能在某处分享一个示例 zip 来暴露这个问题吗？
与C SDK的资源名称需要以RESOURCE_ID_为前缀。你试过RESOURCE_ID_MY_IMAGE而不是MY_IMAGE吗？

标签： javascript pebble-watch pebble-sdk cloudpebble pebble-js

【解决方案1】：

尝试使用图像的路径而不是其资源 ID：

var item = {
    title: data.Response.data.activity.activityName,
    subtitle: data.Response.data.activity.activityDescription,
    icon: 'images/some_image.png' 
};

pebble.js 文档suggests that this is the proper approach for internal menus：

var menu = new UI.Menu({
  sections: [{
    title: 'First section',
    items: [{
      title: 'First Item',
      subtitle: 'Some subtitle',
      icon: 'images/item_icon.png'
    }, {
      title: 'Second item'
    }]
  }]
});

【讨论】：

谢谢 - 我今晚会再试一次，虽然我很确定我以前试过。

【解决方案2】：

Pebble SDK 2 还是 3？在 3 之前，图像资源必须预先从 PNG 转换为 PBI。 Pebble 的image docs 有更多关于原始（又名 Aplite）和 Time（又名 Basalt）Pebbles 支持哪些格式的详细信息。

【讨论】：

SDK 2 - CloudPebble 中的编译器似乎已经将图像转换为 PBI。如果我在appinfo.json 中设置menuIcon: true，我可以确认该图像将用作菜单中应用程序的图标，当我想在我的应用程序自己的菜单中将其用作图标时，它似乎会搞砸。
SDK2下PNG图片自动转换为PBI。