Quantcast

Vuzit Starter Tutorial

Introduction

This tutorial describes the basics of using the Vuzit web-based document viewer. It is meant for developers or designers of web applications. Persons reading this tutorial should, in the very least, have a rudimentary knowledge of HTML and JavaScript. Please reference the HTML and JavaScript tutorials at W3Schools, should any help understanding the terminology be necessary.

Example Script

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Vuzit Simple Document Example</title>

    <!-- Required Javascript and CSS includes -->
    <link href="http://vuzit.com/stylesheets/Vuzit-2.2.css" rel="Stylesheet" type="text/css" />
    <script src="http://vuzit.com/javascripts/Vuzit-2.2.js" type="text/javascript"></script>

    <script type="text/javascript">
      // Called when the page is loaded.
      function initialize() {
        vuzit.Base.apiKeySet("PUT_YOUR_KEY_HERE");
        var viewer = new vuzit.Viewer(document.getElementById("vuzit_viewer"));
        viewer.setUrl("http://www.welcomingcenter.org/documents/PMP.pdf", { zoom: 1, page: 2 });
      }
    </script>

  </head>
  <body onload="initialize()">
    <div id="vuzit_viewer" style="width: 650px; height: 500px;"></div>
  </body>
</html>

To see how this works, download the source code here. The above code will be broken down into some more digestible pieces further into this tutorial.

Note: if the downloaded script runs on a local computer with Internet Explorer (IE), the user will be shown a small warning bar beneath the Address Bar that approximately states: "To help protect your security, Internet Explorer has restricted this file from showing active content that could access your computer". Right-click on this bar and select "Allow blocked content" to see the viewer. Once this is done, click "Yes" on the following dialog box.

Loading the Vuzit code

<link href="http://vuzit.com/stylesheets/Vuzit-2.2.css" rel="Stylesheet" type="text/css" />
<script src="http://vuzit.com/javascripts/Vuzit-2.2.js" type="text/javascript"></script>

The script tag loads the JavaScript library containing the widget: "http://vuzit.com/javascripts/Vuzit-2.0.js". Notice that the JavaScript file is named "Vuzit-2.0.js". The link tag loads the URL to CSS for the viewer. Without it, the viewer will not be properly loaded. Note that each file has a "2.0" in the name. This is the version number of the file. As the Vuzit team comes out with new versions this number will increase.

Viewer Container

<div id="vuzit_viewer" style="width: 650px; height: 500px;"></div>

The code above defines the viewer container where the viewer will ultimately load itself. The style attribute defines the width and height of the container. The user can change these settings to adjust the size of the viewer to whatever is preferred. This example references the "vuzit_viewer" element when the control is loaded in the next section.

Setting The Developer Key

vuzit.Base.apiKeySet("PUT_YOUR_KEY_HERE");

In order to use the Vuzit viewer, it is necessary to sign up for an API key.

Replace the "PUT_YOUR_KEY_HERE" with the key provided. The vuzit.Base.apiKeySet function needs to be called before using any Vuzit tools to verify that the user is allowed to use the API.

Viewer Object - vuzit.Viewer

var viewer = new vuzit.Viewer(document.getElementById("vuzit_viewer"));

The vuzit.Viewer object is the base object for the viewer. It allows the user to load the viewer control into the div tag described previously. The document.getElementById("vuzit_viewer") function returns the div tag that was created in the body tags. This viewer will not do anything by itself. It still requires the user to set a URL to function, which is described next. 

viewer.setUrl("http://www.welcomingcenter.org/documents/PMP.pdf", { zoom: 1, page: 2 });

The vuzit.Viewer setUrl function tells the viewer to load the document at the specified URL, in this case the "http://www.welcomingcenter.org/documents/PMP.pdf" file. You can add any publicly addressable document into this function.

Notice a pair of brackets "{ }", this symbolizes a hash table of options. The "zoom: 1" tells the viewer to load the second zoom level. Possible zoom levels are 0 (smallest), 1, and 2 (largest). The "page: 2" tells the viewer to load with page number 2 of the document.

Loading The Viewer

<body onload="initialize()">

This section tells the web page to call the initialize function once the page is done loading. Some web browsers run scripts before the HTML is done loading, which causes problems. By adding this script to the onload event, it prevents the viewer from being loaded before that happens.

Now you should be a veritable expert on Vuzit, right? Well maybe not yet, but you are on your way!

What Else Can I Do?

There are several things that still be done. For instance, there are methods to set the page of the document as well as the zoom. Please see the vuzit.Viewer object in the Vuzit reference document for more information.