Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 10 of 12 total
Thread Displaying a client-side image
Tue, Feb 4 2020 9:30 PMPermanent Link

David Martin

I would like to let a user open an image file located locally (on the client side) and have that imaged displayed. It is easy enough to let the user select a file using TFileComboBox. But how do you then display the image? Note that nothing is being sent to the server.

It's pretty easy to do with javascript: http://jsfiddle.net/Bwj2D/11/

Can this be done using EWB2? Thanks for any guidance.

David Martin
Tue, Feb 4 2020 10:30 PMPermanent Link

David Martin

I will answer my own question. Just add a TImage and then set the TImage.URL property to the name of the file. For example:

procedure TMainForm.FileComboBoxChange(Sender: TObject);
begin
   Image1.URL:=FileComboBox.Text;
end;

That was a lot easier than I thought it would be.

David Martin
Tue, Feb 4 2020 11:37 PMPermanent Link

erickengelke

# David Martin wrote:
#
# I will answer my own question. Just add a TImage and then set the TImage.URL property to the name of the file. #For example:
#
#procedure TMainForm.FileComboBoxChange(Sender: TObject);
#begin
#   Image1.URL:=FileComboBox.Text;
#end;
#
#That was a lot easier than I thought it would be.


Maybe that's sufficient for your current needs, but that's not what the example did.  Sometimes you will want to process the data, maybe edit the image.  That's why they used FileReader, which lets your javascript edit and interpret the data.

The rough code to use FileReader is a bit complicated because EWB doesn't define FileReader so it must be manually entered.


unit Unit1;

interface

uses WebCore, WebDom, WebUI, WebForms, WebCtrls, WebIcons, WebLabels, WebEdits, WebBrwsr;

type
   external TReaderElement2 = class
   public
      property result : string read write ;
  end;

   external TReaderElement = class
   public
      property target : TReaderElement2 read;
   end;

  TReaderFN = procedure( e : TReaderElement ) of object;

  external TFileReader = class
  public
     property onload : TReaderFN read write;
     procedure readAsDataURL( file : string );
  end;

  external TFileEdit1 = class (TDomElement )
  public
     property files : array of variant read;
  end;

  TForm1 = class(TForm)
     FileComboBox1: TFileComboBox;
     Image1: TImage;
     procedure FileComboBox1Change(Sender: TObject);
     procedure Form1Show(Sender: TObject);
  private
     { Private declarations }                  
     Procedure myonload( e : TReaderElement );
  public
     { Public declarations }
  end;


var
  Form1: TForm1;

implementation


  
var
 external reader : TFileReader;

procedure TForm1.myonload( e : TReaderELement );
begin                          
 showmessage(  e.target.result );
 image1.url := e.target.result;
end;
    


procedure TForm1.FileComboBox1Change(Sender: TObject);
var
 file : variant;
 fe : TFileEdit1;
begin                 
  reader := CreateObject('new FileReader()');
  reader.onload := myonload;

  fe := TFileEdit1(window.document.getElementById('myid').childNodes[1]);
  file := fe.files[0];
  reader.readAsDataURL( file );
end;

procedure TForm1.Form1Show(Sender: TObject);
begin
  FileComboBox1.ClientID := 'myid';
end;

end.
EWB Programming Books and Component Library
http://www.erickengelke.com
Wed, Feb 5 2020 7:52 AMPermanent Link

David Martin

# David Martin wrote:
#
#That was a lot easier than I thought it would be.

I spoke too soon. What I wrote above works only from within the IDE. Thanks Erick for your potential solution. But when I see code like you gave, I think that I might as well learn javascript. And then what is the point of EWB?

David Martin
Wed, Feb 5 2020 9:11 AMPermanent Link

erickengelke

David Martin wrote:

# David Martin wrote:
#
#That was a lot easier than I thought it would be.

> I spoke too soon. What I wrote above works only from within the IDE. Th>anks Erick for your potential solution. But >when I see code like you gave, I think that I might as well learn javascript. And then what is the point of EWB?

Javascript is highly error prone, slight spelling mistakes cause yourprogram to fail at runtime.  Pascal, being highly typed, tends to fail convneiently at compile time, rather than when your customer is trying to use it.

There is the gray area between, such as my code above, which interfaces with JavaScript.  But with EWB i can make huge impressive projects with high reliability that would be impossible for a much larger team in just javascript.  It scales up beautifully, whereas JavaScript is almost like coding in assembler as far as scalability go.

Erick

.
EWB Programming Books and Component Library
http://www.erickengelke.com
Wed, Feb 5 2020 2:30 PMPermanent Link

Raul

Globestar Systems

Team Elevate Team Elevate

On 2/5/2020 7:52 AM, David Martin wrote:
> I spoke too soon. What I wrote above works only from within the IDE. Thanks Erick for your potential solution. But when I see code like you gave, I think that I might as well learn javascript. And then what is the point of EWB?

Just to add to what Erick said - the JS stuff is only needed until EWB
adds framework support for FileReader etc natively at which point lot of
this becomes super simple in EWB again (likley 1 to few liners)

Raul
Fri, Feb 7 2020 8:53 AMPermanent Link

Matthew Jones

Raul wrote:

> Just to add to what Erick said

And to add to both, another big benefit is the component model and things like the reactive layout. I can't understand why there isn't a big framework as good as this. They all seem to be far too complicated.

--

Matthew Jones
Sat, Feb 8 2020 8:24 AMPermanent Link

erickengelke

"Matthew Jones" wrote:

Raul wrote:

>And to add to both, another big benefit is the component model and things like the reactive layout. I can't understand >why there isn't a big framework as good as this. They all seem to be far too complicated.

Absolutely.  

Admittedly, there is a learning curve for reactive layout, but it's so great once you wrap your head around it.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
Mon, Feb 10 2020 4:20 AMPermanent Link

Matthew Jones

erickengelke wrote:

> but it's so great once you wrap your head around it.

Having mastered it, I want it on every other UI system... When I see the other "Delphi for Web" systems still promoting pixel perfect forms, I cringe. Completely misses the web's benefits.

--

Matthew Jones
Wed, Feb 19 2020 1:23 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

David,

<< I spoke too soon. What I wrote above works only from within the IDE. Thanks Erick for your potential solution. But when I see code like you gave, I think that I might as well learn javascript. And then what is the point of EWB?  >>

This is just one area that isn't implemented yet due to the baseline IE9 requirement in EWB2, and IE9 doesn't support FileReader and the related functionality.  EWB 3 will move that baseline up to the MS Edge browsers and beyond, so it will be able to eventually handle all of this in the nice, neat way that you expect it to.

Tim Young
Elevate Software
www.elevatesoft.com
Page 1 of 2Next Page
Jump to Page:  1 2
Image