Create a "so you're migrating from Seadragon Ajax" page

[iangilman]

We seem to be getting a bunch of interest from people who are already using Seadragon Ajax and they want to upgrade to OpenSeadragon. We should give them a page with clear instructions highlighting the differences and showing them how to quickly make the change.

@thatcher you know better than I what these differences are, so maybe you could start this? If you want I'm happy to finish it up and get it on the site.

[iangilman]

Possibly of interest to @pablanco and @Ventero... perhaps you folks could help us out by highlighting some of the issues you have run into during your conversion?

[iangilman]

Also, @dgutman. Perhaps you could not only weigh in on going from Seadragon Ajax but also on converting from the Flash OpenZoom?

[iangilman]

As mentioned in openseadragon/openseadragon#162 addEventListener has been changed to addHandler.

[avandecreme]

Just discovered this issue.
Here is what I had to do:

• as already mentioned, change the addEventListener to addHandler and removeEventListener to removeHandler
• change Seadragon.EventManager to OpenSeadragon.EventHandler
• change eventManager.raiseEvent to eventHandler.trigger
• change viewer.elmt to viewer.element
• change viewer.addControl(elmt, anchor) to viewer.addControl(element, {anchor: anchor}) (not required for now but avoid a warning telling that it will break in the future)
• the methods in Seadragon.Utils has been move to OpenSeadragon. For example, Seadragon.Utils.getElementPosition(elmt) become OpenSeadragon.getElementPosition(element)

[iangilman]

@avandecreme Awesome, thanks! That's just the sort of list I was looking for.

[kohts]

Transitioning from Seadragon Ajax 0.8 used in html file generated by Microsoft Deep Zoom Composer to OpenSeadragon took replacing

1. source of js library from

<script type="text/javascript" src="http://seadragon.com/ajax/0.8/seadragon-min.js"></script>

to

<script type="text/javascript" src="/openseadragon-bin-1.0.0/openseadragon.min.js"></script>

2. the main object creation call

        viewer = new Seadragon.Viewer("container");
        viewer.openDzi("of-10141-0001-006.xml");

with

        viewer = OpenSeadragon({
            id: "container",
            prefixUrl: "/openseadragon-bin-1.0.0/images/",
            tileSources: "/deepzoom-test/2/of-10141-0001-006.xml"
        });

3. and replacing utility call

    Seadragon.Utils.addEvent(window, "load", init);

with

    OpenSeadragon.addEvent(window, "load", init);

[oblab]

Hi,
Do you know how to migrate from Seadragon ajax to OpenSeadragon when you use a file to load the dzi instead of the OpenSeadragon() function

For example, on this page http://imprimerie-union.org/galeries/apollinaire-a-maeght/romoff/galerie/
I use a external file (http://imprimerie-union.org/galeries/apollinaire-a-maeght/romoff/galerie/data.js) like on Zoom.it they use http://zoom.it/scripts/gallery-data.js

Can i keep my file "data.js" with OpenSeadragon or do i need to adapt this file ?

thanks,

Olivier

[iangilman]

Yes, that's a great way to do it. See the "Inline Configuration for DZI" section on http://openseadragon.github.io/examples/tilesource-dzi/

[oblab]

Thanks in gilman, so i have to modified my js file like this :

var data = [
{
thumb: 'snegaroff-vers-1920',
title: 'Dimitri Snégaroff vers 1920. Archives Snégaroff',
dzi: 'snegaroff-vers-1920.xml',
desc: '',
xml: ''
},

by this :

{
"Image": {
"xmlns": "http://schemas.microsoft.com/deepzoom/2008",
Url: 'snegaroff-vers-1920.xml'
title: 'Dimitri Snégaroff vers 1920. Archives Snégaroff',
"Format": "jpg",
"Overlap": "1",
"TileSize": "256",
"Size": {
"Height": "640",
"Width": "433"
}
}

[iangilman]

Something like that. What I've done on some projects is keep the data file the same, including the XML, and then parse the XML into the appropriate variables on the client. For instance:

    var $xml = jQuery(jQuery.parseXML(yourImageXML));
    var $image = $xml.find('Image');
    var $size = $xml.find('Size');

    var dzi = {
        Image: {
            xmlns: $image.attr('xmlns'),
            Url: yourServer + yourImageName + '_files/',
            Format: $image.attr('Format'), 
            Overlap: $image.attr('Overlap'), 
            TileSize: $image.attr('TileSize'),
            Size: {
                Height: $size.attr('Height'),
                Width: $size.attr('Width')
            }
        }
    };

I suppose a good feature request would be for OpenSeadragon to support literal XML directly.

[oblab]

Thanks a lot Ian ! i'll try this solution. It's for an artistic project, i work for free, so help is welcome ;-)

[oblab]

Can reproduce what you did on the site Chris Jordan ?

[iangilman]

@oblab in what way do you mean?

[oblab]

I mean, can i use your files seadragon.js ?
the code you gave me above is in the seadragon.js file isn't it ?
but i have also to change the main object creation call and utility call, as Kohts said ?

[iangilman]

True, it is from that file. I can't give you the go-ahead to use the whole file, as it's part of Chris's site, which is copyrighted. It's fairly specific to his needs anyway, so most of it probably wouldn't be of use.

[oblab]

Indeed, most of your seadragon.js file wouldn't be useful for me. I just want to use Openseadragon (without the thumbs scroll or other specific effects) and keep my data.js (because i have more than 200 data.js), but i don't succeed...
Sorry to bother you with that, i understand if you haven't the time to help me.
The reason i wanted to migrate from Seadragon Ajax to OpenSeadragon, is the Binding Custom Buttons.
Thanks

[iangilman]

I'm happy to continue to help, though maybe we should start a new issue for our further discussion. Where are you running aground now?

[oblab]

Thanks Ian,
i have tried this but i don't understand how to specify "myImageXML" and the path to the tiles folder :

<script type="text/javascript" src="js/openseadragon.min.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript">
 var viewer = null;
function init() {   
    viewer = OpenSeadragon({ 
             id: "viewer", 
       });
 }  
OpenSeadragon.addEvent(window, "load", init);
       var $xml = jQuery(jQuery.parseXML(myImageXML));
       var $image = $xml.find('Image');
       var $size = $xml.find('Size');
       var dzi = {
         Image: {
            xmlns: $image.attr('xmlns'),
            Url: yourServer + myImageName + '_files/',  
            Format: $image.attr('Format'), 
            Overlap: $image.attr('Overlap'), 
            TileSize: $image.attr('TileSize'),
            Size: {
                Height: $size.attr('Height'),
                Width: $size.attr('Width')
            }
        }
    };
</script>

my directorie for this gallery (http://imprimerie-union.org/galeries/annees-russes/lenine/galerie-lenine/) looks like this :

[iangilman]

This gives me a much better idea of what you need. I've started a new thread:

openseadragon/openseadragon#438

...because the topic has strayed a bit off of the general migration issue here.

[iangilman]

@lucidchin mentions in openseadragon/openseadragon#461 (comment) another difference:

The addControl call is pretty much the same as the old Seadragon method but these are the two differences:

• The old method for ButtonGroup created a property called elmt, the new one is called "element".
• The second parameter is now an object with an anchor property.