An open-source, web-based viewer for zoomable images, implemented in pure JavaScript.
@TravisH84 I'm not sure I understand what you're asking for with the overlays...how would they render if not as DOM elements? Are you saying you want OpenSeadragon to make the DOM elements instead of you? Or are you saying you want to render them yourself directly into the canvas?
As for determining the source of the currently loaded tile, do you really mean tile, or do you mean image (which is composed of multiple tiles)?
At any rate, you can examine the
.source of a TiledImage to see if that gives you the info you need. That will be a TileSource (or a TileSource subclass), and what data it has depend on how it was created.
In general, if you want to know what image is loaded, I recommend keeping a separate copy of that info in your own JavaScript.
Sorry you are right, I was referring to the image loaded rather than the tile.
Cool. Are you just doing one image at a time?
In terms of the elements, I was suggesting that it would be nice if OpenSeaDragon could render the elements and also handle any display of the elements, for example say I dynamically add a point overlay to an image, it would be nice if OpenSeaDragon could handle the clicking of this point, and the displaying of associated information automatically, rather than needing to dynamically add divs to display information, for example with an overlay perhaps there could be an optional title and body element, so that openseadragon could have the overlay added dynamically (through HTML perhaps a websocket provides the data) and then when the point is clicked on the Title and Body are rendered automatically.
In terms of the image, I am doing to do one image at a time but the image may vary.
Gotcha. A more advanced overlay system like that sounds cool. We wouldn't want to put it into OpenSeadragon core, because it would greatly increase the complexity of the base library, but it would be an awesome plugin!
Basically, I am trying to create a 'shell' for the OpenSeaDragon and the annotation system, and have the Javascript determine which image is being displayed where I would then call up the DB for that image to retrieve any overlays / annotations. I do intend on using something like PHP at a later date, so have one page but say specify the path in the URL
If you file an issue for it, I can add the "possible plugin" tag and hopefully someone will pick it up.
Cool. Yeah, just keep track of what the image is before you send it into OpenSeadragon, and then later if you need to know what it is, you've got that data.
thanks @iangilman, in the API is there a method to list the currently added overlays, I could see update, add and remove but nothing that programmatically lists the overlays, i am thinking if I can get the overlays from the current image (e.g. x & y positions) and their ID / element name then through a plugin if the mouse is clicked at that position it could show DB information.
We should probably have an accessor function, but in the meantime, it's
viewer.currentOverlays which is an array of OpenSeadragon.Overlay objects.
so is the viewer.currentOverlays the overlays that relate to the current tile(s) being shown or is it more about the overlays on the entire image?
The entire image
that is exactly what I was after, thanks :)
Excellent :)
I'm heading out...good luck!
I look forward to seeing what you build! :)
i am more of a tinkerer so will see what I cobble toghether is the better phrase :P
Teeheehee :)
Either way, I'm sure it will be lovely ;)
@avandecreme thanks, can you share your tiles from your tool?
@avandecreme i fixed zoom level logic, now it must works )
Hey Guys, it's me again. After digging a few days in my question i understood, that i don't quite understand, how should i crop raster images into tiles. @VoidVolker I bet your script doesn't suit me, as i don't need dzi images(Since my colleagues did't share the server-side with me, i have to worry about cropping sample images into tiles). Correct me, if i'm wrong: We have a few levels of zoom, for example, default level is 11(Am i wrong?) and now I have 5x5 512x512 images, for the level 12, while zooming, i have to provide 10x10 256x256 images? So I have to crop initial image by 256x256 tiles? And the other questing is about rendering images with openSeaDragon. I have images in .tiff format. Since most browsers don't support this kind of images, I have to send them to frontEnd as DataArray, to rewrite something in openSeaDragon? Should it be Viewer, or Drawer, or even World?
there are no default level
the max level calculate from image and tile size
down to what? I have an image of 2560x2560 and initial tile size of 256. It loads in level 11 and allows me to zoom to level 12
down to 0
so. What am i doing wrong? height: 2560,
width: 2560,
tileSize: 256,
getTileUrl: function(level, x, y){
return "./resource/tiles/0/" + (level - 11) + "/" + x + "" + y + ".tif"
}
width: 2560,
tileSize: 256,
getTileUrl: function(level, x, y){
return "./resource/tiles/0/" + (level - 11) + "/" + x + "" + y + ".tif"
}
sorry, dunno how to paste code properly
right now basic logic is next: zoom level 0 — 2^0=0 (0x0 px total image size, but in real it will be 1x1); 1 — 2^1=1 (1x1px); 2 — 2^2=4 (4x4px)
got you, thanks!
dzi must work as-is - I still making example page
I updated today
at level 8 tile size be 256
or less, if image not ideal size )
unfortunately, i have to step aside of dzi
in OSD docs:
OpenSeadragon({
...
tileSources: "/example-images/highsmith/highsmith.dzi",
...
});
for me OSD docs a bit complicated :(
for my project I used custom tile source
and I decide to share my script and add options for DZI
r u from Ru?
yes
me 2 :)
nice )
What means 'best' tile in this case?
// Load the new 'best' tile
if ( best ) {
loadTile( tiledImage, best, currentTime );
}
@iangilman and, could you please explain, what 'coverage' in tiledImage?
coverage: {}, // A '3d' dictionary [level][x][y] --> Boolean. tiledImage.js:128