openseadragon / html-overlay

An OpenSeadragon plugin that adds HTML overlay capability.
BSD 3-Clause "New" or "Revised" License
13 stars 4 forks source link

hard to make it work with zoomifytileservice #7

Open virtualgadjo opened 1 year ago

virtualgadjo commented 1 year ago

Hi, playing around witth the plugin, it seems to have some issues with zoomify tiles i can see in yoyr example that you use a totally different tile options group with a witdh 1000 and a Sizes object but if i try this, osd stops working, maybe there is something else to have it work with that kind of tiles ? this

const viewer = OpenSeadragon({
    id: "astro1",
    prefixUrl: "assets/images/",
    tileSources: [{
        type: "zoomifytileservice",
        width: 22000,
        height: 27816,
        tilesUrl: "assets/tiles/dentelle/",
        tileSize: 256,
        fileFormat: 'jpg'
    }],
    defaultZoomLevel: 1,
    minZoomLevel: 1,
    showNavigator: true,
    navigatorAutoFade: true,
    showNavigationControl: true,
    navigatorPosition: "BOTTOM_RIGHT",
    navigatorHeight: "120px",
    navigatorWidth:"160px",
    navigatorDisplayRegionColor: "rgba(255,255,255,.5)",
    visibilityRatio: 1.0,
    constrainDuringPan: true
});

let overlay = viewer.htmlOverlay();
overlay.element().appendChild(document.querySelector('.zifirstoverlay'));

works fine, except for the last two lines, when i refresh the page i can see my div correctly positionned but as soon (less than 1 second, osd amazes me...,, later) it disappears below the image (no matter i use var or let and const, same result (of course, OSD and the plugin last releases)

just in case you had THE idea :) have a nice day

iangilman commented 1 year ago

Strange. The code looks fine. I don't expect that it makes any difference that it's Zoomify. Can you post a repro link?

virtualgadjo commented 1 year ago

Hi, and thanks a lot for your help have a look at this one https://www.ilestcontenttoto.com/dentelle-test/ i've made the overlay huge and red so you'll see it without any doubt when loading no matter the kind of units i use to size osd container or the overlay, it doesn't like what i do :)

the funny thing is that the native osd overlay feature works like a charm with the same main setup https://www.ilestcontenttoto.com/dentelle/ but your html overlay plugin would allow me to do even more custmizations

thanks again for taking time to help :) have a nice day

virtualgadjo commented 1 year ago

Hi again,

found out!, actually it doesn't work without your scale option const overlay = viewer.htmlOverlay({scale: 2000}); i've updated the -test link and with this 2000 value, i've width: 400px in my css and the awfull red div i've put is nearly 400px width on load now, between OSD native overlay and this i can play with whatever i need! :)

thanks again and a lot for everything, OSD, the plugin and your patience and help :) have a nice day

iangilman commented 1 year ago

Oh yes, I'm glad you spotted that!