openseadragon/site-build

Build script and documents for the OpenSeadragon site

OpenSeadragon Site-Build

This project compiles static web pages which provide the examples and documentation for using OpenSeadragon.

On the Web

http://openseadragon.github.io/

First Time Setup

All command-line operations are scripted using Grunt which is based on Node.js. To get set up:

1. Install Node, if you haven't already (available at the link above)
2. Install the Grunt command line runner (if you haven't already); on the command line, run npm install -g grunt-cli
3. Clone the site-build repository
4. On the command line, go in to the site-build folder
5. Run npm install

You're set... continue reading for build and test instructions.

Building the Web Pages

To build, just run (on the command line, in the site-build folder):

grunt build

The built website will appear in site-build/build.

If you want to try the site out in your browser, you can run:

grunt connect watch

This will run a server at http://localhost:9000/.

Building the Docs

grunt doc

... will build the docs into the local build folder.

Publishing

To publish, run:

grunt publish

This cleans out the openseadragon.github.com folder (which you've cloned from the openseadragon.github.com repository, and resides next to your site-build folder) and builds and copies the web pages and docs into it.

Note that while the OpenSeadragon website resides at http://openseadragon.github.io, for historical reasons the repository is named openseadragon.github.com.

Example Images

If you want to see the website with the appropriate example images, clone the example-images repository into site-build/build and check out its gh-pages branch.

site-build's Issues

TMS example down

http://openseadragon.github.io/examples/tilesource-tms/

I couldn't find whether osgeo moved or deleted the files.

More "In the Wild"

http://feistyphoton.org with example http://feistyphoton.org/project/carinatour/ should go in Scientific.

Complex HTML overlay demo zooming issue

Once you zoom in, you can't zoom out anymore.

http://openseadragon.github.io/examples/ui-overlays/

Should have a page explaining the coordinate system

It's a little unusual, and a point of confusion for folks.

Build improvements

• Pull version number out of openseadragon.js, so we don't have multiple copies of that variable (currently stored in build.properties).
• Switch to Grunt so we're all using the same system?

TMS demo is broken

http://openseadragon.github.io/examples/tilesource-tms/

Looks like the data we're using has gone offline... I imagine that the code is still fine; we just need to find a new tile source.

Add https://www.karinatwiss.com/ to "in the wild"

@mistymadonna :)

Add twitter handle to our site

"getting started" page

Here's a start:

http://stackoverflow.com/questions/16451256/how-do-i-get-started-using-openseadragon

General page on the technology and history of OpenSeadragon

Including things like:

• https://en.wikipedia.org/wiki/Deep_Zoom
• http://msdn.microsoft.com/en-us/library/cc645077%28VS.95%29.aspx
• http://dragonosticism.wordpress.com/2009/10/18/seadragon-philosophy-the-user-never-waits/
• http://dragonosticism.wordpress.com/2009/12/28/seadragon-philosophy-the-user-is-never-lost/
• http://www.quora.com/Microsoft-Seadragon/What-is-Seadragon-used-for-and-how-does-it-work-in-really-simple-laymen-terms/answer/Nate-Lawrence

Clear out openseadragon.github.com before build

... leaving only the readme

Misplaced arrow in overlays example

In fixed size overlay: http://openseadragon.github.io/examples/ui-overlays/

Looks like placement is top left instead of right.

Get the docs building

Mention tileWidth/tileHeight on custom tile source example

I think many folks will still want to stick with tileSize, but we should mention that tileWidth/tileHeight is also an option on:

http://openseadragon.github.io/examples/tilesource-custom/

@ConnerMan would you care to take a whack at this?

Note: we won't deploy until the new code is released.

Add link to file format on "Creating" page

...for people who want to write their own generator.

I figure this is the link to use:

https://msdn.microsoft.com/en-us/library/cc645077%28v=vs.95%29.aspx

Directory of OpenSeadragon plugins

@dgutman has a plugin. Surely there will be more.

Some of our code samples scroll horizontally

Edit them so they are less wide.

add owlstand to "in the wild"

Main page: http://www.owlstand.com/

Example: http://www.owlstand.com/exhibition/room/9e83a1f3-2b6c-4ac2-bd1d-36b03871d0b4 (or whatever you like)

@TMUND care to take this? :-)

Add info about our browser extension

https://github.com/openseadragon/browser-extension

cc @avandecreme

Mention our Bower support on the website

Mention Angular module, etc. on website

Maybe in the "download" section?

openseadragon/openseadragon#370 (comment)

Automatically bump Bower version via Grunt

As mentioned in #50 with @patrickheck.

Add http://infoforest.vis.uky.edu to "in the wild"

Add npm to our download section

...somewhere near Bower.

Register our new Bower

...though I'd still like to figure out what to do about the old one.

Link to changelog.txt from releases page

http://openseadragon.github.io/changelog.txt

In the wild: New York Public Library

Here's a recent announcement:

http://www.nypl.org/blog/2016/01/05/share-public-domain-collections

A lot of the content is done with OpenSeadragon. Of course we need to find a good example.

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

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.

Add list of sites that use our tech

... to our website

"How to create an OpenSeadragon image" page

Some possible leads here: https://github.com/iangilman/zooming but I'm sure there are others.

rename site-build to openseadragon-site-build for clarity

Can we rename site-build to openseadragon-site-build for clarity ?

Its a small thing but better.

Add The Human Protein Atlas to "in the wild"

The Human Protein Atlas version 14 now includes a mouse brain viewer based on openseadragon.

Main site:
http://www.proteinatlas.org/

Example:
http://www.proteinatlas.org/ENSG00000213463-SYNJ2BP/tissue/mouse+brain

Create example page for Zoomify tile source

...and link it from the front page of course.

I suppose to do this we'll need a nice image in Zoomify format. @foobarable any thoughts on where to get such a thing?

Add Zoomify options to "Creating Zooming Images"

@foobarable What are the tools people use to create Zoomify tiles?

Rotation example page

Now that @robhobbes's openseadragon/openseadragon#185 has landed, we should add an example page for the rotation feature.

Site footer

Just something small and consistent across the site. Should contain the same nav links that are up at the top.

In the wild: installations

Might be nice to have a section for places OpenSeadragon is used in installations (only available in person, not on the web). For instance:

https://twitter.com/MarinDaddy/status/685556928726962176

Keyboard example doesn't focus on viewer

On https://openseadragon.github.io/examples/ui-keyboard-navigation/ it's trying to focus on the viewer (with document.getElementById('contentDiv').focus();), but it doesn't actually work (at least not on Mac Firefox or Chrome). Perhaps we need to do it to a different element?

Broken link on openseadragon.github.io/docs/

On: http://openseadragon.github.io/docs/

The link for OpenSeadragon() in paragraph 1 is currently:
http://openseadragon.github.io/docs/module-OpenSeadragon.html
leading to a 404

Should be:
http://openseadragon.github.io/docs/#module-OpenSeadragon.html

Binding custom buttons feature needs documentation

The binding custom buttons feature needs to be added to the OpenSeadragon.Options docs.

Also, the related demo needs updating for OpenSeadragon 1.0.0 which eliminated the onPageChange callback.

Update info on using zoom.it tiles

From @aseemk, one of the original authors of zoom.it:

https://twitter.com/aseemk/status/374011428581036032

The info needs to be added to:

https://github.com/openseadragon/site-build/blob/master/www/tilesource-zoomit.html

Mention the IIIF 1.1 TileSource on our IIIF page

http://openseadragon.github.io/examples/tilesource-iiif/

@jpstroop can you do this?

Favicon

Presumably based on the logo we're using for the Twitter account.

Better handling of jsdoc in our build process

I almost have the new Grunt-based build working in the site-build repository, and will be checking it in shortly. Everything's moved over to Grunt vernacular, except jsdoc; with that I just punted and am using Ant to build it. Hopefully we can address this in the future.

I tried using https://github.com/krampstudio/grunt-jsdoc-plugin, but I couldn't get it to work (I can post the command line errors here if they would be useful to someone).

Next I tried using Grunt's spawn command to run our existing jsdoc on the command line, but I don't know that much about Java, so I couldn't figure out how to convert Ant's java command into something that would work on the command line... can anyone tell me how to convert this into straight command line?

    <java jar="jsdoc/jsrun.jar" 
          fork="true">
        <arg value="jsdoc/app/run.js"/>
        <arg value="openseadragon/openseadragon.js"/>
        <arg value="--template=jsdoc/openseadragon"/>
        <arg value="--directory=${BUILD}/docs"/>
        <arg value="--verbose"/>
    </java>

Of course I'm open to other options as well, including other jsdoc libraries, or even other documentation tools (assuming the migration path is smooth).

Redirect for EventHandler

@msalsbery, just a quick follow-up to #33: could you add one more redirect, so /docs/symbols/OpenSeadragon.EventHandler.html redirects to /docs/OpenSeadragon.EventSource.html?

Add http://pinacotecabrera.org/ to "in the wild"

http://pinacotecabrera.org/

Find a good example, like this:

http://pinacotecabrera.org/collezione-online/opere/madonna-col-bambino-madonna-della-mela/

...but with a deeper zoom and add it to:

https://github.com/openseadragon/site-build/blob/master/www/in-the-wild.html

Getting started or FAQ

I've received a bit of help implementing OpenSeadragon by asking questions here on GitHub -- and it dawned on me that perhaps there could be some extension to the getting started page, or frequently asked questions page for first-time users like myself. I've cloned down the site-build repo to make some changes myself, but I don't want step on anyone's toes. Would this sort of contribution be welcome from a first-time user? Are there any existing plans for this sort of feature, or anyone else already working on it?

more "in the wild"

http://www.romaierioggi.it/nuova-pianta-di-roma-moderna-monaldini-1843/

New feature: image zoom page

Similar to the browser extension, but set up as a webpage (for people who don't have the extension installed).

Usecase: You run across an image like:

http://orig00.deviantart.net/505e/f/2015/294/8/e/exoplanets_by_jaysimons-d9dv6th.jpg

...and you want to share an OpenSeadragon-ified version on Twitter or something.

cc: @avandecreme

Less redundancy on each page

The current site has a lot of the same content on each page, which is confusing. Let's organize this better.