Signature component?

I just wanted to put in my own vote for a Radzen Blazor server-side signature component.

I'm using a 3rd party's option, but it's really clunky. It would be nice to have a built-in version from Radzen when possible.

1 Like

What is that you find clunky in that 3rd party option? What would you like to see improved or done better?

I use MobSites' signature pad.

The worst part of it is getting the signature pad to display properly:

<SignaturePad @ref="signature" Image="@ThisPermitFooter!.SignaturePath" @bind-Value="@ThisPermitFooter!.SignaturePath" ImageHeight="100" ImageWidth="400" MaxHeight="175" MaxWidth="650" MinHeight="175" MinWidth="450" OnSignatureChange="@(() => GetSignature())">
        <SignaturePadFooter>
                <SignaturePadUndo Image="/BigGameDepredation/img/undo-icon.png" />
        </SignaturePadFooter>
</SignaturePad>

Notice the ImageHeight, ImageWidth, MaxHeight, MaxWidth, MinHeight, and MinWidth values -- ImageWidth and ImageHeight control the signature image, of course, and Max and MinWidth and Max and MinHeight control the overall control size -- if you set a single setting, you have to set all six. I would love to have a control that I could just set the max width and height, then let it deal with the rest of it itself.

When the user signs it, notice the doubled signature about 2/3 the size of the original in the background...
image
(Ignore the broken image link; that's because I'm running this on my local desktop, and the image it uses is on the server; the button looks great when the page is displayed on the server)

To be honest signature-pad is probably the most popular open source signature library. I doubt it we could do much better.

I think that's one of the unique features of signature pad - it simulates "pressure" so lines are with variable width. Here is a quote from their github repository:

Signature Pad is a JavaScript library for drawing smooth signatures. It's HTML5 canvas based and uses variable width Bézier curve interpolation