openseadragon/openseadragon

An open-source, web-based viewer for zoomable images, implemented in pure JavaScript.

Lucian

@dyablohunter

@msalsbery Hey mate :D Can you help a brother out? I am trying to understand if openseadragon can take a XML or something and simply use that to load custom tiles in a grid fashion (the grid size will be determined by the amount of images available) I want to do this instead of using the tiles supplied by other software.

bwiebeck

@bwiebeck

@iangilman Totally understandable on the quarantine schedule stuff. I am still looking to figure out my issue which i posted more info about here openseadragon/openseadragon#1794

mhktech

@mhktech

Hello All, I am new to openseadragon (just learned about this today) and am hoping that a member in this forum can guide me on the best approach to implement a requirement. I have several high resolution images (ranging from 300MB - 1GB) on an azure server and would like to show those images using openseadragon viewer. I understand that i would need to convert those images to a DZI format to use openseadragon. Whats the best tool to convert since the images are going to be in azure? Would it make sense to convert the images to a dzi format and then upload to azure? I am looking for some guidance on this topic. Thanks!

Web server is IIS on an azure server. Thanks!

VoidVolker

@VoidVolker

@mhktech hi! Welcome! Try my tool (bash script): https://github.com/VoidVolker/MagickSlicer

mhktech

@mhktech

@VoidVolker can i run this on a windows server?

VoidVolker

@VoidVolker

@mhktech using linux subsytem - yes, it shall work, but I have not tested

erikradisch

@erikradisch

Hello everybody. I implement openseadragon into my GWT-Project. So far it worked. The only problem is, that I cannot press any button after full screen. I saw, that this was already reported as a bug. I wandered, if there are any workarounds?

this is the bug, I am refering to: openseadragon/openseadragon#1127

sorry, that one: openseadragon/openseadragon#1587

jaroslawwroblewski

@jaroslawwroblewski

Hi, I implement openseadragon in Angular 9 and I have a problem with backend requests. I tried using the interceptor to add headers (cookie: okta-oauth-nonce=xzA0BlbQEFpSxPdLSKS7H... ) to tilesource requests but it doesn't work: / did anyone solve the problem of headers in the new angular?

jaroslawwroblewski

@jaroslawwroblewski

I resolved this problem using:

...{
        loadTilesWithAjax: true,
        ajaxHeaders: {
          authorization: `Bearer ${this.oktaService.getIdToken()}`
        }
      }

jaroslawwroblewski

@jaroslawwroblewski

but I still don't know how can I call for images (tilesource) like google without a long tail pending? I mean, if I move the view and the coordinates change, I want to cancel previous (not current) requests and call for new images with the coordinates of the moved area. This will significantly improve application performance. @iangilman any Ideas?

erikradisch

@erikradisch

got it figured out:
var viewer = $wnd.OpenSeadragon({
element: where,
showRotationControl: true,
prefixUrl: "scripts/openseadragon-bin-2.4.2/images/",
tileSources: ressource,
});
viewer.addHandler("pre-full-page", function (data) {
data.preventDefaultAction=true;
openFullscreen();
});
function openFullscreen() {
if (where.requestFullscreen) {
where.requestFullscreen();
} else if (where.mozRequestFullScreen) {
where.mozRequestFullScreen();
} else if (where.webkitRequestFullscreen) {
where.webkitRequestFullscreen();
} else if (where.msRequestFullscreen) {
where.msRequestFullscreen();
}
}

mhktech

@mhktech

Has someone implemented openseadragon by loading images from the azure? If so, can you give me an overview of the steps? Thanks!

toloudis

@toloudis

Using OpenSeaDragon, I've implemented a deep zoom of a large tiled field of small thumbnail images here : https://www.allencell.org/deep-cell-zoom.html Now I'd like to link every little tile in there to a unique url. I was wondering if there are ways to associate mouse clicks to unique urls -- can metadata be encoded into the image pyramid somehow so that I can build a url from a tile's user data? Does Openseadragon provide for this or would I have to do it completely manually, somehow.

Lucian

@dyablohunter

Awesome. It can be done for sure. I don't know how yet :D take a look at this: http://iangilman.com/openseadragon/flickr/

Lucian

@dyablohunter

I am trying to do something much harder, and I have no idea how to go about it atm. Trying to make a dynamic grid of 1 million images, all the images are slowly uploaded into a folder, all having different levels of zoom, so I am trying to do a custom tile system that displays whatever number of images is available every time you refresh the page, having some trouble hacking this tho', don't know where to start.

Would also want to implement the flickr functionality above, at least the click to select, center & zoom system, plus the tag system along with the link or (HTML) overlayed which probably comes from that openseadragon overlay script.

Ian Gilman

@iangilman

@jaroslawwroblewski Here's a little discussion on your question: openseadragon/openseadragon#1747

@erikradisch I'm glad you found a workaround! Does it make sense to add to the issue openseadragon/openseadragon#1587 If so, please do :-)

@mhktech I don't have any Azure experience, but maybe I can help if you have specific questions… As for creating DZI files, there are many options: http://openseadragon.github.io/examples/creating-zooming-images/ including ones specifically written for Microsoft technology. That said, the one I usually recommend is VIPS, which I think runs most everywhere.

Ian Gilman

@iangilman

@toloudis There's nothing like that built into OpenSeadragon. You probably wouldn't want it associated with the tiles, exactly, since you don't necessarily want a one-to-one relationship between tiles and URLs (especially at the low-resolution end of the pyramid).

My recommendation is to convert the mouse location to an image coordinate and then do some math to figure out which grid cell it is.

samyuan31515

@samyuan31515

Does anyone know how to use the OpenSeaDragon Magnifer without dragging the hightlighted region? Just moving the mouse and the navigator like box will magnify the place your mouse is pointing. Thanks!

Ian Gilman

@iangilman

@samyuan31515 Doesn't look like that's a feature built into that plug-in, but perhaps you could work with its code to add it? https://github.com/picturae/OpenSeadragonMagnifier/blob/master/src/magnifier.js

Otherwise, you could also build it from scratch. Make two OpenSeadragon viewers, both showing the same tile source. Watch for mouse movement in viewer A (you may need to use a MouseTracker) and use the mouse position (converted to viewport coordinates) as the center of a rectangle you use to call fitBounds on viewer B.

raffaele messuti

@atomotic

hi! my first question here: after a zoom event, how i can get the viewport center? tried eventSource.viewport.getCenter(), but the result is rounded/approximate?

1 reply

David Tee

@davidphtee

Hi room! I'm trying to drag a div overlay element across my canvas. I'm using MouseTracker with a dragEndHandler but I'm getting confused with the coordinates. When I'm at zoom level 1, everything works OK. I pickup the source viewportPoint coordinates of the dragged element, add them as an offset to the viewportPoint coordinates passed via the dragEndHandle event.position. However, when zoomed in, the new viewportPoint coordinates are not correct. ANy thoughts on how to do this (better)? Thanks

3 replies

Greg C

@GregC90787496_twitter

So I have a massive tif images sitting on my unix server. what is the easiest tool to break it into small images so I get the viewer running on it?

Greg C

@GregC90787496_twitter

I dont want to implement anything complex, I was hoping just "a) generate small tile images b) change some configuration to point to tiles c) done"

Greg C

@GregC90787496_twitter

Ok looks like zoomify is what I want, ill give that a shot

jaroslawwroblewski

@jaroslawwroblewski

Hi, I have a problem with duplicate requests (OSD call to the backend using the same tileurl so I have 2 requests with the same image). When I set showNavigator: false then i don't have problem with duplicating requests. Why is the navigator requesting the same image again?

Ian Gilman

@iangilman

@GregC90787496_twitter That's a fine option. I'm also a fan of using https://libvips.github.io/libvips/ to create DZI tiles.

Ian Gilman

@iangilman

@jaroslawwroblewski Interesting. The navigator is just another viewer, but I thought OpenSeadragon viewers could share tiles in the tile cache. Perhaps that's not working somehow. At any rate, the browser also has a cache… Two requests to the same image should just generate one network call, right? Unless you have your browser cache disabled for debugging purposes (as you can do in the Chrome inspector, for instance). Anyway, it might be worth filing an issue about…

jaroslawwroblewski

@jaroslawwroblewski

@iangilman What should I do? Why does Navigator not use images downloaded by the main instance (viewer)? The browser has a cache available :/ I set loadTilesWithAjax: true maybe this is the reason?

Ian Gilman

@iangilman

@jaroslawwroblewski Probably the next step is to file an issue in GitHub so any interested parties can discuss. Can you make a repro to share? Like I said, I I think the vanilla version of this already works. Maybe it's because you're using loadTilesWithAjax or something. Anyway, sounds like there's a bug that needs fixing.

jaroslawwroblewski

@jaroslawwroblewski

Hi, I almost solved the problem. I just need to check in the navigator instance if the main viewer has already downloaded images and use them, if necessary

mosheash

@mosheash

Hi, can anyone recommend an annotation library that works well with openseadragon? I have looked into using GeoJS for the annotation part (drawing rectangle, point, polygon using the mouse), but not sure how to integrate GeoJS and osd together, if at all possible.

Anas

@AnasGhrab

Hi, why viewer.showNavigationControl = true/false doesnt' work after initialization ?

Ian Gilman

@iangilman

@mosheash You might look into https://github.com/recogito/annotorious-openseadragon

Ian Gilman

@iangilman

@AnasGhrab Changing the options you used when creating the viewer generally doesn't work; that's not meant to be part of the API (though there are some exceptions). If you want to hide the navigation controls after initialization, use viewer.setControlsEnabled(false).

Ian Gilman

@iangilman

@AnasGhrab I've added some additional thoughts to openseadragon/openseadragon#1817 as well.

menguzat

@menguzar_twitter

Hi people :) I'm new here but I have a question. I try to use the 'fully-loaded-change' event of the tiledImage in my viewer.

This is the way I go, but something's not right. Can anyone point me in the right direction?

var viewer = OpenSeadragon({
id: "openseadragon1",.........
var tile=viewer.tiledImage;
I then do
tile.addHandler('fully-loaded-change', function(){..........

which doesn't work :) how should I access the tiledImage here?

mosheash

@mosheash

@iangilman

@mosheash You might look into https://github.com/recogito/annotorious-openseadragon

thanks for the suggestion. It seems like annotorious supports only one type of annotation. Do you know if this can be extended?

Ian Gilman

@iangilman

@mosheash I don't know. Try asking in https://gitter.im/recogito/annotorious

BTW, there are additional annotation plug-ins (you can find them at http://openseadragon.github.io/#plugins), but I think they have fewer features.

@menguzar_twitter You need to wait for the "open" event before you can access the tiled image. Then you can do so via viewer.world.getItemAt(0). Remember once you get a 'fully-loaded-change' event, you still need to check whether fully loaded went true or false.

BTW, there are some helpful functions for dealing with "fully loaded" here: openseadragon/openseadragon#1257

Rik Lewis

@riklewis

I'm looking to replicate the lighbox and slider on this page... https://www.artsy.net/artwork/louis-leopold-boilly-portrait-of-a-young-boy-wearing-the-decoration-du-lys - anyone know how they've done it?

Ian Gilman

@iangilman

@riklewis I don't know exactly, but it should be fairly straightforward… You just need a modal window with an OpenSeadragon viewer and a slider hooked up to its zoom level. Let me know if you run into trouble building it…

Rik Lewis

@riklewis

@iangilman Thank you for coming back to me. I had hoped there was a plugin or extension someone knew of, but I did up building it myself... https://londonartweek.co.uk/artworks/a-bishop-saint-triumphs-over-the-devil/

Where communities thrive

People

Repo info

Activity