Setting up the notepad plug-in
To start using the notepad plug-in in your FSI-Viewer, you must first edit your configuration file for your FSI Pages instance (*.xml). Each image collection used with the notepad plug-in must have a custom, unique ID set in the configuration file. Using the same or no unique ID with several image collections (catalogs) will present unrelated bookmarks in the notepad.
You might want to look at the sample configuration file “notepad.xml” below:
<fsi_parameter>
<PLUGINS>
<!-- Other items removed for demonstration purposes -->
<Plugin src="notepad">
<UniqueID value="sdfs35lp" />
<EnableAddFullBookmark value="true" />
<EnableAddCustomBookmark value="true" />
</Plugin>
</PLUGINS>
</fsi_parameter>
Note, how the parameter ‘UniqueID’ is set in the configuration file. As mentioned above, each configuration file should have a different UniqueID set.
Please use characters and letters for the UniqueID value only and do not use the following characters : [Space] ~ % & ; : ” ‘ , < > ? #.
Once you have added these lines to your configuration file, FSI Viewer will present the notepad button in the user interface.
(You may need to restart your bowser or empty the browser cache to see the new button.)
This adds single user notepad functionality to your on-line catalog. The bookmarks in the notepad will be stored client side, similar to a cookie, so that the bookmarks are available the next time the user opens this instance of FSI Pages.
Clicking the button brings up the bookmark window. The user can now use the buttons in the lower left corner of the bookmark window to bookmark entire pages, links or even certain areas of a single page.
Advanced Feature: Sending Bookmarks by email
You might have noticed the yellow e-mail icon when the bookmark window is opened in the example above. Using the “EnableSendBookmarks” Parameter, the following optional steps can be done, to enable users sending their custom bookmarks to another user by email. From a technical point of view, the user sends an email containing a reference to the bookmark data by e-mail rather than sending the actual data. Enabling this feature requires a little server side scripting, as FSI Viewer cannot store files or send emails on his own. You can find script samples in PHP below that could easily be created in other server side scripting languages as well. An archive containing all required scripts and configurations is available for download at the very bottom of this page.
The figure below illustrates how sending bookmarks by e-mail works:
This requires a few additional things that have to be set up:
- Enable the option to send the bookmarks by mail (EnableSendBookmarks)
- Have a server side script to retrieve and store the bookmark data on the server (SendXMLStoreURL)
- Have a server side script to actually send the email (SendXMLUrlSuccess)
- Have some error fallback HTML document (SendXMLUrlFailed)
The FSI configuration file with these features enabled should look like this:
<fsi_parameter>
<PLUGINS>
<!-- Other items removed for demonstration purposes -->
<Plugin src="notepad">
<UniqueID value="sdfs35lp" />
<EnableAddFullBookmark value="true" />
<EnableAddCustomBookmark value="true" />
<EnableSendBookmarks value="true" />
<!-- Edit items below to match your settings -->
<SendXMLStoreURL value="http://www.domain.com/path_to_script/getdata.html" />
<SendXMLUrlSuccess value="javascript:OpenSuccess('%%serverresult%%');" />
<SendXMLUrlFailed value="javascript:OpenFailed('%%serverresult%%');" />
<LoadXMLPrefix value="http://www.domain.com/path_to_storage/" />
<!-- Edit items above to match your settings -->
<SendXMLUrlSuccessTarget value="_self" />
<SendXMLUrlFailedTarget value="_self" />
</Plugin>
</PLUGINS>
</fsi_parameter>
Please note, how the ‘%%serverresult%%‘ variable is passed on to the javascript. This is the space holder for either the filename of the stored XML-file or the error message returned by the server side script. The JavaScript used in the .xml is listed below.
<script language="JavaScript">
<!--
function OpenSuccess(serverresult){
<!-- Edit items below to match your settings -->
window.open('http://www.domain.com/path_to_script/success.html?xmlfile='+serverresult,
"Sendbookmarkstofriend", "width=300,height=400");
}
function OpenFailed(serverresult){
<!-- Edit items below to match your settings -->
window.open('http://www.domain.com/path_to_script/failed.html?error='+serverresult,
"Error", "width=300,height=200");
}
-->
</script>
Technically, FSI Viewer posts the bookmark data to the URL defined using the SendXMLStoreURL parameter.
That URL must end up at a little server side script which retrieves that data, writes it to an XML file and returns the filename of that file (<result success=”true”>$filename</result>), or an error message (<result success=”false”>Could not save file</result>) in XML format.
The PHP example script below illustrates how a script like that looks like:
<?php
//Edit line below to match your settings
$storage = '/SERVERPATH/notepaddata/';
$hashadd = 'h5fd3j'; //Additional random chars for a unique filename
if (!empty($_POST['data']) && preg_match (';FSI_NotepadData;', $_POST['data'])){
$content = $_POST['data'];
$sha1sum = sha1($content.$hashadd);
$filename = $sha1sum.'.xml';
$fp = @fopen ($storage.$filename, 'wb'); //Supress error message
if ($fp){
fwrite($fp, $content);
fclose($fp);
// Return success and filename
echo "<result success=\"true\">".$filename."</result>";
}
else
{
// Return failure and errormessage
echo "<result success=\"false\">Could not save file</result>";
}
}
?>
When the user clicks the “send bookmarks” button, FSI Viewer posts the bokmark data to the getdata.hml document above and checks the result the script returns.
Subsequently FSI viewer opens either
- the page defined by the SendXMLUrlFailed parameter, if anything went wrong and FSI Viewer got<result success=”false”>(errormessage)</result> as a result,
or
- the page defined by SendXMLUrlSuccess, if <result success=”true”>filename</result> was returned.
FSI Viewer hands the retrieved info over to the result HTML page in ‘%%serverresult%%’, which we added to the JavaScript in the .xml-file and which is being passed on to the script via HTTP GET (success.html?xmlfile=%%serverresult%%).
Unless an error occurs when saving the XML data, eg. a wrong path or something similar, FSI Viewer will redirect to the SendXMLUrlSuccess address, which displays a form to actually send the email containing the hyperlink to the recipient.
The PHP example script below contains the form and script to send the email. Of course this document can be adjusted to your needs regarding content and design:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Send bookmarks by e-mail</title>
</head>
<body>
<?php
if (!empty($_GET['xmlfile']) && empty($_POST['action'])) {?>
<form action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Your Name:</td>
<td><input type="text" name="sendername" size="24"></td>
</tr>
<tr>
<td>Your Email:</td>
<td><input type="text" name="sendermail" size="24"></td>
</tr>
<tr>
<td>Recipients Name:</td>
<td><input type="text" name="recipientsname" size="24"></td>
</tr>
<tr>
<td>Recipients Email:</td>
<td><input type="text" name="recipientsmail" size="24"></td>
</tr>
<tr>
<td>Your message:</td>
<td><textarea cols="20" rows="5" name="message"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="Send"></td>
<td><input type="reset" value="Reset"></td>
</tr>
</table>
<input type="hidden" name="action" value="send">
<input type="hidden" name="filename" value="<?php echo $_GET['xmlfile']; ?>">
</form>
<?php
} elseif( !empty($_POST['action']) && $_POST['action'] == 'send' ) {
// Edit line below to match your settings
$fullurl = "http://www.domain.com/server/..."; //Link to your online catalog
$get = "&Notepad_LoadXML=".$_POST['filename']."&Notepad_Visible=1";
$messagetext = "Dear ".$_POST['recipientsname'].",\r\n\r\n" ;
$messagetext .= $_POST['sendername']." has created bookmarks that might be interesting to you: \r\n\r\n";
$messagetext .= $fullurl.$get;
$messagetext .= "\r\n\r\n";
if (!empty($_POST['message'])){
$messagetext .= $_POST['sendername']." added the following message for you:\r\n";
$messagetext .= $_POST['message'];
}
$subject = "Mail from ".$_POST['sendername'];
if (mail($_POST['recipientsmail'],$subject,$messagetext,
"From: ".$_POST['sendername']." <".$_POST['sendermail'].">Content-Type: text/html"))
{
echo "The mail has been sent successfully.";
echo "<a href='javascript:window.close()'>Close Window</a>";
}
}
?>
</body>
</html>
In the case something went wrong while retrieving and storing the data on the serverside, the SendXMLUrlFailed page is loaded instead to inform the user about the error. Please see a corresponding PHP script to output the error below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Error</title>
</head>
<body>
Something went wrong with your request: <br>
<?php echo $_REQUEST['error']; ?>
</body>
</html>
Once the user sent his bookmark reference to someone else, that user gets an email which contains a link to the catalog along with a reference to the XML file containing the actual bookmark data.
Example:
http://www.fsi-viewer.com/bookmarks.html?dataref=foo.xml
The sample server side script below reads the “dataref” reference to the stored XML file from the link’s query and adds the parameter ‘Notepad_LoadXML=filename’ to the FSI Viewer query dynamically.
<html>
<head>
<title>FSI Pages with stored bookmarks</title>
<style type="text/css">
body,td{font-family:sans-serif;font-size:10pt;}
</style>
<script language="JavaScript" src="http://server.neptunelabs.com/fsi/js/fsiwriter.js" type="text/javascript"></script>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td align=center valign=middle>
<h3>FSI Pages displaying stored notpad data</h3>
<?php
//Edit line below to match your settings
$URLfsi = 'http://www.fsi-viewer.com/viewer/fsi.swf?pages_server=http://server.neptunelabs.com/server&pages_dir=images/Catalogs/WeinDE/&cfg=tutorials/tut_notepad.fsi';
// add the notepad_loadxml parameter using the file name
// passed via HTTP query from the email's hyperlink
if (!empty($_GET['dataref'])){
$params = '&Notepad_loadxml='.$_GET['dataref'].'&Notepad_visible=1';
$URLfsi .= $params;
echo 'Parameters to show the data:';
echo '<hr>';
echo '[...]fsi.swf?[...]'.$params;
echo '<hr>';
}
// Output FSI Viewer HTML code
$swf['uri']= $URLfsi;
$swf['width']='800';
$swf['height']='600';
echo print_swf_object($swf);
?>
</td></tr></table>
</body>
</html>
The “LoadXMLPrefix” parameter added in the file above is needed, to determine the full path of the XML-filename on the web server that has previously been stored (see “getdata.html” script above). The path has to be accessible by the browser, so that the recipient’s browser can load the bookmarks from this XML-file. With ‘Notepad_Visible=1’ set, the Notepad is shown right after the FSI Viewer has loaded.
Files used in this tutorial
If you want to enable the “Send bookmarks by email” feature on your server, you might want to download the following archive containing all required configurations and PHP scripts. If you are running a server supporting PHP, you can just copy the files to your web server and edit all URLs in the files beginning with “sample”.