How to load images dynamically?

[POLS]

Hi,

I am using ImageBundle feature.
I am using @Resource annotation, specifying image file location and
image name.
Its kind of a static behavior.

I have details of images name and locations in the database.
Can you please tell me, How to load the images?


Thanks,
POLS

[Vitali Lovich]

new Image("path to remote image file here");

[Salvador Diaz]

Also note that ImageBundles cannot be generated dynamically as they're
created by the GWT Compiler as a single image at compile time.
For more information about ImageBundles and its intended purposes read
this: http://code.google.com/webtoolkit/doc/1.6/DevGuideUserInterface.html#DevGuideImageBundles

Cheers,

Salvador

On Apr 19, 1:50 am, Vitali Lovich <vlov...@gmail.com> wrote:
> new Image("path to remote image file here");
>

[Vitali Lovich]

Well, that's not technically true.  You could potentially write a framework that would get the GWT compiler to generate the bundles for you at runtime.  There isn't such a framework right now & it would take some effort to write I imagine.

You could base it off the work that was done to recompile the code into JS on the fly when the Java code changes (I forget by which project - it's in the mailing list archives somewhere).

Something along the lines of - extract the images to disk, generate the code for the image bundle, invoke the compiler, delete the original images (if you really want to save space), & then return a map of image alias & the parameters of the image (i.e. url of the bundle, offsets into the bundle, size of the image).

[Salvador Diaz]

> There isn't such a framework right now & it would take some effort to write
> I imagine.

So my remark stands true: ImageBundles cannot be generated dynamically
(and by that I meant: with the standard GWT distribution)

[Vitali Lovich]

I thought you were stating an absolute (i.e. it's not possible at all to use the image bundle concept).  My bad.

[Chii]

The purpose of image bundles is to crunch the static images you have
into one big image - if you have multiple images that could be
submitted by a user and changes dynamically, then image bundles is not
the right solution. new Image(url) is quite a simple and easy
solution, why not use that?

[John Ivens]

There is a really good solution listed earlier using Image(url) where url looks like "data:

// Example client code which uses an encoded base64 string passed from the server to the client:

private void refreshImage() {

// lazy initialization of service proxy

if (ditherSvc == null) {

ditherSvc = GWT.create(DitherService.class);

}

AsyncCallback<String> callback = new AsyncCallback<String>() {

public void onFailure(Throwable caught) {

// do something with errors

}

public void onSuccess(String result) {

img.setUrl("data:image/png;base64," + result);

}

};

// make the call to the dither service

ditherSvc.getDither(steps, spiralDistance, magnitude, callback);

}

On the server side, you need to get a library which is available free for java on the web which encodes a string as base64... an example server side is:

package edu.wiyn.odi.server;

import java.io.File;

import java.io.IOException;

import java.util.Calendar;

import java.util.Date;

import java.util.Vector;

import org.wiyn.odi.op2.application.DitherPatternCoverage;

import org.wiyn.odi.op2.application.op2;

import org.wiyn.odi.op2.otalib.otaMosaic;

import com.google.gwt.core.client.GWT;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;

import edu.wiyn.odi.client.DitherService;

public class DitherServiceImpl extends RemoteServiceServlet implements

DitherService {

/**

* 

*/

private static final long serialVersionUID = 1L;

public String getDither(int steps, double spiralDistance, double magnitude) {

// Read in a png file and make it into a byte array

// Encode this file as a string and pass it to the client

//System.out.println(System.getProperty("user.dir"));

System.out.println("Steps: " + steps + ", spiralDistance: " + spiralDistance + ", magnitude: " + magnitude);

String encoded = null;

try {

// BasicConfigurator.configure ();

DitherPatternCoverage cover = new DitherPatternCoverage(800);

op2.updateCatalog(120., 60.);

Vector<otaMosaic> myDither = cover.generateDitherSequence(120., 60.,

cover.getSpiralDither(steps, spiralDistance));

long start = System.currentTimeMillis();

cover.calculateCoverage(myDither);

long end = System.currentTimeMillis();

System.out.println("rendering took: " + (end - start) + "ms");

cover.writeToDisk("./coveragetest.png");

encoded = Base64.encodeFromFile("./coveragetest.png");

} catch (IOException e) {

e.printStackTrace();

}

return(encoded);

}

}

The main lines are:

cover.writeToDisk("./coveragetest.png");

encoded = Base64.encodeFromFile("./coveragetest.png");

                        return(encoded);

I write to disk, but don't need to.  If I kept this in a byte array it would be faster.  There is also an encoding method which works with byte arrays.

[Vitali Lovich]

I can see a use case for dynamic ImageBundles.  If you need to display a set of images that are a function of user input, you transfer all of them as the result of 1 HTTP request & then display them as appropriate using viewports.

This way you don't need to fetch a bunch of individual images, each requiring 1 HTTP connection.

If you lay it out just like they are in the bundle, you can also get a cool effect seeing the row by row of images fill up at once.

Of course ImageBundle is not the perfect idiom for this concept.  You have to generate the combined image & create image widgets with the correct viewport.

One bad thing about the suggested RPC approach is that the browser won't render the partial image as it is being downloaded.  Another is that you're bloating the transfer size & placing load on the server unnecessarily.  Simply transfer a raw byte array, & do the base64 encoding on the client side.  The added advantage is you don't actually need to write you're own encoder & most versions of FF, Safari & provide a fast native one.