by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Jonathan
    @bigfatfrog67
    @iangilman Hi Ian, thanks for responding, I've put the example back up for you to see. The top example is using a single image, which works on smaller images but on the larger one's doesn't load. The bottom version is the DZI which works but very slowly...
    Any idea how I can speed it up?
    @iangilman This was the command I used to create the DZI files: c:\vips-dev-8.9\bin\vips dzsave $_ $dzdir --tile-size 127 --suffix .jpg[interlace=1]
    tarreq
    @tarreq
    Hello guys, i've an issue with Openseadragon in React app
    Mark Salsbery
    @msalsbery
    Hi @tarreq what kind of issue?
    bkang78
    @bkang78
    Is there a way to disable clicking event in navigator ? I have found that using gestureSettingsMouse clickToZoom: false can disable the clicking event in the viewer. Thanks!
    Ian Gilman
    @iangilman

    @bigfatfrog67 Hmm… the DZI loads a lot faster than the single image on the example you shared.

    It does seem like your server is kind of slow, like everything is loading slowly, not just the images.

    Anyway, one thing you can do that should make an improvement is to build your DZI with bigger tiles. You're currently using 127, which means it has to load a lot of tiles. My recommendation these days is to use 510… That should create a good balance between tile count and the file size of each tile. You might even try 1022 to see how that looks.

    @bkang78 Looks like one way would be to watch for 'navigator-click' and 'navigator-drag' events and set their preventDefaultAction to true. For example:
    viewer.addHandler('navigator-click', function(event) {
      event.preventDefaultAction = true;
    });
    Jonathan
    @bigfatfrog67
    @iangilman Thanks Ian, that seems to have made it much better. I increased it 1022.
    earth
    @earth
    I am new to openseadragon. Please let me know how to set 5 zoom levels using Inline Configuration https://openseadragon.github.io/examples/tilesource-image/
    Ian Gilman
    @iangilman
    @earth What do you mean by five zoom levels? Do you mean you have five image tiles, each representing your image at different sizes? If so, you should use http://openseadragon.github.io/examples/tilesource-legacy/
    earth
    @earth
    I have only one image. The inline Configuration is allowing me to zoom in and out 3 times. I want it to be 5 times.
    Tammy DiPrima
    @tdiprima
    I'm trying to figure out if the user has zoomed all the way in. Using ImgingHelper, the max zoom is 10. I'm using viewer.viewport.getZoom() and the number when zoomed all the way in is 18.804. Clearly I'm comparing 2 different things. I didn't see a getZoom in imaginghelper. I thought I could convert it, but... It's zoom, not coordinates. I'm confused. Please help?
    Tammy DiPrima
    @tdiprima
    I looked at viewport-coordinates and viewportToImageZoom. I hoped that perhaps I could convert viewer.viewport.getZoom() to image zoom, and that imagingHelper.getMaxZoom() might also be using "image zoom", and then I could compare it. I was wrong. Still confused. :squirrel:
    Mark Salsbery
    @msalsbery
    @tdiprima openseadragon-imaginghelper's "zoom factor" is the relationship between the image's native size in pixels and the CSS pixels it's being displayed in (ie if the image is 100x100 and it's being displayed in 100x100 pixels then zoom factor 1. 100x100 image being displayed in 200x200 pixels zoom factor is 2.
    Mark Salsbery
    @msalsbery
    @tdiprima openseadragon-imaginghelper has a getZoomFactor() method. The OpenSeadragon zoom is the relationship between the image's native width and the width of the viewport. 100x100 image displayed in a 100x100 window the zoom is 1.0. To convert between the two: OSDZoom = imaginghelperzoomfactor * imagewidth / viewer.container.clientWidth
    @tdiprima OSDZoom = (imaginghelperzoomfactor * imagewidth) / viewer.container.clientWidth
    Mark Salsbery
    @msalsbery
    @earth You can tweak viewer.minZoomLevel, viewer.maxZoomLevel, and viewer.zoomPerClick to get what you're looking for. The math will change if the viewport changes, so if you have a resizable viewer you may need to adjust those values any time the viewer size changes
    Alexey Tikhonov
    @altert
    hi. I'm having viewport loaded with multiple images
    I want to focus on one of them but keep zoom level so the image is not bigger than 100% in pixels
    so far my intention is to pan to center of image
    and then zoom to zoomlevel calculated as relation of this.world.getItemAt(this.curItem).getContentSize() and this.viewport.getContainerSize()
    is that a good way to do it or am I missing something already present in OSD (note: I want to be able to zoom further manually, just load image at 100% when I navigate to it if it's smaller than viewport)
    Alexey Tikhonov
    @altert
    @msalsbery last supper - definitely OSD with svg overlay. why do people still block right click? it's so last century;)
    Mark Salsbery
    @msalsbery
    Haha thanks @altert
    @altert your intention sounds good...zoomTo and panTo based on your calculations
    Kampenuss
    @Kampenuss_twitter
    Hi! I have seen some demos where it is possible to apply some effects to the image tiles, for example, to make the image black and white. Do you know if there is some option to apply a blur to some defined area off the image at all zoom levels, so that no matter how the image is dragged and zoomed, it would not be possible to understand what contend is blurred out?
    Tammy DiPrima
    @tdiprima
    Thank you @msalsbery. The main thing that I needed to understand was -- what I was actually looking for was image zoom. 1 = zoomed all the way in. Zero point something would be zoomed all the way out. And these things are unrelated to when we say "viewport.getZoom()".
    I think I'm less confused now. :smile:
    Mark Salsbery
    @msalsbery
    @tdiprima Good, at least one of us is less confused 😜 The imaginghelper plugin came about from porting code where all coordinates and zoom factors were relative to the image data with no regards for viewport size. OpenSeadragon zooms are directly related to the viewport size. Which one you use and when just depends on what’s more convenient or which makes more sense in your head...it can be confusing for sure!
    Tammy DiPrima
    @tdiprima
    Ah! Ok. Thanks. :)
    Tammy DiPrima
    @tdiprima
    I'm allowing the user to draw a line on an image, usingOpenseadragonFabricjsOverlay. For example, let's say they draw a circle around a point of interest. Now, if the user zooms in or out, the line that they drew no longer maintains its position. @altert, by any chance, would you have any idea why?
    Sachin Grover
    @saching6
    @altert I am usng your Fabric JS overlay for openseadragon but the adapated fabric js file that you provide (fabric.adapted.js) file is from a very old version, 1.7, and the new fabric JS has new features that I want to incorporate into my UI. I was wondering if you can tell me if the transition to a newer version is trivial or is it a complicated process?
    Alexey Tikhonov
    @altert
    @tdiprima @saching6 I'm not actively maintain that now, sorry, but I plan to test it out quite soon. Fabric adapted was not developed by me, so for now I'm not sure whether it is complicated to upgrade or not
    Sachin Grover
    @saching6
    I was actually able to write a fabric adapted for the fabric 3.6, seems to be working fine, would love to push it to the overlay repository and get some feedback
    Tammy DiPrima
    @tdiprima
    @altert, never mind. It was my error. I had elements in the osd div that did not belong there. :. Sorry about that.
    Ian Gilman
    @iangilman

    @Kampenuss_twitter I believe https://github.com/usnistgov/OpenSeadragonFiltering is the plug-in you're talking about. Looks like if you want to do a blur, you might have to use its CamanJS support, or write your own filter.

    I believe the way that plug-in works, it'll blur each level the same amount, so yes, as you zoom in it will continue to be blurry (or perceptually it might actually feel like it's getting blurrier the more you zoom in).

    That said, it depends upon why you're doing this… If you're actually trying to hide the image from the user, and if they are motivated enough, they can always open the developer console and pull the URLs of the original tiles out. If that's a concern, you would want to do the blurring on the server-side.

    Kampenuss
    @Kampenuss_twitter
    @iangilman Thank you so much for the direction! With blurring on the server side you mean blurring the tile files permanently or not touch the files and somehow blurring the tiles before they get sent to the user? The latter is what would work in my application if it is possible to do that. I wonder what would be the approach to blur only specific area and not the whole image?
    Tammy DiPrima
    @tdiprima
    I modified OpenseadragonFabricjsOverlay's fabric.adapted.js to fabric.js's version 3.6.3. But now -- the overlay disappears upon zoom, and then it redraws itself once you've stopped zooming. @iangilman, I've seen this question answered before but now I can't find it :/ -- How can I persist that overlay throughout panning and zooming?
    (Just an fyi @saching6, @altert)
    Mark Salsbery
    @msalsbery
    @tdiprima I haven’t looked at the code yet, but maybe update the overlay in a handler for the Viewer.animation event ?
    Ian Gilman
    @iangilman
    @tdiprima Yeah, I'm not terribly familiar with the plug-in, but I'd start with @msalsbery's suggestion. Sounds like it's not getting drawn every frame, which is what needs to happen. Actually, looks like the proper event is update-viewport. Anyway, if that doesn't work, maybe share your code? I'm glad you're doing this update!

    @Kampenuss_twitter If you want to do it server-side, I guess I would suggest making a duplicate of your original image and blurring it (or just part of it) and turning that into tiles. Then you can point to either the blurred tiles or the non-blurred tiles, depending on what you need.

    This is more work (I think) than doing it on the client side, but it would be more secure (if that's your goal).

    Tammy DiPrima
    @tdiprima
    @iangilman It worked. :flushed: Thanks!
    Tammy DiPrima
    @tdiprima
    Hey @saching6. Just a heads-up, if you're still interested, I updated OpenseadragonFabricjsOverlay to fabric.js v3.6.3. my local repo, branch tdiprima-patch-1. There's a pull request on it to merge it to the original repo. But just fyi - it's there if you still need it or want to play around with it.
    Tammy DiPrima
    @tdiprima

    Hey guys. Question. I created a right-click event (viewer.addHandler('canvas-nonprimary-press'...)
    And I'm having a problem preventing the original default behavior (modal: "Inspect, Copy image," etc.)
    I tried a bunch of things in codepen, but to no avail.
    Any ideas?

    I thought this was supposed to do the trick:

    e.originalEvent.preventDefault();
    e.originalEvent.stopPropagation();
    Tammy DiPrima
    @tdiprima
    Got it. It's a different handler.
    $(viewer.element).on('contextmenu', function(event) {
      event.preventDefault();
    });
    Ian Gilman
    @iangilman
    :thumbsup: