'pageComplete' event is not trigger via scroll up or down event

[Jayaseelan A]

Hi,

We are having a problem in latest webviewer, the 'pageComplete' event is not trigger via scroll up or down event(ReaderControl.js).

Note: 

1. It's working as expected via next or previous button event.

2. previous version "2.1.0" is working as expected,but the latest version 2.2.0 is replicate this issue.

We are append a text watermark div to the viewer in a certain position using this event.

please help us to resolve the issue asap.

Waiting for your reply.

Thanks 

 

[Matt Parizeau]

Thanks for the report!

We were able to reproduce the issue and you can download an updated build that fixes the issue here http://www.pdftron.com/ID-zJWLuhTffd3c/WebViewer/WebViewer_2.2.0.46957.zip

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Jayaseelan A]

Hi Matt,

We are having a problem the following  url, the 'pageComplete' event is not trigger via scroll up or down event in ReaderControl.js.

http://www.pdftron.com/ID-zJWLuhTffd3c/WebViewer/WebViewer_3.0.1.62370.zip

https://groups.google.com/forum/#!searchin/pdfnet-webviewer/loganathan|sort:date/pdfnet-webviewer/JLhh5m4q01c/-aUZcjR9AAAJ

 

Note : If i clicked the next and previous button,the page has been blurred.

We are currently append a text watermark div to the viewer in a certain position using this event.

please help us to resolve the issue asap.

Thanks

[Justin Jung]

pageComplete event is triggered when each page has completed rendering, not when it's viewed by a user.

For example, if you load 3 page document with the following code in config.js:

$(document).on('viewerLoaded', function() {

  readerControl.docViewer.on('pageComplete', function(e, pageIndex, canvas) {

    console.log('complete', pageIndex);

  });

});

The log would be printed be printed 3 times consecutively after document is loaded, regardless of current page.

Can you send us a complete sample project that reproduces the issue? It sounds like the issue is caused by customizations that you've made.

Justin Jung

[Jayaseelan A]

Hi Justin,

We are applying watermark through "pagecomplete" event in ReaderControl.js as give sample code:

me.docViewer.on('pageComplete', function (e, pageIndex) {

            var canvasid = null;

            var canvasheight = me.getPageContainer(pageIndex)[0].clientHeight;

            var canvaswidth = me.getPageContainer(pageIndex)[0].clientWidth;

            var height = parseInt(canvasheight);

            var width = parseInt(canvaswidth);

            var pageContainer = me.getPageContainer(pageIndex);

            var WaterMarktext = "welcome";

            var postion = "1";

            var size = "40";

            var color = "gray";

            var opacity = "0.8";

            var fontsize = size;

            switch (postion) {

            case "1":

                pageContainer.append('<div style="width: ' + width + 'px; height: ' + height + 'px;overflow: hidden;z-index: 30;'

                    + 'position: relative; display: table-cell;'

                    + 'text-align: center; vertical-align: top;">'

                    + '<div id="fitin" style="width: ' + width / 1.5 + 'px; height: ' + height / 6 + 'px;overflow: hidden;'

                    + 'font-size: ' + fontsize + 'px; margin: 0 auto; text-align: center;">'

                    + ' <div style="position: absolute;opacity: ' + opacity + ';color:' + color + ';font-family:sans-serif">' + WaterMarktext + '</div>'

                    + ' </div></div>');

            default:

            }

            alert('d');

            

            me.fireEvent("pageCompleted", [pageIndex + 1]);

        });

Below is the sample webviewer code:

https://drive.google.com/file/d/19OCU_rk42OSYl63Xy5PJz5AvrjUzZNTW/view?usp=sharing

Attached the screenshot for blurred.

Please fix this issue ASAP.

waiting for your response.

Thanks

[Jayaseelan A]

Hi justin jung,

have you any update for this?

Note:It is a major issue from our end. Please fix it and send to us the updated code ASAP.

Waiting for your response.

Thanks

[Justin Jung]

Thanks for sending us your project.

We tried running the sample from your project, but we were not able to reproduce the blur issue that you are facing.

Does the blurring not occur when you remove the part to draw watermark?

Also, do you see any errors in your console log when the blurring happens?

[Jayaseelan A]

Hi Justin ,

If scroll the document, the watermark is working as expected, But the issue occurs only "Next" and "Previous" button click event. Please cross check from your end.

Thanks

[Justin Jung]

You are appending a div with position: relative, which pushes down the actual canvas.

If you change your div's position to absolute, it would be fixed.

Instead of doing it yourself, you may want to checkout the new watermark feature that's built in.

Here is an example how to use the api: http://www.pdftron.com/webviewer/demo/lib/html5/doc/CoreControls.DocumentViewer.html#setWatermark__anchor

[Jayaseelan A]

Hi Justin,

Thanks for you response.

We have used to new watermark scenario(setWatermark) is working as expected from our end. But we need to apply the image watermark(in center position) for the same scenario(setWatermark).

Note: Image watermark should apply only client side(webviewer) not server side.

Attached screenshot for your reference.

Can you please send the sample code for the same.

Waiting for your response.

Thanks

[Justin Jung]

setWatermark function currently only supports text watermarks.

If you want to have an image watermark, you'll need to continue using your own watermark in config.js.

Let us know if the latest issue with your watermark has been resolved.

[Jayaseelan A]

Hi Justin,

Thanks for your response.

In text watermark we have tried with scenario's in \n. We need to display the text in next line. But after giving the \n the text is not going to the next line. I have attached the screen shot for the same. Can you validate this and provide a solution for this issue. 

Please note for us if i give the \n then the text should be displayed in the next line only.

Code Used:

 header: {

                    fontSize: 20,

                    fontFamily: 'sans-serif',

                    color: 'gray',

                    opacity: 30,

                    left: '',

                    center: '2-sample solution \n ContentName : C-Aspire plan \n note2 \n no...@yopmail.com',

                    right: ''

                },

                footer: {

                    fontSize: 20,

                    fontFamily: 'sans-serif',

                    color: 'gray',

                    opacity: 30,

                    left: '',

                    center: '2-sample solution \n ContentName : C-Aspire plan \n note2 \n no...@yopmail.com',

                    right: ''

                }

Note:

Attached the screen shot.

Looking forwardd to your reply.

Thanks

Jayaseelan.A

[Justin Jung]

Hello,

Here is a build that fixes the new line issues on header and footer watermark:

http://www.pdftron.com/ID-zJWLuhTffd3c/WebViewer/WebViewer_3.0.1.62860.zip

[gopalak...@contentraven.net]

Hi Justin,

Thanks for your response. Can you please confirm in which file did you made the changes?  Because we already integrated the latest version of the pdftron viewer from our end and currently it is live.  So can you please provide the file details so that we will replace that file(s) only to our viewer.

Waiting for your reply.

Thanks and Regards,

Gopal

[Matt Parizeau]

Hi Gopal,

The change is only in the file CoreControls.js.

Matt Parizeau

Software Developer

PDFTron Systems Inc.