Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Q: fullScreen mode, my own custom controls
See original GitHub issueHi, I am trying to add my own custom controls floating over the OpenSeadragon canvas, similar to OpenSeadragon’s own buttons, but actually a floating rectangular pallette.
To begin with, it works fine to simply add my stuff to the DOM myself, and use absolute positioning to position it over OSD’s canvas. Great!
But when OSD goes into full screen mode, my custom controls are lost – because after fullscreen mode, somehow the only thing in the div I loaded OpenSeadragon into, everything else is gone (removed from the DOM? temporarily? Not sure). I assume this intentional, although I can’t for the life of me identify the code in OSD that’s doing it!
So for a while I experimented with adding my custom controls to the DOM as a child of one of OpenSeadragon’s own div’s, like the .openseadragon-container. That works to keep my controls on screen in fullScreen mode, but I start having to fight with OSD over mousedown events and such, to keep OSD from swallowing all the interactions on my custom controls.
So I’ve realized it’s probably better to keep my custom controls on their own, but make full screen mode allow other things to stay in the <body>. I can write my own completely custom code to do this, but then I’d lose all of OSD’s fullscreen-related events being triggered. And also i realize that there may be reasons related to cross-browser compat for what OSD is already doing that I don’t fully understand – like why OSD is removing things from the body but then making the body fullscreen, instead of just making it’s own sub-element fullscreen. If there’s embodied wisdom about cross-browser compatibility in OpenSeadragon, I don’t want to have to reinvent the wheel.
So… I’m not entirely sure what I’m asking, but any advice would be welcome. About adding my own custom controls floating over the OSD window, or about how OSD’s fullscreen code works and what the motivation behind it is and if there’s any way I can interact it with it to have it refrain from removing my custom controls from the DOM on fullscreen switch.
Thanks!
Issue Analytics
- State:
- Created 9 years ago
- Comments:11 (4 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
It can work with the toolbar option: https://openseadragon.github.io/examples/ui-toolbar/
I placed my custom buttons in that div, and they work in normal mode and full screen mode
Removing standard controls and managing full-screen myself actually worked out FINE. I could have saved myself a lot of time by skipping right to there.
I think a feature in openseadragon where you can give it the #id of a ‘container’ node that it will use for fullPage/fullScreen, rather than insisting on using OSD’s own nodes, will work out great – but I haven’t had time to do a PR.
My code is at: https://github.com/jrochkind/beehive_poster_viewer
But it’s not yet a publicly released app. The repo doesn’t have the tile data in it, so a checkout of the repo isn’t actually runnable. I’m not sure if you’ll find your way around the code on your own (sorry the JS is not well organized), but I can answer questions if you have them.
The part where I handle full screen myself (although with a bit of help from OSD’s cross-browser support) is really quite simple and is here: https://github.com/jrochkind/beehive_poster_viewer/blob/5f13277135426d5beac4546a3e820b79c6bfca88/js/viewer.js#L217
My app starts out ‘full page’, so I’m requesting full screen for document.body, but you can just request full screen for whatever element you want.