-
Notifications
You must be signed in to change notification settings - Fork 2
Universal Viewer
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 simplygrunt
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>