SignaturePad on Ionic/Angular does not work correctly

[CedricNomentsoa]

SignaturePad on Ionic/Angular does not work correctly

[lathonez]

Hey,

This repo is simply a wrapper for szimek/signature_pad, any issues like this will be a configuration problem with the underlying library.

Can you replicate the issue on the demo app on your surface?

If not, you're probably missing this: https://github.com/lathonez/angular2-signaturepad-demo/blob/master/src/app/app.component.ts#L33-L38

which is called from ngOnInit.

thanks

[CedricNomentsoa]

I replicate the issue on your demo app, without resizecanvas my background is truncate and with resizecanvas my pen doesn't draw correctly !

[lathonez]

my pen doesn't draw correctly

Could you be more specific?

[CedricNomentsoa]

Like this :

But on your demo app !

[wulfsolter]

your devicePixelRatio is set wrong. See https://github.com/szimek/signature_pad#tips-and-tricks

[CedricNomentsoa]

wulfsolter, I already use that function :

 ngAfterViewInit() {
    this.signaturePad.resizeCanvas(); //that line
    if (this.record.new_signature_base64) {
      this.signaturePad.fromDataURL('data:image/jpeg;base64,' + this.record.new_signature_base64);
    } else {
      this.clear();
    }
  }

That's cause me the offset, I don't know how to fixe it !

[wulfsolter]

If the demo example works, and your code doesn't, maybe you can see that the problem is with your code and not this library?

At this point you're complaining to me, for something you've gotten for free, that it doesn't work on some special hardware that you own. Send me your tablet (to keep) and I'll try making it work.

If you have fixes to this repository, we always welcome PRs, but "I don't know how to do things" is not a fault of this code.

[CedricNomentsoa]

Excuse me if I upset you, maybe because my english is not that good, it seems like I've beeing rude so my apologize.

For the demo code, I try it on my Surface and put a background on it and it doesn't work...
Check this :

[wulfsolter]

@sordaria I don't have your tablet, I don't have your code. I don't know what you want me to magically do.

Does the demo work correctly? If so, then look at the differences between the demo and your code.

If the distance between pointer and drawing changes depending on how far you are from the edge of the screen, check devicePixelRatio. If the distance stays the same, check your padding/margin/offset.

[CedricNomentsoa]

No, the demo doesn't work correctly on my tablet when I put a background image on it...

This is my code :

export class MobySignatureModal {

  record: any;
  filigrane: any;

  @ViewChild(SignaturePad) public signaturePad: SignaturePad;
  public signaturePadOptions: Object = {
    'minWidth': 2,
    'canvasWidth': 400,
    'canvasHeight': 200
  };
  public signatureImage: string;

  constructor(public viewCtrl : ViewController, public navParams : NavParams) {
    this.record = navParams.get("record");
    this.filigrane = navParams.get("filigrane");
    console.log(this.record)
  }

  ngAfterViewInit() {
    this.signaturePad.resizeCanvas();
    this.signaturePad.fromDataURL(this.filigrane);
  }

  save() {
    let matches = this.signaturePad.toDataURL().match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);
    this.record.new_signature_base64 = matches[2];
    let data = { 'action' : 'save', 'record': this.record };
    this.viewCtrl.dismiss(data);
  }

  clear() {
    this.signaturePad.clear();
    if (this.filigrane) {
      this.signaturePad.fromDataURL(this.filigrane);
    }
  }

  dismiss() {
    let data = { 'action' : 'cancel' };
    this.viewCtrl.dismiss(data);
  }
}

And my html :

<ion-header>
  <ion-toolbar>
    <ion-title>
      Sign
    </ion-title>
    <ion-buttons start>
      <button ion-button icon-only (click)="save()">
        <ion-icon name="checkmark" ></ion-icon>
      </button>
      <button ion-button icon-only  (click)="clear()">
        <ion-icon name="trash" ></ion-icon>
      </button>
      <button ion-button icon-only  (click)="dismiss()">
        <ion-icon name="close" ></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-badge color="subtle" padding style="width:100%;height:100%;text-align:center;vertical-align: middle;" >
    <ion-badge #sigContainer1 color="white" padding style="background-color: white; margin-bottom: -170px; position: relative; top: 50%; margin-top:-170px">
       <signature-pad [options]="signaturePadOptions"  id="signatureCanvas"></signature-pad>
    </ion-badge>
  </ion-badge>
</ion-content>

[lathonez]

Just to clarify - the Demo works fine on your device without a background image?

[CedricNomentsoa]

Yes, the Demo works fine on my device without a background image... but when I put a background image on it, the background is truncate, and then I fix the truncate within using resizeCanvas(), and I get the offset issue...

[lathonez]

I've updated the demo with an example of a background image with a static size. I think you are either:

• Applying the width / height for your image to the incorrect element (the canvas instead of the container)
• Not calling the beResponsive / resize method correctly.

Can you check the latest demo on your surface?

[CedricNomentsoa]

Lathonez, thanks you very much for your help, I check the latest demo on my surface, and this works really good with the cat in the background. But then, when I save the image, the cat disapears and it keeps just the signature. And for my app, I want to save the signature and the background behind the signature.

[lathonez]

szimek/signature_pad#177

[CedricNomentsoa]

Lathonez thank you for your answer, I check your link and that tells me to use fromDataUrl() and I already use it in my code, (that makes the truncate/offset issue...).

ngAfterViewInit() {
    this.signaturePad.resizeCanvas();
    this.signaturePad.fromDataURL(this.filigrane); //just right here the background
  }

[lathonez]

@sordaria - you may have noticed that the linked issue was still open. IMO saving images along with the signatures is out of scope for a signature lib, but it's an upstream issue regardless. This is just a wrapper for ng2.

As we have shown there is no issue whatsoever with this library.

Stack overflow is the appropriate resource for "I don't know how to implement this" questions.