Height of openseadragon div is zero

[marcosocamargo]

I have a div that I want to fill the remaining space left on the window. I have styled with flex-grow:1 and position:relative as shown below. I can't get the image to show because the div height is always zero. How do I fix that? The image shows if I have a fixed width and height. I think it is because seadragon has a height of "0".

<div id="openseadragon1" style="flex-grow:1;position:relative"></div>
<script src="/src/openseadragon.min.js"></script>
<script type="text/javascript">
   var viewer = OpenSeadragon({
     id: "openseadragon1",
     prefixUrl: "/src/images/",
     tileSources: "https://storage.googleapis.com/recpres$directory/$image_name_base/${image_name_base}.dzi",
     showRotationControl: true,
 // Enable touch rotation on tactile devices
     gestureSettingsTouch: {
       pinchRotate: true
     },
   });
 </script>

[pearcetm]

This article on flex will help you understand what to do: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

In order to grow to fill the space as you want it to <div> needs to be within a container that defines the overall height, and that has display:flex; flex-direction:column;.

Try the following (not tested):

<div style="height:100vh; display:flex; flex-direction:column">
    <div id="openseadragon1" style="flex-grow:1"></div>
</div>

[marcosocamargo]

I tried it and it worked. Thank you!

[marcosocamargo]

I have another question concerning SeaDragon. The "sequenceMode = true" seems to only support images starting with the first element of the array tileSources: [...]. Is there a way of starting in the middle of a book with a particular image and then go backward or forward?
If not, is there a way of changing the value of the tileSources with a new image and force SeaDragon to reload the new image without reloading the whole page?
Thanks again!

[pearcetm]

Check out the initialPage option - this will let you define where to start within the sequence.

[marcosocamargo]

Thanks for the response. Is there a way to define the tileSource as we go instead of defining a large array? Also, how do I jump to a particular page in the middle of the book? -Marcos

…

On Wed, Apr 3, 2024 at 1:05 AM pearcetm ***@***.***> wrote: Check out the initialPage option <https://openseadragon.github.io/docs/OpenSeadragon.html#.Options> - this will let you define where to start within the sequence. — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JIHEXYYSXRNRVGSQILY3OZ4FAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DSOJTG4ZDO> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[iangilman]

Sounds like you might want to make your own sequence mode. You can control what gets loaded with each next/previous. Rather than using OSD's sequence mode, make your own buttons and have them do whatever you want. You can see how OSD creates those buttons here:

openseadragon/src/viewer.js

Line 1911 in 63d8d63

this.nextButton = new $.Button({

[marcosocamargo]

Hi, Is there a way for adding a paywall for each image viewed? Is this done using addHandler? Thanks, -Marcos

…

On Wed, Apr 3, 2024 at 1:05 AM pearcetm ***@***.***> wrote: Check out the initialPage option <https://openseadragon.github.io/docs/OpenSeadragon.html#.Options> - this will let you define where to start within the sequence. — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JIHEXYYSXRNRVGSQILY3OZ4FAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DSOJTG4ZDO> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[iangilman]

If you write your own sequence mode, you can do whatever you want between images, including a paywall.

[marcosocamargo]

Is there any way you could give a hint on how to start the process? For example, how do I update the TileSources with the new image URL and load the image without loading the whole page? Thanks!

…

On Wed, Apr 3, 2024 at 9:34 AM Ian Gilman ***@***.***> wrote: If you write your own sequence mode, you can do whatever you want between images, including a paywall. — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JP5B3KBCPBNHV3SLXTY3QVQHAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DSOJZGU3DK> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[marcosocamargo]

I was thinking to something similar to this suggestion: #1645

…

On Wed, Apr 3, 2024 at 9:34 AM Ian Gilman ***@***.***> wrote: If you write your own sequence mode, you can do whatever you want between images, including a paywall. — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JP5B3KBCPBNHV3SLXTY3QVQHAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DSOJZGU3DK> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[marcosocamargo]

Hi Ian, I appreciate your help since this is a non-profit and I am doing it all by myself. It seems that I could use the same buttons and then in the function goToPage I can add my paywall before loading the new page. Is that correct? Thanks, -Marcos goToPage: function( page ){ if( this.tileSources && page >= 0 && page < this.tileSources.length ){ this._sequenceIndex = page; this._updateSequenceButtons( page ); this.open( this.tileSources[ page ] ); if( this.referenceStrip ){ this.referenceStrip.setFocus( page ); } /** * Raised when the page is changed on a viewer configured with multiple image sources (see ***@***.*** OpenSeadragon.Viewer#goToPage}). * * @event page * @memberof OpenSeadragon.Viewer * @type {Object} * @Property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. * @Property {Number} page - The page index. * @Property {?Object} userData - Arbitrary subscriber-defined object. */ this.raiseEvent( 'page', { page: page } ); } return this; },

…

On Wed, Apr 3, 2024 at 9:33 AM Ian Gilman ***@***.***> wrote: Sounds like you might want to make your own sequence mode. You can control what gets loaded with each next/previous. Rather than using OSD's sequence mode, make your own buttons and have them do whatever you want. You can see how OSD creates those buttons here: https://github.com/openseadragon/openseadragon/blob/63d8d63c1f8daf85b34042359a14dff63cf47fd3/src/viewer.js#L1911 — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JI2VATNI4F7PO3SVVTY3QVORAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DSOJZGU3DC> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[iangilman]

That's true... You could do viewer.addHandler('page', showMyPaywall) or whatever.

[marcosocamargo]

Hi Ian, Are there examples of how to add addHandler to OSD?

…

On Thu, Apr 4, 2024 at 9:14 AM Ian Gilman ***@***.***> wrote: That's true... You could do viewer.addHandler('page', showMyPaywall) or whatever. — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JNKNFMV5EWXKCSUTH3Y3V37BAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TAMJRHEZTS> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[pearcetm]

There's an example right in the documentation page for binding custom buttons, which seems like exactly what you want:

https://openseadragon.github.io/examples/ui-binding-custom-buttons/

The API documentation (https://openseadragon.github.io/docs/) is also very helpful in seeing which events are raised by the different components of the viewer. Have a look at the right side bar on that page for a quick list of the available events.

[marcosocamargo]

Hi Ian, Thanks for the help. It seems that the 'page' event doesn't fire when the viewer is first loaded but it fires when clicking on next/previous/strip. What event should I use when first loading instead of page? -Marcos

…

On Thu, Apr 4, 2024 at 9:14 AM Ian Gilman ***@***.***> wrote: That's true... You could do viewer.addHandler('page', showMyPaywall) or whatever. — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JNKNFMV5EWXKCSUTH3Y3V37BAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TAMJRHEZTS> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[pearcetm]

What event should I use when first loading instead of page?

You could try something like this to get the handler to fire the page event for the initial page:

viewer.addHandler('open', () => viewer.goToPage(viewer.currentPage()))

[marcosocamargo]

Thanks! Is there any way of always updating the tileSources with the next or previous image instead of having tileSources to be an array? The reason I ask is because I need to provide a signed url for each image and if I list them all at the same time as an array then the person can see them without paying for them.

…

On Sun, Apr 7, 2024 at 10:45 AM pearcetm ***@***.***> wrote: What event should I use when first loading instead of page? You could try something like this to get the handler to fire the page event for the initial page: viewer.addHandler('open', () => viewer.goToPage(viewer.currentPage())) — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JLF7JP7S23B4ICNSWTY4GA4BAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TAMZXGQ4DO> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[marcosocamargo]

How do I specify the different options when using view.open? * @Class ImageTileSource * @classdesc The ImageTileSource allows a simple image to be loaded * into an OpenSeadragon Viewer. * There are 2 ways to open an ImageTileSource: * 1. viewer.open({type: 'image', url: fooUrl}); * 2. viewer.open(new OpenSeadragon.ImageTileSource({url: fooUrl}));

…

On Sun, Apr 7, 2024 at 10:45 AM pearcetm ***@***.***> wrote: What event should I use when first loading instead of page? You could try something like this to get the handler to fire the page event for the initial page: viewer.addHandler('open', () => viewer.goToPage(viewer.currentPage())) — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JLF7JP7S23B4ICNSWTY4GA4BAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TAMZXGQ4DO> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[marcosocamargo]

This is my idea: 1. The thumbnails for the reference strip are not generated by OSD but from thumbnails already generated. 2. User clicks on reference strip and the index is passed to a subroutine that looks up the image location to be loaded. If user clicks on next/previous button then the subroutine just passes the next image by looking at the current image name. 3. Updates tileSources with new image and displays new image. tileSource is always the image being displayed and never an array. Is something like that possible? I appreciate your help. -Marcos

…

On Sun, Apr 7, 2024 at 10:45 AM pearcetm ***@***.***> wrote: What event should I use when first loading instead of page? You could try something like this to get the handler to fire the page event for the initial page: viewer.addHandler('open', () => viewer.goToPage(viewer.currentPage())) — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JLF7JP7S23B4ICNSWTY4GA4BAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TAMZXGQ4DO> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[iangilman]

Your plan sounds good. Basically you would be building your own sequence mode and your own reference strip. They are both pretty simple (you can look at the code if you'd like, but really there's a lot in there that you wouldn't need to reproduce).

Basically imagine what would be involved in making this scenario without OSD and do that and use OSD just for the actual viewing of the current image.

[marcosocamargo]

Thanks for the suggestion. How do I keep changing the image (dzi) to be displayed and trigger the viewer to refresh and load the image?

…

On Tue, Apr 9, 2024 at 9:27 AM Ian Gilman ***@***.***> wrote: Your plan sounds good. Basically you would be building your own sequence mode and your own reference strip. They are both pretty simple (you can look at the code if you'd like, but really there's a lot in there that you wouldn't need to reproduce). Basically imagine what would be involved in making this scenario without OSD and do that and use OSD just for the actual viewing of the current image. — Reply to this email directly, view it on GitHub <#2489 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JPGNEI5JODV7GYJMITY4QJINAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TANRRGUZTI> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[pearcetm]

Just use viewer.open(...) with the definition of the next tile source you want to open, and the viewer will take care of the rest automatically.

[marcosocamargo]

How do I modify this to point to my own thumbnails? @param {String} [options.referenceStripThumbnailUrl] * The URL for a thumbnail image to be used by the reference strip Thanks, -Marcos

…

On Tue, Apr 9, 2024 at 2:27 PM pearcetm ***@***.***> wrote: Just use viewer.open(...) <https://openseadragon.github.io/docs/OpenSeadragon.Viewer.html#open> with the definition of the next tile source you want to open, and the viewer will take care of the rest automatically. — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JOW6DZATT3ERWSXMG3Y4RMNPAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TANRUGAZDK> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[iangilman]

I don't think you're going to want to use the reference strip as is... It's implemented to always use the tile source array from the viewer, but if you are just using open each time you won't have such an array in the viewer.

Just write your own reference strip that doesn't use tiled images but is just a scrolling collection of thumbnail images.

[marcosocamargo]

Thanks again! For tileSources I was thinking about creating an array that looks like [image, junk1, junk2, etc] and then each time I load a new image I change the tileSources substituting junk with the correct UTL. How do I update the tileSources and make the viewer display the new image? For the reference strip I was thinking about defining a new stripTileSources and feed into the code below: if (this.*StripTileSources*.length && this.*StripTileSources*.length > 1) { this.referenceStrip = new $.ReferenceStrip({ id: this.referenceStripElement, position: this.referenceStripPosition, sizeRatio: this.referenceStripSizeRatio, scroll: this.referenceStripScroll, height: this.referenceStripHeight, width: this.referenceStripWidth, * tileSources: this.StripTileSources,* prefixUrl: this.prefixUrl, useCanvas: this.useCanvas, viewer: this });

…

On Wed, Apr 10, 2024 at 9:36 AM Ian Gilman ***@***.***> wrote: I don't think you're going to want to use the reference strip as is... It's implemented to always use the tile source array from the viewer, but if you are just using open each time you won't have such an array in the viewer. Just write your own reference strip that doesn't use tiled images but is just a scrolling collection of thumbnail images. — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JJL62JCX3HVVEIJHZDY4VTBHAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TANZTG43TC> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[iangilman]

You can certainly try that... Basically you're tricking OSD into working with your fake values. I don't know the right way to do that, but if you look through the code you can probably figure it out.

What I've been recommending is not to try to trick OSD but to just build all these things you want outside of OSD. Pretend you are just using a normal img tag for your viewer, and build your own sequence mode and reference strip using plain JavaScript. Then drop OSD into that. That will give you much more control and you won't have to fight with or trick OSD.

[marcosocamargo]

Thanks Ian, I see this parameter: referenceStripThumbnailUrl How do I use it? Thanks, -Marcos

…

On Thu, Apr 11, 2024 at 9:31 AM Ian Gilman ***@***.***> wrote: You can certainly try that... Basically you're tricking OSD into working with your fake values. I don't know the right way to do that, but if you look through the code you can probably figure it out. What I've been recommending is not to try to trick OSD but to just build all these things you want outside of OSD. Pretend you are just using a normal img tag for your viewer, and build your own sequence mode and reference strip using plain JavaScript. Then drop OSD into that. That will give you much more control and you won't have to fight with or trick OSD. — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JKTSOIF55IJOSX52ILY423GJAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TAOBWGQ4TM> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[marcosocamargo]

referenceStripThumbnailUrl is used in the code below. It seems that it is related to tileSources option when the viewer is declared. This seems to be a way of decoupling the thumbnails in the reference strip from the image being displayed. Could you please provide me with an example of how I can take advantage of this parameter? Thanks again! if (originalTileSource.referenceStripThumbnailUrl) { miniTileSource = { type: 'image', url: originalTileSource.referenceStripThumbnailUrl }; On Fri, Apr 12, 2024 at 12:11 PM Marcos Camargo ***@***.***> wrote:

…

Thanks Ian, I see this parameter: referenceStripThumbnailUrl How do I use it? Thanks, -Marcos On Thu, Apr 11, 2024 at 9:31 AM Ian Gilman ***@***.***> wrote: > You can certainly try that... Basically you're tricking OSD into working > with your fake values. I don't know the right way to do that, but if you > look through the code you can probably figure it out. > > What I've been recommending is not to try to trick OSD but to just build > all these things you want outside of OSD. Pretend you are just using a > normal img tag for your viewer, and build your own sequence mode and > reference strip using plain JavaScript. Then drop OSD into that. That will > give you much more control and you won't have to fight with or trick OSD. > > — > Reply to this email directly, view it on GitHub > <#2489 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/BFLR7JKTSOIF55IJOSX52ILY423GJAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TAOBWGQ4TM> > . > You are receiving this because you authored the thread.Message ID: > <openseadragon/openseadragon/repo-discussions/2489/comments/9086496@ > github.com> >

[marcosocamargo]

I tried this format but it add extra images to the strip. tileSources: [ " https://storage.googleapis.com/recpres$directory_without_imagens/IMG_007_0018.dzi ", {referenceStripThumbnailUrl: " https://storage.googleapis.com/recpres$directory_without_imagens/IMG_007_0025.jpg "}, " https://storage.googleapis.com/recpres$directory_without_imagens/IMG_007_0019.dzi ", {referenceStripThumbnailUrl: " https://storage.googleapis.com/recpres$directory_without_imagens/IMG_007_0025.jpg "}, ] On Sat, Apr 13, 2024 at 5:25 AM Marcos Camargo ***@***.***> wrote:

…

referenceStripThumbnailUrl is used in the code below. It seems that it is related to tileSources option when the viewer is declared. This seems to be a way of decoupling the thumbnails in the reference strip from the image being displayed. Could you please provide me with an example of how I can take advantage of this parameter? Thanks again! if (originalTileSource.referenceStripThumbnailUrl) { miniTileSource = { type: 'image', url: originalTileSource.referenceStripThumbnailUrl }; On Fri, Apr 12, 2024 at 12:11 PM Marcos Camargo < ***@***.***> wrote: > Thanks Ian, > I see this parameter: referenceStripThumbnailUrl > How do I use it? > Thanks, > -Marcos > > On Thu, Apr 11, 2024 at 9:31 AM Ian Gilman ***@***.***> > wrote: > >> You can certainly try that... Basically you're tricking OSD into working >> with your fake values. I don't know the right way to do that, but if you >> look through the code you can probably figure it out. >> >> What I've been recommending is not to try to trick OSD but to just build >> all these things you want outside of OSD. Pretend you are just using a >> normal img tag for your viewer, and build your own sequence mode and >> reference strip using plain JavaScript. Then drop OSD into that. That will >> give you much more control and you won't have to fight with or trick OSD. >> >> — >> Reply to this email directly, view it on GitHub >> <#2489 (reply in thread)>, >> or unsubscribe >> <https://github.com/notifications/unsubscribe-auth/BFLR7JKTSOIF55IJOSX52ILY423GJAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TAOBWGQ4TM> >> . >> You are receiving this because you authored the thread.Message ID: >> <openseadragon/openseadragon/repo-discussions/2489/comments/9086496@ >> github.com> >> >

[iangilman]

I'm actually not sure. Maybe try this:

tileSources: [
  {
    url: "https://storage.googleapis.com/recpres$directory_without_imagens/IMG_007_0018.dzi",
    referenceStripThumbnailUrl: "https://storage.googleapis.com/recpres$directory_without_imagens/IMG_007_0025.jpg"
  }
]

[marcosocamargo]

I tried the suggested format for the tileSources you suggested and it doesn't work.

[iangilman]

Okay, then I'm not sure if it's possible.

[marcosocamargo]

I am using deepzoom (dzi). In libvips I can generate the pyramids down to 1 pixel. That's a lot of files. How do I set up OpenSeadragon so it doesn't require dzi images to be down to 1 pixel. I would like to generate them down to 1 tile. Thanks!

[iangilman]

I believe by default OSD doesn't load anything smaller than the biggest level that is made of a single tile. You might try deleting the smaller levels and seeing if you get any errors in the console. One exception might be if it needs a smaller tile for the navigator or the reference strip. Anyway, give it a try.

[marcosocamargo]

I created the DeepZoom image with libvips and option onetile. That means that the smallest level will be the size of a tile. There are 5 levels 0-4. If I create the same DZI image with option one which is one pixel then there are 13 levels which contain all the way down to 1 pixel. That's a lot of files that are not needed since we don't want to zoom out that far. I tried the first option and it doesn't work because it tries to load levels that don't exist in the DZI_files. It seems that OSD doesn't accept pyramid images unless they all the way down to one pixel. Thanks!

…

On Mon, Apr 29, 2024 at 10:12 AM Ian Gilman ***@***.***> wrote: I believe by default OSD doesn't load anything smaller than the biggest level that is made of a single tile. You might try deleting the smaller levels and seeing if you get any errors in the console. One exception might be if it needs a smaller tile for the navigator or the reference strip. Anyway, give it a try. — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JKLEFSEKU4HGE2M2EDY7Z5P7AVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TENRVHEYDA> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[marcosocamargo]

It seems that OSD is trying to load one level below the one tile. In my case level 9 is the first one with one tile but it tries to load level 8 as show in this pic: [image: image.png]

…

On Mon, Apr 29, 2024 at 10:12 AM Ian Gilman ***@***.***> wrote: I believe by default OSD doesn't load anything smaller than the biggest level that is made of a single tile. You might try deleting the smaller levels and seeing if you get any errors in the console. One exception might be if it needs a smaller tile for the navigator or the reference strip. Anyway, give it a try. — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JKLEFSEKU4HGE2M2EDY7Z5P7AVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TENRVHEYDA> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[marcosocamargo]

It seems like the navigator is the one requesting a level below the one tile level. I turned off the navigator and the error disappears. Is there any way of loading the first one tiler image instead of the one just below it? Thanks, -Marcos On Mon, May 6, 2024 at 9:52 PM Marcos Camargo ***@***.***> wrote:

…

It seems that OSD is trying to load one level below the one tile. In my case level 9 is the first one with one tile but it tries to load level 8 as show in this pic: [image: image.png] On Mon, Apr 29, 2024 at 10:12 AM Ian Gilman ***@***.***> wrote: > I believe by default OSD doesn't load anything smaller than the biggest > level that is made of a single tile. You might try deleting the smaller > levels and seeing if you get any errors in the console. One exception might > be if it needs a smaller tile for the navigator or the reference strip. > Anyway, give it a try. > > — > Reply to this email directly, view it on GitHub > <#2489 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/BFLR7JKLEFSEKU4HGE2M2EDY7Z5P7AVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TENRVHEYDA> > . > You are receiving this because you authored the thread.Message ID: > <openseadragon/openseadragon/repo-discussions/2489/comments/9265900@ > github.com> >

[pearcetm]

You can try setting the minLevel parameter on the tile source: https://openseadragon.github.io/docs/OpenSeadragon.TileSource.html#minLevel

This should stop the viewer/navigator from requesting lower levels than you want.

[marcosocamargo]

But that may vary from one image to another. Is there a way of OSD making a decision by itself? Thanks!

…

On Tue, May 7, 2024 at 8:49 AM pearcetm ***@***.***> wrote: You can try setting the minLevel parameter on the tile source: https://openseadragon.github.io/docs/OpenSeadragon.TileSource.html#minLevel This should stop the viewer/navigator from requesting lower levels than you want. — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JI3P43TRA7LRHW76X3ZBDZW7AVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TGNBTGY4TS> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[pearcetm]

Looks like this has been discussed in depth before - see #1488

Based on that thread, I don't think anybody has added a way to do this automatically. Others have wanted the same thing you're asking though.

However, it feels kind of like an over-optimization to me. Once you're down to the zoomed-out part of the pyramid where each level has a single tile, the amount of extra files and file size for these levels is quite small relative to the size and number of tiles in the full-resolution pyramid. There may be a few "extra" files per tiled image but if your deepest levels have hundreds of tiles, these extra levels are actually fairly insignificant in terms of the overall size of the image.

If you want to implement this, however, you could examine the tile source once it is loaded and set the minLevel yourself I suppose. Adding this in a viewer.world.addHandler('add-item', () => {...}) call might be the best place to do it.

[marcosocamargo]

OK. Thanks for the clarification. I am generating my won thumbnails. What is the optimum dimensions for the thumbnails if I use the strip viewer from OSD? -Marcos

…

On Tue, May 7, 2024 at 9:46 AM pearcetm ***@***.***> wrote: Looks like this has been discussed in depth before - see #1488 <#1488> Based on that thread, I don't think anybody has added a way to do this automatically. Others have wanted the same thing you're asking though. However, it feels kind of like an over-optimization to me. Once you're down to the zoomed-out part of the pyramid where each level has a single tile, the amount of extra files and file size for these levels is quite small relative to the size and number of tiles in the full-resolution pyramid. There may be a few "extra" files per tiled image but if your deepest levels have *hundreds* of tiles, these extra levels are actually fairly insignificant in terms of the overall size of the image. If you want to implement this, however, you could examine the tile source once it is loaded and set the minLevel yourself I suppose. Adding this in a viewer.world.addHandler('add-item', () => {...}) call might be the best place to do it. — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JLM27UWHF4CHQ3JS63ZBEANBAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TGNBUGQYDA> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[marcosocamargo]

Why does the reference strip cut off part of the image at the bottom? Please see this example: https://openseadragon.github.io/examples/ui-reference-strip/

…

On Tue, May 7, 2024 at 9:46 AM pearcetm ***@***.***> wrote: Looks like this has been discussed in depth before - see #1488 <#1488> Based on that thread, I don't think anybody has added a way to do this automatically. Others have wanted the same thing you're asking though. However, it feels kind of like an over-optimization to me. Once you're down to the zoomed-out part of the pyramid where each level has a single tile, the amount of extra files and file size for these levels is quite small relative to the size and number of tiles in the full-resolution pyramid. There may be a few "extra" files per tiled image but if your deepest levels have *hundreds* of tiles, these extra levels are actually fairly insignificant in terms of the overall size of the image. If you want to implement this, however, you could examine the tile source once it is loaded and set the minLevel yourself I suppose. Adding this in a viewer.world.addHandler('add-item', () => {...}) call might be the best place to do it. — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JLM27UWHF4CHQ3JS63ZBEANBAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TGNBUGQYDA> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[iangilman]

Interesting... I'm not sure why! I do know the reference strip is in need of some love. @msalsbery started an overhaul with #1961 but it's not done yet. Mark, any news on that front? Also, have you encountered the cutoff thumbnails?

[msalsbery]

What's getting cut off by what?

The example link looks as-designed (on iOS). I've been away from a computer for bit but returning soon, sorry for the delay!

[marcosocamargo]

onStripEnter, I changed the marginBottom to 10px but then the strip flickers when the strip come on focus. if ( 'horizontal' === this.scroll ) { //element.style.paddingTop = "0px"; element.style.*marginBottom* = "0px"; } else { //element.style.paddingRight = "0px"; element.style.marginLeft = "0px"; } On Fri, May 10, 2024 at 11:45 AM Marcos Camargo ***@***.***> wrote:

…

Why does the reference strip cut off part of the image at the bottom? Please see this example: https://openseadragon.github.io/examples/ui-reference-strip/ On Tue, May 7, 2024 at 9:46 AM pearcetm ***@***.***> wrote: > Looks like this has been discussed in depth before - see #1488 > <#1488> > > Based on that thread, I don't think anybody has added a way to do this > automatically. Others have wanted the same thing you're asking though. > > However, it feels kind of like an over-optimization to me. Once you're > down to the zoomed-out part of the pyramid where each level has a single > tile, the amount of extra files and file size for these levels is quite > small relative to the size and number of tiles in the full-resolution > pyramid. There may be a few "extra" files per tiled image but if your > deepest levels have *hundreds* of tiles, these extra levels are actually > fairly insignificant in terms of the overall size of the image. > > If you want to implement this, however, you could examine the tile source > once it is loaded and set the minLevel yourself I suppose. Adding this in a viewer.world.addHandler('add-item', > () => {...}) call might be the best place to do it. > > — > Reply to this email directly, view it on GitHub > <#2489 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/BFLR7JLM27UWHF4CHQ3JS63ZBEANBAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TGNBUGQYDA> > . > You are receiving this because you authored the thread.Message ID: > <openseadragon/openseadragon/repo-discussions/2489/comments/9344400@ > github.com> >

[marcosocamargo]

I figured why it flickers. It's because if you place the strip in a way that there is a gap between the window border and the strip and place the mouse there then it trips onStripLeave. Then the strip lowers and trips onStripEnter but since there is a gap it trips again onStripLeave. It gets in this cycle hence the flickering.

…

On Tue, May 14, 2024 at 9:48 AM Ian Gilman ***@***.***> wrote: Interesting... I'm not sure why! I do know the reference strip is in need of some love. @msalsbery <https://github.com/msalsbery> started an overhaul with #1961 <#1961> but it's not done yet. Mark, any news on that front? Also, have you encountered the cutoff thumbnails? — Reply to this email directly, view it on GitHub <#2489 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLR7JIZH3446LX2G3BJPBLZCI57LAVCNFSM6AAAAABEEAN5GOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TIMZWGMYTO> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[iangilman]

Oh, good catch!

[msalsbery]

Yeah, that's the old default behavior with the auto-hide and auto-fade settings

[marcosocamargo]

I modified the script so it just fades in and out instead of lowering it. It was cutting a little of the bottom of thumbnails. I appreciate all the help you have provided me.