image set navigation interface

[johnwalker]

openseadragon has something nice where you can switch between pages. it might be nice if we could use their system for switching. we would have to be able to temporarily bring the secondary canvas into the foreground somehow.

[stephenrparsons]

Could you link to the one you are looking at? I did look at their tiled source collections ( https://openseadragon.github.io/examples/tilesource-collection/) but that did not seem appropriate for what we are doing.

On Thu, Apr 9, 2015 at 2:24 PM john walker notifications@github.com wrote:

openseadragon has something nice where you can switch between pages. it might be nice if we could use their system for switching. we would have to be able to temporarily bring the secondary canvas into the foreground somehow.

— Reply to this email directly or view it on GitHub https://github.com/viscenter/layered-viewer/issues/7#issuecomment-91318220 .

[johnwalker]

I think it was here:

https://github.com/openseadragon/openseadragon/tree/master/test/demo/m2

and here:

https://github.com/openseadragon/openseadragon/tree/master/test/demo

[johnwalker]

do you and @thomasloy think you can figure this out

[johnwalker]

@csparker247 do you have a preference as far as navigation goes?

[johnwalker]

also, as far as switching mechanics goes, its probably best just to look at the api and add some listeners to some button elements. the m2 example thats really fancy is using d3js and is quite large, but not what we need.

[csparker247]

Are we talking about the interface for navigating between page numbers or are we talking about the interface for selecting the overlay for one specific page?

For the latter, I think you'd want to do something similar to the horizontal example here: https://openseadragon.github.io/examples/ui-reference-strip/ However, I don't think you'd want to confine that into your OSD canvas. I think you'd want to break that functionality out into its own div that you can then style independently. Here's a wireframe for how I imagine it being laid out. The green box would be the selected foreground image, the blue box would be the selected overlay image or whatever. The boxes fading off into the distance are just meant to show that a page could have 5 versions or it could have 20+ versions. The interface can't assume a static number of versions.

I would also look at how the Cultural Institute solves some of these problems: https://www.google.com/culturalinstitute/u/0/asset-viewer/battle-scenes-from-the-tale-of-heike-heike-monogatari/iQHNhZfphYJ83A See how they have similar images hidden off on the bottom? You could think of our thumbnail panel as doing a similar sort of thing, remaining hidden until needed. Either way, I think you want a visual selector for what images go into your canvas and I think it might be easier to code your own than it would be to rely on OSD's built-in stuff.

[thomasloy]

@johnwalker I will work on this today.

[johnwalker]

imo, this is the most important issue right now. @thomasloy would you push what you have

[thomasloy]

I haven't yet figured it out. I will most likely push something in a few hours here.

On Sat, Apr 11, 2015 at 8:39 AM, john walker notifications@github.com wrote:

imo, this is the most important issue right now. @thomasloy https://github.com/thomasloy would you push what you have

— Reply to this email directly or view it on GitHub https://github.com/viscenter/layered-viewer/issues/7#issuecomment-91837060 .

Thomas Stephen Loy, University of Kentucky

[thomasloy]

@johnwalker I've been working on this for a while, and the main issue I'm running into right now is how to modify the members of an instance of openSeaDragon (primary and secondary in layered-viewer.js). For example: I need to change primary.tileSources to change the foreground image. Do you know how to do this? Also, I've settled on sly for the navigation bar. I've been experimenting with it and I think it should work for everything we need.

[johnwalker]

awesome. sly sounds like a good choice. i think that the best way is to use:

https://openseadragon.github.io/docs/OpenSeadragon.Viewer.html#open

i don't know whether zoom / pan is preserved, so there might be some ickiness there. usage is most likely:

primary.viewer.open("/foobarbaz.dzi");

if that doesnt work, let me know. this feature is a bear

[thomasloy]

Okay so Stephen and I are still working on having a selected box change the primary and secondary layers, but I do now have it so there is a slider at the bottom and, upon loading the page, it automatically generates those boxes with the address of each dzi for every page in a layer.

[csparker247]

You've probably seen this already, but there is also goToPage(): https://openseadragon.github.io/docs/openseadragon.js.html#line8044

[stephenrparsons]

Currently using

primary.viewport.open('something.dzi')

and that seems to be working well. The zoom and pan are set to defaults when the image is switched, so we have to reset them to where they were. This has to be done after the open() call, which is asynchronous, so right now it just waits for a set delay before resetting pan and zoom. This results in a slight flicker which is not great but is not the end of the world. We can revisit this after other priority features.

[stephenrparsons]

This works now, including clicking and updating the active element when the layer index changes from a keypress.