Page 1 of 1

Getting Coordinates Of Selection In Web Viewer

Posted: Mon Nov 30, 2015 8:36 pm
by Strike12Solutions
I am using the web viewer, thumbnails, and image tool bar in our web imaging application. When the user clicks on the selection rectangle in the toolbar and draws a rectangle in the viewer, how do I get the X,Y coordinates of this rectangle? Also is it possible to have the user double-click and point in the viewer and get the the X,Y coordinates of the image in the location where they double-clicked?

Thanks!
Brian

Re: Getting Coordinates Of Selection In Web Viewer

Posted: Wed Dec 02, 2015 9:22 am
by Alex
Hello Brian,
When the user clicks on the selection rectangle in the toolbar and draws a rectangle in the viewer, how do I get the X,Y coordinates of this rectangle?
Version 8.3 does not have public functions for transforming coordinates from screen to viewer and viewer to image coordinate spaces.
We will add necessary functions in version 8.3.1. Version 8.3.1 will be available in 2-3 days.

Also is it possible to have the user double-click and point in the viewer and get the X,Y coordinates of the image in the location where they double-clicked?
You need subscribe to the double click event of image viewer and get the X,Y coordinates from the event params.

Best regards, Alexander

Re: Getting Coordinates Of Selection In Web Viewer

Posted: Mon Dec 07, 2015 3:08 pm
by Alex
Hello Brian,

Version 8.3.1.1 have new functions:
  • WebImageViewerJS.transformPointFromScreenToControl(x, y) - Transforms point from browser (screen) coordinate space to coordinate space of image viewer.
  • WebImageViewerJS.transformPointFromControlToScreen(x, y) - Transforms point from coordinate space of image viewer to the browser (screen) coordinate space.
  • WebImageViewerJS.transformPointFromControlToImage(x, y) - Transforms point from coordinate space of image viewer to an image coordinate space.
  • WebImageViewerJS.transformPointFromImageToControl(x, y) - Transforms point from image coordinate space to coordinate space of image viewer.
Please use these functions for converting the coordinates.


Here is a code snippet that shows how to subscribe to the moude double click event and show mouse coordinates in image coordinate space:

Code: Select all

$(document).on("dblclick", function (event) {
   var x = event.pageX;
   var y = event.pageY;
   var controlPoint = imageViewer1.transformPointFromScreenToControl(x, y);
   var imagePoint = imageViewer1.transformPointFromControlToImage(controlPoint.x, controlPoint.y);
   var controlPoint2 = imageViewer1.transformPointFromImageToControl(imagePoint.x, imagePoint.y);
   var screenPoint = imageViewer1.transformPointFromControlToScreen(controlPoint2.x, controlPoint2.y);

   console.log("s: ", x, y, "-> c: ", controlPoint, "-> i: ", imagePoint);
   console.log("i: ", imagePoint, "-> c: ", controlPoint2, "-> s: ", screenPoint);
 });
Best regards, Alexander

Re: Getting Coordinates Of Selection In Web Viewer

Posted: Fri Apr 15, 2016 4:47 am
by Strike12Solutions
It took me awhile, but I finally got a chance to try that and it works great!!!! The image point is exactly what I need and will help us a LOT!

One quick question, though. When I double-click, it highlights part of the web page as if I'm trying to select a large portion of the page for a copy/paste function. How would I disable that without disabling the double-click functionality?

Thank you!!!
Nrianm

Re: Getting Coordinates Of Selection In Web Viewer

Posted: Fri Apr 15, 2016 9:35 am
by Alex
Hello,
One quick question, though. When I double-click, it highlights part of the web page as if I'm trying to select a large portion of the page for a copy/paste function. How would I disable that without disabling the double-click functionality?
We need more info about your problem:
  • What browser do you use?
  • How to reproduce the problem? Please send me a step-by-step instruction.
Best regards, Alexander

Re: Getting Coordinates Of Selection In Web Viewer

Posted: Fri Apr 15, 2016 4:13 pm
by Strike12Solutions
I've tested and it is only happening in Chrome and not in IE. When I double-click the image in the viewer, it highlights a large portion of the web page as if I held the mouse down and * it across the page trying to select a bunch of text so I can copy it.

Re: Getting Coordinates Of Selection In Web Viewer

Posted: Fri Apr 15, 2016 5:23 pm
by Alex
I tried to reproduce the problem in our demos in Chrome and was not able to do this. Could you give me a step-by-step guide, which allows to reproduce the problem in our demos? Here are links to our on-line demos: Best regards, Alexander

Re: Getting Coordinates Of Selection In Web Viewer

Posted: Fri Apr 15, 2016 5:41 pm
by Strike12Solutions
I couldn't get it to happen in your demos so I figured it was just something weird with my site. I did some research and found the answer. I added these tags to the style of my division to prevent user selection:

-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;

And that took care of the issue.

Thanks!