Tutorial

Protein Imager Tutorial 

The Protein Imager is a 3D molecular viewer able to visualize protein structures directly in the browser, without any installation to be done. Also this tool it is connected with a server-side system able to generate high definition publication-quality images.

The interface is user friendly and very powerful allowing users to make images of high complexity. This tutorial introduces the Protein Imager and all the important aspects useful to understand how it works.

Loading files

Starting panel from which to choose the file loading method.
Starting panel from which to choose the file loading method.

It’s possible to load structures from local. The Protein Imager loads structural data in PDB, CIF, MMTF or SDF file format.

Fetch structures from the Protein Data Bank inserting their alphanumerical code (3 letters for small molecules or 4 letters for proteins). Click on “Submit” button or press “Enter” once the code has been inserted to fetch the chosen structure on Protein Imager.

Load from local a previously saved project to continue working on it. Project files allow users to save their work and subsequently restore the session.

Close the window.

Interface components

Protein Imager's interface elements.
Protein Imager’s interface elements.

The Protein Imager interface is user friendly and able to make a lot of complex tasks. There are six distinct elements together making the Protein Imager interface: the menu, the selections panel, the viewer, the objects panel, the viewing options panel and the distance measurements panel.

Menu and the User panel.
Menu and the User panel.

Menu icon. Click on it to show the menu.

User panel. Hear it’s displayed the user name, login/logout and the images counter. The images counter is the number of publication quality images the user can require. If it is 0, you can easily buy other high quality images on our shop.

The tutorial window. Click on the “?” to display this tutorial inside the Protein Imager’s page.

This option enables full screen mode (press f11 or ESC to disable).

Get a better view of the representation hiding interface panels and leaving only the menu panel. Then click on the same option to show interface again.

Load from local or fetch a new molecule.

⑦ Open the rendering options panel in which it is possible to make changes for the final rendering process (this changes will not be seen on the Protein Imager, but only in the final high quality image). In this panel are stored multiple settings:

  • Transparent background: yes or no. ?
  • Transparency mode: monolayer (clearer but if multiple transparent representations overlaps only the most outer of them is shown) or multilayer (renders correctly multiple transparent representations overlaps). ?
  • Ambient occlusion: if activated, surface representation’s cavities will be darker. ?

Lighting effects: Set shadows on/off and move light’s source.

Save the project and load it in another moment to continue working on it.

 Go to the final rendering process. Once done, in minutes¹ a mail will be send to you with a link to the final rendered image you required (example ?) and your images counter will be decreased by one. In order to require this service buy any number of images in our shop to increase your images counter.
The rendered image will have the same proportions in terms of height and width, but will be better of the original one in many ways, for example an higher definition (publication quality: 300 dpi), better transparency, custom lighting conditions, better surfaces and and much more.
It’s recommended to resize the page, before submitting the image to the final rendering process, in order to remove the empty portion of image’s background.

¹ Time variable proportionally to the complexity of the required image and the other requests done from other users.

Load a previously saved project to continue working on it.

⑪ Erase everything and reinitialize the Protein Imager. All work done will be lost if it is not saved before.

Lighting effects

Lighting effects panel.
Lighting effects panel.

Lighting effects are necessary for the final rendering process (no changes will be seen on the viewer). The green sphere in the center of the box represents all viewer’s active representations. When lighting settings change, the sphere’s lighting conditions change accordingly. There are multiple lighting effects:

Enable the frontal light (max. two lights can be enabled together). ?

Modify the angle of incidence of the frontal light.

Enable left light. ?

Enable right light. ?

Enable up light. ?

Enable down light. ?

Restore default options.

Enable/Disable shadows (Shadows are enabled by default). ?

Selections panel

Manual selections panel

Manual selection panel.
Manual selection panel.

The manual selection panel refers always to the active selection of the current structure. If the active selection or the current structure changes, the manual selection panel rebuilds itself accordingly.

When panels are checked it means all their atoms are part of the current active selection (all checked panels are green). Instead, when structure, chain or residue panels are green but the correspondent checkbox isn’t checked, it means that at least one of their atoms (but not all) is part of the selection. Eventually, when panels aren’t green it means their atoms aren’t part of the current active selection.

Structure box.  The structure number is shown.

  • Clicking on the checkbox, it adds the entire structure to the current active selection.
  • Clicking on this box, it opens/closes a panel containing a list of all models of the correspondent structure.
  • Double-clicking on this box, it centers the viewer on the correspondent structure.

Model box. The model number is shown.

  • Clicking on the checkbox, it adds the entire model to the current active selection.
  • Clicking on this box, it opens/closes a panel containing a list of all chains of the correspondent model.
  • Double-clicking on this box, it centers the viewer on the correspondent model.

Chain box. The chain name is shown.

  • Clicking on the checkbox, it adds the entire chain to the current active selection.
  • Clicking on this box, it opens/closes a panel containing a list of all residues of the correspondent chain.
  • Double-clicking on this box, it centers the viewer on the correspondent chain.

Residue box. The residue name and residue number are shown.

  • Clicking on the checkbox, it adds the entire residue to the current active selection.
  • Clicking on this box, it opens/closes a panel containing a list of all atoms of the correspondent residue.
  • Double-clicking on this box, it centers the viewer on the correspondent residue.

Atom box. The atom name is shown.

  • Clicking on the checkbox, it adds the atom to the current active selection.
  • Double-clicking on this box, it centers the viewer on the correspondent atom.

Special selection panel

Special selections panel.
Special selections panel.


This selections modes aren’t affected by the current active selection.

“Atom Res Chain” mode allow to select using atom names, residue names or numbers, and chain names.

“Within range” mode allow to select all residues/atoms of a selection within a certain distance (in Angstrom) from an other selection. ?

“Residue Number Range” mode allow to select a range of residue numbers.

“Remove” mode allow to remove atoms from selections relying on several properties like element, chain name, residue name, atom name, backbone, sidechain, water, protein, ligands, alternate locations, etc…

Log

Log panel.
Log panel.

Clear events in log panel.

Here are appended informations when an atom is picked in the viewer. For example “Picked atom: Str.2 [FAD]1363:A.O5B Element: O” means: Str.2 (Structure 2), [FAD] (belonging residue name), 1363 (belonging residue number), A (belonging chain name), O5B (atom name) Element: O (oxygen). When visual selection is enabled the output changes according to the selection mode chosen (by atom, residue or chain).

Viewer

The viewer is the central element among all interface components. In the viewer is drawn every active representation of each selection. There are different kinds of possible interactions with this element:

  • Pick: a click over the viewer. If visual selection is active it is possible to add or remove atoms from the active selection, otherwise it only shows atom information on the log panel.
  • Left mouse-down + drag: rotation in every direction.
  • Mouse wheel / left click + right click (pinch for touch screens): zoom in and zoom out.
  • Right mouse-down + drag: translate the viewer center.
  • Middle click over atom: center the viewer on the picked atom.

Each change over active representations of each selection can be instantly seen in the viewer. However, some tasks are more time consuming than others. For example the surface representation, generally, requires few seconds to be shown (the time needed is influenced by the atom number of the selection).  Also the Bfactor coloring method generally takes more time than the others coloring systems increasing the atom number.

Objects panel

Structures panel

Structures panel.
Structures panel.

If multiple files has been loaded it is possible to use this buttons to switch between their structures. Once the current structure changes, all selection objects belonging to the new structure are shown below this panel and the manual selection panel is rebuilt to represent the new structure.

 The current active structure number and the button to hide/show information (if any) about the current structure.

Switch between all possible assemblies of the current structure (this setting influences every active representation of the current structure).

④ Add a new empty selection to the current structure.

Selection objects 

Selection object panel.
Selection object panel.

There is one panel for each selection. From this panel it’s possible to show multiple representations of the same selection. By default, each time a structure is loaded, four different selections are made: one for proteins (shown with cartoon representation), one for nucleotides (shown with cartoons + sticks representations), one for ligands (shown with sticks representation) and the last for water molecules (all representations inactive).

 Are shown the name and the atoms number of the selection.

Options regarding the whole selection.

  • Center: center the viewer on the selection,
  • Copy: copy the selection object in a new selection.
  • Remove: remove the selection.

Activate Spheres representation. ?

Activate Surface representation. ?

Activate Tube representation. ?

Activate Sticks representation. ?

Activate Cartoon representation. ?

Activate Labels representation. ?

Coloring methods for each representation.

Representation’s options.

Representations

Spheres representation

Spheres representation.
Spheres representation.

A spheres representation of a ligand shown on the viewer (coloring method: “uniform”).

Set the transparency of the representation.

Coloring methods (“uniform”, ”by Range”, ”by Element” , ”by Bfactor” – if avaliable).

Surface representation

Surface representation.
Surface representation.

A surface representation of a ligand shown on the viewer (coloring method: “uniform”).

Set the transparency of the representation.

Show the surface as a mesh. If activated, an other setting appears under the checkbox to increase or decrease the mesh’s line size. ?

With this switch it’s possible to hide portions of the surface based on the distance from the atoms belonging to a different selection. If activated two other settings appear under the switch. One for the distance cutoff from the selection to apply the filter and the other to reverse the filter. ?

Coloring methods (“uniform”, ”by Range”, ”by Element” , ”by Bfactor” – if available).

Tube representation

Tube representation.
Tube representation.

A tube representation of a protein shown on the viewer (coloring method: “uniform”).

Set the transparency of the representation.

Switch for the size type of the tube representation. There are two types of tube size: the “Uniform” one or the “B-factor” based (if avaliable in the structure file). ?

Setting to increase or decrease the radius (only avaliable “Uniform” size type).

Coloring methods (“uniform”, ”by Range”, ”by Bfactor” – if avaliable).

Sticks representation

Sticks representation.
Sticks representation.

A sticks representation of a ligand shown on the viewer (coloring method: “by element”).

Set the transparency of the representation.

Show valence bonding (if available in the structure file).

Setting to increase or decrease bond’s radius.

Setting to increase or decrease the ball/stick ratio. To hide balls and show only bonds (licorice like representation) decrease this parameter at minimum.

Coloring methods (“uniform”, ”by Range”, ”by Element” , ”by Bfactor” – if avaliable).

Cartoon representation

Cartoon representation.
Cartoon representation.

A cartoon representation of a protein shown on the viewer (coloring method: “uniform”).

Set the transparency of the representation.

③ Setting to represent smooth beta-sheets. ?

Coloring methods (“uniform”, ”by Range”, ”by Bfactor” – if avaliable).

Labels representation

Labels representation.
Labels representation.

A label + stick representation of a ligand shown on the viewer (coloring method: “uniform”).

Switch for the labeling method (“Residue”,”Atom name”,”Element”).

Numerical input to alter residue number by a fixed value (avaliable only with “Residue” labeling method).

Numerical input to increase or decrease labels depth.

Settings to laterally move labels in x and y direction.

Settings for labels styling (size, bold, italic and border). If border’s checkbox is enabled an other input appears to set the border color.

Coloring methods (“uniform”, ”by Range”, “by Element”).

Coloring methods

Coloring methods panels.

  • Color uniform. The simpler coloring method. It colors the whole representation uniformly.

Input to set the whole representation’s color.

  • Color by Element. Method used to color each element in the representation with a different color.

② Inputs to set the color of a single element in the whole representation.

  • Color by Range. This method is used to color differently one or multiple portions of the representation.

Input to choose the base color (Applied to the portions of the representation outside of all residue number ranges).

The range panel allow to choose the initial and the final residue number (specify both) and the color of the selection. To apply changes click on the “Set” button. Also it’s possible to add multiple ranges with different colors using “Add range” button. It’s better to do not overlap ranges, otherwise the coloring in the final renderised image could be partially uncorrect.

  • Color by Bfactor. Given the bfactor range (default is the maximum and the minimum values found over the whole structure’s atoms) and a color scale, the representation is colored with a spectrum of colors based on the bfactor value. This property isn’t always available in structural files.

Numerical inputs for the minimum and the maximum bfactor values range to be taken into account.

Color scale used to generate the color spectrum. The first color input (yellow) is the minimum bfactor value (9.7), the last (red) corresponds to the maximum bfactor value (143.3). It’s possible to add or remove colors to the color scale (minimum two colors) with “Add” and “Remove” buttons.

Active/inactive selection

Active selection (green) & inactive selection.
Active selection (green) & inactive selection.

Active selections are represented by a green panel. There is only one active selection at a time. The atoms included in the active selection are always represented in the manual selection panel. From manual selection panel it’s possible to add or remove atoms to the current active selection.

White panels instead, are inactive selections. In this selections atoms can’t be added or removed, but it is still possible to show, hide and manage every representation in the same way as the active selection.

An other way to insert or remove atoms from the active selection is the visual selection switch (“Select by”). This switch is present only in active selection. If it’s activated (using every mode but “None”), it visually shows on the viewer the current active selection by coloring all its enabled representations with a dark metallic coloring. It’s possible to add or remove atoms from the current active selection simply by picking them on the viewer. In “Atom” visual selection mode, if an atom is part of the active selection and it is picked on the viewer, the atom is removed from the selection. Instead, if an atom is NOT part of the active selection, it is added to the active selection. In “Residue” mode when an atom is picked, the correspondent residue is added or removed. In the same way, in “Chain” mode the whole atom’s chain is added or removed. For each atom picking is also shown a notification of what happened in the log panel and the manual selection panel changes.

The activation button is present only in inactive selections. Clicking on it activates the correspondent inactive selection.

Viewing options panel

Viewing options panel.
Viewing options panel.

In the viewing options panel there are additional settings useful to control different viewer’s features:

Move the clipping plane to see the inside of the representations.

Change the viewer’s background color.

Enable or disable fog effects and control the fog intensity and positioning by moving the starting position and the ending position of the fog.

Change the field of view to 40° or 60°.

Set the light intensity.

Change the shiness of every representation.

Distance measurements panel

Distance measurements panel.
Distance measurements panel.

This panel allows to show on the viewer the distance between two atoms by adding a label with distance in Angstrom and a connector tube between the two atoms. Multiple measurements can be done.

Enable or disable the label on every distance measurement.

Choose the label color.

Set the label size.

Clicking on this button, it initializes a distance measurement. Once done, it is necessary to pick on the viewer the first and the second atom and the distance representation appears connecting the two chosen atoms. Two new buttons appear for each measurement: the “Remove” button removes the distance measurement, instead the “Hide” button can be used to temporarily hide the measurement and show it again later. ?

Set the tube size.

Choose the tube color.