These are chat archives for openseadragon/openseadragon

9th
Jan 2018
Ian Gilman
@iangilman
Jan 09 2018 00:39
@dpwrussell Since you're using tiledImage specifications instead of tileSources, you use their tileSource property. It looks like so:
var viewer = OpenSeadragon({
   id: "openseadragon1",
   prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.3.1/images/",
   tileSources: [
     {
       tileSource: {
         height: 16192,
         width:  13120,
         tileSize: 1024,
         maxLevel: 4,
         getTileUrl: function( level, x, y ){
           return base + (4 - level) + "_" + x + "_" + y + ".jpg";
         },
       },
       x: 0.1,
       y: 0.1,
       width: 0.1,
       opacity: 1
     },
     {
       tileSource: {
         height: 16192,
         width:  13120,
         tileSize: 1024,
         maxLevel: 4,
         getTileUrl: function( level, x, y ){
           return base + (4 - level) + "_" + y + "_" + x + ".jpg";
         }
       },
       x: 0.1,
       y: 0.1,
       width: 0.1,
       opacity: 0
     }
   ],
   preserveViewport: true
  });
Again, I apologize for how confusing that API is :(
Here's the discussion on the topic: openseadragon/openseadragon#898
Douglas Russell
@dpwrussell
Jan 09 2018 16:47
@iangilman Aha! Yeah, it's a bit weird to have the tileSources contain an object which itself has a key of tilesource! No worries, at some point all projects need to go through the pain of API sanitization!
Ian Gilman
@iangilman
Jan 09 2018 19:49
@dpwrussell Indeed :)
Douglas Russell
@dpwrussell
Jan 09 2018 20:25
@iangilman Ok, that's working thanks. One small difference is that when I do it in the constructor, the width is not treated exactly the same. So with the above example where the two images occupy the same space, the image basically fills the window (If I put them side by side then the two images occupy the whole window). However, if I don't put tilesources in the constructor (and instead add them with addTiledImage) then two images side by side (with a width of 0.1 each) will occupy 20% of the overall space.
I will make a demo of this and whack it in my S3 bucket beside the data, but meetings are taking over the rest of the day
Maybe what I'm really looking for is a way to configure the viewport. Ideally if a user zoomed all the way out, I'd like the images (if placed in the upper left corner of the viewport), to be in the upper left when zoomed out as opposed to in the centre. The reason is that if I were to programmatically add some more images to appear in another area, I want the original images and their positions to remain the same. Hope that makes sense.
Ian Gilman
@iangilman
Jan 09 2018 21:08
@dpwrussell Both techniques are laying out the images in the same way, the only difference is that when you give them to the constructor, the viewer automatically goes home once they are loaded, whereas when you give them to addTiledImage there's not automatic home (though of course you can do it programmatically if you want). You can verify this by hitting the home button.
"Home" is defined by the smallest rectangle that'll fit all images. If you add a third image to the right of the second image, home will automatically adjust to include that third image (though the user won't be taken to home right away unless you call it yourself).
Douglas Russell
@dpwrussell
Jan 09 2018 21:13
Makes sense. Can I make an artificial layout ? So that when I zoom out the "natural position" of the images is like where I placed them in http://localhost:8000/side_by_side_addTiledImage.html. Instead of them moving into the centre as soon as I move the viewport.
Ian Gilman
@iangilman
Jan 09 2018 21:21
@dpwrussell You mean you want to change what "home" is?
You can of course zoom to wherever you want... You don't have to use the home function.
Lay the images out wherever you want and then do viewer.viewport.fitBounds(rect) to zoom to wherever you want. The rect should be in the same coordinate system as the images were laid out with (viewport coordinates).
Douglas Russell
@dpwrussell
Jan 09 2018 21:23
Ah, no. In the http://localhost:8000/side_by_side_addTiledImage.html example, if you start to zoom or scroll or anything, the images jump into the centre
Ian Gilman
@iangilman
Jan 09 2018 21:25
@dpwrussell Oh, I see. That's because the viewport has constraints on it to keep the images in view at all times. Otherwise with that layout if you hit the Zoom In button you would zoom in on the center which is just blank space. That said, you can certainly turn the constraints off if you want.
...and of course the constraints would be different if you had more images on the screen.
Douglas Russell
@dpwrussell
Jan 09 2018 21:26
ok, that makes sense. I'll look into it, thanks. It might be that once I add all the other images that are supposed to be part of this demo this is a non-issue.
Thanks for your help again
Ian Gilman
@iangilman
Jan 09 2018 21:27
I suspect that'll be the case
Btw, this demo might be of interest to you... Perhaps it has some concepts that are related to what you're attempting: http://iangilman.com/osd/test/demo/m2/
Douglas Russell
@dpwrussell
Jan 09 2018 21:32
Yeah, I've seen that one, it's nice, but we want to be a bit more freeform with the panning and zooming around.
I think we're nearly there now.
Once this is over we are going to start looking at how we might do this same demo, but where instead of getting RGB tiles from the server, we instead return only grayscale tiles (there might be 1 to n of those) and then use webgl to combine them into something renderable. In the simplest case, where n=3, assigning red, green and blue to each of the three grayscale tiles per OSD tile.
Douglas Russell
@dpwrussell
Jan 09 2018 21:38
Ultimately we have 60 channel images where the end-user wants to manipulate which colours are assigned to each channel and the intensity range that should be used per channel, and all of it to happen client side.
Ian Gilman
@iangilman
Jan 09 2018 21:40
Sounds cool! I know people have done some things like that, but it's not entirely solved.
Douglas Russell
@dpwrussell
Jan 09 2018 21:41
Yeah, there is an OSD webgl plugin that we've already tried and it does a reasonable job.
but I think maybe a webgl drawer might be better.
Ian Gilman
@iangilman
Jan 09 2018 21:42
Indeed... We'd love to have such a thing, but nobody has tackled it yet.
Douglas Russell
@dpwrussell
Jan 09 2018 21:42
Yeah, it remains to be seen what kind of resources we're going to be able to assign to this, but we'll be in touch if we decide to tackle the drawer particularly.
Ian Gilman
@iangilman
Jan 09 2018 21:43
Please do!
Douglas Russell
@dpwrussell
Jan 09 2018 22:38
Is there a recommended way to attach metadata to a tilesource? Now that I'm using opacity to hide some sources, I need to flip the opaque images to hidden and some subset of hidden images to visible based on metadata, all in response to a user action.
Ian Gilman
@iangilman
Jan 09 2018 22:39
There's not... You could certainly add your own properties to the tiled images if you want. Generally what I do, though, is make my own data structure outside of OSD that has all of the metadata plus references to the tiled images.
Douglas Russell
@dpwrussell
Jan 09 2018 22:42
How do you reference them, by index or by a reference to the item? I haven't dug into the internals, but I know that index can be changed to alter the ordering.
Ian Gilman
@iangilman
Jan 09 2018 22:43
By reference to the item
OSD doesn't really keep any of the other kind of ID for them
...and index is important for determining draw order, so yeah, you wouldn't want to count on it as an ID.
Douglas Russell
@dpwrussell
Jan 09 2018 22:45
I guess I'll construct the viewer then use the initial ordering to get the items
Even if I use addTiledImage it doesn't look like I can immediately get a reference to the item to put into my map for lookup.
Ian Gilman
@iangilman
Jan 09 2018 22:49
With addTiledImage you can get the reference from the success function.
Either way it's asynchronous