Set x y onload

[rsands2801]

Is there a function to set the x and y position of the image on load. Basically we have an app that submits info to server, it regenerates the view but we want user to have image in same position as it was before refresh

set_zoom works great for setting the old zoom level, but is there an abilitity to set x and y?

[can3p]

No, iviewer does not have this functionality right now. I thinks it's time to implement the method like setVisibleRect, that will take the x,y, width and height and adjust zoom and image position accordingly.

[rsands2801]

I created a function in the .js to set the position of x and y.  Works well. I also have it setting zoom afterload. So I can save the current view to database and then go back and edot it at a later date. Although a function to do it all at once would be even better instead of multiple ones.

Richard

-------- Original message --------
From: Dmitry Petrov [email protected]
Date:
To: can3p/iviewer [email protected]
Cc: rsands2801 [email protected]
Subject: Re: [iviewer] Set x y onload (#56)

No, iviewer does not have this functionality right now. I thinks it's time to implement the method like setVisibleRect, that will take the x,y, width and height and adjust zoom and image position accordingly.

—
Reply to this email directly or view it on GitHub.

[can3p]

Can you post the code of this function here?

[rsands2801]

The function i used to set xy

iv.iviewer('set_xy', '','');

set_xy: function(x, y)
{
this.setCoords(x, y);
},

Its the same as moveTo. but moveTo is actually correcting the co-ords to the container from memory. So after seeing that moveTo was calculating to container it was easier to have a function not doing it. Defiantely a worthwhile feature if someone wants to reload a page and still show same crop, etc

[can3p]

Please, look at the branch 56-set-display-rect

It now has setDisplayRect function that recieves x,y, width and height of image part to show. The method will adjust image zoom and position in a way to fit into the container.

[rsands2801]

width and height being the iviewer div width? or the width and height of the image itself?

[can3p]

It's a width and height of the part of the image that you want to see in the container. So, to store the position you just need to get image coordinates in the top left and bottom right corner. From them you can get width and height.

[rsands2801]

But on a reload the container should be the same. So no need for w and h. Maybe im bot grasping the concept sorry :)

I use set zoom to get the image scale correct first...then set_xy and its correct position

Sent from Samsung Mobile on O2

-------- Original message --------
From: Dmitry Petrov [email protected]
Date:
To: can3p/iviewer [email protected]
Cc: rsands2801 [email protected]
Subject: Re: [iviewer] Set x y onload (#56)

It's a width and height of the part of the image that you want to see in the container. So, to store the position you just need to get image coordinates in the top left and bottom right corner. From them you can get width and height.

—
Reply to this email directly or view it on GitHub.

[can3p]

If there is no difference between set_xy and setCoords, why do you need new method?
My implementation just makes sure that you will see the part of the image you want.

If your container can change it's width depending on window size, than the zoom can be different.

We can make another method - which will take x,y (the physical pixel on image), zoom and deal in such a way that image will be properly scaled and rotated and point x,y will be in the center of the container. Will that work for you?

[mirceaagr]

Hello, your script is very usefull.
Is there a way to add markers to an image that will keep position on zoom in/out? Maybe add infoboxes to that markers
Thank you

[tbfe-de]

This is a useful feature to me (and BTW thanks for making "iviewer" available, Dmitry).

I wonder why this feature isn't in the main stream?

As I found no other easy way (may be I overlooked something trivial?) I integrated zooming to a display rectangle with the startup options (see my changes below). With these changes in addition to some zoom factor or 'fit' you may use something like

zoom: { x: 100, y: 250, w: 400, h: 300 }

in the startup options to set an initial display rectangle. Unspecified x/y will start the rectangle left/top, unspecified w/h extend the rectangle right/bottom border. Furthermore specified positive values for x/y and w/h extend from left/top (border) to right/down, negative values extend right/bottom (border) left/up.

E.g. you can set the display rectangle also relative to the lower right corner of the picture by using something like

zoom: { x: -1, y: -1, w: -300, h: -200 }

or you may use

zoom: { x: -300, y: 100 }

to set the right top of the display rectangle 300 pixels from right and 100 pixels from top, extending it to the bottom right corner.

(Note that coordinates 0,0 denote the top left corner and -1,-1 the bottom right corner, just like 0 selects the first and -1 selects the last element of a list in Python ... though you probably wouldn't notice the difference if -1,-1 actually were inset by one pixel :-)).

Here is what I added:

@@ -380,6 +380,27 @@ $.widget( "ui.iviewer", $.ui.mouse, {
         if(this.options.zoom == "fit"){
             this.fit(true);
         }
+        else if(typeof(this.options.zoom) === 'object'){
+            var x = this.options.zoom.x || 0;
+            if (x < 0) {
+                x += this.img_object.orig_width() + 1;
+            }
+            var y = this.options.zoom.y || 0;
+            if (y < 0) {
+                y += this.img_object.orig_height() + 1;
+            }
+            var w = this.options.zoom.w || this.img_object.orig_width() - x;
+            if (w < 0) {
+                w = -w;
+                x -= w;
+            }
+            var h = this.options.zoom.h || this.img_object.orig_height() - y;
+            if (h < 0) {
+                h = -h;
+                y -= h;
+            }
+            this.setDisplayRect(x, y, w, h);
+       }
         else {
             this.set_zoom(this.options.zoom, true);
         }

[can3p]

@mirceaagr Please, add a new issue for that

[can3p]

@tbfe-de Hi, thanks for the comment. I've made a different implementation a while ago. It's based not on the width and height of the display area but on the current offset, zoom and angle areas. So, you can just save them (see the test demo) and restore if needed.

I thinks that this solution is rather bad in cases when I just want to display some part of the image, but it works well in cases when I need to serialize widget state and restore it later.

Will that version work for you?