nativescript-community / nativescript-drawingpad

:pencil: NativeScript plugin to provide a way to capture any drawing (signatures are a common use case) from the device
Apache License 2.0
90 stars 32 forks source link

IOS not working #22

Closed loadchief closed 7 years ago

loadchief commented 7 years ago

Hi, I am able to use drawing pad successfully on android but nothing appears on the drawing pad surface on ios. I do not get any errors and I am able to successfully dump the drawingpad object in the console. Any suggestions? I am using angular/typescript TNS version 2.5.2

`

<StackLayout row="0" col="0" class="custom-padding custom-border"> 
    <DrawingPad #drawingPad penColor="#000000" penWidth="3"></DrawingPad>
</StackLayout>    

<GridLayout row="1" col="0" rows="auto" columns="*, *" class="add-bar"> 
    <Button row="0" col="0" text="Save Signature" class="btn btn-primary btn-active button-bar" (tap)="savePodSignature()"></Button>
    <Button row="0" col="1" text="Cancel" class="btn btn-primary btn-active button-bar" (tap)="cancel()"></Button>
</GridLayout> 

`

`export class PodSignatureComponent implements OnInit {

public showProgress: boolean;
public progressValue: number;
private sub: any;    
public jobId: any;      
public jobStatus: any; 

public pad: any;
@ViewChild("drawingPad") DrawingPad: ElementRef;

public constructor( private http: Http, 
                    private route: ActivatedRoute, 
                    private router: Router, 
                    private location: Location, 
                    private api: LoadchiefAPI,
                    private headerService: HeaderService) {}    

public ngOnInit() {

    this.sub = this.route.params.subscribe(params => {
        this.jobId = +params['jobId']; 
    });   

    this.jobStatus = 'Picked Up';   
    this.headerService.sendMessage('POD Signature');     
}

public ngAfterViewInit() {
    this.pad = this.DrawingPad.nativeElement;
    console.dump(this.pad);
}`
bradmartin commented 7 years ago

iOS layouts sometimes require height and width. If you have no errors and it's just not rendering that's the first thing to try. Set a static height/width and let me know. Thanks

On Tue, Jun 13, 2017, 1:50 PM Loadchief notifications@github.com wrote:

Hi, I am able to use drawing pad successfully on android but nothing appears on the drawing pad surface on ios. I do not get any errors and I am able to successfully dump the drawingpad object in the console. Any suggestions? I am using angular/typescript TNS version 2.5.2

`

`

`export class PodSignatureComponent implements OnInit {

public showProgress: boolean; public progressValue: number; private sub: any; public jobId: any; public jobStatus: any;

public pad: any; @ViewChild("drawingPad") DrawingPad: ElementRef;

public constructor( private http: Http, private route: ActivatedRoute, private router: Router, private location: Location, private api: LoadchiefAPI, private headerService: HeaderService) {}

public ngOnInit() {

this.sub = this.route.params.subscribe(params => {
    this.jobId = +params['jobId'];
});

this.jobStatus = 'Picked Up';
this.headerService.sendMessage('POD Signature');

}

public ngAfterViewInit() { this.pad = this.DrawingPad.nativeElement; console.dump(this.pad); }`

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/bradmartin/nativescript-drawingpad/issues/22, or mute the thread https://github.com/notifications/unsubscribe-auth/AFulhIC0_0jmVKi9nGQsLHp5bi9NZ0Ocks5sDtnggaJpZM4N463O .

loadchief commented 7 years ago

I created a css class with a height and width property and applied that class to the stack layout that houses the DrawingPad element but still no response when you draw. I also removed the other two classes on that stack layout just in case they were interfering.

loadchief commented 7 years ago

image

bradmartin commented 7 years ago

what about on the DrawingPad itself? nothing rendering? can you upload screens?

loadchief commented 7 years ago

Thank you Brad. Yes, applying a fixed width and height directly to the DrawingPad element allows it to work / render actual drawings.