An open-source, web-based viewer for zoomable images, implemented in pure JavaScript.
Hey there! I love open sea dragon, been using it for a few touch screen projects. Running into a bit of a headache working with transparency. Does anyone have any recommendations for good formats to export a looping 1 to 3 second 4k animation with a transparent background? We have been using tiles gifs with the background included but I feel like there has to be an easier solution.
There's 10 active at a time so we are trying to keep them minimally sized. Also we are exporting from after effects if there's anything specific
I'm impressed it works at all!
@cozymoses ^
haha let me clarify, the majority of it is static vectors/images, we're using animated GIF tiles for specific animated hot spots as that was our best solution. However if there's a method to just overlay a transparent video we wanted to look into that as well. Wondering if anyone else has experience with animated overlays/animated videos with transparency? GIF is limited and has pretty crappy transparency cleanup.
@cozymoses Here's an example of using a GIF as an overlay: https://codepen.io/antonioxdias/pen/JmZova you should be able to use a similar technique for any other kind of HTML element, such as a video.
hi - i need capabilities to do annotations on OpenSeaDragon(OSD) (drawing and dragging bounding boxes with different colors on top of OSD). I found that the library annotorious had made an integration with OSD some years ago...but it also seems pretty dead and abandoned, so I did not go down that road. I found various plugins that does a little bit of what I want but not any annotation plug ins as such. Can it really be true that nobody built a proper annotation plugin for OSD? Currently I am looking into making the OSD work with paperjs overlay and go that route...but I wonder what everybody else is doing? I can hardly be the first who needs annotation for OSD
@bsdis I don't know that there's anything beyond what you seem to have found. Of course there are more intense solutions like https://projectmirador.org/ but that's probably not what you're looking for either. I think probably most people build their own solution on top of the plugins that exist. Of course if you're up for making a more robust annotation plugin, I imagine there would be people excited about that...
@bsdis There is a LOT of people/organizations annotating in the OpenSeadragon viewer, but not so much has been open sourced as you've seen. Since you'd like to start with paperjs, I assume you've seen https://github.com/eriksjolund/OpenSeadragonPaperjsOverlay It's a pretty good start on using paperjs. The README.md shows a bit of the current pointer event handling issues that will apply to any annotation solution. I'm currently updating OpenSeadragon's MouseTracker class to make dealing with pointer events easier in these scenarios, so if you have questions/rants/suggestions/requests/etc please let me know!
Hi, I saw this old issue: openseadragon/openseadragon#1045 for putting reference strip outside the viewer. Looks like it got closed though. Is this now a feature supported in openseadragon somehow? Or should one build this manually still?
Hi I am using svgoverlay plugin and selection plugin. I have the following code: https://paste.ubuntu.com/p/wnNv8bThtj/ but for some reason nothing is being drawn when that code is executed. Should the coordinates somehow be rescaled first ?
@bsdis Looks like #1045 is still open. My suggestion there was that it should be pulled out and made into a robust plugin.
@tdiprima It seems like that would work. You could also make a single OpenSeadragon and put two images into it. You could then colorize each image separately using https://github.com/usnistgov/OpenSeadragonFiltering. I've done that and it works pretty well.
Hi @iangilman! Ya, I was playing with OpenSeadragonFiltering the other day. I implemented an overlay like you do in your http://codepen.io/iangilman/pen/YXRLea example. But then when I went to add the filtering, I said :oops: the
setFilterOptions() acts on the viewer. So I'm confused about how that would work with a tileSources array. How were you able to apply a filter on two images?
I made a prototype to colorize it...
let x = OpenSeadragon.Filters.GREYSCALE;
x.prototype.COLORIZE = function (r, g, b) {
return function (context, callback) {
var imgData = context.getImageData(
0, 0, context.canvas.width, context.canvas.height);
var pixels = imgData.data;
for (var i = 0; i < pixels.length; i += 4) {
pixels[i] = r * pixels[i] / 255;
pixels[i + 1] = g * pixels[i + 1] / 255;
pixels[i + 2] = b * pixels[i + 2] / 255;
pixels[i + 3] = 255;
}
context.putImageData(imgData, 0, 0);
callback();
};
};
@tdiprima Yes, you can choose which image to apply it to. Take a look at https://github.com/usnistgov/OpenSeadragonFiltering#specify-on-which-items-tiledimage-to-apply-the-filters
Hi. Is there any way to avoid getting thin/faint DZI tile borders visible in case PNG tiles are used instead of JPEG (every browser, except Chrome, including FF, IE11, and Edge is affected)? Those borders are a bit disturbing, and people complain about them. Thank you for ideas!
Hey @iangilman, I'm sorry to bother u. But the filter didn't work. The example "specify-on-which-items-tiledimage-to-apply-the-filters" did not work at all. And then I created my own colorize filter. And for some reason, when I step through the code the viewer.world.getItemAt(0), and viewer.world.getItemAt(1), are both undefined, yet the entire image comes out red. Not one red and one yellow. Weird that their example and my example both did not work, but in different ways. Got any ideas?
// Color filters do not work separately
// Invert and brightness don't work at all :\
viewer.setFilterOptions({
filters: [{
items: viewer.world.getItemAt(0),
processors: [
// OpenSeadragon.Filters.INVERT()
x.prototype.COLORIZE(255, 255, 0)
]
}, {
items: viewer.world.getItemAt(1),
processors: [
// OpenSeadragon.Filters.BRIGHTNESS(50)
x.prototype.COLORIZE(255, 0, 0) // <-- this is the color that gets set for both
]
}]
});@avandecreme do you have any idea what could be wrong?
@rhnatiuk Here's the issue you're talking about: openseadragon/openseadragon#1683 in it I lay out what needs to happen. Basically someone needs to dive into the issue and figure out the best solution. Are you up for giving it a try?
@tdiprima Indeed... You need to wait for the "open" event. Glad you got it figured out!
I have large histopathology slide images which I am displaying using pyqtgraph imageitem. youtube link but pyqtgraph is unable to display full zoomed image. hence I am exploring using openseadragon. Any input is welcomed. thanks
Otherwise, if the code all has to be Python, I suppose you would have to reimplement the OpenSeadragon functionality.
@iangilman thanks, I understand, I am looking to see if I can use Qwebview to run openseadragon in the widget. thanks your input. Do you know if there is a good reference for how the openseadragon fetches? I have never done javascript else I would open that code and try to understand.
It gets the DZI via XHR and the image tiles by loading them as img elements.
You give it the URL you want and it loads stuff from that.
Are you using DZI or something else?
This is the DZI format: https://github.com/openseadragon/openseadragon/wiki/The-DZI-File-Format
...And here's the code for how to generate a tile URL: https://github.com/openseadragon/openseadragon/blob/1b418be606da080a666edc671368a31f46df8976/src/dzitilesource.js#L164
That's assuming you know what level and tile you want. Determining level and tile is done by OSD based on where you've zoomed/panned to, and that's a lot more complicated (but it's driven by the file format).
@iangilman Great thanks appreciated!
I will look through the code