Resource: Adding bells & whistles to GreenMamba

My latest blog post ended at the stage where we had combined the Instances database and the Motifs tool into a single metatool. In this post I will show how little it takes to add the bells and whistles that turn it into the complete, professional web resource that I showed as a teaser in the first blog post of this series.

You may not want green to be the design color used throughout your web interface. This is easily changed by adding a line like color : #083D65 to your inifile. You can use named colors instead of hex values if you prefer. Whichever color you pick will be used throughout the web interface to ensure a consistent design.

In the simple default design the frame changes size when changing between the Motifs and Instances input forms because the forms are not equally wide. This can easily be changed by setting a fixed width for all lines by adding line such as width : 650px. You do not have to necessarily specify the width in pixels, any units permitted in cascading style sheets can be used.

Most bioinformatics web resources require one or more pages to explain what the resource is all about. Such pages can easily be provided within the GreenMamb framework a by adding lines with the same syntax as page_home. If you add a page_about line, you will get an ABOUT menu item at the top right, which when clicked will show provided HTML text wrapped with within the GreenMamba layout to provide a consistent look. There is nothing magic to the word “about”; for example, if you write page_download you will get a page named DOWNLOAD.

You may want to also add a footer that is shown at the bottom of every page that, for example, mentions who made the resource, whom to contact in case of scientific questions or technical problems, and possibly points to one or more papers that describe the tools and which the user is requested to cite. To insert a footer you simple add a line to the inifile with the keyword footer followed by the text you want shown; this text can contain HTML code.

If you set up a Mamba server to host a single resource, you will want the Mamba server to automatically direct users to the main input form in case they access the server without requesting a specific page. For example, we would want to redirect requests for localhost:8080 to localhost:8008/HTML/ELM. This can be done the [REWRITE] section in the inifile, which allows you to specify simple URL rewrite rules similar to what can be done in Apache.

Below is the inifile required to set up the complete ELM example resource as it was shown in the first blog post of this series:

host : localhost
port : 8080
plugins : ./greenmamba


database : greenmamba/examples/instances.tsv

command : greenmamba/examples/ $motif @fasta
page_home : greenmamba/examples/motifs_home.html

tools : Motifs; Instances;
color : #083D65
width : 650px
footer : Disclaimer: This is ELM mirror only serves as an example for the GreenMamba framework. For scientific purposes, please use the real ELM server instead.
page_about : greenmamba/examples/elm_about.html

Starting up the Mamba server with this inifile and accessing localhost:8080 yields this interface:

Clicking the ABOUT link will brings up the contents of the file elm_about.html wrapped with the GreenMamba design elements:

In case you want to include pictures or other content on your pages, you do not need a separate web server to host this. Mamba implements a simple web server that you can use for this purpose; all you have to do is to add a www_dir : <directory> in the [SERVER] section of the inifile and place the files you want to serve within the specified directory.

Finally, the output pages of the metatool are also formatted to follow the design specified in the inifile. The header shows the name if the metatool, color matches that of the other pages, the menu with links to the pages is shown, and the footer is included:

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s