Jambi | 6 Feb 02:09 2011

Is it possible to convert ImageResource to ImageElement?

Hi there,

I´m playing around with the new Canvas API in GWT 2.2. Great stuff!
And I want to use a ClientBundle to get my Images for the Canvas, to
use it as some kind of image preloader. But the ClientBundle is giving
me ImageResource objects but I need ImageElement objects for the
Canvas.

This is the only way i figured out to add images on the canvas:

ImageElement imgMap = Document.get().createImageElement();
imgMap.setSrc("some URL");
contextMap.drawImage(imgMap, x, y);

It doesn´t seem to be possible to add normal GWT Image objects to the
canvas, or am I wrong?

But I would like to use the ImageResource from the ClientBundle. Any
ideas? Maybe I should try a different approach for an Image preloader?

cheers, Michael

--

-- 
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@...
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe <at> googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

Jeff Larsen | 6 Feb 02:47 2011
Picon

Re: Is it possible to convert ImageResource to ImageElement?

Have you tried 

Image img = new Image(ClientBundle.getImageResource());
ImageElement.as(img.getElement());

Haven't tested this, but it is worth a try. 

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
Jambi | 6 Feb 03:19 2011

Re: Is it possible to convert ImageResource to ImageElement?

Thank you for your quick response. At first I thougth it was going to
work, but the Image does not appear on the canvas. I tried this (as
you said):

Image map = new Image(mapResources.map());
contextMap.drawImage(ImageElement.as(map.getElement()), x, y);

On Feb 6, 2:47 am, Jeff Larsen <larse...@...> wrote:
> Have you tried
>
> Image img = new Image(ClientBundle.getImageResource());
> ImageElement.as(img.getElement());
>
> Haven't tested this, but it is worth a try.

--

-- 
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@...
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe <at> googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

Thomas Broyer | 6 Feb 11:50 2011
Picon

Re: Is it possible to convert ImageResource to ImageElement?

Or, without creating an Image widget: AbstractImagePrototype.create(imageResource).createElement()

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
Jambi | 6 Feb 16:46 2011

Re: Is it possible to convert ImageResource to ImageElement?

Hej Thomas,

it´s the same with your solution. The Image won´t appear on the
canvas. Maybe it is a bug since the canvas api is still experimental?
Maybe I should try a different approach to implement an image
preloader.

On Feb 6, 11:50 am, Thomas Broyer <t.bro...@...> wrote:
> Or, without creating an Image widget:
> AbstractImagePrototype.create(imageResource).createElement()

--

-- 
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@...
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe <at> googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

jhulford | 7 Feb 15:46 2011
Picon

Re: Is it possible to convert ImageResource to ImageElement?

I'll admit to knowing nothing about canvas work, but is it possible
you have to wait for the image to load using a LoadHandler before you
can display it in the Canvas?

On Feb 6, 10:46 am, Jambi <michael.lukaszc...@...> wrote:
> Hej Thomas,
>
> it´s the same with your solution. The Image won´t appear on the
> canvas. Maybe it is a bug since the canvas api is still experimental?
> Maybe I should try a different approach to implement an image
> preloader.
>
> On Feb 6, 11:50 am, Thomas Broyer <t.bro...@...> wrote:
>
> > Or, without creating an Image widget:
> > AbstractImagePrototype.create(imageResource).createElement()

--

-- 
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@...
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe <at> googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

Dallas | 6 Feb 18:10 2011
Picon

Re: Is it possible to convert ImageResource to ImageElement?

I've been looking into this same problem and what I've found is a
couple of issues.

First being that you are not loading the image (ie. not pulling the
image from the server), only setting the image properties (eg. url,
width, height, etc), so in order to do what you want you would have to
call the drawImage in a LoadHandler event:

final Image image = new Image(mapResources.map());
image.addLoadHandler(new LoadHandler() {
	 <at> Override
	public void onLoad(LoadEvent event) {
		final ImageElement e = ImageElement.as(image.getElement());
		contextMap.drawImage(e, x, y);
	}
});

But this now leads to the second problem - what's going to call the
load?  The only solution I've come up with thus far is subsequently
adding a RootPanel.get().add(image) which adds the image to the DOM
which in turns loads up the image.  From there I simply added an
'image.removeFromParent' line in the onLoad method.

final Image image = new Image(mapResources.map());
image.addLoadHandler(new LoadHandler() {
	 <at> Override
	public void onLoad(LoadEvent event) {
		final ImageElement e = ImageElement.as(image.getElement());
		contextMap.drawImage(e, x, y);
		image.removeFromParent();
	}
});
RootPanel.get().add(image); // triggers the image load

But this solution is hardly ideal.  I understand that unless the image
is part of the DOM, the image isn't technically part of the hosting
page, which is why it will not load/show.

The idea of an image preloader is probably the way to go, I'm going to
look into this myself.  There was the ImageLoader helper class from
the gwt incubator that I had previously used, but it didn't fit well
with the ClientBundle concept, and I don't think it survived the move
into the 2.2 branch.

On Feb 6, 10:46 am, Jambi <michael.lukaszc...@...> wrote:
> Hej Thomas,
>
> it´s the same with your solution. The Image won´t appear on the
> canvas. Maybe it is a bug since the canvas api is still experimental?
> Maybe I should try a different approach to implement an image
> preloader.
>
> On Feb 6, 11:50 am, Thomas Broyer <t.bro...@...> wrote:
>
>
>
>
>
>
>
> > Or, without creating an Image widget:
> > AbstractImagePrototype.create(imageResource).createElement()

--

-- 
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@...
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe <at> googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

Christopher | 6 Mar 02:35 2011
Picon

Re: Is it possible to convert ImageResource to ImageElement?

From my experiments, that last example wont work.

final Image image = new Image(mapResources.map());

That line makes GWT try to use a sprite sheet, making the <img> use
style="background:" to display the image. Such an Image won't be shown
when drawn on the canvas. I have to force gwt to use the src="" by
doing:

final Image image = new Image(mapResources.map().getURL());

I guess the proper solution would be to have GWT export the sprite
sheets it generates, and then use the proper canvas draw method to
draw that portion of the sheet.

On Feb 6, 6:10 pm, Dallas <dallas.matth...@...> wrote:
> I've been looking into this same problem and what I've found is a
> couple of issues.
>
> First being that you are not loading the image (ie. not pulling the
> image from the server), only setting the image properties (eg. url,
> width, height, etc), so in order to do what you want you would have to
> call the drawImage in a LoadHandler event:
>
> final Image image = new Image(mapResources.map());
> image.addLoadHandler(new LoadHandler() {
>          <at> Override
>         public void onLoad(LoadEvent event) {
>                 final ImageElement e = ImageElement.as(image.getElement());
>                 contextMap.drawImage(e, x, y);
>         }
>
> });
>
> But this now leads to the second problem - what's going to call the
> load?  The only solution I've come up with thus far is subsequently
> adding a RootPanel.get().add(image) which adds the image to the DOM
> which in turns loads up the image.  From there I simply added an
> 'image.removeFromParent' line in the onLoad method.
>
> final Image image = new Image(mapResources.map());
> image.addLoadHandler(new LoadHandler() {
>          <at> Override
>         public void onLoad(LoadEvent event) {
>                 final ImageElement e = ImageElement.as(image.getElement());
>                 contextMap.drawImage(e, x, y);
>                 image.removeFromParent();
>         }});
>
> RootPanel.get().add(image); // triggers the image load
>
> But this solution is hardly ideal.  I understand that unless the image
> is part of the DOM, the image isn't technically part of the hosting
> page, which is why it will not load/show.
>
> The idea of an image preloader is probably the way to go, I'm going to
> look into this myself.  There was the ImageLoader helper class from
> the gwt incubator that I had previously used, but it didn't fit well
> with the ClientBundle concept, and I don't think it survived the move
> into the 2.2 branch.
>
> On Feb 6, 10:46 am, Jambi <michael.lukaszc...@...> wrote:
>
>
>
>
>
>
>
> > Hej Thomas,
>
> > it´s the same with your solution. The Image won´t appear on the
> >canvas. Maybe it is a bug since thecanvasapi is still experimental?
> > Maybe I should try a different approach to implement an image
> > preloader.
>
> > On Feb 6, 11:50 am, Thomas Broyer <t.bro...@...> wrote:
>
> > > Or, without creating an Image widget:
> > > AbstractImagePrototype.create(imageResource).createElement()

--

-- 
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@...
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe <at> googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

Robert Moore | 22 May 16:54 2012
Picon

Re: Is it possible to convert ImageResource to ImageElement?

Christopher <christopher.oestlund <at> ...> writes:

> 
> From my experiments, that last example wont work.
> 
> final Image image = new Image(mapResources.map());
> 
> That line makes GWT try to use a sprite sheet, making the <img> use
> style="background:" to display the image. Such an Image won't be shown
> when drawn on the canvas. I have to force gwt to use the src="" by
> doing:
> 
> final Image image = new Image(mapResources.map().getURL());
> 
> I guess the proper solution would be to have GWT export the sprite
> sheets it generates, and then use the proper canvas draw method to
> draw that portion of the sheet.
> 

Thanks for the suggestion, Christopher.  I was having the same issue, but got it 
working after reading your suggestion.  I might offer a slight improvement, 
which is to avoid the deprecated getURL() method in favor of the getSafeUri() 
call instead.

final Image image = new Image(mapResources.map().getSafeUri());

This worked perfectly for me.

Thanks,
Rob

--

-- 
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@...
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.


Gmane