Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Alexey Tikhonov
    @altert
    @iangilman created PR #2183. I think this was the only slip in #2134
    Ian Gilman
    @iangilman
    @altert Sweet! Merged :)
    Alexey Tikhonov
    @altert

    regarding #2115: I was looking through the code and found this

     * @class IIIFTileSource
         * @classdesc A client implementation of the International Image Interoperability Framework
         * Format: Image API 1.0 - 2.1
         *
         * @memberof OpenSeadragon
         * @extends OpenSeadragon.TileSource
         * @see http://iiif.io/api/image/
         * @param {String} [options.tileFormat='jpg']

    it seems that the problem is actually solved long ago. The only thing: how to add this option to IIIF tile source? I usually just pass url to iiif info.json as tileSource

    Ian Gilman
    @iangilman
    @altert It seems like it's okay if it takes a little more work to specify such things, if you ask me. At the least, is it even possible? Seems like it is, but only if you specify the full tileSource, and not just passing a URL? The problem is that if you do that, you have to get the info.json yourself and parse it yourself before passing it in as a tileSource, right? It does seem like it would be nice if we had a mechanism to say "go grab the info.json and parse it for us, but then let us add something to the result".
    Do I have the basic problem understood?
    1 reply
    BTW, probably would be good to continue this conversation in #2115 so everyone can see.
    ClassicTypeError404
    @ClassicTypeError404
    Hello everyone!
    I'm using OSD version 3.1 to display DZI -http://schemas.microsoft.com/deepzoom/2008 and I need to tell what tile is currently at a given position (e.g. where i just clicked). According to the documentation, I can't use getTileUrl here, and all my other attempts to determine exactly what tile I am clicking on have failed. Do you have any ideas on how to achieve this or approach this problem?
    Praful Bhawsar
    @PrafulB
    I realize my solution is fairly convoluted and there’s probably a better way to do it, but here’s how I did it a while ago @ClassicTypeError404:
    viewer.addHandler("canvas-click", (e) => {
        // Get the tiled image from the world. Replace the 0 with a different index if your image is elsewhere in the OSD World.
        const tiledImage = viewer.world.getItemAt(0) 
    
        // Find tiles containing the clicked point from among the last drawn tiles.
        const tilesClicked = tiledImage.lastDrawn.filter((tile) => tile.bounds.containsPoint(e.position)) 
    
        // Of the tiles that contain the point, find the one at the highest level, i.e., the smallest tile
        const smallestTileClicked = tilesClicked.reduce((minTile, tile) => tile.level > minTile.level ? tile : minTile, {
          level: 0
        })
    })
    The viewer.getTileBounds method seems like it could be much better suited for this, but I’m unsure how to get the current level of the Viewer to pass to it. Maybe keep track using the update-level event? Or perhaps there’s a direct method to get the level from the Viewport zoom?
    Ian Gilman
    @iangilman
    @PrafulB That's actually a really clever way to do it!
    @ClassicTypeError404 See the answer from @PrafulB above. Also, I always ask people why they want to know the actual tile? Usually it means they are trying to get some other information that would be better served by some other route.
    OpenSeadragon works really hard to make it so you never have to think about tiles!
    That said, people do ask for this. Maybe we should add a function based on @PrafulB's implementation?
    Praful Bhawsar
    @PrafulB
    @iangilman thanks! In my case, I wanted to allow annotation without the user having to draw on the canvas. Just clicking at the point of interest in the image would highlight the underlying tile. Instead of freeform annotation which would require downstream preprocessing, I would get a dataset of annotated regions all of the same size, making my job a little easier. Not the most standard of use cases though I’ll admit 😬
    Praful Bhawsar
    @PrafulB

    That said, people do ask for this. Maybe we should add a function based on @PrafulB's implementation?

    Before you do that, there’s a pretty big problem with my solution. It can only be used after the tiles have all been fully rendered in at that level. Since a tile is only added to lastDrawn after it is actually drawn, calling the function immediately after a pan/zoom can return the wrong tile (or at least a tile at the wrong level).

    Ian Gilman
    @iangilman
    @PrafulB Good point... I suppose the ideal would be to just use the same math we are already using to lay out the tiles. Presumably, it would be helpful to pass in a level, because of course the same point in the image is covered by a different tile on each level.
    Praful Bhawsar
    @PrafulB
    @iangilman Yes, that’s why I felt that the getTileBounds method on TiledImage was close to the desired functionality, though I haven’t used it so not entirely sure. In this context, would it also make sense to expose a method to get all the rendered levels at the current magnification? You could then use its output to pass to the new getTile method.
    Ian Gilman
    @iangilman
    @PrafulB Yeah, I suppose we could use getTileBounds to look through all the possibilities (for matching up with an x/y)... Not necessarily as efficient as calculating it directly, but with the advantage of using the same code we already have in place (so we know it's correct). I don't expect this is a function that would need to be called all the time, so it doesn't need to be super optimized.
    As for making a function to expose all the rendered levels, I guess it just depends on whether that's a useful scenario. I don't think we should be adding functions just because we can. Every new function creates more complexity and maintenance needs.
    I guess one question is whether we care if a level is rendered or not. Maybe we just get the info as needed and the new getTile is called for a specific level.
    ishu mishra
    @coderishu
    Hello
    by using opensaedragon we can annotate on PDF?
    i have to create 1 feature in which i need to annotate on PDF
    document
    Ian Gilman
    @iangilman
    @coderishu OSD doesn't have support for loading PDFs directly. You could convert a PDF into a format that OSD uses, like DZI, and then it would work. Doing so would turn all of the text in the PDF into image data, so you wouldn't be able to select the text, if that's a concern.
    ishu mishra
    @coderishu
    ok how we can convert pdf into OSD
    format
    Ian Gilman
    @iangilman
    @coderishu I don't know if there are any tools that go straight from PDF to DZI, but you can poke around at the options here: https://openseadragon.github.io/examples/creating-zooming-images/
    Otherwise, what you would want to do is convert the PDF to an image and then convert that image to DZI.
    My favorite converter for images to DZI is VIPS, but you can see there are a lot of options.
    That said, you might consider whether you would be better served with a PDF library, and skipping OSD entirely. Perhaps there is a PDF library that supports zooming and overlays?
    Michael J. Dark
    @darkmich_twitter
    If anyone has a minute, can someone tell me what I'm doing wrong here? I swear my zoom in / zoom out controls WERE working, but now they aren't. https://davisthompsonfoundation.org/wsi/?id=518
    Fullscreen works, so I know the controls in general work, but zoom is broken.
    Michael J. Dark
    @darkmich_twitter

    The relevant HTML (for the toolbar and for the OSD initialization) is here:

      <div id="toolbar">
          <div id="logo_div" style="max-height: 50px !important; display: inline-block">
        <a id="logo" href="https://davisthompsonfoundation.org">
        <img class="dtfLogo" src="..." alt="Davis Thompson Logo" style="max-height:50px !important;">
        </a>
         </div>
        <svg id="fullscreen" fill="#fff" style="height: 40px;" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">...</svg></span>
        <svg id="zoomIn" class="w-6 h-6" style="height: 40px;" fill="#FFF" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">...</svg>
        <svg id="zoomOut" class="w-6 h-6" fill="#FFF" style="height: 40px;" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">...</svg>
    
    ...
    </div>
    
    ...
    
    
    <script>
    ...
    
        var viewer = OpenSeadragon({
            id: "openseadragon1",
            prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/",
        navigatorAutoFade:  false,
            showNavigator:  true,
            zoomInButton:   "zoomIn",
          zoomOutButton:  "zoomOut",
          homeButton:     "home",
          fullPageButton: "fullscreen",
            gestureSettingsTouch: {
              pinchRotate: true
          },
            success: function(event) {
              imageDone = true;
            },
        tileSources:  {
                        ...
                      }
    
    });

    (... inserted for portions trimmed out for clarity)

    Michael J. Dark
    @darkmich_twitter
    I've tried setting the SVGs as DIVs, making them <a> links, and nothing seems to work. I also added in an "onclick: console.log('here');" as a way of testing, but I never get the message in the console log. I am well and truly stumped by this one.
    Praful Bhawsar
    @PrafulB
    @darkmich_twitter I’m unable to reproduce your issue, but I tried forcibly adding a zoom call on the zoomIn button click event on your page, and that does make zoom work:
    viewer.zoomInButton.element.addEventListener("click", () => viewer.viewport.zoomBy(2))
    Praful Bhawsar
    @PrafulB
    I’m by no means an OSD expert, so I might be missing something simple, but it feels either like the zoom handlers are not being attached to the buttons during viewer initialization or that they are being overwritten somehow. Wasn’t able to dive too deep in your code, but definitely intriguing.
    Ian Gilman
    @iangilman
    @darkmich_twitter Wow, that's really strange! I have no idea why it would be working for fullscreen, but not zoom in/zoom out. It's clearly working for everything here: https://openseadragon.github.io/examples/ui-binding-custom-buttons/
    My recommendation would be to strip everything down to the bare minimum to try to isolate the issue.
    Though of course, @PrafulB has a fine workaround :D
    If you do figure out what's causing it, we'd love to know!
    Michael J. Dark
    @darkmich_twitter

    @PrafulB - thanks for the workaround! @iangilman - when I get a little more time, I'll work on a stripped-down version. Unfortunately, I'm a pathologist who knows computers some, so my code is... not great... :) And, I swear I had it working before.

    Anyways - thanks to everyone who works on OSD - I've stopped being surprised at how often I see it in various whole-slide imaging implementations (including ours!). It's a great piece of software, and being open-source is great.

    Michael J. Dark
    @darkmich_twitter
    Besides, if you saw the rest of my code, that looks positively elegant. :)
    Ian Gilman
    @iangilman
    @darkmich_twitter Thank you! I'm so glad OSD can power so many cool projects :)
    ... And I'm glad it's easy enough to use for pathologists who know computers some ;)
    em13468
    @Shalahmander

    Hello
    I have small problem.

    Trying to add overlay points to an image that is taller than it is wider. I do this with the help of the command:

    viewer.addOverlay(element, new OpenSeadragon.Point(x, y));

    In case the value of x is greater than 1 - there is no problem. The overlay is simply displayed outside the borders of the image. However, when y is greater than 1, even being inside the image borders, it is displayed as if it had a value of 1. So:

    viewer.addOverlay(element, new OpenSeadragon.Point(0.1, 1.25));

    looks like

    viewer.addOverlay(element, new OpenSeadragon.Point(0.1, 1));

    What could this be due to?

    Ian Gilman
    @iangilman
    @Shalahmander By default, viewport coordinates go from 0 to 1 along the horizontal axis and from 0 to (height / width) along the vertical axis. If your image is taller than it is wide, its height will be larger than 1, so it makes sense that using a y of 1.25 might still have it inside the image.
    em13468
    @Shalahmander
    @iangilman Thank you for your reply! But then I don't understand all the more why, when given the correct value of 1.25, the overlay is displayed as for a value of 1
    Ian Gilman
    @iangilman
    @Shalahmander can you share a screenshot?
    Vanessa Bianconi
    @vanessabianconi
    Hello,
    I have a problem. I am using the plugin that adds SVG overlay capability, to build clickable rectangles on the images but the coordinates to draw the rectangles I have are the image coordinates. How do I convert image coordinates to viewport coordinates manually? I need to do this because I have defined the coordinates of rectangles in an XML file and I extract them from that file.
    4 replies