These are chat archives for openseadragon/openseadragon

27th
Jun 2016
foobarable
@foobarable
Jun 27 2016 09:54
Hi, I added two new controlls, but it seems their internal state does not seem to be updated once they have been hovered once:
This message was deleted
foobarable
@foobarable
Jun 27 2016 10:58
If i add an onBlur handler function it never gets executed
foobarable
@foobarable
Jun 27 2016 11:15
I've added all possible handlers and this is really weird
Example: https://gp3.mpg.de/viewer (check the console while playing arround with the next and previous buttons)
foobarable
@foobarable
Jun 27 2016 11:40
In short: Just the following handlers are executed: press, click, release, exit (but just if clicked before)
Jeffrey Hann
@obihann
Jun 27 2016 12:08
When OSD takes coords and converts them for overlay positions, does it caculate based on the image size or viewport size?
app.bundle.js:151 point $.Point {x: 528, y: 1397}
app.bundle.js:152 windowToImageCoordinates $.Point {x: 0.39300626304801667, y: 1.4582463465553235}
app.bundle.js:153 deltaPointsFromPixels $.Point {x: 0.5511482254697285, y: 1.4582463465553235}
app.bundle.js:154 deltaPointsFromPixelsNoRotate $.Point {x: 0.5511482254697285, y: 1.4582463465553235}
app.bundle.js:155 imageToViewerElementCoordinates $.Point {x: 505975.50000000006, y: 1338326.0000000002}
app.bundle.js:156 imageToViewportCoordinates $.Point {x: 528, y: 1397}
app.bundle.js:157 pointFromPixel $.Point {x: 0.39300626304801667, y: 1.4582463465553235}
app.bundle.js:158 viewerElementToViewportCoordinates $.Point {x: 0.39300626304801667, y: 1.4582463465553235}
My image size is 2580 × 3598
the x and y for the point are relative to the image, so if I just load the image in html, in a relative div then place the overlay by using a absolute div, it is in the correct spot
foobarable
@foobarable
Jun 27 2016 12:13
did you see this page already? http://openseadragon.github.io/examples/viewport-coordinates/ i found it really helpful
Jeffrey Hann
@obihann
Jun 27 2016 12:15
@foobarable I haven't thanks for that
so from what I read on that I am passing in image coords
because the x and y I am using are left and top based on the full size image
foobarable
@foobarable
Jun 27 2016 12:17
yeah. In the overlay example they use viewport coordinates though
i haven't completly figured out how it works with the overlays. especially collection mode seems to handle things differently
Jeffrey Hann
@obihann
Jun 27 2016 12:18
perhaps I should be using the functions from TiledImage instead of the Viewport
foobarable
@foobarable
Jun 27 2016 12:19
if you are not using collection mode they should be the same iirc
Jeffrey Hann
@obihann
Jun 27 2016 12:19
just one image
    return OpenSeadragon({
        id: 'beta16-interactivemap--osd',
        prefixUrl: 'images/',
        navigationControlAnchor: OpenSeadragon.ControlAnchor.BOTTOM_RIGHT,
        showNavigator: false,
        showHomeControl: false,
        showFullPageControl: false,
        autoHideControls: false,
        preserveImageSizeOnResize: true,
        zoomInButton: 'beta16-interactivemap-zoomin',
        zoomOutButton: 'beta16-interactivemap-zoomout',
        tileSources: {
            type: 'image',
            url:  'images/map.jpg',
        }
    });
its a normal jpg, nothign special
foobarable
@foobarable
Jun 27 2016 12:20
have you tried using the viewport coordinates (between 0 and 1)?
Jeffrey Hann
@obihann
Jun 27 2016 12:20
I need to somehow convert to them
because no matter what function I use, they are not in teh correct place
in viewport coords I should be getting x 0.225 and y 0.541
but nothing gives me that, and imagetoViewportCoordinates just gives me back the same x and y I pass in which are image coords
actually none of the positions it returns even make sense, because they should all be >= 0 or <= 1
but pointFromPixel gives me 0.34 and 1.4
foobarable
@foobarable
Jun 27 2016 12:26
the example does it like this: var webPoint = event.position;
var viewportPoint = viewer.viewport.pointFromPixel(webPoint);
Jeffrey Hann
@obihann
Jun 27 2016 12:34
point $.Point {x: 528, y: 1397}
pointFromPixel $.Point {x: 0.39300626304801667, y: 1.4582463465553235}
foobarable
@foobarable
Jun 27 2016 12:34
hmm
Jeffrey Hann
@obihann
Jun 27 2016 12:35
that looks very wrong because that y coord is over 1
foobarable
@foobarable
Jun 27 2016 12:35
haha, yeah
maybe some of the devs can lose a word about i
t
Jeffrey Hann
@obihann
Jun 27 2016 12:36
fun fact, if I divide the x and y I feed into my point before conversion by 4.2, I get results that are almost dead on
but that causes bugs on mobile
:)
foobarable
@foobarable
Jun 27 2016 12:36
What? :D
Jeffrey Hann
@obihann
Jun 27 2016 12:36
I wonder if I add a click event and click where the pin shoudl be, what px it would give me lol
foobarable
@foobarable
Jun 27 2016 12:37
worth a try. i did it like this in collection mode as well
Jeffrey Hann
@obihann
Jun 27 2016 12:38
Do you know off hand how I can get width and height of the image once it is rendered?
I can get the viewport size but I don't think that is the image size
if I get that I could potentially do some math and get the correct placement myself
foobarable
@foobarable
Jun 27 2016 12:41
you could convert the viewport coordinates to image coordinates
  var webPoint = event.position;
            var viewportPoint = viewer.viewport.pointFromPixel(webPoint);
            var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint);
Jeffrey Hann
@obihann
Jun 27 2016 12:43
I think I need to take a break from this and move on to a different feature :) popups on click of the overlays lol
not real popups nobody hurt me
foobarable
@foobarable
Jun 27 2016 12:43
yeah, and maybe wait until someone with deeper insight into osd answers your stuff
Jeffrey Hann
@obihann
Jun 27 2016 12:44
good call
Jeffrey Hann
@obihann
Jun 27 2016 13:43
Thank the gods above, I solved it!
foobarable
@foobarable
Jun 27 2016 13:44
great, what was the solution?
Jeffrey Hann
@obihann
Jun 27 2016 13:44
I had to stop using viewer.addOverlay and instead add the overlays when I created in Openseadragon object
foobarable
@foobarable
Jun 27 2016 13:44
oO
Jeffrey Hann
@obihann
Jun 27 2016 13:44
and then just set the px and py with my top and left positions
foobarable
@foobarable
Jun 27 2016 13:44
this is a difference?
Jeffrey Hann
@obihann
Jun 27 2016 13:45
strangly yes
using addOverlay gives them a different location then if I include them when I create OSD
BETMap.prototype.loadOSDOverlays = function(data) {
    return _.map(data.objects, function(item, n) {

        return {
            id: item.id,
            px: parseInt(item.x),
            py: parseInt(item.y),
            placement: 'BOTTOM',
        };
    });
}

BETMap.prototype.loadSeadragon = function() {
    return OpenSeadragon({
        id: 'beta16-interactivemap--osd',
        prefixUrl: 'images/',
        navigationControlAnchor: OpenSeadragon.ControlAnchor.BOTTOM_RIGHT,
        showNavigator: false,
        showHomeControl: false,
        showFullPageControl: false,
        autoHideControls: false,
        preserveImageSizeOnResize: true,
        zoomInButton: 'beta16-interactivemap-zoomin',
        zoomOutButton: 'beta16-interactivemap-zoomout',
        overlays: this.overlays,
        tileSources: [{
            type: 'image',
            url:  'images/map.jpg',
            width: 2580,
            height: 3598
        }]    
    });
};
foobarable
@foobarable
Jun 27 2016 13:46
thats weird. im using both methods and it's always the same
Jeffrey Hann
@obihann
Jun 27 2016 13:46
with that code I do no conversion of the overlay position at all, just pass in the x and y I pull from my data feed
bizarre
well, I'm not gonna question why it works :P
Ian Gilman
@iangilman
Jun 27 2016 17:33
@sickrandir Good to know, thanks!
@obihann Sorry you had so much trouble with the overlays! The (probably too subtle) difference is that when passing overlays in at construction time, you have a choice of using px or x. px means you're using image coordinates and x means you're using viewport coordinates. addOverlay on the other hand, only takes viewport coordinates.
Jeffrey Hann
@obihann
Jun 27 2016 17:35
ahhh
and it probably wasn't able to convert my px positions properly so thats why it wasn't very accurate
well, its working now, so thats all that matters
Ian Gilman
@iangilman
Jun 27 2016 17:36
Regarding having viewport coordinates with a y of 1.4, that's totally possible if the image is taller than it is wide. By default the image is scaled such that the right side is 1. If the image is twice as tall as it is wide, then the bottom will be 2. If it's a square, the bottom will be 1.
Well, addOverlay just didn't try to convert at all, because it assumed you were passing in valid viewport coordinates.
Jeffrey Hann
@obihann
Jun 27 2016 17:37
oh but I was using the provided functions to convert px to viewport
however they the coords it gave me were off
Ian Gilman
@iangilman
Jun 27 2016 17:39
Incidentally, the viewport coordinates are arbitrary, so you could use your image width for them when you set things up...
        tileSources: [{
            width: 2580, // this sets up viewport coordinates
            tileSource: {
                type: 'image',
                url:  'images/map.jpg',
                width: 2580, // this defines the image
                height: 3598
            }
        }]
Yeah, it's odd that the conversion wasn't working out.
Toke Eskildsen
@tokee
Jun 27 2016 17:41
@iangilman Here's a proof of concept of the infinity zoomer I am working on. With infinity currently being 2 levels deep and current installation running on poor-upstream ADSL: http://ekot.dk/nrtmosaic/
Ian Gilman
@iangilman
Jun 27 2016 17:42
If you stick with the default width of 1, you can do the conversion yourself by multiplying your image coordinates by 1 / imageWidth @obihann
@obihann Anyway, I'm glad you found something that worked! Sorry for the trouble.
@tokee Sweet! Pretty wild.
I kinda of want the second layer to not be so small... I had to zoom in a good deal before I realized what everything was composed of.
I'm sure it would nicer with a faster net connection of course :)
So it does seem like extending infinity further will work?
Toke Eskildsen
@tokee
Jun 27 2016 17:45
Yeah, you'll have to take my word for it that it is my upstream that is the bottlenect.
I am pretty sure that @VoidVolker's stacking suggestion is the way to go for that.
Right now it is 100 pages. My plan is to use it as a demo for a newspaper-collection at work with 2M pages. That should provide decent upstream too.
Ian Gilman
@iangilman
Jun 27 2016 17:49
Should be wild!
Toke Eskildsen
@tokee
Jun 27 2016 17:50
As for second layer, you are not the first to note that. Much as I like displaying it at the finest granularity, the effect would probably be better with larger "pixels".
Ian Gilman
@iangilman
Jun 27 2016 17:50
There's a good amount of gap between the pages in the second level... are you planning on fixing that so the pages all run into each other?
Indeed
Toke Eskildsen
@tokee
Jun 27 2016 17:51
I am not sure there. I use IIPImage with pyramid TIFFs as backing and don't know how well that performs if I request non-power-of-two-sizes?
Ian Gilman
@iangilman
Jun 27 2016 17:52
Gotcha. Well, you can always try! You could also try layering them on top of each other so the extra space is covered.
(assuming the content is in the upper left of each image)
Toke Eskildsen
@tokee
Jun 27 2016 17:52
Another option is to crop them, but I think it would be frustrating not to be able to actually read the articles, if an interesting one was encountered.
Okay, we are probably talking about the same here.
I'll do some performance tests on IIPImage and odd sizes. So far it has performed extremely well, so there is room for using more CPU power.
Ian Gilman
@iangilman
Jun 27 2016 17:55
Sounds good :)
@foobarable I just took a look at your button thing... another issue is that the four buttons on the left all highlight and fade back to normal as a unit, but the two on the right highlight separately. In sequenceMode we have next and previous buttons; maybe you could copy how those are added?
Antoine Vandecreme
@avandecreme
Jun 27 2016 19:13
@obihann Just an idea: the conversion issue might be because the viewer was not yet open when you were doing the conversion
were you waiting for the open event to fire before converting?
Jeffrey Hann
@obihann
Jun 27 2016 22:18
@avandecreme I wasn't waiting for the open event, so that might be it exactly
Another question to throw out here, I have click events for my overlays however on mobile they are never being triggered, they are just plain js click event listeners, should I be doing something special?
Ian Gilman
@iangilman
Jun 27 2016 23:20
@obihann Because our event handling is so demanding, unfortunately regular JS click event listeners don't always do the trick. Try using OpenSeadragon.MouseTracker
Jeffrey Hann
@obihann
Jun 27 2016 23:20
Will do, thanks
So am I understanding it right that icancreate one of these for my overlay?
Ian Gilman
@iangilman
Jun 27 2016 23:22
Yes.
I keep meaning to make a "Here's how to handle clicks on overlays" thing but not getting around to it.
Sometimes I just tag @msalsbery ;)
Jeffrey Hann
@obihann
Jun 27 2016 23:25
Thanks