Custom annotation popup

[Johny Doe]

Hi Team,

I am able to drag and drop the custom annotation in WebViewer, now what I need is to open a popup after dropping the annotation.

In the popup I'll collect the information from the user like name, email id etc.

I get the jquery popup working on the same page but I am not able to get that popup open after drop in WebViewer.

  var viewerElement = document.getElementById('viewer');

            var myWebViewer = new PDFTron.WebViewer({

                type: "html5",

                path: "../../lib",

                serverUrl: "sample.php",

                initialDoc: "../../doc/WebViewer_Developer_Guide.xod",

                config: "diamond.js",

                documentId: "4545",

                enableAnnotations: true,

                streaming: false

            }, viewerElement);

Then in diamond.js 

 CustomDiamondCreateTool.prototype.mouseLeftUp = function (e) {

        Tools.GenericAnnotationCreateTool.prototype.mouseLeftUp.call(this, e);

        $("#create-user").trigger("click");

        //$("#create-user").click();       

    };

This button click opens the jquery modal popup on page, but the click is event is not firing from diamond.js. Any help on this? Thanks in advance

[Matt Parizeau]

Hi Amit,

I believe that should be the correct code to trigger a click event on the element with the id create-user. Make sure that that is the correct element id and that it is handling a click event. You can also try setting a breakpoint on that line to make sure it's actually being executed. It can be a bit tricky to debug into dynamically loaded files like config files so if you add the debugger; statement into your JavaScript where you'd like it to break then it will automatically break there as long as you have the developer tools open. Once you're there you can try selecting that element to make sure it actually exists at the time the code is calling it.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Amit]

Hi Matt,

Thanks for the reply. Please check the attached html.

The html individually can open the popup on button click, but from diamond.js it is not. Can you please check.

Calling button click from     CustomDiamondCreateTool.prototype.mouseLeftUp = function (e) { in diamond.js

[Matt Parizeau]

Hi Amit,

The problem is that there are actually two windows here. You can think of desktop.html as the outer window and when desktop.html creates a new PDFTron.WebViewer this will create an iframe and the iframe loads ReaderControl.html (inner window). The inner window is where the viewer itself lives.

Any config file you specify (in this case diamond.js) is executed in the context of the inner window. This means that when you use jQuery in the inner window it only searches for elements in the inner window and doesn't know anything about the outer window. In your case the #createuser element is in the outer window so diamond.js (that executes in the inner window) isn't going to find it. You can access the outer window from the inner window by using window.parent. So to fix your issue you can use:

window.parent.$('#createuser').trigger('click');

window.parent.$ means we're getting the jQuery instance on the outer window and so it will be able to find your button.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Amit]

Ok got it. This works

What I am doing is, I want to assign different annotation to different users.

I think of saving annotation co-ordinates along with the user's details, but I am not able to get the co-ordinates exactly.

What I tried is,

 alert(e.pageX);

alert(this.pageCoordinates[0].x);

both above call gives different x for the placed annotation.

Current approach: Save User with annotation co-ordinates, Show co-ordinates relevant to the user only, delete annotation from my user list grid (from table id="users")

Or

Is there anything built in with WebViewer to assign annotation to different users which I can specify, so that they will view only those annotation. 

[Matt Parizeau]

Hi Amit,

I'm not sure I quite understand what you want to do. When creating your custom annotation (in diamond.js) the custom tool inherits from GenericAnnotationCreateTool and will automatically set the X and Y values of the annotation to the place where you clicked. So inside the mouseLeftUp function you should be able to just use this.X and this.Y to access the location.

To set the author of an annotation you can set myAnnot.Author = "UserName"; The current user will only be able to edit annotations with their author name. If you don't want them to be able to view other's annotations then you may want to load the document with a different document id for each user so that their annotations can be saved and loaded separately. The default annotationHandler.php saves xfdf files with different document ids in different locations.

If this isn't what you want could you clarify a bit on what you're trying to achieve. Thanks!

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Amit]

Matt,

this.X and this Y is undefined. Can you please check

[Matt Parizeau]

Hi Amit,

Sorry it should be this.annotation.X and this.annotation.Y as this refers to the tool and this.annotation is the tool's currently associated annotation.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Amit]

Hi Mark,

CustomDiamondCreateTool.prototype.mouseLeftUp = function (e) {

       

        Tools.GenericAnnotationCreateTool.prototype.mouseLeftUp.call(this, e);

        alert(this.annotation.X); //This gives co-ordinate, but this is different from saved co-ordinate in xfdf

      ////  window.parent.$('#createuser').trigger('click');

//        alert(this.annotation.X);  -- Gives error --> Cannot read property X of null

        //debugger;

     

    };

[Matt Parizeau]

Hi Amit,

That's correct, the coordinate is in XOD coordinates which are different from PDF coordinates (which the XFDF is in). Is there a reason you need the points in PDF coordinates?

To convert points from XOD to PDF coordinates you can use the GetPDFCoordinates function. To make sure this.annotation isn't null, call that code before you call GenericAnnotationCreateTool's mouseLeftUp. The code would be something like:

var doc = readerControl.docViewer.GetDocument();
var annot = this.annotation;
var pdfCoords = doc.GetPDFCoordinates(annot.PageNumber - 1, annot.X, annot.Y);

Tools.GenericAnnotationCreateTool.prototype.mouseLeftUp.call(this, e);

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Amit]

Hi Matt,

Thanks for the reply. It just works perfectly. Sorry for the delayed reply.

Now my current stage is that, able to get annotation co-ordinate and receiver's details.

Workflow:

User views the document - Done

Add custom annotation - Done

It opens a popup where user mentions name and Email Id for receiver - Done

Saves data in a grid using jQuery -Done

Save the annotations in the xfdf file - Done

Now along with these annotation I want to save the receivers data in the Grid to database.

I mean on "Save" event of Webviewer where I am storing to xfdf, I should be able to save receiver's detail, is there a way to pass this data through json or something to php file to save?

Thanks

[Matt Parizeau]

Hi Amit,

You could refer to what WebViewer is doing by using the $.ajax function to send message to a URL on your server. For example in the saveAnnotations function it sends a POST to the server URL with the xfdf string as data. You could do something similarly for receiver data in any format you like.

Alternatively if you want that information in XFDF attached to the specific annotation you could serialize/deserialize a custom attribute on the annotation. If you look at the diamond.js sample in the (de)serialize functions on CustomDiamondAnnotation it saves and loads a custom attribute or you could refer to this post which describes the same thing: https://groups.google.com/d/msg/pdfnet-webviewer/1tXoivNgvKo/Pb-Gi_e1bp0J

Matt Parizeau

Software Developer

PDFTron Systems Inc.