Hello everyone tis is Steven Laroche (working on EWB projects under Bruno's supervision).  I have been attempting to convert one of our larger projects to EWB2 and I have had trouble converting the drawimage routines.

In EWB1 I used TCanvasImage to load up the data to be used in the canvas drawimage command.

  imgCloud01 := TCanvasImage.create;
  imgCloud02 := TCanvasImage.create;
  imgCloud03 := TCanvasImage.create;

  imgCloud01.name := 'images/clouds/wob4.png';
  imgCloud02.name := 'images/clouds/wob2.png';
  imgCloud03.name := 'images/clouds/bow3.png';

Later in the code I would use the created images

           if DPD < 1.5 then canvasImage := frmDataMain.imgCloud03
           else if DPD < 3 then canvasImage := frmDataMain.imgCloud02
           else canvasImage := frmDataMain.imgCloud01;

           .....

           pntMain.canvas.DrawImage(canvasImage, left + 1, topY, w - 2, h, left + 1, topY, w - 2, h);

I am trying to achieve a similiar effect in EWB2 using TImageElements

  imgCloud01 := TImageElement.create;
  imgCloud02 := TImageElement.create;
  imgCloud03 := TImageElement.create;

  imgCloud01.url := 'images/clouds/wob4.png';
  imgCloud02.url := 'images/clouds/wob2.png';
  imgCloud03.url := 'images/clouds/bow3.png';

This does not seem to work as I get a error message (TypeError: Argument 1 of canvasRenderingContect2D.drawimage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.)

The images do not seem to be loading, I tried adding functions for all 3 events to see what was happening.

  imgCloud01.onError := ImageElementError;
  imgCloud01.onUnload := ImageElementUnload;
  imgCloud01.onLoad := ImageElementOnLoad;

This leads to the onUnload event triggering.  If I add the line   

imgCloud01.refresh   

to the code I see the onUnload event triggering 2 more times but the onError and onLoad events do not ever seem to trigger.

Could I get an example of how to load an image and use that to draw with the canvas drawimage command?

Steven,

<< I am trying to achieve a similiar effect in EWB2 using TImageElements >>

You need to change your TImageElement.Create calls so that they look like this instead:

  imgCloud01 := TImageElement.create('',nil,HTML_TAG_IMG);
  imgCloud02 := TImageElement.create('',nil,HTML_TAG_IMG);
  imgCloud03 := TImageElement.create('',nil,HTML_TAG_IMG);

That will fix things.  EWB needs the 3rd tag parameter to know which type of underlying DOM element to create.  Without it, it will create a simple DIV element, which isn't what you want.

I know this all seems rather unnecessary, but it is because the EWB UI element class is not always exactly a one-to-one with the DOM element type.

Tim Young
Elevate Software
www.elevatesoft.com

Tim Young [Elevate Software] wrote:

Steven,

<< I am trying to achieve a similiar effect in EWB2 using TImageElements >>

You need to change your TImageElement.Create calls so that they look like this instead:

  imgCloud01 := TImageElement.create('',nil,HTML_TAG_IMG);
  imgCloud02 := TImageElement.create('',nil,HTML_TAG_IMG);
  imgCloud03 := TImageElement.create('',nil,HTML_TAG_IMG);

That will fix things.  EWB needs the 3rd tag parameter to know which type of underlying DOM element to create.  Without it, it will create a simple DIV element, which isn't what you want.

I know this all seems rather unnecessary, but it is because the EWB UI element class is not always exactly a one-to-one with the DOM element type.

Tim Young
Elevate Software
www.elevatesoft.com




I now see clouds again, that worked, much appreciated.  Oddly enough I still don't seem to see an onLoad event being triggered.  This isn't causing me a problem though as things are functioning as expected.

Steven,

< I now see clouds again, that worked, much appreciated.  Oddly enough I still don't seem to see an onLoad event being triggered.  This isn't causing me a problem though as things are functioning as expected. >>

Hmm, I'm not seeing that here.  I'm trying it like this:

uses WebHTTP;

procedure TForm1.ImageElementLoad(AElement: TWebElement);
begin
  LogOutput('Loaded');
end;

procedure TForm1.Button12Click(Sender: TObject);
var
  imgCloud01:  TImageElement;
begin
  imgCloud01 := TImageElement.create('',nil,HTML_TAG_IMG);
  imgCloud01.OnLoad:=ImageElementLoad;
  imgCloud01.URL:='testimage.png';
end;

Tim Young
Elevate Software
www.elevatesoft.com

thanks Tim.. just to put closure on this, we do confirm that the 'onload' is firing and can see it in our debug logging mechanism

regards.. Bruno


Tim Young [Elevate Software] wrote:

Steven,

< I now see clouds again, that worked, much appreciated.  Oddly enough I still don't seem to see an onLoad event being triggered.  This isn't causing me a problem though as things are functioning as expected. >>

Hmm, I'm not seeing that here.  I'm trying it like this:

uses WebHTTP;

procedure TForm1.ImageElementLoad(AElement: TWebElement);
begin
  LogOutput('Loaded');
end;

procedure TForm1.Button12Click(Sender: TObject);
var
  imgCloud01:  TImageElement;
begin
  imgCloud01 := TImageElement.create('',nil,HTML_TAG_IMG);
  imgCloud01.OnLoad:=ImageElementLoad;
  imgCloud01.URL:='testimage.png';
end;

Tim Young
Elevate Software
www.elevatesoft.com

Bruno,

<<thanks Tim.. just to put closure on this, we do confirm that the 'onload' is firing and can see it in our debug logging mechanism >>

Thanks for the update.

Tim Young
Elevate Software
www.elevatesoft.com