Viewing Article

Full StarFull StarFull StarFull StarHalf Star | Mar 22 2010, 2:36 PM | Print
Embed and interact with the LinceoVR web Viewer plugin

For a very fast integration in an html page without using the more complex Javascript library see the Getting Started Guide.

For a ready-to-use example of integration into an HTML page with and without Javascript see LinceoVR web Viewer Examples

For a complete list of available methods see our API Documentation Page

 

Continue reading the document for understanding and use the eligoweb API library for embedding and interacting with the LinceoVR web Viewer Plugin.

Eligo Web features an object-oriented Javascript library to let you interact with the plugin. Eligo JS library needs jQuery 1.3.2 or later to be run.

The first step is creating a new HTML page and including jQuery and Eligo Web libraries.

<!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" xml:lang="en" lang="en" dir="ltr">
<head>
<!-- Include latest jQuery library available -->
<script type="text/javascript" charset="utf-8" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<!-- Include Eligo Web library -->
<script type="text/javascript" charset="utf-8" src="http://www.seac02.it/common/js/eligo_api/eligoweb.js"></script>
<!-- Now include application custom javascript code -->
<script type="text/javascript" charset="utf-8" src="app.js"></script>
</head>
<body>
<!-- Place a div inside the page, and give it an id -->
<div id="eligoweb"></div>
</body>
</html>

 

As you can see, we just added a DOM element. We called it "eligoweb" (it could be anything else), and it will contain the LinceoVR web Viewer frame. We now move to app.js, which will contain the page custom Javascript code. The following can be a typical LinceoVR web Viewer library usage:


// We'll start our custom code when the page DOM will be totally loaded
jQuery(document).ready(function () {
setTimeout(
        function() {
            App.start();
        },
        200
    );   
});

// This is our custom code wrapper
var App = {
start: function() {

// Create a new Eligo Web instance
this.eligo = new EligoWeb.ActiveX({
// This is the id that we used inside index.html!
dom: "#eligoweb",
// This will be the size of our Eligo Web viewport
width: 480,
height: 320
});

var self = this;

// We'd like to be notified when Eligo has finished loading..
this.eligo.onLoad.addListener(function() {
self.eligoInited();
});

// Or if something went totally wrong
this.eligo.onError.addListener(function(e) {
self.eligoError(e);
})

// Alright, let's start our Eligo instance and wait
this.eligo.start();
},

eligoError: function(error) {
if (error == EligoWeb.Errors.UnsupportedBrowser) {
alert("Eligo Web Error: your browser is currently not supported!")
} else if (error == EligoWeb.Errors.PluginNotLoaded) {
alert("Eligo Web Error: did you installed Eligo Web?")
}
},

eligoInited: function() {
alert("Eligo started!")

/**
Alright. From this moment we can use all the Eligo API commands.
**/

// Load a model (we can also use relative paths). This call is synchronous.
this.eligo.loadModel('http://localhost/tutorials/model.lvzc');

// Load a pre-saved camera position
this.eligo.setViewPoint(0);

// Put your code here!
[...]

}

};


What we have now here is a working LinceoVR web Viewer Plugin in a browser. What about interacting with it? It's very simple and can be accomplished in two steps. First we need a button or some text with an url and an ID. Add this somewhere in the body tag of your html:

<a id="saveScreenshot" href="#"> Click me to save a screenshot </a>


Then go to your app.js and add a function reacting to the mouse click. You can add this code in the "eligoInited" section.


var self = this;
$("#saveScreenshot").click( function()
{
self.eligo.saveScreenshot("screenshots/screenshot.jpg", 640, 480);
});


For a complete list of available methods see our API Documentation Page



Warning: implode() [function.implode]: Invalid arguments passed in /var/www/seac02_network/common/functions/urls.inc on line 37