VOL. 17 NO. 5 (2005) TONY DAVIES COLUMN Embedding spectra and structures in your web pages Tony N. Davies,a Robert J. Lancashireb and Peter Lampenc aExternal Professor, University of Glamorgan, UK c/o Waters Informatics, Europaallee 27–29 50226 Frechen, Germany bUniversity of the West Indies, Mona Campus, Jamaica cISAS, Institute for Analytical Science, Bunsen-Kirchhoff-Str.11, 44139 Dortmund, Germany Since we dealt with the embedding of they can go on and develop their own If this option is taken it is possible spectra and chemical structures in web applications. that not all your installed browsers are pages back in 1996 and 1997 there have located by the installer. In this case you been a lot of developments—not least Chemical MIME should not bother taking the search all in the plug-ins which we described.1,2 Ever wondered how web browsers know local drives for web browser(s) option Nowadays, it is a lot easier to imple- how to display different file formats as this took a long time on my machine ment a spectra-enabled web page than served up to them from web pages? This and only delivered the same results in the past. The interesting links between is achieved for a wide range of formats with Internet Explorer as had the registry infrared spectra and structure displays of by relying on standardised file exten- option. I tried the “Specify the Location” their vibrational modes on a single web sions such as Macromedia Flash Player, option which also failed to accept my page can now be generated without the RealPlayer, Adobe Acrobat, Windows Netscape or Mozilla Firefox browsers need to edit the original IUPAC/JCAMP- Media Player, QuickTime Movie etc. existed in their directories. (MDL have DX files. In the Mozilla/Netscape world this not fully tested CHIME with all browsers With several recent questions coming enhanced capability is delivered through and now recommend IE.) through to us on how to bind spectra plug-ins, in the Microsoft world they have I managed a work-around by allow- into web pages we decided it was time decided on the terminology Add-Ons ing the installer to install the plug-in files for a refresher course! Clearly if you have although the functionality—“to extend to the Internet Explorer plug-ins direc- enough software licenses for everyone the capability of the web browser” as tory (C:\Program Files\Internet Explorer\ wishing to view spectra you can deploy Microsoft puts it, is essentially the same. PLUGINS) and then copying them into the spectroscopy software onto every the equivalent directories in my Netscape machine that will be accessing your Downloading and installing the installation (C:\Program Files\Netscape\ web-pages and link the data files on your MDL Chime plug-in Netscape Browser\plugins) and my website so that they are downloaded in This couldn’t really be simpler. The plug- Firefox installation (C:\Program Files\ these external programs. Such programs in is available from the MDL website Mozilla Firefox\plugins). Although not are often called Helper Applications under http://www.mdl.com/products/ all the files are required by the various where the content is viewed outside framework/chime browsers I simply copied over everything the browser. It is more convenient and During the installation process the first with CHIME in the name. far easier to support viewing the scien- option is for the installer to locate your Most of the information in the older arti- tific content inside the browser window browsers via the registry (Figure 1). cles is fundamentally correct and it would itself. be pointless to repeat the content here as In commercial software packages they are available from http://www.spec- such as electronic laboratory notebooks, troscopyeurope.com/td_col.html should analytical workflow management systems you not be aware of our archive! and scientific data archiving the capability to view and review spectroscopic data is Checking the installation what can really bring added value for the Your browser can tell you which plug-ins end-users. are currently known. How to see this is This column does not pretend to meet browser-specific. the demands of professional program- For Internet Explorer use the Tools: mers but it should give the raw amateur Manage Add-Ons drop-down menu some basic starting points from which Figure 1 (Figure 2). 28 SPECTROSCOPYEUROPE www.spectroscopyeurope.com VOL. 17 NO. 5 (2005) TONY DAVIES COLUMN Download: Plug-ins menus to arrive at a However, this type of embedding somewhat different display (Figure 4). requires you to edit a new HTML page The Mozilla Firefox entry for the current for every new file you wish to display. CHIME version is shown in ��������Figure 5 A somewhat more modern approach and you can see that your browser can makes use of scripts within the HTML now recognise and display a multitude page which allows you to reference out of chemical structure formats includ- to a .js file where you can store the vari- ing protein database format PDB and ous filenames and other web content. JCAMP-DX files. The variables in the stored .js file are Figure 2 loaded into the HTML through the addi- Embedding science tion of two entries in the HTML head content area. In our example they would be For those with Mozilla Firefox typing In order to have your scientific content <script language="JavaScript" about:plugins in the URL address area will displayed on your web pages you src="dispdata.js" type="text/javascript"> bring up a local web page with extensive must add certain commands into the </script> information about your installed plug-ins web pages’ HTML. How this should be which reads the “dispdata.js” file. (Figure 3). achieved is somewhat different from our If we take the same simple example as previous advice. above, then the scripts to be added to the plug-ins The simple <embed> command still HTML page making use of the variables functions. This means that for our test defined in the dispdata.js to access the reference mass spectrum file from the same content would look like Code 1. International Spectroscopic Data Bank of Both the original HTML-based web 1-ethoxy-2,6-dimethyl-4-nitrobenzene, page and the Javascript-based web with the file name 438-D1099.jdx, we page look the same within the browser would use a line in the HTML file such window although the different browsers as do slightly change the way the page is <embed src="438-D1099.jdx" width="500" displayed (Figure 6). height="300" jcamp_revplot="true" name="MSDisplay"> </embed> Figure 3 and for the reference chemical structure <embed src="438-D1100.mol" display3d="wireframe" bgcolor="white" width="300" height="300" In Netscape you get a somewhat name="MOLDisplay" startspin="true"> poorly formatted display with the same </embed> command about:plugins but you also A test HTML file called “simple spectra have the capability to manage which display - no scripts.htm” with these data file extensions are active. It is a bit more sets can be found on the IS-DB archive complicated using the Tools: Options: (http://www.is-db.org). Figure 6 Figure 4 Figure 5 www.spectroscopyeurope.com SPECTROSCOPYEUROPE 29 VOL. 17 NO. 5 (2005) TONY DAVIES COLUMN <SCRIPT language="javascrip"t type="text/javascript"> With scripts, the linking of chemis- document.writeln('<table width=99%><tr><td>'); document.writeln("<embed src="+MSfilName+" width='500' height='300' try display to spectroscopic features jcamp_revplot='true' bgcolor='white' name='MSdisplay' ></embed>"); becomes possible through the use of the ������������������������document.writeln('<br>') document.writeln('</td><td>'); .js file rather than editing the JCAMP-DX </SCRIPT> file. This is a significantly more elegant <SCRIPT language="JavaScript" type="text/javascript"> document.writeln("<embed src="+MolfilName+" display3d='wireframe' bgcolor='white' way to generate the excellent educa- width='300' height='300' name='MOLdisplay' startspin=true frank=false> tional web pages. </embed>"); document.writeln('</td> </table>'); An example of the more complicated </SCRIPT> .js file usage is as follows. Two .js files are Code 1 used, one to declare the variables and one in which, for this example, the infra- //edit the following lines var IRinfo = new Array(); red mode information is stored. function IRLinks(x,y,w,script,desc) { The first file declaring the arrays looks var n=IRinfo.length; IRinfo[n] = new Array(); like Code 2, and the second containing IRinfo[n].xpos=x; the data required by the active webpage IRinfo[n].ypos=y; IRinfo[n].width=w; itself like Code 3. Here you can see the IRinfo[n].script=script; array IRLinks stores all the information IRinfo[n].desc=desc; } required for the active display. The wave- number position and width of the various //you should not need to edit the html files. vibrational bands assigned as well as the Code 2 XYZ file containing the molecular motion to be displayed corresponding to the respec- //edit the following lines var IRfilName= "acetoph.jdx"; tive IR peak. In this particularly informative var MolfilName= "acetoph.mol"; version an additional variable in the array IRLinks(3101, 1, 20, "mode3199_359.xyz","symm stretch of aromatic CH group (~3100 cm- contains explanations of the vibrational 1)"); modes and through the use of the scripts IRLinks(3086, 1, 15, "mode3191_028.xyz","asymm stretch of aromatic CH group (~3085 cm- 1)"); automatically loads and displays when IRLinks(3062, 1, 15, "mode3184_096.xyz","asymm stretch of CH group (~3060 cm-1)"); one of the peaks is selected. By placing all IRLinks(3038, 1, 10, "mode3179_944.xyz","asymm stretch of CH group (~3040 cm-1)"); IRLinks(3029, 1, 10, "mode3168_859.xyz","asymm bend of CH3 group (~3030 cm-1)"); the sample specific information in the .js IRLinks(3005, 1, 20, "mode3154_485.xyz","symm stretch of methyl group (~3005 cm-1)"); files it is possible to use the HTML file as IRLinks(2969, 1, 30, "mode3064_505.xyz","asymm stretch of methyl group (~2970 cm-1)"); IRLinks(2921, 1, 30, "mode3062_601.xyz","symm stretch of CH group (~2920 cm-1)"); a template.
Details
-
File Typepdf
-
Upload Time-
-
Content LanguagesEnglish
-
Upload UserAnonymous/Not logged-in
-
File Pages3 Page
-
File Size-