Toggle Tool Modes between Pan and Text Highlight

[Prasad]

Hi ,

we are evaluating mobile web viewer , we are trying to achieve highlight experience like below

1] User opens viewer : it is in Pan Mode

2] User tap and hold on, text in viewer, tool Mode should change to "Text Highlight Create" and user should see a Icon indicating text Highlight started from the point where he tap and hold.

3] User highlights the text, where highlight color is blue same as "text selection" as he proceed he should see an icon indicating text Highlight end point.

4] User should able to extend the highlighted text further by dragging the end or start point icon. 

5] As user is done with highlight he should see a context menu over highlighted text that when tapped, changes the color of highlight text to red.

6] The tool mode should change to Pan Mode again on any other action.

For this we tried adding 

this.docViewer.SetToolMode(ToolModes.TextHighlightCreate);

under  onTapHold: function () in MobileReaderControl.js

that sets a tool mode to Text Highlight but dose't work as expected, it dose't continue to Highlight after tap and hold.

PFA video for above experience .

Can you please guide us to achieve above experience . 

 

[Matt Parizeau]

This will take some work but could probably be achieved with a custom tool.  For the first step of switching to the tool there's a little more work that has to be done so that it can start highlighting.  You could have code in onTapHold like the following:

this.annotMode = true;
this.docViewer.SetOptions({
    annotMode: this.annotMode
});

this.docViewer.SetToolMode(CustomTextTool);
var e = $.Event("touchstart");
e.pageX = this.mousePt1.x;
e.pageY = this.mousePt1.y;
e.which = 1;
this.docViewer.GetToolMode().mouseLeftDown(e);

This simulates a mouse down on the tool to get it started.  You'll also have to make a modification to the onToolMouseDown function as well.  Move the code that sets mousePt1 and mousePt2 to be above the line if (!me.textSelect).

To create the custom tool you can have something like this.  You could also try it with the custom tool inheriting from the TextSelect tool instead as that will make the selection blue by default, you'll just have to create the annotation after.

var CustomTextTool = function(docViewer) {
    var textTool = docViewer.ToolModes.TextHighlightCreate;
    textTool.call(this, docViewer);
};

CustomTextTool.prototype = new this.docViewer.ToolModes.TextHighlightCreate();
// CustomTextTool.prototype.mouseLeftUp = function(e) {
//     // console.log('mouse up');
// };

Once you have the custom tool you can override different functions to do what you want (e.g. mouseLeftDown, mouseLeftUp, mouseMove).  To do everything that you want will take some work as you'll likely have to make other modifications to MobileReaderControl.js (e.g. handle dragging the start and end icons).  We'll probably look into doing something similar some time in the future, but let us know how it goes and if you need any assistance.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Prasad]

Thanks for your valuable Inputs Matt, we'll try it and let you know.

[Prasad]

HI Matt,

We have started implementing this, we will need your help for certain things,

1] On mouse Up event we need to check if the viewer in Text Highlight Mode, we could not figure out how can that be done.

2] We need to show a context menu as in attached video, over the highlighted text , where some button in the context menu will change color  of the highlighted text.

Please help us for above queries. 

On Thursday, December 12, 2013 10:24:20 AM UTC+5:30, Prasad wrote:

[Matt Parizeau]

1) To check this you could add some code like the following to the function onToolMouseUp in MobileReaderControl.js.

if (this.docViewer.GetToolMode() instanceof this.docViewer.ToolModes.TextHighlightCreate) {
    console.log('highlight tool');
}

2) For a context menu MobileReaderControl uses jQuery mobile's popup widget but it would probably be easy enough to use your own absolutely positioned div.  You can take a look at the setEditPopupLocation function which may be helpful. If you have a reference to the annotation then you can do something like annotation.FillColor = new Annotations.Color(0, 255, 255); to set its color.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Prasad]

Thanks Matt it worked !

We are trying to get page canvas to draw the start and end points for Text Highlight. We are unable to get the page canvas for the mobile reader. 

we tried  following

1] $('iframe').contents().find("#canvas"+ pageIndex); 

2] var pc = me.getPageContainer(0);

var canvas = pc.find('#canvas0').get(0);

 

Please Help.  

[Matt Parizeau]

To get the canvas for annotations you could use this code: $('#pageWrapper0').find('.auxiliary');

What's a little tricky about this is that the canvas covers the entire viewport, so if the device is in landscape mode and two pages are shown then they will both be in pageWrapper0 and the third and fourth pages will be in pageWrapper1.  MobileReaderControl.js has this.nPagesPerWrapper which is the number of pages in each wrapper so you would be able to calculate the pageWrapper number on your own if you want.

Are you trying to draw the highlight or just the start and end icons?  It may be easier to use the code I posted previously about using the highlight tool to actually draw the annotation.  If it's the start and end icons then it may be easier to just have a div or image on top of the canvas.  For example:

$('<div>')
    .css({
        width: '100px',
        height: '100px',
        'background-color': 'blue',
        position: 'absolute',
        'z-index': '100',
        top: '100px',
        left: '500px'
    })
    .appendTo($('body'));

Also note the functions this.displayMode.PageToWindow and WindowToPage in MobileReaderControl.js as they may be useful when trying to place things relative to the page.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Prasad]

Thanks Matt,

Actually we are trying to create lens effect over the highlight text as in attached video, we also have done small code to get a content from a canvas and show same scaled content in another canvas shaped as an lens.

PFA for the sample code.

we are trying to build same in web viewer, we could get the page canvas by    $('#pageWrapper0').find('.auxiliary'); But not able to get image data from it 

we tried following code

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

     pgcanvas = $('#pageWrapper0').find('.auxiliary');

     pgCtx = pgcanvas[0].getContext('2d'); 

});

Annotations.TextHighlightAnnotation.prototype.draw = function (ctx) {

    imgData = pgCtx .getImageData(this.GetX(), this.GetY(),50, 50);

    lensCtx .putImageData(imgData, 10, 10, 0, 0, 50, 50);

};

It did't worked  we get nothing in imgData, Can you Please help us to get the data of highlighted text as an canvas image data to be drawn in the lens .

[Kevin Kuo]

Prasad,

There are more than one canvases in page wrapper.

-one or more canvases that render the document (this is where the text would be)

-a single auxiliary canvas that renders annotations

An example of how the DOM looks: 

As you can see in this case, there are multiple document canvases appended after each other. This happens when the page is too large (or when zoomed in), and is done to optimize performance.

So you will need to check the page container for all document canvases, get their heights, and figure out which canvases' image data you need.

Hope this helps!

[Matt Parizeau]

One thing to note is that if you only care about the mobile viewer then there will only be one document canvas which will hopefully make things a little simpler.  Just note that both the annotation and document canvases are the size of the entire viewport, so 0,0 will be at the top left of the screen and does not correspond directly to the annotation's position on a page.  You would have to do some converting with this.displayMode.PageToWindow to get the correct position on the canvas.

Matt Parizeau

Software Developer

PDFTron Systems Inc.