Using Plugins

Plugins can be used to accommodate more than what TILE was originally programmed to perform.

Installing Plugins

All plugins are intended to follow a certain protocol in naming and file path schemes. First, each plugin should be located in it’s own, uniquely named folder within the root directory of TILE. For example, the plugin named FooBar (No spaces or special characters &!#@ in names) would have a folder titled ‘path/To/Root/plugins/FooBar/tileplugin.js’. Notice that the name of the plugin is EXACTLY the same as the file folder name.

Plugin-reserved sections of the screen

There are three main sections to place a TILE plugin on the screen: right, topleft, and bottomleft. Your plugin should have a recommendation for which placement it should be within.

Using the TILE API to add a plugin

To understand adding plugins, you first need to understand what Mode your plugin fits into. A TILE Mode is a collection of plugins that represent a state of the interface. These plugins should be complimentary not only in functionality and theme, but in where they are located on the screen. Refer to the above section or notes in the README file or source code to determine where to place your plugin.

Once installed, a plugin is added to TILE through API functions. For the following sections, let’s assume we are adding a plugin that uses Vector graphics to shape out the data annotated during a current session of TILE.

First, the Mode is inserted. We’ll call this Mode ‘Overview’, since the plugin relates to taking a step back and looking over all of the data. The name here is arbitrary, but it’s best practice to connect the name with the functionality of the plugins in the related Mode.

// Creating the interface
var engine=new TILE_ENGINE({}); // Not currently adding any extra options

// Inserting the new Mode ‘Overview’

<script type="text/javascript" src="path/To/Plugin/myPlugin.js"></script>

After this is done, the plugin has to be added to the TILE interface. This is done by adding the plugin to the respective Mode object. To do this, follow these steps:

1. Find the area of code in index.html (Contained within the <script> tag) below this comment:

// Add plugins

2. There should be several lines using the method “insertModePlugin” or “insertPlugin”. In this example, the plugin is being added to a Mode. Therefore, the “insertModePlugin” will be used as such:


3. Restart/Refresh the page and you’re done!

Removing Plugins

To remove a plugin, simply comment out or remove the “insertPlugin” or “insertModePlugin” call to the engine within the <script> area of the index.html.

// engine.insertModePlugin(“Overview”,”myPlugin”);

List of Available Plugins

There is a list of existing TILE Plugins.

Creating Plugins

See our Plugin Documentation: How to Create a Plugin;

Post a Comment

You must be logged in to post a comment.