Skip to content

Universal Viewer

Jump to bottom Edit New page
jabrah edited this page Jun 26, 2015 · 2 revisions

Building the viewer from source requires the following tools:

  • Node.js
  • Grunt: npm install -g grunt-cli
  • Bower: npm install -g bower

Now to build:

  • git clone https://github.com/UniversalViewer/universalviewer.git to clone the UniversalViewer Github repository. This will download the source into a folder in your current directory called universalviewer. Move to this directory.
  • npm install
  • bower install install dependencies
  • grunt build to build the latest release version, or simply grunt to build the development version.
  • The final build will be located in the build/ directory. These files can be deployed to a server.

In its current state at version 1.2.9, let's say app.html can be reached at the URL

http://rosetest.library.jhu.edu/blviewer/app.html

In order to run the viewer in a browser, app.html needs to be configured. This is done through parameters in the query string of the URL used to call it. The following example is formatted for readability.

http://localhost:8080/universal/app.html
    ?isHomeDomain=true
    &isOnlyInstance=true
    &manifestUri=http%3A%2F%2Frosetest.library.jhu.edu%2Fiiif-pres%2Faorcollection.FolgersHa2%2Fmanifest
    &isLightbox=false
    &locale=en-GB
    #?si=0&ci=8&z=-0.5684%2C-0.0009%2C2.1369%2C1.3307&r=0
    
http://localhost:8080/universal/app.html?isHomeDomain=true&isOnlyInstance=true&manifestUri=http%3A%2F%2Frosetest.library.jhu.edu%2Fiiif-pres%2Faorcollection.FolgersHa2%2Fmanifest&locale=en-GB#?si=0&ci=8&z=-0.5684%2C-0.0009%2C2.1369%2C1.3307&r=0

This URL will configure the viewer with some properties and points it to our FolgersHa2 book in the AoR collection.

####Embed Once this build is deployed to the server, you might not want to have to enter the whole query string with the base URL. You might have a default page that redirects to your desired URL. Or you could embed the viewer with the proper configuration in another html page. You can include a new file, index.html that has the embedded viewer. You just need to make sure that the first script tag is pointing to the proper JS file.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
</head>
<body>
    <div class="uv" data-locale="en-GB:English (GB),cy-GB:Cymraeg" data-config="" data-uri="http://rosetest.library.jhu.edu/iiif-pres/aorcollection.FolgersHa2/manifest" data-sequenceindex="0" data-canvasindex="8" data-zoom="-0.5671,0,2.1341,1.329" data-rotation="0" style="width:1800px; height:1000px; background-color: #000"></div>
    <script type="text/javascript" id="embedUV" src="lib/embed.js"></script>
    <script type="text/javascript">/* wordpress fix */</script>
</body>
</html>
Add a custom footer
Add a custom sidebar
Clone this wiki locally