f0rce / signature-widget

Lit-Element Wrapper around Signature Pad (https://github.com/szimek/signature_pad) for Vaadin 14+

Hi 👋, I'm F0rce - aka David

22 y/o Full Stack Developer from Germany ―

• 🔭 Full Stack Developer at Lobster GmbH
• 💬 Ask me everything about Vaadin Add-on creation
• 📫 How to reach me [email protected]

Connect with me:

Languages and Tools:

 

signature-widget's Issues

ValueChangeEvent Support

Hi!

Here #44 someone requested an "isEmpty" feature.
I think it would be even nicer to attach a ValueChangeListener.

We have a next-button on the same screen as the signature-pad, which just should become enabled, if a signature has been done.
Currently we use:
signatureField.getElement().addEventListener("click", domEvent -> this.nextButton.setEnabled(true));

which does the job quite well.

Have you considered extending AbstractField instead of Component and add ValueChangeListener Support?

Regards,
Chris

Library includes/links pro components

Describe the bug
The library unnecessarily links the Vaadin pro components.

Additional context
You should use "vaadin-core" as artifact id instead of "vaadin".

setImage() does not set the content for the signaturePad

I want to restore an image (URI) into the signature Pad.

First I store the image into a string by pressing a button:
btnStore.addClickListener(e->{
if (signature != null && !signature.isEmpty())
{
img = signature.getImageURI();
_log.debug("Storing: "+img.length());
}
});

Next I clear the signature pad and then I want to set the image Uri back into the SignaturePad by pressing the restore button:
btnRestore.addClickListener(e->{
if (signature != null)
{
if (!FMZStringUtils.isEmptyStr(img))
{
_log.debug("Restoring: "+img.length());
signature.setImage(img);
}
}
});

The signature does not show the content.

I would expect the content to be restored!

This is happening using Vaadin 23.3.8 running on my dev machine (Windows 10) using tomcat as server.
I'm using version 3.1.0

de.f0rce.signaturepad signature-widget 3.1.0

Check if the Signature is empty

Hi David,

would it be possible to provide information about whether changes has been made to the signature? Right now I cannot determine if there is a signature or not as I always get a picture by calling getImageBase64().

Would really appreciate this feature :)

thanks, Holger

Problem running on Vaadin 24

I'm trying the component with Vaadin 24 and nothing is visible
on the view.
No error in browser console is raised.
I tried to change different colors without any success.

I'm using Lumo dark theme.

Is it supported on 24?

Thanks in advance,
Michele Sonnessa

clear() does not remove the imageUri or base64 String

The .clear() Method should remove the base64 content, so you can check if the signature was removed

Signature not visible

Describe the bug
I already comment on the vaadin directory but I think it's better to put it there.
The Lit-Element is there (see the attachment) but it doesn't appear on screen.

To Reproduce

• Last version of vaadin (14.6.5) and Signature widget (2.0.0)
• Create a view (extends FlexLayout) with Signature element in it

private SignaturePad signature = new SignaturePad();
private void initSignature() {
    // ....
    signature.setHeight("150px");
    signature.setWidth("300px");
    add(signature);
}

Expected behavior
The signature component should be visible and usable

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser : Chromium, I tried with Firefox also
• Version : Chromium 91.0.4472.164, Firefox 78.12.0esr

Additional context
If you need anything else, I can provide it

Signature is made 3cm next to the mouse

When i sign on the widget, the image gets dawed 3cm next to the mouse and not directly unter the mouse.

Investigate signature_pad 4.0.2 not working in a webcomponent environment

Describe the bug
While giving the frontend Webcomponent (lit-signature-pad) a bigger overhaul I tried to update the npm package (signature_pad) to 4.0.1

I changed to code to use the new EventEmitter methods that were mentioned in the changelog. But the "endStroke" Event (mousebutton was released to stop painting), which is used to send the image uri to the Java Backend was never emitted, where "beginStroke" (mousebutton is clicked and hold to start painting) was always send correctly.

Need to investigate a bit more, but still wanted to make a minor release.

To Reproduce
Steps to reproduce the behavior:

1. Update signature_pad to 4.0.1
2. Refactor code to use EventEmittor (.addEventListener)
3. "endStroke" is never sent

Expected behavior
"endStroke" Event should be sent

Edit:
Signature_Pad 4.0.2 has been released, so I have to test it with the new version.

RGBA of setBackgroundColor not working

Describe the bug
Since the CSS property rgba in the alpha channel works with decimal places, a double or float should be used instead of an int in Java.

To Reproduce
Steps to reproduce the behavior:

1. Call signaturePad.setBackgroundColor(0,0,0,10);
2. Open the View
3. See the black background.

Expected behavior
The specified alpha channel should either be converted to percent and passed or another data type should be used in the Java part, otherwise the correct value will not be used.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Brave (Chromium)
• Vaadin Platform 21.0.7
• Vaadin Flow 8.0.4

Thanks for this widget and your work on it so far!