In an earlier tutorial I showed how it was possoible to create a substructure searchable chemical database using FileMaker and OpenBabel. In the subsequent tutorial I showed one way to render the chemical structures using ChemDraw. Judging by the number of downloads of the file a number of people have been looking at it. As you will have noticed embeding the structure into a container field for each record results in a much longer file size. In this case a 650 record database increases from approx 300K to 55MB, so for large databases this increase in size could be a major headache. One option is to have a global container field that you can insert the structure into as needed, and it is very easy to modify the existing scripts to do this.
However in this tutorial I thought it might be interesting to exploit one of the new features in FileMaker, the ability to add a "webview" to a record to display an html page into which is embeded a java applet or plugin that can be used to render the chemical structure. (This has only been tested with FileMaker 9). So whilst this is in the Applescripts tutorial section this particular tutorial actually only uses the FileMaker scripting language.
The database used in the previous tutorials can be down loaded here, it includes the stucture field but I would leave it in place for the time being.
First we need a couple of fields that we can use to generate the HTML for the web page, we need to add the three global fields highlighted below.
Into the chemdraw_html_header field paste the following text:-
<html>
<h e a d >
< t i t l e > 1 </ t i t l e > </ h e a d > < b o d y >
<e m b e d s r c = " f i l e : / / / /Users/swain/Desktop/Chem_Database/HTML/temp.cdx " a l i g n = " b a s e l i n e " b o r d e r = " 0 " w i d t h = " 3 0 0 " h e i g h t = " 2 0 0 " t y p e = " c h e m i c a l / x - c d x " i d = 2 d a t a u r l = " d a t a : c h e m i c a l / s m i l e s ,"
Into the chemdraw_html_footer field paste the following text:-
" v i e w o n l y = " true " >
<n o e m b e d > S o r r y , y o u r b r o w s e r d o e s n o t s u p p o r t p l u g i n s . < / n o e m b e d >
</ b o d y >
< / h t m l >
We now need to insert the Web Viewer, set the view to "Layout Mode" then select the Web Viewer from the left hand tool palette and draw the web viewer as shown, then select "Object Info" from the View menu and name the web viewer "web_structure".
Next in the "Chem_Database" folder you downloaded create a folder called "HTML" this is where the html pages that you will be loading into the web viewer will reside. For this example we are going to use ChemDraw Plugin to render the structure. To do this we need to have a blank chemdraw file in the HTML folder, so open ChemDraw and save the blank document in to the HTML folder calleing the file "temp.cdx".
If we now return to FileMaker we are ready to build the scripts that create the html page and then load it into the web viewer. The first script is "create_chemdraw_html", as shown below, create the required html by concatonating "chemdraw_html_header" & SMILES & "chemdraw_html_footer". This inserts the SMILES string of the current record into the html code. The second step "Export Field Contents" creates a file called "html_page.htm" and inserts the text from the contents of the field "the_HTML".
All that remains now is to load this into the web viewer, the first step just performs the script to create the web page. I did it this way for ease of explanation it could have course all been in one script. The next step loads the web viewer, insert the name of the web viewer "web_structure" and select as the action "Go to URL", in the dialog box select "Custom Web Address" and in the "Web Address" box insert the path to the html page which should be something like.
"file://localhost/Users/YOUR USER NAME/Desktop/Chem_Database/HTML/html_page.htm"
Now save the script and you are ready to go
If you run the "create_chemdraw_html" script it should fill in the field "the_HTML" and create a file in the HTML folder called "html_page.htm", if this works run the "load_web_page" script, the first time it may take a few seconds to load, subsequent occasions should be much faster. As you can see in the image below I've actually added a button at the top called "structure" and linked this to the "load_web_page" script. You can use the same strategy to render structures using a java applet and I'll show this in more detail in the next tutorial.
