openseadragon/openseadragon

An open-source, web-based viewer for zoomable images, implemented in pure JavaScript.

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

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

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

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

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

I just found what i was looking for here :https://github.com/openseadragon/openseadragon/issues/167#issuecomment-21757801

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
});

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

Where communities thrive

People

Repo info

Activity