Icon over page 1 for external Popup

[Jorge Espinoza]

Hi

I need put one custom icon in different page of my document and call some function to open popup with html content.

I made a rectangle over page 1 with this code:

            var am = me.docViewer.GetAnnotationManager();
            var rectAnnot = new Annotations.RectangleAnnotation();
            rectAnnot.X =(500);
            rectAnnot.Y =(100);
            rectAnnot.Width =(100);
            rectAnnot.Height =(100);
            rectAnnot.PageNumber = 2;
            rectAnnot.Author = this.currUser;
            rectAnnot.FillColor = new Annotations.Color(0,255,0);
            rectAnnot.StrokeColor =  new Annotations.Color(255,0,0);
            rectAnnot.StrokeThickness = 1;
           
            am.AddAnnotation(rectAnnot);

How can I call my popup function?

I use HTML5mobile version.

Thanks

Let me try explain better

I'm trying to create a button in a page of my XOD, to open a custom popup. I know how to create the popup from jquery, but I do not know how to insert the button on a specific page and then call my function to open the popup. 

I created a rectangle within a page, but clicking on it shows me the options (see attached link). 

https://drive.google.com/file/d/0ByCYKBzkkpYiVDdoQ2EyZ2JqNEU/edit?usp=sharing

How can create a button on a document page that calls a function that opens a custom popup?

Thanks

[Matt Parizeau]

Hi,

I'm a bit unclear about what you want to do.  Are you wanting to open the popup note that is attached to the rectangle annotation?  If this is what you want to do then you can call the following (where "this" is the ReaderControl object):

this.showNotePopup(rectAnnot);

This shows a jQuery mobile popup with the note text.  If you mean that you want to create your own custom popup then you are free to change the MobileReaderControl code, or if the popup is completely separate from the annotations then you can take a look at jQuery mobile's popup widget for info on how to create one.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Jorge Espinoza]

Thanks for your answer

I'm trying to create a button in a page of my XOD, to open a custom popup. I know how to create the popup from jQuery, but I do not know how to insert the button on a specific document page and then call my function to open the popup.

I created a rectangle within a page, but clicking on it shows me the options (see attached link).

https://drive.google.com/file/d/0ByCYKBzkkpYiVDdoQ2EyZ2JqNEU/edit?usp=sharing

How can create a button on a document page that calls a function that opens a custom popup?

Thanks an sorry my english, I use google for help me.

[Matt Parizeau]

If you want to create a button (or any content) on top of a page in the mobile viewer you can use code like the following:

if (pageIndex === 0) {
    var container = $('#pageContainer' + pageIndex).parent();
    var location = me.displayMode.PageToWindow({x: 100, y: 100}, pageIndex);
    var pageTransform = me.displayMode.GetPageTransform(pageIndex);
    var pageOffset = me.displayMode.GetPageOffset(pageIndex);

    var offset = {
        left: pageOffset.x - pageTransform.x,
        top: pageOffset.y - pageTransform.y
    };

    var div = $('<div>')
        .css({
            'position': 'absolute',
            'z-index': 100,
            'top': location.y + offset.top,
            'left': location.x + offset.left
        })
        .text('Some Text');

    var button = $('<button>Open Popup</button>')
        .on('click', function() {
            alert("Opening my popup");
        });

    div.append(button);
    container.append(div);
}

In this example we're putting a div with some text and a button on top of page 0 (1st page), at position 100, 100 relative to the page at 100% zoom level.  This code takes into account the zoom level and will position the div accordingly.

If you're editing MobileReaderControl.js directly then you can put this code in the "pageComplete" event handler (me.docViewer.on('pageComplete', ...) or if you're using a config file for custom code you can add your own handler for pageComplete.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Jorge Espinoza]

Hi Matt

This is working on WebViewer v2.0?

I'm tried, but is not working for me.

Thanks

[Matt Parizeau]

What errors are you seeing in the developer console?

In WebViewer 2.0 the APIs were changed so that functions started with lowercase letters. This is likely what's causing the problem for you.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Jorge Espinoza]

Yes Matt, I looking yesterday into documentation, I found the difference with lowercase. Is working now.

Now I have another problem, the performance into iOS /Cordova is not the same than Web browser (Safari por example), the load is slow and is crashing every time, the xcode send me memory warning messange, 

PDFTron and webviewer have any limit for PDF size? Mi PDF is over 60MB.

Thanks

[Matt Parizeau]

You may want to try out the native iOS sample which is included under samples/iOS in the WebViewer download package as it uses a more memory efficient way of requesting information.

This could also be the same problem as mentioned here (https://groups.google.com/d/msg/pdfnet-webviewer/-Gp2zUllRQY/0k8qzwNt4osJ) and you could try out some of the suggestions in there.

Matt Parizeau

Software Developer

PDFTron Systems Inc.