With its possibility to be altered via HTTP queries, FSI Viewer can be dynamically implemented into existing websites or Content Management Systems (CMS).
In this tutorial we will demonstrate how FSI Viewer can be controlled using the popular scripting language PHP and a MySQL database. For this tutorial you should bring:
- some PHP and SQL knowledge
- a webserver running an imaging server, MySQL and PHP
In the following sample, FSI Viewer is updated by HTTP Queries via a little PHP Script, querying a MySQL Table.
You can download and import the following SQL-Dump to your own MySQL Database, eg. via phpMyAdmin:
# phpMyAdmin SQL Dump
# http://www.phpmyadmin.net
#
# Table structure for table `FPX_Images`
#
CREATE TABLE `FPX_Images` (
`PictureID` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
`FPXSrc` varchar(128) NOT NULL DEFAULT '',
`FPXWidth` smallint(5) UNSIGNED NOT NULL DEFAULT '0',
`FPXHeight` smallint(5) UNSIGNED NOT NULL DEFAULT '0',
`TilesX` tinyint(3) UNSIGNED NOT NULL DEFAULT '0',
`TilesY` tinyint(3) UNSIGNED NOT NULL DEFAULT '0',
`Mode3D` enum('Yes','No') NOT NULL DEFAULT 'No',
PRIMARY KEY (`PictureID`)
) TYPE=MyISAM;
#
# Dumping data for table `FPX_Images`
#
INSERT INTO `FPX_Images` VALUES (1, 'images/picture1.fpx', 2800, 2300, 1, 1, 'No');
INSERT INTO `FPX_Images` VALUES (2, 'images/picture2.fpx', 4000, 3000, 4, 3, 'Yes');
As you can see, the database table holds the image path and name, the dimensions, tile and 3D information for 2 sample pictures. For demonstration purposes we stick to these parameters, otherwise the demonstration scripts would become too complex. Now we also need a little script to connect to the database:
<?php
tbl['fpx_images'] = $dbdatabase.'.fpx_images';
if ($state_persistent){
$this->dbconnect=@mysql_pconnect($dbhost.':'.$dbport, $dbuser, $dbpasswd);
}
else{
$this->dbconnect=@mysql_connect($dbhost.':'.$dbport, $dbuser, $dbpasswd);
}
$result=@mysql_select_db($dbdatabase);
if ($result==false) unset($this->dbconnect);
if (!isset($this->dbconnect) || !is_resource($this->dbconnect)){
$this->database_failed=true;
$this->database_failed_errmsg=mysql_error();
$this->database_failed_errnum=mysql_errno();
die ($this->database_failed_errmsg.'
Please edit database.php');
}
}
// disconnect database
function disconnect(){
if ($this->dbconnect!=false) @mysql_close ($this->dbconnect);
}
}
?>
The following ‘index.php’ displays both sample pictures, both being links to the same page, handing over their ID so the script can find and read the image properties when being clicked on:
html,body{
background-color:#FFFFFF;
margin:0px;
padding:0px;
font-family:Arial,sans-serif;
font-size:1.5ex;
top:0px;
left:0px;
bottom:0px;
right:0px;
width:100%;
height:100%;
color:#000000;
overflow:auto;
}
table.full{
width:100%;
height:100%;
margin:0px;
padding:0px;
border-style:none;
}
object{
margin-top:0px;
margin-left:0px;
margin-right:0px;
/* Mozilla Trick */
margin-bottom:-3px;
}
p.headline{
font-size:18pt;
}
td.fsiborder{
border:1px solid #9EABBA;
text-align:center;
}
div.fsiquery{
font-family:monospace;
border:1px solid #000000;
background-color:#ffdd00;
width:auto;
text-align:left;
padding:5px;
}
div.fsiuri{
font-family:monospace;
font-size:11px;
border:1px solid #000000;
background-color:#00dddd;
text-align:left;
width:100%;
height:45;
padding:5px;
overflow:auto;
}
a{
color:#000000;
}
a:hover{
color:#ff0000;
}
<?php
/// config ///////////////
$fsi_url = 'http://mydomain.com/path/to/fsi.swf';
$width = 320;
$height = 300;
$bgcolor = '#FFFFFF';
$debug = true;
////////////////////////// e
error_reporting(2047);
// include required php scripts
require('database.php');
require('fetch_fpx_image.php');
// init database
// please edit database.php for username and password settings
$db = new database();
?>
Automated Implementation of Images
<table class="full" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle">Automated Implementation of Images
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="fsiborder">
<?php
// Use Picture ID from request if given, otherwise use default 1
if (!empty($_REQUEST['picture_id'])) {
$picture_id=$_REQUEST['picture_id'];
}
else {
$picture_id = 1;
}
// Get FSI Query
if ($fsi_query = fetch_fpx_image($picture_id, $debug)){ // See code below
?>
</td>
</tr>
</tbody>
</table>
<?php
$fsi_url .= '?'.$fsi_query; // attach retrieved query to fsi_url defined above to retrieve a full valid link
$template="<object width=""".$width.""" height=""".$height.""" classid=""clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"" codebase=""http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,42,0""><param name=""movie"" value=""".$fsi_url.""" /> <param name=""bgcolor"" value=""".$bgcolor.""" /> <param name=""menu"" value=""false"" /> <embed type=""application/x-shockwave-flash"" pluginspage=""http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"" src=""".$fsi_url.""" width=""".$width.""" height=""".$height.""" bgcolor=""".$bgcolor.""" menu=""false"" /></object>";
echo $template;
echo '
<hr size="1" />
';
echo 'Picture '.$picture_id.'
';
}
// Exeption
else {
echo 'Could not retrieve image '.$picture_id;
}
?>
</td>
<td style="padding-left: 20px;">
<table border="0">
<tbody>
<tr>
<td><a href="index.php?picture_id=1">Picture 1</a></td>
</tr>
<tr>
<td><a href="index.php?picture_id=2">Picture 2</a></td>
</tr>
<!--etc--></tbody>
</table>
</td>
</tr>
</tbody>
</table>
<?php
// Print FSI Query
if ($fsi_query){
echo '
<b>FSI Query:</b>';
//Display Query parameters, one item per line
echo '
<div class="fsiquery">'.nl2br(htmlentities(str_replace('&', "n", $fsi_query))).'</div>
';
}
?>
<?php
// Print FSI URL
if ($fsi_query){
echo '
<b>FSI URL:</b>';
//Display full Query
echo '
<div class="fsiuri">'.htmlentities($fsi_url).'</div>
';
}
?>
As you can see above, the script reads the Picture ID, that is passed to the script via HTTP GET, when clicking a picture (<a href=”index.php?picture_id=1“>Picture 1</a> ). The script makes use of the fetch_fpx_image() function (posted below) to get all the info from the database, and changes the <OBJECT>…</OBJECT> code to be generated and also displays the results in human readable form. With a little PHP-knowledge, the script can be enhanced to suit any needs, like react on different image sizes and 2D/3D images.
Now lets take a look how the information is being read from the MySQL database:
<?php
// Retrieve FPX properties from table "FPX_Images"
function fetch_fpx_image($picture_id, $debug=false){
global $db;
$fsi_query=false;
$query = 'select Src,Width,Height,TilesX,TilesY,Mode3D,ExtraParameter from '.$db--->tbl['fpx_images'].' where PictureID="'.AddSlashes($picture_id).'"';
$result = mysql_query($query);
if ($result) {
// Fetch SQL data
$fpx_parameter=mysql_fetch_assoc($result);
if ($fpx_parameter){
if ($debug) $query_collection[]='debug=true';
// RFC1738 parameter encoding
foreach ($fpx_parameter as $fpx_key => $fpx_val) {
switch ($fpx_key){
// Parameter in FPX area
case 'Src':
case 'Width':
case 'Height':
case 'TilesX':
case 'TilesY':
$query_collection[$fpx_key]= 'FPX'.$fpx_key.'='.rawurlencode($fpx_val);
break;
case 'Mode3D':
if ($fpx_val == 'No'){
unset ($query_collection['TilesX'], $query_collection['TilesY']);
}
break;
case 'ExtraParameter':
if (!empty($fpx_val)){
$query_collection[$fpx_key]=$fpx_val;
}
break;
// Normal parameters
default:
$query_collection[$fpx_key]= $fpx_key.'='.rawurlencode($fpx_val);
break;
}
}
// Make one large query string
$fsi_query=implode('&', $query_collection);
}
}
else {
die ('<tt>'.mysql_error().'
'.$query.'</tt>');
}
return $fsi_query;
}
?>
The function generates a named array in the form of $query_collection[‘Mode3D’] = ‘Yes’ that is URL encoded,
as all parameters passed to FSI Viewer in such a way must be URL Encoded.
That array is then turned into one large string, dividing each parameter retrieved by the &-symbol, returning a full valid Query that can be used to configure FSI Viewer.