Pebble JS, GitHub, and image resources

Question

I am working on a pebble.js project that is loading from the GitHub repository. I essentially write my code locally, pushing GitHub, and then inserting CloudPebble to build, since my computer is not suitable for starting the SDK. CloudPebble correctly sees my image resource, but I cannot figure out how to link it. Initially, he could not find the image until I moved the subpath to the resources folder. This allowed the correct import, but at any time when I refer to my image, I get this in the application 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 an example of my project structure:

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

This is the corresponding bit of appinfo.js

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

And finally, the corresponding bit from app.js

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

I also tried to refer directly to the image path for the icon property, but the image is never displayed, and I get the same JavaScript Error . I can correctly add the image to 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 moment I am at a loss - any help would be greatly appreciated.

Answer 1

Try using the path to the image rather than its resource identifier:

 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 right 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' }] }] }); 

Answer 2

Pelble SDK 2 or 3? Prior to 3, image resources had to be pre-converted from PNG to PBI. Pebble image docs contain more detailed information about the formats supported in the original (applet) and Time (aka Basalt) pebbles.