Text highlight annotation

[Timothy Elliott]

Hi,

I'm trying to programmatically highlight text in a xod document using code supplied here on the message board. The document is displayed but I keep receiving the message 'TypeError: docViewer is undefined'. This seems pretty basic, where am I going wrong?

Here is my code:

$(function() {

var viewerElement = document.getElementById("viewer");
var myWebViewer = new PDFTron.WebViewer({
path: "#webapp()/pdftron/lib",
type: "html5,silverlight,flash",
initialDoc: "#webapp()/pdftron/GettingStarted.xod"

}, viewerElement);


var docViewer = this.docViewer;
var am = docViewer.GetAnnotationManager();

var topLeft = { x: 200, y: 100, pageIndex: 0};
var bottomRight = { x: 300, y: 200, pageIndex: 0};

var annot = new Annotations.TextHighlightAnnotation();
annot.SetPageNumber(1);
annot.FillColor = new Annotations.Color(0, 255, 255);
am.AddAnnotation(annot);

var textHighlightTool = new docViewer.ToolModes.TextHighlightCreate(docViewer);
textHighlightTool.annotation = annot;
textHighlightTool.pageCoordinates[0] = topLeft;
textHighlightTool.select(topLeft, bottomRight);

});


Thanks in advance,
Tim

[Matt Parizeau]

Hi Tim,

You'll want to put that custom code in a config file and then use the config option in the WebViewer constructor.

var myWebViewer = new PDFTron.WebViewer({
    path: "#webapp()/pdftron/lib",
    type: "html5,silverlight,flash",
    initialDoc: "#webapp()/pdftron/GettingStarted.xod",

    config: "config.js"
}, viewerElement);

Then in config.js:

$(document).on('documentLoaded', function() {
    var docViewer = readerControl.docViewer;
    var am = docViewer.GetAnnotationManager();

    var topLeft = { x: 200, y: 100, pageIndex: 0};
    var bottomRight = { x: 300, y: 200, pageIndex: 0};

    var annot = new Annotations.TextHighlightAnnotation();
    annot.SetPageNumber(1);
    annot.StrokeColor = new Annotations.Color(0, 255, 255);
    am.AddAnnotation(annot);

    var textHighlightTool = new Tools.TextHighlightCreateTool(docViewer);

    textHighlightTool.annotation = annot;
    textHighlightTool.pageCoordinates[0] = topLeft;
    textHighlightTool.select(topLeft, bottomRight);
});

One other thing to note is that if you're using WebViewer 1.8 then highlight annotations should use StrokeColor instead of FillColor and you'll want to use Tools.TextHighlightCreateTool to reference the tool.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Timothy Elliott]

Thanks for the help Matt!

I'm able to highlight now, but how would i do so programmatically? When i reference Tools.TextHighlightCreateTool my console window tells me Tools is undefined.

Thanks,

Tim

[Matt Parizeau]

Hi Tim,

The code above is highlighting programmatically so I'm not quite sure what you mean. If you're in the Chrome Developer Tools you'll find that Tools isn't defined in the console because it's executing in the context of the outer page. WebViewer creates an iframe and the tools exist in the context of that inner page. You can change this context by looking at the top left of the console tab and find the dropdown that says "<top frame>". Click this and change it to ReaderControl.html. Now when you type in the console you'll see Tools.TextHighlightCreateTool.

Matt Parizeau

Software Developer

PDFTron Systems Inc.