Pebble JS, GitHub, and Image Resources

Question

I'm working on a pebble.js project that is loading from a GitHub repo. I essentially am writing my code locally, pushing up to GitHub, and then pulling into CloudPebble to build as my computer is unfit to run the SDK. CloudPebble sees my image resource properly, but I can't figure out how to reference it. Initially, it couldn't find the image until I moved the subpath into the resources folder. This allowed for a proper import, but any time I reference my image I get this in the app log:

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)

Here is a sample of my project structure:

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

This is the relevant bit of appinfo.js

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

And finally the relevant bit from app.js

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

I've also tried directly referencing the image path for the icon property, but the image never displays and I get the same JavaScript Error. I can see the image properly added in the build log:

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

At this point I'm at a loss - any help would be greatly appreciated.

Have you tried `icon: 'images/some_image.png'`? This is supported too. — sarfata, Mar 16 '15 at 05:42
Stupid question, but I have to ask: Did you try "resources/images/some_image.png" or "/resources/images/some_image.png" or "../resources/images/some_image.png" or using the .pbi extension as well? I don't know anything about pebble, but just wanted to make your paths conclusion airtight. — Daniel, Mar 16 '15 at 13:50
@phatskat can you share an example zip somewhere exposing this problem? — sarfata, Mar 16 '15 at 17:17
With the C SDK resource names need to be prefixed with `RESOURCE_ID_`. Have you tried `RESOURCE_ID_MY_IMAGE` instead of `MY_IMAGE`? — ChrisGPT was on strike, Mar 17 '15 at 13:31

score 1 · Answer 1 · answered Mar 19 '15 at 16:37

Try using the path to the image instead of its resource ID:

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

The pebble.js documentation 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'
    }]
  }]
});

Thanks - I will give this a shot again tonight although I'm pretty sure I've tried before. — phatskat, Mar 19 '15 at 18:59

score 0 · Answer 2 · answered Mar 12 '15 at 01:33

0

Pebble SDK 2 or 3? Prior to 3, image resources had to be pre-converted from PNG to PBI. Pebble's image docs have more details on what formats are supported on the original (aka Aplite) and Time (aka Basalt) Pebbles.

answered Mar 12 '15 at 01:33

M.W.

723
7
11

SDK 2 - it appears that the compiler in CloudPebble is converting the image to PBI already. I can confirm that the image will work as the icon for the app in the menu if I set `menuIcon: true` in the `appinfo.json`, it just seems to mess up when I want to use it in my app's own menu as an icon. – phatskat Mar 12 '15 at 12:34
1

Under SDK2 PNG images were automatically converted to PBI. – ChrisGPT was on strike Mar 17 '15 at 13:29

Pebble JS, GitHub, and Image Resources

2 Answers2