Code doesn't work now

[sd...@njit.edu]

Hi,

I have a question. I was previously using WebViewer1.7. It is now working perfectly. When I tried the same code with the latest version, highlighting the text part ( I have a custom config file that takes care of this) is not working. Can you please let me know how to fix it?

Thanks,

Shashank

[Matt Parizeau]

Hi Shashank,

There were a number of things that changed between 1.7 and 1.8 that could have affected your custom config file. Could you post the contents of your config file and what you expect it to do. Then I can help figure out what needs to be changed for the latest WebViewer version.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[sd...@njit.edu]

Hi Matt,

Thank you for the reply. Below is my code to initialize WebViewer.

window.myWebViewer = new PDFTron.WebViewer({

type: "html5",

path: path/to/web/viewer,                           

initialDoc: path/to/xod,

documentId: "bookId",

mobileRedirect: false,

streaming : true,  

config: "path/to/config.js",

custom: JSON.stringify({currentPage : page, searchWord : word}),

enableAnnotations: true

}, viewerElement);

$(viewerElement).bind('documentLoaded', function(event) {

//myWebViewer.setCurrentPageNumber(11);

myWebViewer.setLayoutMode("SinglePage");

myWebViewer.setSideWindowVisibility("false");

myWebViewer.setZoomLevel(0.9);

$("#displayModeMenu").hide();

$('#rotateButton').hide();

myWebViewer.setToolMode("Pan");

$('#pageNumberBox').text('disable');

});

Below is my custom config file does. It takes page number and the word, and it highlights all the instances of the word in that page. Below is the function for highlighting

function highlightText(quads) {

var docViewer = readerControl.docViewer;

var am = docViewer.GetAnnotationManager();

var firstChar = quads[0];

var lastChar = quads[quads.length - 1];

var firstx = (firstChar.x1 + firstChar.x2) / 2;

var finalx = (lastChar.x3 + lastChar.x4) / 2;

var y = (firstChar.y1 + firstChar.y4) / 2;

var topLeft = { x: firstx, y: y, pageIndex: currentPage };

var bottomRight = { x: finalx, y: y, pageIndex: currentPage };

var annot = new Annotations.TextHighlightAnnotation();

annot.SetPageNumber(currentPage);

annot.StrokeColor = new Annotations.Color(255, 255, 0);

am.AddAnnotation(annot);

var textHighlightTool = new window.Tools.TextHighlightCreateTool(docViewer);

textHighlightTool.annotation = annot;

textHighlightTool.pageCoordinates[0] = topLeft;

textHighlightTool.select(topLeft, bottomRight);

}

Also, it disables the nextpage and previous buttons once the condition is met. Typically, it should allow only a range of 5 pages from the current page.

Please let me know what can be done in this case.Thank you for your time and help.

[Matt Parizeau]

Hi Shashank,

It's not immediately clear what isn't working there since that code is basically the same as what is used in the Get Text Position sample. As you can see from this link it still works in 1.8.1 https://www.pdftron.com/webviewer/demo/samples/text-position/desktop.html.

Would it be possible to share the contents of your entire config file as maybe something else is causing a problem.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[sd...@njit.edu]

Hi Matt,

Thank you. I have again modified the code and highlighting part is working now. But, it doesn't work for italic or bold words in the page. Can you please let me know what to be done?

Can you please let me know what is wrong in the below code

$(myWebViewerContainer).bind('documentLoaded', function(event) {

myWebViewer.setLayoutMode("SinglePage");

myWebViewer.setSideWindowVisibility("false");

myWebViewer.setZoomLevel(0.9);

$("#displayModeMenu").hide();

$('#rotateButton').hide();

myWebViewer.setToolMode("Pan");

$('#pageNumberBox').text('disable');

});

Also, I have to hide the buttons in the range of 5. Below is my code in custom config file.

docViewer.on('pageNumberUpdated', function() {

var newPage = docViewer.GetCurrentPage();

//while((currentPage-10)<newPage<(currentPage+10)){

if ((newPage - currentPage) > 4) {

// hide the buttons

$("#nextPage").button('disable');

}

else if((newPage - currentPage) <= 5){

$("#nextPage").button('enable');

}

if ((currentPage - newPage) >4) {

// hide the buttons

$("#prevPage").button('disable');

}

else if((currentPage - newPage)  <= 5){

$("#prevPage").button('enable');

}

// }

});

Can you please let me know what to be modified in this. 

Thank you for all your help.

Shashank

[Matt Parizeau]

Hi Shashank,

There shouldn't be anything special about italic or bold words. Can you clarify what you mean when you say that it doesn't work, maybe with a screenshot?

For the code starting with myWebViewerContainer and the documentLoaded event what are you seeing going wrong? That code doesn't have anything to do with highlighting.

Can you clarify what you mean when you say "I have to hide the buttons in the range of 5". I'm not quite sure what you mean by that.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[sd...@njit.edu]

Hi Matt,

Though I gave the zoom percent as 90, it is displaying around 150. So, I wanted to know whether any of the methods of documentloaded event has changed.

"I have to hide the buttons in the range of 5" - Sorry for being not clear. I meant, i have to disable the nextpage/prev page once the user navigates 5 pages up/down from the loaded page. Please let me know how to achieve it.

Thanks,

Shashank

[Matt Parizeau]

Hi Shashank,

You need to be careful to put your executing the right code in the right places. For the first bit of code you have in the documentLoaded handler I'm assuming you're using this in the same html file where the PDFTron.WebViewer constructor is. If that's the case then only the code with myWebViewer in it is applicable unless you have your own custom elements with ids of rotateButton, displayModeMenu and pageNumberBox. The myWebViewer code works for me when I put it into the webviewer-controls sample and the zoom level is set to 90% as expected so if that's not working then there is likely some other problem.

If you want to hide the rotate and display mode buttons then in 1.8 they are now under a new element. They also need to be accessed from inside your config file. This is very important or else you'll be trying to select elements on the outer html page that don't exist. The config file is executed in the context of the viewer's iframe. So in the config file you could have something like:

$(document).on('documentLoaded', function() {
    $('#layoutModeDropDown').parent().hide();
});

For hiding the buttons five away from your current page you could just use the .hide() and .show() functions instead of the .button function. The prevPage and nextPage elements are not able to be disabled using .button('disable'). 

To help you debug your config file more easily you can add the following code to the bottom of it:

//# sourceURL=config.js

With this line the config file will now show up in the Chrome Developer Tools under the name config.js and you should be able to set breakpoints on it.

Matt Parizeau

Software Developer

PDFTron Systems Inc.