Scaling Signature

[mrwrighty]

We have an app that can work on Tablet and Mobile Phone. The Tablet signature pad is bigger and easier to use for some but this results in a bigger signature than the mobile phone users so when the signature is regenerated, it is cropped. Is there a way to scale the regenerated signature with a simple multiplier either up or down. I'm using this code in asp.net. At the moment the only way I can see is to create a larger canvas, but this means the smaller signatures will be lost on the bigger area.

[thomasjbradley]

Yeah, you can just multiply all the coordinates in the JSON before regenerating. I don't have a ASP.NET code example of how to do that, but you can check the PHP one here: https://github.com/thomasjbradley/signature-to-image/blob/master/signature-to-image.php#L43

[mrwrighty]

Hi Thomas, thanks for your reply. That appears quite cumbersome having to read in the array do the maths then rewrite the array. I think thats the only way I can do it.

[madmanpierre]

We had the same issue, and we solved it the suggested way. It really is trivial, not cumbersome. It is a 'ui' issue, so it means knowledge of the UI and how 'your' UI works in conjunction with how you choose to save the data. So you write a simple function that is passed the Signature size (for display) and each platform passes the size it wants to show it at. And depending on how you are storing it, you may want to pass it through to standardize it before saving it. To my mind this is a end application choice - anything Thomas would decide would be wrong (unless he happened to pick exactly MY way :), then it would be correct :) ) For example he could include a simplistic function like you are asking for in the library that does the conversion using a multiplier - but that wouldn't help me, because for my needs, I want to pass in the size of the display and have the function figure out the muliplier. So if he included the simple function - I would want it to be done in a way to remove it so it keeps the library as small as possible. Anyway, that's my opinion having used signaturePad in my apps for a couple years now, and it took about as long to write the function as it did to write this reply! HTH. (FWIW, we wrote the function we wanted, and for saving we included the compression algorithm, and we added into each signature the version # so that if we decide to enhance/change the format later we can with backwards compatibility)

[mrwrighty]

Ok thanks for the info but is beyond me I think my ui is an asp/asp.net page displaying the signature that is stored as a Jason array. I'm looking at using pinch to divide the vectors by 2 to see if that helps

[madmanpierre]

info ... is beyond me You can safely ignore anything between ()'s in this reply - it is just extra explanation. The JSON is essentially just an array of points x & y values. One (of many) solutions: When you store the array, store it at a specified size, probably your biggest (it doesn't materially change the size of the data stored by storing it at the biggest - yes, 51 becomes 102 so it is technically slightly larger stored as json - but if you use the compression, it will not likely be bigger.) Then, on the page that delivers to your tablet, just pass the array. On your page that delivers to the cell phone, loop through the array and divide x/2 and y/2. If the same page delivers to both devices, you are already handling having 2 different size canvases, so likely in the same spot, you'll do the divide by 2. (Depending on how your code is written, you may have to write this code in a different place, but hopefully you can use the same determination method, so you run your dividing function only on the cell phone.) Then, (assuming you are following my solution above) when you get a NEW signature, if it is the tablet, just store it the way you got it back, if it comes from the cell phone, multiply x_2 and y_2 before storing it. (If the 2 devices are only samples, or if you make a distinction between different cell phone screen sizes - we do - then you'll have to just modify the above to handle all your cases, or make it more formula based.) HTH.

[mrwrighty]

We collect the signature from all mobile devices ios and android successfully it's the display on the webpage that needs adjusting and its the looping through the Jain array and rebuilding it to use the regenerate function of signature pad its that that I'm struggling with in asp

[mrwrighty]

Jain should be json typo on iPhone

[madmanpierre]

np, I figured that Jain was JSON! So, to try to help you:

1. Do you have a point in your code after you have the JSON signature but where you know what device is going to be doing the display when it receives it? So that you know what factor you want to use?
2. What language are you programming in at that/those point(s). Are you using C# for example?
3. At that point, are you able to read the JSON object as a native object in the language?

[mrwrighty]

Thanks for your help in this

The json array is stored in the database as written by the mobile device. I read the column into a hidden input field id=sig on the form holding the signature pad I then regenerate the signature using Thomases JavaScript to regenerate the signature using sig.value. I need to edit the array before it is stored in the hidden field to adjust the scale

[madmanpierre]

k, that is very similar to what we do, though I don't know what technologies you are using at each step. Can your function that passes the JSON object do the conversion after reading it from the database but before creating the form it is attached to? If not, why not have your call that is going to call signaturePad to display the signature edit it in javascript before passing it? In my case, since we want to minimize data transfer over the internet, we send a compressed version, so in javascript, before we call signaturePad to display it, we do all our manipulation, which in your case would JUST be to edit the JSON array. So it sounds like all you have to do is write a very simple function to call just before you call signaturePad to display it, and have that javascript function edit the array. (go through each array element and set x = x/2; y=y/2;) (All this is assuming you want it to be 1/2 the size stored in the db.)

If that is the case - what is the point at which you are having difficulty editing the array? (For example, and I am not being sarcastic here, just trying to understand: Is the problem you don't know javascript?)

[mrwrighty]

No sarcasm at all thanks for your help. It is the routine to resize the vectors or the lx ly mx and my variables I can't work out how to step through the json in asp.net vb and rewrite the json array with the modified vectors

[mrwrighty]

Sorry wrongly closed this thread.

[madmanpierre]

I haven't worked in Visual Basic since the early 1990's. So I do not remember it/syntax very well. Hopefully someone else can jump in here and tell you if there is an easy way to convert the JSON so that you can edit the array of signature pad line segments. If not - could you do it at the client side using JavaScript - since obviously JavaScript can easily read JSON. Here is the psuedocode of what you need: factor = 0.5; // the conversion factor, 0.5 will make it half the height and width, 2 will make it double. sigSegs = // however you get the array for I = 1 to sigSegs.length // I think VB is 1 based arrays, JavaScript would be 0 based { lx = round(lx_factor); // round to keep them integers ly = round(ly_factor); mx = round(mx_factor); my = round(my_factor); }

[madmanpierre]

just did a couple quick bing searches, looks like vb is also 0 based for arrays

For i = 0 To (sigSegs.length - 1) sigSegs.lx = round(sigSegs.lx,0) '... Next

[mrwrighty]

Hey thanks for the update madmanpierre. I'm getting the idea but at the moment I've got a complete blank as to how to process each vector and then rewrite the Json array so that I can use it. I'm looking for a JSon parser I can use to read in the vectors, but it then having to recreate the array with the new values that is stumping me at the moment.

[madmanpierre]

k. I'll have to leave that for someone else since my VB is decades outdated. But if you can't get it working, as I said before, consider doing it on the JS side, then there is no recreating required - just edit it in JS just before you pass it to the signaturePad functions. good luck.

[mrwrighty]

thanks for your assistance on this, I will stick with it and let you know how I do it in the end. (I hope)

[mrwrighty]

Heres a weird one, I was just experimenting so decided to increase the size of the signature pad with a view to creating more room for the larger signature, but the signature has scaled in the same proportions even though I haven't done any with with the vectors.

The SigPad below is 400x200, the signed from my post above is 209x132, why is this happening.

[thomasjbradley]

Did you scale the canvas with CSS or with the width/height attributes? Scaling with CSS will cause that to happen.

[mrwrighty]

ok, yes just realised only in CSS not with Width/height, just added them and got a better result. I would still prefer to use the scaled vectors, but struggling for a solution as I cannot work out how to read in the JSON, edit the vectors, then write out the JSON to regenerate the signature.

[mrwrighty]

I have found an interesting fix I think. I resized the SigPad in CSS and added the Canvas Width of 600 and Height of 300 which I had missed off and got a big SigPad with all of the signature showing but it didn't look good in the overall layout of the page, so I have reset the CSS to my original sizes at 203 x 132, but left the Canvas size at 600x300 which is big enough to enclose the signature and the SigPad has resized the whole signature to fit in my original size of 203 x 132 without me doing any scaling of vectors.

[madmanpierre]

:)

From: mrwrighty [mailto:notifications@github.com] Sent: Friday, March 6, 2015 9:34 AM To: thomasjbradley/signature-pad Cc: peter horwood aka Madman Pierre Subject: Re: [signature-pad] Scaling Signature (#146)

I have found an interesting fix I think. I resized the SigPad in CSS and added the Canvas Width and Height which I had missed off and got a nick big SigPad with all of the signature showing but it didn't look good in the overall layout of the page, so I have reset the CSS to my original sizes at 203 x 132, but left the Canvas size at 600x300 which is big enough to enclose the signature and the SigPad has resized the whole signature to fit in my original size of 203 x 132 without me doing any scaling of vectors.

https://cloud.githubusercontent.com/assets/6585298/6529128/8904d45c-c41e-11e4-8d26-4187b1d1a584.JPG

— Reply to this email directly or view it on GitHub https://github.com/thomasjbradley/signature-pad/issues/146#issuecomment-77589035 . https://github.com/notifications/beacon/AC7G0_DGR9xQKzuPWI452Z56p2kPK-JDks5nyc5xgaJpZM4DpRnj.gif

[thomasjbradley]

@mrwrighty Nice work around; I hadn't actually thought of doing it that way.

[heneryville]

@thomasjbradley Would you accept a pull request that offers a normalize option? That option would take whatever input is given, and normalize it to fit in the signature pad as currently sized.

[thomasjbradley]

@heneryville Sure.