Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 6 of 6 total
Thread CanvasElement Drawimage in EWB2
Tue, Nov 3 2015 1:00 PMPermanent Link

R&D team @ Environment Canada

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?
Tue, Nov 3 2015 2:18 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

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
Tue, Nov 3 2015 2:55 PMPermanent Link

R&D team @ Environment Canada

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.
Tue, Nov 3 2015 10:01 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

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
Wed, Nov 4 2015 3:20 PMPermanent Link

R&D team @ Environment Canada

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
Wed, Nov 4 2015 4:00 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@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. Smile

Tim Young
Elevate Software
www.elevatesoft.com
Image