Drawing Signature Onto Canvas (Windows Touchscreen)

  1. 6 months ago

    Aaron S

    Oct 31 West Palm Beach, FL

    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!

    That didn't take too long :)

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

    www.rdsisemore.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

  2. Julian S

    Oct 31 Pre-Release Testers, Xojo Pro UK
    Edited 6 months ago

    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 :)

  3. 4 months ago

    Aaron S

    Dec 13 West Palm Beach, FL

    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 :(

    Thanks!

  4. Julian S

    Dec 13 Pre-Release Testers, Xojo Pro UK

    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.

  5. Aaron S

    Dec 13 West Palm Beach, FL

    Here is is...thanks!

    -image-

  6. Dave S

    Dec 13 San Diego, California USA

    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

  7. Dave S

    Dec 13 San Diego, California USA
    Edited 4 months ago

    ok... perhaps just a few minutes.. .:)

    * 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

  8. Julian S

    Dec 13 Pre-Release Testers, Xojo Pro UK
    Edited 4 months ago

    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 ;)

  9. Aaron S

    Dec 13 West Palm Beach, FL

    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 :)

  10. Dave S

    Dec 13 San Diego, California USA

    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.

  11. Aaron S

    Dec 14 West Palm Beach, FL

    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.

    -image-

  12. Dave S

    Dec 14 San Diego, California USA

    @Aaron S 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.

    -image-

    I will not be at DevCon or any other conference as I am on limited income and cannot afford such adventures :)

    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

  13. Jeff T

    Dec 14 Pre-Release Testers Midlands of England, Europe

    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:

    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
  14. Dave S

    Dec 14 San Diego, California USA

    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

  15. Dave S

    Dec 14 San Diego, California USA

    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

  16. Aaron S

    Dec 14 West Palm Beach, FL

    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!

  17. Dave S

    Dec 14 Answer San Diego, California USA
    Edited 4 months ago

    That didn't take too long :)

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

    www.rdsisemore.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

  18. Aaron S

    Dec 14 West Palm Beach, FL

    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.

  19. Newer ›

or Sign Up to reply!