Drawing Signature Onto Canvas (Windows Touchscreen)

I have been a Visual FoxPro programmer for many years, and new to Xojo and impressed with the product. We’re looking to migrate our VFP projects to Xojo over the next few years…a massive undertaking.

Question about drawing and canvases. I desire to create a simple area on a window to capture a signature on a Windows touchscreen device (i.e. Surface Tablet), or perhaps down the road on an iOS device. Can someone tell me how to accomplish this? I saw that MBS has a web plugin, but I want someone to be able to draw their signature on a Windows device, in a desktop app.

Thanks!

Take a look at File>New Project>Examples>Graphics and Multimedia>CanvasAreas and see if it helps?

Let us know if you have any more questions :slight_smile:

Julian - thank you for your reply! This is more or less what I’m looking for, however there is an issue with using that canvas control as a signature block. The more rapidly I drag my mouse, the more degraded the image appears. If I drag slowly, the drawing appears more fluid. I can’t seem to attach a screenshot of what I’m talking about to this thread :frowning:

Thanks!

If you go to https://imgbb.com/ then drop the image there, change the drop down to BBLinked then post the code here, it should work.

Here is is…thanks!

I just looked at that code… and must say… it is terrible for this type of situation.
give me an hour or two, and I think I can come up with something much better

ok… perhaps just a few minutes… .:slight_smile:

* add this property to the window

Public Property points(-1) as pair

* change mouseDOWN to this

points.append x:y
Self.Invalidate
Return True

change mouseDRAG to this

points.append x:y
Self.Invalidate

change PAINT to this

Dim i As Integer
If points.Ubound<1 Then Return
g.penwidth=5
g.ForeColor=Color.blue
For i=0 To points.Ubound-1
g.drawline points(i).Left,points(i).Right,points(i+1).Left,points(i+1).Right
Next i

Super smooth, no voids

Cheers Dave. As Dave’s pointing out, you need to interpolate a line between the samples as the sample/draw rate isn’t fast enough to keep up with the motion of the pen so you need to fill the gaps in between. Straight lines as Dave’s done here are nice and quick and are probably ample for your situation, if you want hyper smooth lines, break out your bezier curve formula :wink:

Dave - thank you so much! Just one minor issue…maybe has to do with being on the Windows platform. While I’m drawing, nothing appears until I let go of the mouse button. Very smooth lines, but I can’t see what I’m drawing until I let go of the mouse.

Julian - thank you for pointing me in the right direction. I’m more of a database guy with little expertise in the realm of graphic design, so bezier curve formulas would require some study :slight_smile:

try replacing INVALIDATE with REFRESH and see it that works… INVALIDATE is prefered (and works on macOS)… but WIndows may wait until other events are cleared first.

Dave - you are amazing! How long did it take you to become this proficient in Xojo? I’m obviously in the learning phase and came from the world of FoxPro where I feel quite comfortable confident in my programming skills. Will you be at DevCon in Miami?

There is just ONE more “quirk” with the code. When you release the mouse button and go somewhere else on the canvas to draw, a connecting line is made between the two drawings. Is there a way to circumvent this behaviour?

I genuinely appreciate your guidance on this issue.

[quote=417981:@Aaron Schacht]Dave - you are amazing! How long did it take you to become this proficient in Xojo? I’m obviously in the learning phase and came from the world of FoxPro where I feel quite comfortable confident in my programming skills. Will you be at DevCon in Miami?

There is just ONE more “quirk” with the code. When you release the mouse button and go somewhere else on the canvas to draw, a connecting line is made between the two drawings. Is there a way to circumvent this behaviour?

I genuinely appreciate your guidance on this issue.

[/quote]
I will not be at DevCon or any other conference as I am on limited income and cannot afford such adventures :slight_smile:

The code would have to be modified to know when the mouse was “lifted”, but at the same time it would have to know when you were starting and/or finishing a signature as well. This can all be done, I just quickly dashed out a solution that matched what the original program attempted to do

You need to notice that the mouse has been lifted in the MOUSEUP event.

When another MOUSEDOWN occurs, you need a new set of POINTS()
That suggests an array or a dictionary of Points() arrays.
This may be a stretch for you at the moment

OR (simpler)

You notice the mouse has gone up in MOUSEUP, so you store a ‘magic point’ which is (for example) -1000,-1000

Then your PAINT event becomes:

[code]Dim i As Integer
If points.Ubound<1 Then Return
g.penwidth=5
g.ForeColor=Color.blue
For i=0 To points.Ubound-1
try
if (points(i+1).left = -1000 and points(i+1).right = -1000 ) or (points(i).left = -1000 and points(i).right = -1000 ) then
//dont draw to or from the special point
else
g.drawline points(i).Left,points(i).Right,points(i+1).Left,points(i+1).Right
end if
catch
//just in case out of range
end try

Next i[/code]

Not a NEW set of points, that would cause the first part of the signature to vanish.

I would go with the “magic” point method. but you still need to know when you have started a totally NEW signature

Aaron… this peaked my interest (yeah I’m bored)… I’ll put together a whole demo based on what I posted originally… give me a bit

Dave, Jeff, and Julian - thank you for your help! I’m grateful, as this will now help me create a signature area on a window with a content form. Ultimately, I’ll need to assemble this consent form with the signature graphic and produce a PDF. This feature will also be very useful for a number of my other database projects.

Dave, I’m very interested to see your demo!

That didn’t take too long :slight_smile:

Here it is… should work just find on macOS or Windows

www.rdS.com/signature.xojo_xml_project.zip

The CLEAR button erases the current signature so you can start over
The ACCEPT button transfers the signature to a PICTURE image (imageSignature) so it can be used else where. The image is cropped to the minimum size for the signature to fit.

When “writing” the signature is BLUE, when “accepted” it turns BLACK (so you know its been accepted and is stored in the image)

It uses a modified version of what Jeff posted.

FYI… This routine could be coupled with my gPDF class to produce you final PDF document

Dave - I love it! This works perfectly. I just purchased your gPDF class so I can pull all of this together. Thanks again. I’m sure many other developers will benefit from this solution. Maybe you should refine and sell this signature pad, make it work on iOS and web, etc.

[quote=418000:@Dave S]That didn’t take too long :slight_smile:

Here it is… should work just find on macOS or Windows

www.rdS.com/signature.xojo_xml_project.zip

[/quote]

That is actually terrible code with terrible looking and terrible performance. It has a LOT of flicker and uses a LOT of procesing. As this is mostly used in portable devices, it will made a noticeable decrease in the battery life.

Under any circumstances is a good idea to redraw ALL of the image just to ad a line of a few pixels. You shoud use caching and/or invalidating ONLY the modifyed part of the picture.

Exactly, this approach is using 100% of the one core running the app. That is terrible performance for a simple task like this. Some people use 5 or 6 seconds, so, 100% core use for 4 seconds each it is a lot of wasted processing time and battery life.

The fact that in mac a bad aproeach looks ok, doesnt means that it is a good solution, nor taht it will work ok in other OS.

shure:

My coment whas for Aaron Schacht, to let him know the issues and propose some improvements. Dont take it personal.