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
    proved to be immediately useful) https://the-iron-road.com/
    Mark Salsbery
    @msalsbery
    @iangilman 3.0.0 is cool with me…I thought 2.5.0 was a big jump earlier on in the process, but now 3.0.0 feels appropriate I think
    @altert The only other breaking change is the removal of the OpenSeadragon.getEvent function, which has been deprecated for outside use for quite a while anyway - can’t imagine anyone used it
    For anyone that DID use it - the fix is don’t use it - just use the event ;-)
    Mark Salsbery
    @msalsbery
    @altert Nice looking page! If you get into pointer event handling on your overlays, there’s improvements in controlling the bubbling and disposition of events in the DOM tree over the viewer (if you use MouseTracker). This CodePen shows a little example
    Alexey Tikhonov
    @altert
    @msalsbery thanks!
    Mark Salsbery
    @msalsbery
    @iangilman If we’re going to go 3.0.0, it would be nice to get #1846 resolved for a really fresh start (spring cleaning!)
    Ian Gilman
    @iangilman
    @msalsbery sounds good, if you're up for it!
    @altert that's really cool! I love all the experiences you're creating :)
    Alexey Tikhonov
    @altert
    @iangilman thank you. openseadragon was a gamechanger for me)
    Ian Gilman
    @iangilman
    ❤️
    Mark Salsbery
    @msalsbery
    :heart:
    Tammy DiPrima
    @tdiprima
    @altert that's really cool! - https://the-iron-road.com :smiley: :sunglasses:
    Alexey Tikhonov
    @altert
    @tdiprima thanks
    Tammy DiPrima
    @tdiprima
    Hi guys! Sanity check, please... This is the correct way to get the index of the 'current' layer, right?
    viewer.world.addHandler('add-item', function (event) {
          let itemIndex = viewer.world.getIndexOfItem(event.item)
          ...
    Alexey Tikhonov
    @altert
    @tdiprima freshly added? I think so
    Tammy DiPrima
    @tdiprima
    :thumbsup:
    thanks
    zeediggs-byte
    @zeediggs-byte
    image.png
    Hey guys, new to using open seadragon and im really struggling with adding overlays. Anyone know why i'm getting this error in Chrome?
    This is at run time, i have a function creating an overlay at a fixed point.
    zeediggs-byte
    @zeediggs-byte
    Not sure if im missing a certain library or not
    Praful Bhawsar
    @PrafulB
    The second parameter to addOverlay() needs to be an Openseadragon.Point or Openseadragon.Rect. Do you mind sharing the code where you are trying to create the overlay?
    zeediggs-byte
    @zeediggs-byte
    image.png
    elt is pre created in the DOM
    strange though, if i have this snipped right under where i create my viewer, it works just fine
    Praful Bhawsar
    @PrafulB

    image.png

    Huh, that is as simple as it can get. Also quite strange that the code should work if placed elsewhere. No idea why this should fail, sorry @zeediggs-byte ! Maybe someone more experienced can help.

    Mark Salsbery
    @msalsbery
    @PrafulB elt is initialized at that point?
    Praful Bhawsar
    @PrafulB
    I’m not entirely sure @msalsbery , I assumed it was. Wouldn't OSD automatically create an anchor element in its place though if it was undefined?
    Mark Salsbery
    @msalsbery
    @PrafulB no I didn’t think so (I’ll double check)...I thought you needed to pass an element object or id string of an element...
    Praful Bhawsar
    @PrafulB
    Yeah, I might be wrong, double checking myself.
    I believe Line 2399 in viewer.js might be where the fallback check happens @msalsbery . Please do let me know if I’m mistaken though!
    Mark Salsbery
    @msalsbery
    @PrafulB yeah I saw that...I’m going to test it and see what’s happening...
    Mark Salsbery
    @msalsbery
    @PrafulB This worked for me:
        let elt = null;
    
        viewer.addHandler('canvas-click', (event) => {
          viewer.addOverlay({
            element: elt,
            location: new OpenSeadragon.Rect(0.1, 0.1, 0.05, 0.05)
          });
          // Prevent default click-to-zoom behavior
          event.preventDefaultAction = true;
        });
    The anchor elements aren’t visible, however, because they’re empty - but I see them in the browser dev tools
    Praful Bhawsar
    @PrafulB

    It works as is for me as well @msalsbery , I’m not sure what @zeediggs-byte was doing differently to get that error

    image.png

    Mark Salsbery
    @msalsbery
    @PrafulB Oh man, I’m sorry I thought you were having the issue
    Praful Bhawsar
    @PrafulB
    Haha, no worries, I learned something myself so appreciate the effort nonetheless 😁
    Mark Salsbery
    @msalsbery
    @zeediggs-byte Here’s an example adding overlay s at clicked location in an OpenSeadragon viewer
        viewer.addHandler('canvas-click', (event) => {
          let overlayElement = OpenSeadragon.makeNeutralElement('div');
    
          overlayElement.className = 'my-overlay-class';
          (function (style) {
            style.fontSize = '20px';
            style.color = '#000';
            style.background = 'rgba(0,255,255,0.5)';
            style.padding = '20px';
            style.pointerEvents = 'auto';
            style.cursor = 'grab';
          })(overlayElement.style);
    
          let clickPoint = viewer.viewport.pointFromPixel(event.position);
    
          viewer.addOverlay({
            element: overlayElement,
            location: new OpenSeadragon.Rect(clickPoint.x, clickPoint.y, 0.1, 0.1)
          });
    
          // Prevent default click-to-zoom behavior
          event.preventDefaultAction = true;
        });
    Mark Salsbery
    @msalsbery
    @zeediggs-byte Ooops forgot something, wouldn’t let me edit it…this will let you still drag in the viewer to pan
        viewer.addHandler('canvas-click', (event) => {
          if (event.quick) {
            let overlayElement = OpenSeadragon.makeNeutralElement('div');
    
            overlayElement.className = 'my-overlay-class';
            (function (style) {
              style.fontSize = '20px';
              style.color = '#000';
              style.background = 'rgba(0,255,255,0.5)';
              style.padding = '20px';
              style.pointerEvents = 'auto';
              style.cursor = 'grab';
            })(overlayElement.style);
    
            let clickPoint = viewer.viewport.pointFromPixel(event.position);
    
            viewer.addOverlay({
              element: overlayElement,
              location: new OpenSeadragon.Rect(clickPoint.x, clickPoint.y, 0.1, 0.1)
            });
    
            // Prevent default click-to-zoom behavior
            event.preventDefaultAction = true;
          }
        });
    Mark Salsbery
    @msalsbery
    @zeediggs-byte can you post the code you’re using? Basically, for HTML overlays you should only need an HTML element (or the string ID of an existing element) and a location to place the element at in the viewer. The location should be in OpenSeadragon viewport coordinates (image left/top 0.0, right/bottom 1.0).
    zeediggs-byte
    @zeediggs-byte
    It worked! @msalsbery you're awesome man. I the point object being interpreted wasn't being interpreted correctly. i also found a double "using" statement for openseadragon and that was also the culprit.
    Suhas Vishwanath
    @svishwanath-tw
    I'm using the OSD viewer in sequence mode. I want to enable/disable all OSD controls on a particular page based on an external toggle (to OSD). Is this possible ?
    Suhas Vishwanath
    @svishwanath-tw
    Mark Salsbery
    @msalsbery
    @zeediggs-byte awesome 😎
    Ferose Aliyarukunju
    @feroseali

    I'm using OSD for showing an image, where users can be able to apply filters such as brightness and contrast. But after applying that. I need to save that image from the canvas. But i haven't got the correct size image after applying the filter. Plz tell me whats wrong with my code.

    let tiledImage = viewer.world.getItemAt(0);

    const imageViewportBounds = tiledImage.getBounds();

    const imageWebBounds = viewer.viewport.viewportToViewerElementRectangle(imageViewportBounds);

    let dataURL = viewer.drawer.canvas.toDataURL({
    format: 'png',
    left: imageWebBounds.x,
    top: imageWebBounds.y,
    width: imageWebBounds.width,
    height: imageWebBounds.height
    });

    download (2).png
    Ian Gilman
    @iangilman
    @feroseali Yes, depending on the resolution of your screen, the canvas may be higher resolution than the viewer element coordinates (since web coordinates are typically one-half of HDPI screen coordinates). To find out the difference, you can compare viewer.viewport.getContainerSize().x to viewer.drawer.canvas.width.
    Max
    @maxshuty

    Hi, I have a bit of a unique use case and I'm wondering what the best way to solve this would be... I have a server that has all of my images and it requires a different JWT for each image request and changing the structure of how this server works is not an option. I need to display multiple images like in this example: https://demos.biblissima.fr/chateauroux/osd-demo/ how can I dynamically change this:

    ajaxHeaders: {
      Authorization: myJwtForImage1,
    }

    to be dynamic to pass a different myJwtForImage1 for each image in a multi-image set?

    Max
    @maxshuty
    and if I try to set that when I addTiledImages it does not show up on the requests at all