capture Signature

[Gordon]

Hi,
I need to capture a persons signature with their finger..
anyone else doing this? What is the best way? Can you use a TPaintBox to do this?

[Diego]

Hi Gordon:

Have a look at this:

https://www.youtube.com/watch?v=TnlgvN0RBiM

Greetings

[Gordon]

I saw that. but dont think it will work with DPF.. cuz of how the paint is disabled..
but I did look at the painter demo.. that shows how to draw on a view.. thats perfect.. but Is there a way to save the view to a bitmap or JPG? then load it etc to show an old signature?

thats what I need to figure out now..

Gordon

[Diego]

Sure Gordon:

Just use the makeScreenshot function.

Greetings

[Gordon]

can I take the contents of a an image file, and put it on my view? If anyone has done this, could you give me a small sample of code? Im not clear as to which functions to use to get the view to image, save to a file, then restore it when I want to look at it from a file..

[Diego]

Hi Gordon:

If you want to save the content of an UIView into a Image:

DPFImage1.Width:=UIView1.Width;
DPFImage1.Height:=UIView1.Height;
DPFImage1.SetImage(MakeScreenShot(UIView1.GetUIView));
DPFImage1.SaveToFile(GetHomePath + PathDelim + 'tmp' + PathDelim + 'MyImage.png');

To load that file you saved previously:

DPFImage1.LoadFromFile(GetHomePath + PathDelim + 'tmp' + PathDelim + 'MyImage.png');

Greetings

[Gordon]

Thanks Diego.. What Im really trying to do is modify the paint demo, add 2 buttons.. One to load from file.. another to save to file..

The idea of the first part of the code is fine.. it takes a snap shot of the view, stores it into the image, then saves to file.. Thats ok I think.. but in the second part of code, I need the contents of the file to be stored into the image, THEN copied to the view..Am I right? How can I get the contents of an image to be copied back to a view?

[Gordon]

Can anyone help me with the last part of the code? Im dying :)

[Diego]

Sorry for the delay Gordon:

Well, so you have an DPFUIView and you want to load an image there, isn´t ?

1st. Option:

You can use the DrawRect event of the DPFUIView:

procedure TFDrawingBitMap.DPFUIView1DrawRect( Sender: TObject; Rect: DPFNSRect );
var
  BMP      : TBitMap;
  Img      : UIImage;
  imageRect: CGRect;
begin
  BMP := TBitMap.Create( Round( Rect.size.width ), Round( Rect.size.height ) );
  BMP.LoadFromFile(GetHomePath + PathDelim + 'tmp' + PathDelim + 'MyImage.png');
  Img       := BitmapToUIImage( Bmp );
  imageRect := CGRectMake( 0, 0, Rect.size.width, Rect.size.height );
  Img.drawInRect( imageRect );
  BMP.Free;
end;

2nd. Option:

If you have the image loaded in a DPFImageView1 and you want to draw it into a DPFUIview, you can use this code:

DPFImageView1.Position.Y:=0;
DPFImageView1.Position.X:=0;
DPFImageView1.Width:=DPFUIView1.Width;
DPFImageView1.Height:=DPFUIView1.Height;
DPFUIView1.AddSubView(DPFImageView1,DPFUIView1);

Greetings

[Gordon]

Second option is what Im after.. The AddSubView is the idea I think.. Thank you so so much..

I tried the following code as a test.. Cant seem to make it work..I must be missing something..

// Save the image after drawing..
DPFImageView1.Width :=DPFUIView1.Width;
DPFImageView1.Height:=DPFUIView1.Height;
DPFImageView1.SetImage(MakeScreenShot(DPFUIView1.GetUIView));
DPFImageView1.SaveToFile(GetHomePath + PathDelim + 'tmp' + PathDelim + 'MyImage.png');

// clear out the view..
path := CGPathCreateMutable( );
DPFUIView1.GetUIView.setNeedsDisplay;

// Go retrieve it, and reload the view..
DPFImageView1.LoadFromFile(GetHomePath + PathDelim + 'tmp' + PathDelim + 'MyImage.png');
DPFUIView1.AddSubView(DPFImageView1,DPFUIView1);

[Diego]

Try with the position.x and position.y=0 before adding the subview.

[Gordon]

I tried this.. still not working.. im sure Im doing something stupid.

// Save the image after drawing..
DPFImageView1.Width :=DPFUIView1.Width;
DPFImageView1.Height:=DPFUIView1.Height;
DPFImageView1.SetImage(MakeScreenShot(DPFUIView1.GetUIView));
DPFImageView1.SaveToFile(GetHomePath + PathDelim + 'tmp' + PathDelim + 'MyImage.png');

// clear out the view..
path := CGPathCreateMutable( );
DPFUIView1.GetUIView.setNeedsDisplay;

// Go retrieve it, and reload the view..
DPFImageView1.LoadFromFile(GetHomePath + PathDelim + 'tmp' + PathDelim + 'MyImage.png');
DPFUIView1.Position.X:=0;
DPFUIView1.Position.Y:=0;
DPFUIView1.AddSubView(DPFImageView1,DPFUIView1);

[Diego]

That is pretty weird... that code is working OK on my computer.

Try with the sample I have attached.

Greetings

[Gordon]

that works fine.. But I cant get it to save and restore from a file etc..

Im wondering if the file isnt being saved and or restored.. I cant verify that the file is there..

When you have a minute, could you look at babaks paint demo? I just want to add 2 buttons to it.. One to save to file.. another to restore from file..

Im wondering if it has something to do with the image not being saved...

[Diego]

Hi Gordon:

Have a look to the attached file.

I think that is what you need.

Greetings

[Gordon]

Thank you so much!

Almost perfect.. But after you restore from a file.. You cant draw anymore.. Any idea why?

[Diego]

Of course. You are trying to draw into the image directly, and the events of the UIView are never triggered.

Take a look at this new attachment. I used the DPFImage as Background.

[Gordon]

This works almost perfect.. Thanks so much for your patience..
The only issue is, that everytime you hit save, it saves the new image with the old image..and adds them together..Cant figure out why it would do that.. the code looks right to me..Any idea?

I guess Im confused..
Once you copy the image back the view, you arent using the image object anymore, are you? cant you resume drawing?
Are you actually imbedding the image into the view?
Man, I wish I understood IOS better..I get so lost.

[Diego]

Hi Gordon:

In your previous post you said: "Almost perfect.. But after you restore from a file.. You cant draw anymore..".

So I understood that you wanted to load a previous file and modify it.

If you don´t want that, you do not need my latest attachment, but the previous one. It is true that you can not draw over the image after loading it, but if you press the clear button, you will be able to draw again.

In the latest attachment I do not embed the image in the view, I just put it in the background (no subviews). In my previous attachment, yes, the image was embeded in the UIView.

[Gordon]

Maybe its as designed..but if you..
1. draw something
2. save it..
3. clear it ..
4. draw something else.
5. Save it

1. Now load it.. It has both images in it..

Im trying to understand how it works..
Thanks Diego!

[Gordon]

Diego, My signature routine works fine.. thanks for the guidance.
Im stuck on one thing..
My app is forced in to portrait when the main for loads using..

Application.FormFactor.Orientations := [TScreenOrientation.soPortrait];

But, When Im asking for a signature.. i want the phone to only work in Landscape (For that frame only)

Ive tried to use..

Application.FormFactor.Orientations := [TScreenOrientation.soLandscape];

Right before I load the signature frame..but that gives weird results..

Or, should I just draw my portrait to be sideways, to look like landscrape.. In that case, I just need to turn my buttons.

Can you give me an idea?

Thank you

Gordon

[Diego]

Hi Gordon:

Good to know you got the signing stuff to work.

About your question:

What do you mean with "weird results"? If you mean that the positions are not correctly displayed and you have already been playing with the anchors settings, maybe you can use the event of the Form: OnResize (which is triggered when you change your device orientation) and there you can try to position correctly your signature controls by code.

On the other hand, the other solution of drawing your buttons in landscape mode directly sounds good to me, but in that case, it is possible that you have to use images for the captions to show them "vertically".

Greetings

[Gordon]

I wondered about that. I guess you cant rotate a button.. so you make an image instead?

[Diego]

I would do that... create a vertical image and assign it to the DPFButton.