Final updates to Seadragon Ajax and Zoom.it

  • Announcement
  • Updated 4 years ago
Live Labs moved to Bing this past November (announcement), and we shared that we would be handing our projects off to other teams at Microsoft (details). Here are the final updates!

--

Seadragon Ajax has now been fully transitioned to the Expression Gallery. The downloadable zip there has not just the full library and button images, but also the raw source code for you to modify as needed!

Before handing it off, we were able to fix some key bugs, add some cool new features, and generally polish the experience! We shipped some of these updates in November, and the rest this past month. Here are the highlights:




  • The rare but annoying tile flickering in Chrome was fixed.

                                                                                                                                    




  • The pan constraint was improved and tightened; Config.visibilityRatio now defaults to 0.8 instead of 0.5 (even a value of 1.0 will now work!).

                                                                                                                                    




  • The pan constraint now takes place while the user drags the mouse instead of only after. You can revert to the old behavior by setting the new Config.constrainDuringPan flag to false.

                    

                                                                                                                                    




  • Zooming was changed to be logarithmic; zooming in now has the same "springiness" as zooming out. You can revert to the old behavior by setting the new Config.logarithmicZoom flag to false.

                                                                                                                                    




  • The Viewport class now has several new methods for getting the constrained pan and zoom values, like getMinZoom() and getMaxZoom().

                                                                                                                                    




  • The Viewer class now exposes the container element passed to its constructor via the new container property.

                                                                                                                                    




  • The Viewer class now exposes the MouseTracker instance powering its pan/zoom interactions via the new tracker property. This lets you more easily tweak the default mouse navigation without having to re-implement it yourself.

                                                                                                                                    




  • The Viewer.openDzi() method now accepts a JSON object with the DZI's info. The format matches the DZI object returned by the Zoom.it API; see the API's JavaScript quickstart for an example of this in action.

                                                                                                                                    




  • The Viewer class now has a new showMessage() method that makes it easy to show horizontally- and vertically-centered messages inside the viewer, just like the default "Loading..." and error messages.

                                                                                                                                    




  • The code is now built via the Microsoft Ajax Minifier, resulting in code size savings of over 40%! (It was previously 84 KB; now it's 48 KB.)



These updates make up the new and likely final v0.8.9. Not all of these changes have made it into the documentation on the Expression Gallery website, but the documentation in the zip is fully up-to-date.

From this point on, we highly recommend hosting Seadragon Ajax yourself via the Expression Gallery download. The version hosted on Seadragon.com will continue to work, but we have retired the Seadragon.com domain, so it may go offline in the future.

--

Zoom.it has been handed over to the Silverlight team, but we were able to push out some exciting new features to the Zoom.it API beforehand! Here are the highlights:




  • There is now a new /v1/dzi endpoint in addition to the existing /v1/content endpoint; instead of returning the full content info, it returns only the streamlined DZI info! Like /v1/content, you can query /v1/dzi by ID or by by URL. In both cases:

                    

                                                                                                                                    


  • If the DZI is ready, the response will be a 301 Redirect to the actual DZI file, but the info will be in the response body.

  • If the DZI failed, the response will be a 404 Not Found.

  • If the DZI is still being made, the response will also be a 404 Not Found, but there will be an additional Retry-After header (in the non-RESTful case, this translates to a new retryAfter property).



                                                                                                                                

An easy way to think about this is that you're requesting the DZI directly. If the DZI is ready, we redirect you to it. If conversion failed, it doesn't exist. If we're still converting, it still doesn't exist, but only temporarily, so we tell you to try again soon.
                

                                                                                                                                

Here are two non-RESTful examples to illustrate all of this: /v1/content/h?format=xml vs. /v1/dzi/h?format=xml, and /v1/content/dff?format=xml vs. /v1/dzi/dff?format=xml. (You may have to view source on those if your browser doesn't render XML.)
                

                                                                                                                                
This new endpoint is great lightweight option if you just want to know whether your DZI is ready or not. It's especially useful when combined with the next two features...

                

                                                                                                                                





  • Zoom.it now supports webpage thumbnailing: instead of rendering the entire webpage, you can ask it to render just the first 1024x768 pixels! To use this feature, just wrap your URL with zoomit://thumbnail/?url=<url>.


                    

                                                                                                                                     


    If you wanted to thumbnail en.wikipedia.org/wiki/Microsoft, for example, you would send a URL of zoomit://thumbnail/?url=http://en.wikipedia.org/wiki/Microsoft. Here's such an API request, and here's the resulting image.


                    

                                                                                                                                    


    (You can compare this with the regular URL: API request and resulting image.)


                    

                                                                                                                                    


    Zoom.it is optimized for doing this thumbnailing very quickly — on the order of seconds. For example, we disable JavaScript (so the page loads quicker), and we use 1024px tiles with no overlap (resulting in only one tile per level).


                    

                                                                                                                                    

    Since the resulting image is both fast and closer to what a user would see in their browser window, this is a great candidate for search and browse scenarios. And that leads to our last feature...

                                                                                                                                    





  • Zoom.it now has a batch API: you can now submit multiple URLs in one request and get back their corresponding content or DZI infos in one response!


                    

                                                                                                                                    


    To make a batch request by ID, simply specify multiple comma-separated IDs, e.g. /v1/content/h,dff,zoom?format=xml. To make a batch request by URL, change your GET request to POST, and move your ?url= parameters to the request body:


                    

                                                                                                                                    

    <strong>POST</strong> /v1/content/?format=xml HTTP/1.1
    Content-Type: <a href="http://en.wikipedia.org/wiki/Percent-encoding#The_application.2Fx-www-form-urlencoded_type" target="_blank">application/x-www-form-urlencoded</a>

    <strong>url=&lt;url1&gt;&amp;url=&lt;url2&gt;&amp;url=&lt;url3&gt;&amp;...</strong>


                                                                                                                                    


    We can't provide a link to an example request by URL here, since links use GET. You can create a simple HTML form instead:


                    

                                                                                                                                    

    &lt;form action="http://api.zoom.it/v1/content/" method="POST"&gt;
    &lt;input name="url" value="<strong>{url1}</strong>" /&gt;
    &lt;input name="url" value="<strong>{url2}</strong>" /&gt;
    &lt;input name="url" value="<strong>{url3}</strong>" /&gt;
    &lt;input type="submit" value="Make request" /&gt;
    &lt;/form&gt;


                                                                                                                                    


    Note that this API works with the /v1/dzi endpoint and thumbnail URLs, too. In all cases, the batch response is a 200 OK with a responses collection/array as its body, where each element in the collection/array is a non-RESTful response object.


                    

                                                                                                                                    


    Since the batch API requires POST and JSONP is limited to GET, we implemented cross-domain Ajax support via the recent CORS standard; this allows JavaScript clients to use XMLHttpRequest or XDomainRequest to POST to our domain.


                    

                                                                                                                                    


    This batch API is thus a great option for all clients, and it should make apps much more efficient when dealing with multiple images.




  • We hope you enjoy these new features, and we'd love to hear what you think. We unfortunately weren't able to document these features more formally, so if you have any questions, don't hesitate to ask.

    --

    Going forward, both Seadragon Ajax and Zoom.it will continue to be available for the foreseeable future through the Expression and Silverlight teams, but this is likely the last update to each from our side.

    We thank you again for your support throughout the years. All the best!
    Photo of Aseem Kishore

    Aseem Kishore, Former Employee

    • 702 Posts
    • 124 Reply Likes
    • thankful

    Posted 5 years ago

    • 1
    Photo of Daniel Gasienica

    Daniel Gasienica

    • 73 Posts
    • 19 Reply Likes
    Great stuff – thank you! :)
    Photo of Stratton

    Stratton

    • 1 Post
    • 0 Reply Likes
    The version of Seadragon Ajax on the Expression page still has issues with Chrome (tile fading doesn't work) and IE8 (tile jittering). The Zoom.it revision doesn't have these problems, though that's not available to the public.

    Now that Live Labs has moved off the project, will these problems ever be fixed? Is there another team working on it?
    Photo of Aseem Kishore

    Aseem Kishore, Former Employee

    • 702 Posts
    • 124 Reply Likes
    Hey Stratton,

    I'm surprised to hear about Chrome. Perhaps this is a new bug, or a regression in Chrome rather than a bug in Seadragon Ajax. What OS and version of Chrome are you on?

    The IE8- tile jittering bug was never fixed and is not fixable. IE8 doesn't have any support for subpixel precision, so tiles will always snap to the nearest pixel, which causes the jitter. Zoom.it doesn't appear to have these problems only if you have Silverlight installed, which Zoom.it will use in IE8. If you disable Silverlight, it will use Seadragon Ajax and you will see the jitter.

    In general, I don't know that anyone will make any updates to Seadragon Ajax now. I've left Microsoft, so I no longer own the code, and I'm also dedicated full-time to my new job now. There are still developers at Microsoft who know the code, but I don't know if they can actively support it either.

    The good news is, the source code is available for modification, so you can always make the modifications yourself (or hire a developer to do so ;)). Thanks for understanding, and good luck!
    Photo of mg.zgroupsoft

    mg.zgroupsoft

    • 3 Posts
    • 0 Reply Likes
    zoom.it/1 works on iPad but in sources there are no touchstart, touchend and other touch related events. Demo from sources doesn't work on iPad. Can you point where to take the version with iPad support?
    Photo of Aseem Kishore

    Aseem Kishore, Former Employee

    • 702 Posts
    • 124 Reply Likes
    Zoom.it returns different versions of the site for different devices. If you want to view the source that the iPad receives, set your browser to use the iPad's User-Agent.
    Photo of mg.zgroupsoft

    mg.zgroupsoft

    • 3 Posts
    • 0 Reply Likes
    Thank you. One other question - is css3 enabled for iPad by default? I have set Seadragon.Config.transformOverlays to true but performance looks the same and is slow.
    Photo of Aseem Kishore

    Aseem Kishore, Former Employee

    • 702 Posts
    • 124 Reply Likes
    Sorry, CSS3 is not used on the iPad for rendering. We tried briefly but weren't able to get hardware acceleration to kick in, so it defaults to using (the slightly more robust) canvas rendering for now. Seadragon.Config.transformOverlays only affects overlays.
    Photo of mg.zgroupsoft

    mg.zgroupsoft

    • 3 Posts
    • 0 Reply Likes
    Have you used scale3d and transform3d? Because only 3d versions of scale and transform are hardware accelerated in webkit browsers.
    Photo of Aseem Kishore

    Aseem Kishore, Former Employee

    • 702 Posts
    • 124 Reply Likes
    You're right, I don't think we did. If you want to experiment with this yourself, just grab the source at http://gallery.expression.microsoft.c... -- the relevant code is within Seadragon.Drawer.js. Good luck!
    Photo of Wedgie

    Wedgie

    • 2 Posts
    • 0 Reply Likes
    Hey Aseem, thanks for continuing to keep an eye on Seadragon developments, and all the best at Startup!
    I'm going to have a go at enabling hardware acceleration in iPad for Seadragon AJAX per your suggestion. I can see that there is some commented out code at line 94 in Seadragon.Drawer.js for this purpose. Hopefully it's just a matter of reinstating this code and then applying some 3d transforms as suggested by mg.zgroupsoft to get the GPU to kick in.
    Photo of ab-c media

    ab-c media

    • 1 Post
    • 0 Reply Likes
    Did you succeed in enabling 3D transforms in Seadragon?

    I un-commented the cssTransform related lines in Seadragon.Drawer.js,
    It worked OK in Webkit but no hardware acceleration in iOS.

    I think matrix() on line 200 has to become matrix3d() but it requires 16 args instead of 6... My math is not good enough to calculate them.

    Documentation on matrix and matrix3d:

    http://developer.apple.com/library/sa...

    http://9elements.com/html5demos/matri...
    Photo of Wedgie

    Wedgie

    • 2 Posts
    • 0 Reply Likes
    I didn't try modifying the matrix call, but I did try inserting

    this.style[cssTransformProperty] = 'translateZ(0px)'

    on line 173 but couldn't see any improvement.

    Actually it would be great to be able to tell when the GPU has kicked in other than just subjective testing. Any idea how to do that?

    BTW I notice Aseem K posted something about his here: https://github.com/aseemk/seadragon-a...