Drawing chemical structures with a small portable touchscreen device is tricky. As is shown on the right, a phone-sized screen is very small relative to the size of a finger: the atoms and bonds of even a small molecule like caffeine are cramped into a space that makes it difficult to even select an object, let alone select a precise location. To make matters worse, the finger obscures a large part of the screen. What this means is that the traditional chemical structure drawing workflow, which is heavily reliant on a precise mouse-like pointing device and a relatively large screen, does not translate to mobile touchscreen devices.
This is a problem, because chemistry software is rather limited without the ability to draw structures. Furthermore, a structure editor should also be able to draw structures well, with all bond lengths and angles chosen to be as regular as possible and represent the molecule in an aesthetically ideal way. It should also be able to be used for a variety of kinds of molecules, from small and simple organic molecules to large and complicated inorganic structures. And last but not least, it should be fast: the time taken to draw a structure on an iPhone or iPad or Android touchscreen should be comparable to using a laptop or desktop computer.
To make this work at all on a phone-sized device, and to work well on a tablet, it is necessary to reimagine the interface for structure drawing. Rather than selecting a tool then using it to draw a new object using the pointer, the effective approach is to tell the software what to draw, and provide the bare minimum of information necessary to complete the action on your behalf.
In practice this can be done by designing a set of commands (or "primitives") that can enable everything you need to draw a perfect structure quickly without ever needing to be use precise positioning:
There are 3 different ways these commands are accessed during the drawing process:
The first two kinds - command buttonbanks and context buttonbanks - involve selecting an action button which is represented by a glyph. Selecting an action button causes some modification to be attempted, e.g. creating a new bond, undoing the last change, selecting particular atoms, etc. Command banks are like menu bars: they are hierarchies, and are always shown in the same place. Context banks are created by gathering together actions that are known to be relevant given the current state of the molecule and the selected objects.
Gestures are diverse, and are generally quick: combinations of tapping, touch-and-hold, double-tapping, dragging, pinching and panning are all mapped to relevant ways to modify the molecule, bring up menus, alter the selection, or move it around onscreen.
These different kinds of actions are highly redundant: almost all functionality can be obtained using just the command banks; the context banks provide the most commonly used actions; and the gestures are mostly shortcuts to make sketching quicker and more convenient.
The remainder of this article describes how these actions and gestures can be used to draw molecules. The examples are drawn from the Mobile Molecular DataSheet app for iOS devices, but the same technology is used for a variety of other apps which incorporate the same technology, both for iOS and Android (see product page).
Begin by launching the Mobile Molecular DataSheet app. The main menu contains a number of datasheets, each of which is shown by a coloured ribbon, with the first few structures shown underneath. The top datasheet is always the one called the Scratch Sheet, which acts as a repository of temporary molecule data. This is a good place to store molecules when experimenting with the structure editor.
Locate and tap the icon for adding a new structure, which is at the bottom left corner of the Scratch Sheet title, shown with a red border in the following screenshot:
If you are new to MMDS, you will be issued a prompt which inquires as to your level of familiarity with the drawing interface:
The best choice for anyone who is new to the interface is of course Novice. At this setting, the interface will regularly show prompts to demonstrate some feature of the sketcher, as applied to the current structure. These interactive tutorials will guide you through much of the material covered in this article. At the Expert level, the prompts downgrade to mere suggestions, and at the Master level, you will never be bothered, and helpful tips will only be displayed as your request.
Along the top edge of the sketcher display, under the system status information, are some interactive buttons:
At the far left is the reject button: press this to exit the editor without saving changes. At the far right is the accept button: press this to exit the editor, and apply the changes, if any. Just next to the reject button is a solid question mark: pressing this brings up the option to change the help level.
Now consider the empty molecule that is now presented:
As can be seen, a menu of icons is shown, which takes up the bottom half of the screen. This is called the command bank. It can be raised or lowered by touching the grip:
The grip can be activated by tapping on it, or by touching it and dragging it up or down.
The initial command bank is the main bank, which contains the top-level command buttons, and also provides buttons to open a number of sub-banks.
Since all of the buttons are represented by icons, it takes some time to get used to what they all mean. The best way to find out is to touch a button and keep it held. After a brief pause, an informative description will appear:
To avoid pressing a command button after obtaining help for it, move your finger away from the command menu before releasing it.
When starting a new drawing, there are two common ways to get started: by creating an atom and using it as the starting point, or by starting with a template. In this tutorial, the molecule that will be drawn is caffeine:
In the above case, the button being held down is the command for opening the template sub-bank. The intention is to begin the sketching of caffeine with a 6-membered ring as the starting point, around which all other consistituents will be drawn. There are several ways to access simple ring templates, but this example illustrates the use of the template command banks. Tapping the template action button brings up a collection of template groups:
A new sub-bank will slide in to replace the main bank. Select the command button on the top left, which corresponds to small ring templates:
Now locate the button for cyclohexane, drawn as a regular hexagon:
Having pressed the specific template action button, this places the sketcher into template placement mode. The template has not yet been made a part of the structure, because it is still necessary for the user to review all of the computed ways in which the template might be introduced. In this case, the template addition is rather simple, since there are no other atoms, but using the arrow buttons it can be seen that there are two distinct options, the other one being rotated 30°. Since the first option is desired, press the accept button to solidify it.
Once the cyclohexane ring is defined as the working structure, select the bond on the right hand by tapping on it:
The green highlight means that the object underneath it is the current object. Atoms or bonds are allowed to be the current object, and there can be either one or none at any given time.
Now that the bond is highlighted as shown above, tap the grip at the bottom of the screen to bring back the bank of templates, and activate the button for cyclopentadiene:
The state will return to template placement mode, except this time the selected template is fused to the current bond:
The initial state is shown on the left. Since there are multiple ways to fuse cyclopentadiene to the highlighted bond, the template fusion algorithm has to guess which one is desired. The way obtain the desired result is to step through the plausible fusion modes. Press the next command button until the mode on the right is obtained, i.e. one of the double bonds is overlaid on the highlighted bond, and the other double bond is on the lower right slope. Then, press the accept button to apply the result.
Now two levels of sub-banks must be dismissed. This is done by tapping or dragging the grip on the left side of the menu:
Changing Atom Type
Hide the main menu to get a clear look at the molecule thus far, which consists of two fused rings. The next step is to convert four of the atoms into nitrogen.
First, tap close to the atom closest to the top left corner, so that it becomes the current atom:
Open the command bank, and select the atoms sub-bank:
Tap the button for nitrogen:
The current atom is converted to N. Note also that the implicit hydrogen count is calculated and displayed, though we will be replacing three of these implicit hydrogens by methyl substituents later on.
Pick each of the three other atoms which need to be converted into nitrogen, and use the command button to change each of them:
Adding Exocyclic Bonds
Return to the main command bank, and open up the bond sub-bank:
Tap the atom at the apex of the 6-membered ring to make it current:
Now tap the button which denotes a double bond. A new bond will be created, to a new atom, using the current atom as the starting point. A direction and distance will be determined automatically by examining the preexisting geometry:
Repeat the process with the other methylene carbon:
Tap the screen in an area which is not close to an atom or a bond in order to unhighlight the current atom.
The next task is to convert the two terminal atoms into oxygen. There is more than one way to do this. The method that was described previously for creating the nitrogen atoms would work, but instead a new concept will be introduced: selected atoms.
Touch a part of the screen just above the top atom and start moving your finger gently, without delay. If you wait too long, a popup menu will appear, which is not what you want. If this happens, dismiss it by tapping another part of the screen, and try again. As long as the timing is right, a smudge will follow your finger:
Keep tracing this "worm trail" until it covers both of the terminal atoms, and shows them as being highlighted in a brighter shade of turquoise:
Release your finger from the screen. The two terminal atoms are now marked as selected. At any given point in time, every atom within the structure is either selected or not selected. This concept coexists alongside the idea of a current atom or bond. Most of the command actions represented by the many different icons in MMDS need to know what atoms or bonds to operate on. In most cases, if there are any selected atoms, then these are considered to be the subject for the operation, and if there are no selected atoms, then the current atom or bond is used as the subject instead.
The next step is to convert both of these atoms to oxygen, using a single command. This could be done using the atom sub-bank, but instead we will introduce a new concept: the context bank. To activate the context bank, touch an area of the screen and hold it until the context bank appears:
The context bank is made up of icons which are accessible from the command bank, but is organised differently, and only lists commands that are applicable. Any operation which would have no effect is not shown (e.g. selecting all atoms when all atoms are already selected, changing a bond order to single when the current bond is already single, etc.).
Like the command banks, the context bank also has sub-banks. Select the atom sub-bank icon:
A list of common elements is shown, as well as more sub-banks for those less common. Note carbon is not listed as one of the choices, since both of the selected atoms are currently carbon atoms.
Select oxygen to convert both the selected atoms:
Now that the terminal atoms have been converted into oxygen, it is no longer desirable for them to be selected. Tap some part of the screen not close to an atom or bond, or use the clear selection button from the main bank (or context bank) to unselect all of the atoms.
Zoom and pan
There are action buttons for zooming in and out, but with the iOS version of MMDS, it is usually more convenient to make use of two finger gestures to achieve this effect.
Zooming in or out is done with a pinch gesture, which is similar to many other iOS apps:
Panning is less obvious. Most iOS apps which allow a screen to be moved around, e.g. the Safari app, or scrolling tables, default to a pan operation when a single finger is swiped along the screen. MMDS uses the single-finger movement gesture for selecting atoms. To move the structure around on the screen, place two fingers on the screen, and move them both, keeping them approximately the same distance apart, in order to distinguish the gesture from the zoom.
The next section is easier to work with when the molecule is larger, so zoom in slightly, so that the 6-membered ring takes up a large portion of the centre of the screen.
Because a finger is large and atoms are small, tapping a particular object of interest is not always the easiest way to make that the current object. If there is a current atom or bond, i.e. anything is highlighted in green, it is possible to enter traversal mode by touching the screen close to the current object, then without waiting for too long, moving your finger in a particular direction.
In traversal mode, the current atom/bond is dragging along the atom-bond network, in the general direction in which the finger is moved. The current object alternates between atoms and bonds, and only follows along bonded connections.
The following sequence shows what happens when a bond is made current, then traversal mode is activated by clicking near it and dragging in a generally top-left direction:
The current object hops between atoms and bonds, in the direction in which it is being dragged. Releasing your finger at any time stops the traversal.
Note that when traversal mode is activated and the current object is an atom, several phantom bonds are displayed. These are proposed locations for creating new bonds, and it is possible to drag the traversal cursor over top of them:
Releasing your finger when one of the phantom bonds is selected causes the phantom bond to become real, i.e. the current atom is methylated:
Finishing the drawing of a caffeine molecule requires methylation of three nitrogens, one of which has just been shown. Use the traversal mode to create the other two.
Note that when traversing across the structure, the current object and its neighbours are always retained on the screen, so the molecule will be scrolled as necessary. So as the current object migrates across the molecule, the current region of interest will always be shown, which is relevant to this example, since it was previously zoomed in so that it did not all fit on the screen.
A guided tour through the drawing features of the iOS version of MMDS has been demonstrated. Although it only scratches the surface of the drawing capabilities, many of the remaining features should be intuitive, with a little trial and error. The drawing primitives that are represented by the graphical icons of MMDS represent a very powerful set of operations which can be used to construct publication-quality molecular diagrams with a very small number of steps, once they are understood. Perseverence will be rewarded!