Mouse co-ordinates to page number and coordinates

[avibodha]

Hi, could anyone give me some pointers on how to take a mouse position (pageX,pageY) and figure out the PDF page number and page coordinates I'm over? I'm using the viewer.html as my base page.

thanks much

[viren.pala...@gmail.com]

On Saturday, June 23, 2012 5:42:32 AM UTC+5:30, avibodha wrote:
> Hi, could anyone give me some pointers on how to take a mouse position (pageX,pageY) and figure out the PDF page number and page coordinates I'm over? I'm using the viewer.html as my base page.
>
> thanks much

Well for PDF page number

Try this

PDFView.page

for mouse pointer I guess you need to write a jquery event for mouse click

get the X & Y co-ordinate of the click and subtract the position offset of the div.textLayer for the current_page to get the x and y co-ordinate w.r.s.t PDF

Hope that help

Regards
Viren Negi

[viren.pala...@gmail.com]

On Saturday, June 23, 2012 5:42:32 AM UTC+5:30, avibodha wrote:

> Hi, could anyone give me some pointers on how to take a mouse position (pageX,pageY) and figure out the PDF page number and page coordinates I'm over? I'm using the viewer.html as my base page.
>
> thanks much

[luc...@gmail.com]

[Viren Negi]

Lucpil are taling abt the x of the y of the browser window of like x and y
only in the pdf I believe your looking for the position of the a point from
the start of the PDF then for that you need to some maths it like this

Then write a mouse event to get the X, Y of the page and then

Let say X = 500 , Y= 300

and then find the position of the <div id="pageContainer1"> from the top
and left (Depending upon which Page your are in

Then Perhaps it something like this
delegator = "#pageContainer1"

$(delegtor).offset().top is 300
$(delegator).offset().left 200

Now to find the exact co-ordinate w.r.s.t pdf you need to do this

500 - 300 , 300 - 200 and co-ordinate of point in pdf w.r.s.t top of the
pdf is (200,100)

Note : PDF.js enhance the PDF when displaying online so the real
co-rodinate in actual co-ordinate when view using PDF Viewer tool like
ADOBE ACROBAT reader wont be 200,100 for the above one

> _______________________________________________
> dev-pdf-js mailing list
> dev-p...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-pdf-js
>

[Yury Delendik]

On 2/22/2013 4:32 AM, Viren Negi wrote:
> Note : PDF.js enhance the PDF when displaying online so the real
> co-rodinate in actual co-ordinate when view using PDF Viewer tool like
> ADOBE ACROBAT reader wont be 200,100 for the above one
>

The API provides way to convert the coordinates between pdf page and
canvas coordinate systems [1]. Just create a viewport with specific
scale (see getViewport documentation at [1]) and use its
convertToViewportPoint and convertToPdfPoint functions to translate the
coordinates [2]. PDFView.pages[pageNumber - 1].viewport will return the
current viewport for specific page (see usages in viewer.js).

[1] https://github.com/mozilla/pdf.js/blob/master/src/api.js#L225
[2] https://github.com/mozilla/pdf.js/blob/master/src/util.js#L381

[luc...@gmail.com]

Il giorno sabato 23 giugno 2012 02:12:32 UTC+2, avibodha ha scritto:

[boris...@gmail.com]

PDFView.page always outputs 1. I can't figure out how to retrieve the current page number in viewer.html!!!!

[Jakob Miland]

Hi Boris,

It does not. Navigate to http://mozilla.github.com/pdf.js/web/viewer.html and open your console, PDFView.page follows the actual page number accordingly. Maybe if you provide some more details about your problem, it'd be easier to help you out.

Regards,
Jakob Miland (Saebekassebil)

Den 17/03/2013 kl. 20.18 skrev boris...@gmail.com:

> PDFView.page always outputs 1. I can't figure out how to retrieve the current page number in viewer.html!!!!

[Jakob Miland]

Hi Boris,

It does not. Navigate to http://mozilla.github.com/pdf.js/web/viewer.html and open your console, PDFView.page follows the actual page number accordingly. Maybe if you provide some more details about your problem, it'd be easier to help you out.

Regards,
Jakob Miland (Saebekassebil)

Den 17/03/2013 kl. 20.18 skrev boris...@gmail.com:

> PDFView.page always outputs 1. I can't figure out how to retrieve the current page number in viewer.html!!!!

[boris...@gmail.com]

[Viren Negi]

Are u sure u getting the PDFView.page output as 1 every time on demo site
it work nicely check this [image: Inline image 1]



Hope this might clear something If there any u miss in the process

Thanking You

Regards
Viren Negi

On Mon, Mar 18, 2013 at 12:48 AM, <boris...@gmail.com> wrote:

> PDFView.page always outputs 1. I can't figure out how to retrieve the
> current page number in viewer.html!!!!

[Viren Negi]

Are u sure u getting the PDFView.page output as 1 every time on demo site
it work nicely check this [image: Inline image 1]



Hope this might clear something If there any u miss in the process

Thanking You

Regards
Viren Negi
On Mon, Mar 18, 2013 at 12:48 AM, <boris...@gmail.com> wrote:

> PDFView.page always outputs 1. I can't figure out how to retrieve the
> current page number in viewer.html!!!!

[boris...@gmail.com]

Hi Jakob and Viren. Thanks for your answer.
I am trying to implement a context menu (rightclick menu) on viewer.html in order to process image with OCR after retrieving pdf page. The only problem is that I cannot retrieve the "pageNum" variable from the canvas or document.getElementById('pageNumber').value. Just don't figure out how!!!

Let me show you my approach at http://bit.ly/ZmbPfQ, go and right-click to see what I mean by context-menu. But I need it to extract just THIS PAGE and don't know how to get the current page number.
I tried with the simplest version of pdf.js viewer (pdfjs-prevnext) (You can check it in http://jsbin.com/pdfjs-prevnext-v2/2091/edit) with this code:

<html>
<body>
<div>
<button id="prev" onclick="goPrevious()">Previous</button>
<button id="next" onclick="goNext()">Next</button>
&nbsp; &nbsp;
<span>Page: <span id="page_numo"></span> / <span id="page_count"></span></span>
<!--<input type=text id="elNum" value=1>-->

</div>

<div>
<canvas id="the-canvas" style="border:0px solid black"></canvas>
</div>

<!-- Use latest PDF.js build from Github -->
<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>

<script type="text/javascript">
//
// NOTE:
// Modifying the URL below to another server will likely *NOT* work. Because of browser
// security restrictions, we have to use a file server with special headers
// (CORS) - most servers don't support cross-origin browser requests.
//
var url = 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf';

//
// Disable workers to avoid yet another cross-origin issue (workers need the URL of
// the script to be loaded, and currently do not allow cross-origin scripts)
//
PDFJS.disableWorker = true;

var pdfDoc = null,
pageNum = 1,
scale = 0.8,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');



numero = 1;

//
// Get page info from document, resize canvas accordingly, and render page
//
function renderPage(num) {
// Using promise to fetch the page
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;

// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext);
});

// Update page counters
document.getElementById('page_numo').textContent = pageNum;
document.getElementById('page_count').textContent = pdfDoc.numPages;
//sic = document.getElementById('elNum');
//sic.value = pageNum;
}

crc = 1; //This global variable will be used on viewCurrPage to retrieve current page Number


// Go to previous page
//

function goPrevious() {
if (pageNum <= 1)
return;
pageNum--;
crc = pageNum;
renderPage(pageNum);
viewCurrPage(); //Function to write the content of div with current page Number
}

//
// Go to next page
//
function goNext() {
if (pageNum >= pdfDoc.numPages)
return;
pageNum++;
crc = pageNum;
renderPage(pageNum);
viewCurrPage();
}

//
// Asynchronously download PDF as an ArrayBuffer
//
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
pdfDoc = _pdfDoc;
renderPage(pageNum);
});



</script>
<script language=javascript>
var viewCurrPage = function() {
console.log('Current page is '+crc);
document.getElementById('one').innerHTML = '<a href="edit_meta.php?page='+crc+'">Editar Metadata pagina '+crc+'</a>';
}
</script>
<div id="one"><a href="edit_meta.php?page=1">Editar Metadata pagina 1</a></div>

</body>
</html>

The function is simple and it tries to rewrite the content of div #one with the function viewCurrPage(). However, this version is so simple. PDF.js is a completely different thing and until now I have no idea how to implement this. I know there must be a simplest approach to this.

Thanks for your help!!

[boris...@gmail.com]

[boris...@gmail.com]

Could not see the image. Still nothing is clear about the use of PDFView.page

[boris...@gmail.com]

[boris...@gmail.com]

[Ehsaan]

On Saturday, June 23, 2012 at 5:12:32 AM UTC+5, avibodha wrote:
> Hi, could anyone give me some pointers on how to take a mouse position (pageX,pageY) and figure out the PDF page number and page coordinates I'm over? I'm using the viewer.html as my base page.
>
> thanks much

the links provided was not working gives 404 error

https://github.com/mozilla/pdf.js/blob/master/src/util.js#L381
https://github.com/mozilla/pdf.js/blob/master/src/api.js

[Ehsaan]

On Saturday, June 23, 2012 at 5:12:32 AM UTC+5, avibodha wrote:

> Hi, could anyone give me some pointers on how to take a mouse position (pageX,pageY) and figure out the PDF page number and page coordinates I'm over? I'm using the viewer.html as my base page.
>
> thanks much

document.getElementById('viewerContainer').scrollTop;

run in console to get position from top ( Y - Axis )

document.getElementById('viewerContainer').scrollLeft;

run in console to get position from left ( X - Axis )