lots of images on a Canvas

[fil512]

My application needs to fill a 1600x1600 canvas of with 20x20 pixel images, many of which are copies of the same image.

I'm presently using:

sectorImg = new Img(...);
sectorImg.setParentElement(parentCanvas);
sectorImg.draw();

but the page either runs out of memory or takes too many minutes to load.

What is the recommended way to fill a square in a window with images like this?

Also, when I need to change an image at a location, I am calling

sectorImg.destroy()

on the old image. Is that the recommended way to do that? Do I need to call removeFromParent() before calling destroy()?

Thanks!
Ken

[somewhereinbelgium]

Hi,

Have you tried specifying the contents of the Canvas via

Canvas.setContents( String )

because the string can contain any valid HTML string, which naturally can refer to images by URL.

[fil512]

That's a really good suggestion.

I've been looking at Canvas.imgHTML() as a way to create the string.

How would I specify x,y coordinates for placing the image within the canvas (I don't see any attributes for that in the HTML IMG tag)?

Is there a typo in the javadoc for that method? It says it "Generates the HTML for an image unique to this Canvas." But it's a static method, so there is no "this Canvas..."

Thanks for your help!
Ken

[fil512]

To position the image, would I use something like this?

<img src="sample.gif" style="position:absolute; left:40px; top:80px">

[Isomorphic]

Hi Ken,
Yes the reference to "this" canvas is confusing - we'll make a note to improve the javadoc for this method.

The Img returned doesn't include absolute positioning / coords by default. You could potentially plug these into the "extraStuff" parameter, but it's probably simpler to do something like write out a standard HTML table, with the image html rendered inside the table cells.

[fil512]

Adding the images using Canvas.imgHTML() and Canvas.setContents() was WAY faster as you suggested.

However, now I'm stuck. I need to modify the handlers on the image. I gave all my images unique names, but how to I get a handle on them to do stuff like the following?

Will I need to translate this to javascript (scary for me since I don't know javascript)? Or is there a way I can look up the images and instantiate Img objects in java to add the handlers in java?

			sectorImg.addShowContextMenuHandler(new ShowContextMenuHandler() {
				@Override
				public void onShowContextMenu(ShowContextMenuEvent event) {
					event.cancel();
				}
			});
		sectorImg.addRightMouseDownHandler(new RightMouseDownHandler() {
			public void onRightMouseDown(RightMouseDownEvent event) {
				doStuffWrittenInJava();
				}
			}
		});

[fil512]

I tried using

Img img = (Img)Canvas.getById(imgName)

after calling canvas.setContents()

But img came back null. I doubted it would work, but it seemed to be the only way to turn an image name into an Img object.

So I'm still stuck--how can I add click handlers (written in gwt-java) from my images that are added to the canvas using canvas.setContents()?

Thanks for your help. I love SmartGWT it is very well thought out!

Ken

[Isomorphic]

When you use 'ImgHTML' to write out your HTML image tags, you're not actually creating any SmartGWT component for each image.

If you're managing the position of the images, it would probably be easiest to write a click handler into the canvas containing the various images. You can determine where the event occurred using event.getX() / event.getY(), and adjust that to find the offset wrt to the left/top of the parent canvas by comparing to the result of canvas.getPageLeft() / getPageTop().

[fil512]

Thanks Isomorphic. That did the trick. You rock!

I love your stuff. I sure hope your SmartGWT Pro is selling well because you've built a fantastic product here. I've been trying to help promote your Pro product whenever I get the opportunity. It's hard to sell software tools these days.

I am using the free version in a free open-source strategy game which is coming along nicely thanks to your tool.

If you're interested, you can check it out at http://www.strategicinitiative.org.

Ken