Annotation text selection

[Mirko Lugano]

Hi, I am testing the newest version of web viewer (html5), that is 1.7.1. I would like to perform some advanced operations, whose solution I could not find in the documentation:
- I can create a text highlight annotation and access it programmatically from outside the viewer, but I can’t seem to get the highlighted text of the annotation. The javascript method annotation.getContents() only gets the text entered in the popup annotations, I would like instead to get the text of the document that has been highlighted (even a ‘onAnnotationCreated’ event could do, if any), so as to extract the text and perform some logic with it outside the viewer.
- Is the text retrieved from the annotation (from previous question) pure text or is there also some formatting information associated? (for instance if you select multiple paragraphs, pointed lists, etc.). It would be good if it was HTML, but being the document rendered inside a canvas I don’t know whether that’s possible.
- Is there the possibility for every annotation to display a coloured vertical bar in correspondence to the lines of text that constitute the annotation (right beside the 'A4' layout of the document)?
- Can I customize the list of annotation types (buttons) available for the user in the toolbar? I would like to have just Text Highlight and maybe Text Underline.

Thank you
Mirko

[Matt Parizeau]

Hi Mirko,

-To get the text under the highlight annotation take a look at this post which gives some sample code: https://groups.google.com/forum/#!msg/pdfnet-webviewer/kOl1bkil8fQ/AsZjtVQhWhEJ

-The text retrieved is just pure text.

-Can you clarify what you mean by the vertical bar? Can you draw a simple picture showing what you mean.

-You can remove annotation buttons from the toolbar using JavaScript to hide the elements you don't want. Take a look at the diamond.js in the custom-annotations sample and near the bottom you can see an example of adding a custom button. To remove a button you could have something like:

$('#toolModePicker').find('#annot-button-polyline').hide();

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Mirko Lugano]

Hi Matt
thank you for your feedback.

For the explanation about the vertical bar, please see the attachment.

For the buttons ok, I just wanted to know if there was some settings file where you could list the buttons to display, but no matter, yes I could do it with js or css thanx.

Mirko

[Matt Parizeau]

Hi Mirko,

You can get the quads of a text annotation using the Quads property. Then you could find the top and bottom y coordinates and add an element for the vertical bar. According to your picture the bar would be out of the page so you wouldn't be able to draw it on the canvas so you would have to add it as an html element.

// use GetPoints so that the points have nice values of x1,y1,x2,y2,etc
var quads = myAnnot.Quads.map(function(quad) {
    return quad.GetPoints();
});

for (var i = 0; i < quads.length; ++i) {
    // find top and bottom y coordinates
}

// add vertical bar element

Matt Parizeau

Software Developer

PDFTron Systems Inc.