Blog

Signals Blog

Building Mobile and Web Applications in Chemistry Part 2: iPad Stylesheet and Startup Parameters

Tablet devices have enormous potential in scientific software, with applications ranging from replacements for clunky laptop computers and paper notebooks to go-anywhere data viewers with compelling touch interfaces. But the rather sudden arrival of serious competitors in the form of Android and Windows tablets should give anyone considering the creation of a platform-specific scientific mobile application reason to pause. The choice offered by multiple competing platforms may be great for consumers, but could spell trouble for unwary developers.

HTML5 offers a path forward that will work both today and tomorrow.

The previous article in this series introduced ChemWriter, the chemical structure editor built specifically for Web and mobile applications. This article will show how to begin developing with ChemWriter on the iPad.

All Articles in This Series

  1. Getting Started with ChemWriter
  2. iPad Stylesheet and Startup Parameters

About chemwriter.css

If you've already downloaded the ChemWriter SDK, you may have noticed the file chemwriter.css. Unlike structure editors based on Java applets or other plugins, a ChemWriter instance is actually part of the page it's being displayed in. The chemwriter.css file is used by the browser to assign a number of visual attributes to ChemWriter, a trait that can be used to customize the editor for use on iPad.

Step 1: Unpack the SDK

Create a working directory containing the files chemwriter.js and chemwriter.css.

Step 2: Create the iPad CSS File

Add to your working directory the following CSS file and call it chemwriter-ipad.css:

.editor { width: 950px; height: 640px; }
.editor .button .icon { width: 35px; height: 35px; }
.editor .palette { width: 95px; }
 

This stylesheet enlarges the editor, increases button sizes (by increasing the size of icons), and expands the palette width accordingly.

Step 3: Create a Minimal Test Page

Create a file named index.html containing this markup:

<!DOCTYPE HTML> 
<html>
  <head>
    <link rel=stylesheet href="chemwriter.css" type="text/css" media=screen />
    <link rel=stylesheet href="chemwriter-ipad.css" type="text/css" media=screen />
    <script src="chemwriter.js"></script>
  </head>
  <body>
    <script>
      chemwriter.loadEditor('editor', {
        deviceBondLength: 60,
        hoverRadius: 0.35
      });
    </script>
  </body>
</html>
 

This file uses the stylesheet we defined in Step 2 to override some styles defined in the default chemwriter.css file. The script tag ensures that bond lengths and hover radius are more compatibile with the blunt instrument that the finger is compared to a mouse pointer.

For more details on this markup, see the first post in this series.

Step 4: Set Up a Web Server

The most convenient way to experiment with ChemWriter on iPad is to set up a server for the content created in your working directory. This need not be complicated. For example, on OS X, this can be done with the command:

$ python -m SimpleHTTPServer
 

Step 5: Load ChemWriter on iPad

Browsing to the page hosted by the development machine should give a full-screen ChemWriter instance.

Conclusions

This article has demonstrated one way to take advantage of the ChemWriter stylesheet in developing applications that run on both desktop and tablet devices. Future articles will expand on this theme.