Loading remote images about pebblejs

[kinncj]

var UI    = require('ui'),
    main  = new UI.Window(),
    image = new UI.Image();

image.image("http://orig13.deviantart.net/b28b/f/2011/156/9/d/pikachu_avatar_or_icon_by_pheonixmaster1-d3i6as0.png");
main.add(image);
main.show();

[kinncj]

and btw, it's not crashing, it's repeating a small image.

[pautomas]

@kinncj is that code working for you?

And it crashed for me on the Aplite emulator and repeated the image (as seen on the screenshot) on Basalt.

[kinncj]

works fine using cloud pebble.

[Meiguro]

Ah, I had assumed this ticket was about images on basalt.

Images optimized for aplite Pebbles, as funny as this will sound, are not supported by pebble.js because of the PNG decoder it uses. The PNG decoder is the a fine one by Devon that only supports bitdepth of 8 and above since 1 bitdepth is very rare on the web.

To optimize an image for pebble.js, you only need to worry about dimensions (144x168 or smaller is best), and ensure each color channel is 8 bit or above.

The deviant art example above likely only works sometimes since its image size is larger than 144x168 which will run into memory issues. To guarantee that it works, you would resize it. As a WIP api, pebble.js can also resize it proportionally if you append '#width:100' to the url. 100 can be any other reasonable integer value.

The example by @kinncj with pebble.js resizing would be:

var UI = require('ui');
var card = new UI.Card();
var imageUrl = 'http://orig13.deviantart.net/b28b/f/2011/156/9/d/pikachu_avatar_or_icon_by_pheonixmaster1-d3i6as0.png';
card.prop({
  title: 'Pikachu',
  banner: imageUrl + '#width:100',
});
card.show();

[kinncj]

One problem that I faced yesterday was related to the image size.
Scenario:

• Load a 8k remote image
• Display
• Load a 16k remote image to the same image object (image.image('http://remoteimage.com/image.png'))
• Not enough memory.

Even known we are replacing the state of the exact same object, Pebble seems do don't discard the previous binary somehow.