Using Flash Showcase config files for FSI Viewer JS

Existing 360° spins in FSI Showcase Flash, as described in the related tutorial, can be easily adopted to create a similar FSI Viewer JS presentation with just a little scripting. In this tutorial, we will use a Javascript function to create dynamic FSI Viewer JS configurations to resemble the Flash version.

View Sample

This tutorial uses a XML configuration file which is listed here for the sake of completeness:

We will focus on and use the images3D definitions in this sample, as the global options are taken care of by FSI Viewer JS.

Let’s start by defining some variables and a simple AJAX function to retrieve the XML from FSI Server:

This is pretty straight forward and should not require any further explanation. The following function parse FSIConfigFile uses the responseXML
and creates an Array of Javascript Objects we pass to FSI Viewer JS:

This function loops through any given images3D tags in the xml file.
In lines 18 – 21 we retrieve any possible URL prefix and suffix from the XML object, which we use in lines 24-30 to create an array of strings, containing the full path on the image server, which we define as a FSI Viewer JS parameter in line 32.

Next we select the settings as defined in the <Options> node in line 35 & 36, which we loop through to create the settings in JavaScript object type
in the rest of the function. Finally we return the FSI Viewer JS object array created.

Now with two more small functions we are almost done:

The function onFSIShowcaseInit is executed when FSI Viewer JS starts up. It saves the instance object, gathers the config file attribute of the <fsi-viewer> tag and passes the resulting XML file to parseFSIConfigFile as described above.

The switchConfig is called onClick of e.g. any thumbnails next to the viewer. You can call it by simply adding some onClick event to the thumbnails:

It retrieves the desired configuration and changes the Configuration accordingly. You can also use this function to set more global settings, “debug” in this sample.

Finally we create a FSI Viewer JS tag as follows:

Please note the onInit Parameter. This defines the JavaScript function that is executed on initialisation.

View Sample
Posted in: