[IMPROVEMENT] Ability to display distant image

[WoodySlum]

Is it possible to display a PNG on a distant server ?

Didin't succeed in doing this, opened a thread : http://forums.getpebble.com/discussion/17903/pebble-js-display-image-from-distant-server

Tried several ways, without success

[Meiguro]

Yes, it is possible but it is undocumented for two reasons, the main one being that Pebble.js is missing a resource unload/eviction policy. The other is the handling of large remote images which will either require packet segmenting or using the png format natively. I've replied to the forum thread with slightly more information.

I hope to eventually work out these issues.

[grayxr]

It would be nice, maybe, to be able to use data-url images as well.

[Meiguro]

data-url is an interesting idea, I'll keep that in mind.

There was some progress on this ticket with e1ace40. That merge allows images larger than 2K to load. I may improve this to have a progress bar since it's not exactly the best user experience. It's also still lacking an onload callback for knowing when the image is done loading.

Be sure to add the suffix #width:144 when loading remote images that are not resized for the pebble as noted in the forum post. Using a smaller width is even better. When this ticket is fully implemented I'll be sure to update the documentation on that.

[WoodySlum]

Ok I'll do a test to display my home connected camera on my Pebble.
First, I prepared image for Pebble with GD and PHP :

if ($this->isPebble) {
    header("Content-type: image/png");
    $size = getimagesizefromstring($img);
    imagefilter($image, IMG_FILTER_GRAYSCALE);
    imagefilter($image, IMG_FILTER_CONTRAST, -255);
    $width = $size[0];
    $height = $size[1];
    $coeff = ((144*100)/$width)/100;
    $newWidth = $width*$coeff;
    $newHeight = $height*$coeff;
    $resizeImage = @imagecreatetruecolor(intval($newWidth), intval($newHeight));
    imagecopyresized($resizeImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
    ob_start (); 
        imagepng ($resizeImage);
        $img = ob_get_contents (); 
    ob_end_clean ();
}

This will resize picture and transform image to greyscale.
Then I used code you described above :

var camUrl = baseUrl + 'method=getCamera&pebble=true#width:144';
if (camImage != null) {
    cameraContainer.remove(camImage);    
}

console.log(camUrl);
var camImage = new UI.Image({
    position: new Vector2(0, 0),
    size: new Vector2(144, 168),
    image: camUrl
});

console.log('Adding image !');
cameraContainer.add(camImage);
cameraContainer.show();

And it works great !
Anyway, the watchapp crashes sometimes after displaying image.
Thanks for the work !

[Meiguro]

That's great to hear, and you're welcome! It actually has dithering built in too. It's much more impressive with that turned on. Use #width:144,dither to both set the width and turn on dithering.

Ah, it must be running out of memory somehow. Thanks for reporting the crash. It already flushes the resource cache when changing windows. Perhaps I should also add reference counting to flush particular images in a long standing window. I'll look into this further.

For anyone else fiddling, it currently only supports PNG's using the wonderful library at https://github.com/devongovett/png.js/. I'll be adding JPEG and GIF support after all the kinks in remote loading are ironed out.

[WoodySlum]

I managed the image removal with an event, and the app crash less often.

cameraContainer.on('hide', function(e) {
     console.log('Removing camera image');
    camImage.remove();
});

For me the issue can be closed. Thank you it works like a charm.