Local Installation
Advantages
The hosted version of TILE is the “vanilla” version. In order to use different plugins you will need to have control over the server on which TILE is running. To accomplish this it is recommended that users run TILE on their own server. One way to do this is to run a server on your own machine. Alternatively, if you have institutional server space available you might choose to run TILE there. The basic instructions for getting TILE running on your own computer are below.
Instructions
The Web Server
The first thing you need is a web server. You can set one up on your own machine relatively easily. There are a number of different free web server solutions, depending on your machine’s operating system. Listed below are web server packages for Mac, Windows, and Linux.
Mac:
Download and install MAMP. Note: MAMP Pro has extra features, but is not free.
http://www.mamp.info/en/index.html
Windows:
Download and install a version of WAMP, such as WampServer 2.0.
http://download.cnet.com/WampServer/3000-18506_4-10797035.html
Linux:
Install LAMP. There is a tutorial here: http://www.lamphowto.com/
Once your web server is installed and running, you can set up TILE.
The Code
Download TILE’s code at https://github.com/umd-mith/TILE/archives/v1.0.
Unpack the code into an active directory of your WAMP/MAMP/LAMP installation. This is typically the folder “www” inside the installation folder.
For Macintosh users with MAMP, the folder is specified by the user by changing the “Document Root” option in MAMP->Preferences…->Apache.
You should be able to access the site by browsing to //localhost/ and the directory where you’ve placed TILE.
Customizing your index.html file
Once you have successfully set up your local server and copied & pasted the root directory of TILE into your Apache root directory, TILE should be ready to go. However, what if you want to change or add the plugins that are being used by your local installation? This can be done by changing the TILE start-up Javascript code found in the index.html file (Found in the TILE root directory).
1. Open /www/tile/index.html in your favorite Web/Text editor
2. Scroll down to the area underneath the <body> tag where you see a <script type=”text/javascript”> tag.
Inside this tag is the beating heart of TILE – this is the code that initiates the interface, loads plugin source files, and allows users to load, edit, and save their documents. Without this code, nothing would happen – your index.html would be a blank page.
Notice this area a little ways down into the <body> tag:
$(function(){
// Initialize the core functions and objects:
// (Metadata dialog, TILE_ENGINE, Save dialog, Toolbar)
engine=new TILE_ENGINE({});
// add plugins
// add Mode
engine.insertMode('Image Annotation');
engine.insertMode('Auto Line Recognizer');
engine.insertMode('Dashboard');
// Image tagger
engine.insertModePlugin('Image Annotation','ImageTagger');
// Auto recognizer
engine.insertModePlugin('Auto Line Recognizer','AutoLineRecognizer');
// transcript lines
engine.insertModePlugin('Image Annotation','Transcript');
// text selection
engine.insertModePlugin('Image Annotation','TextSelection');
// labels
engine.insertModePlugin('Image Annotation','Labels');
// dashboard
engine.insertModePlugin('Dashboard','Dashboard');
// CoreData plugin
engine.insertPlugin('CoreData');
// autoload
engine.insertPlugin('AutoLoad');
if(!(/^http:\/\/localhost/.test(document.URL))){
// welcome dialog
engine.insertPlugin('WelcomeDialog');
}
// activate
engine.activate('Image Annotation');
// Done adding Modes
});
The above Javascript initiates the TILE object, loads different ‘Modes’ into it (The names of which you can see at the top navigation bar), and then loads plugins into those Modes. Let’s break that down a bit finer. Every TILE instance starts with
// Starts up TILE
var engine=new TILE_ENGINE({});
Notice we are passing an empty object ‘{}’ into the TILE_ENGINE constructor. This is in place in case you want to add some options that we’ll discuss in more detail later. For now, let’s leave that space blank. What does this action do? It sets up all of the necessary components of TILE in the browser memory, then returns the TILE_ENGINE object, which gives you access to all of the TILE API methods.
Now that you have the engine up and running and ready to go, the next step is to load the Modes for your interface. These Modes represent states of the interface can be one to many. Examples include ‘Image Annotation’, ‘Auto Line Recognition’, and ‘Dashboard’. Each Mode has it’s own object that includes methods to activate and de-activate the Mode. To make things easier, we’ll insert only one Mode, ‘Image Annotation’:
// using the engine object we got back from the TILE_ENGINE constructor to add a Mode
// Argument passed is a string representing the name as it should appear on the top navigation bar
engine.insertMode('Image Annotation');
Once a Mode is inserted, TILE creates the Mode object and loads it into memory. Now we can add Plugins to that particular Mode. Since we have the Mode ‘Image Annotation’, adding the Image Tagger to our Mode makes sense:
// Adding Image annotation to the Image Annotation Mode
engine.insertModePlugin('Image Annotation','ImageTagger');
The first argument in that function refers to the name of the Mode into which we want to add our plugin. Our second argument – ‘ImageTagger’ – refers to the path to the file where our plugin Javascript (.js) file is located. This is where things get a little tricky. All plugins for TILE have a specific protocol. Their Javascript (.js) files must be named tileplugin.js and placed within a uniquely named folder in the plugins folder of your root installation of TILE. For example, the absolute path to our Image Tagger plugin (loaded above) is:
http:/// /plugins/ImageTagger/tileplugin.js
The insertModePlugin takes the second argument and inserts that into the address:
insertModePlugin receives 'foo' as second argument. insertModePlugin inserts it into the address to find the plugin script: http://localhost:8888/tile/plugins/foo/tileplugin.js insertModePlugin creates a script tag, using the above URL as the src and adds it to the header.
If there is no data present in that particular folder or the folder ‘foo’ doesn’t exist, then the program crashes.
Then, the only thing left to do is repeat the last few steps to insert any plugins left that you would like seen in the Mode “Image Annotation” and activate the TILE_ENGINE instance. Activation is done with the activate method:
// The argument passed here refers to the full name of the Mode you want active when TILE starts
engine.activate('Image Annotation');
Once this method is passed, TILE starts up with the Image Annotation Mode active and running. If you defined some pre-loaded data, this loads into the interface. Otherwise, TILE waits for you to use the Load feature to load your own XML or JSON file.
Advanced Options
There are some added features to the TILE engine that allow developers to switch their instance of TILE from being dependent on PHP to working with Javascript or any other server-side language. PHP is used to check the status of saved data and to re-route images for security and cross-domain reasons. The options can be fed into TILE using a Javascript annotated array object using key-value pairs. The options are:
state : {String} – use this option to change the URL path that TILE checks for any pre-loaded data.
remoteState : {String} – use this option to change the URL path that TILE uses to parse any JSON fed through a GET command
remoteImg : {String} – use this option to change the URL path that TILE uses to parse images
2 Comments
What are the minimum system requirements? Version of php needed? Thanks!
In terms of system requirements, the interface should work on almost any system platform as long as it’s using a fairly up-to-date OS and hardware. However, TILE works best on the latest versions of Firefox and Chrome. Right now, our local test version is running in PHP 5.2.6. Let me know if that answers your question.