Marcin Wojdyr edited this page Aug 25, 2018 · 24 revisions


How it differs from other WebGL viewers?

  • Better handling of electron density maps (IMO).
  • General look and feel (in default configuration).
  • Keyboard shortcuts for almost everything.
  • Orthographic projection only.
  • No cartoons, no electrostatic potential surfaces, etc. (other viewers can render other representations).

If you need pretty visualization, or if you trust the model and don't need to see the electron density, use one of many other viewers.

Who is using such a thing?

organization application
European Synchrotron Radiation Facility EXI
Diamond Light Source Ltd. SynchWeb
CCP4 web services (jsCoFE)
Minor Lab, University of Virginia molstack
King Abdullah University of Science and Technology ContaMiner

Let me know if you also use it.

Why sulphur color is different than in Coot?

Mimicking Coot makes switching between desktop and browser easier, but it is not the goal in itself. UglyMol intentionally differs from Coot in a few details:

  • Lines that represent bonds have rounded end caps (by default). It looks better.

  • Sulphur is more green - it is hardly different from yellow C in Coot.

  • Coot has colors only for H, C, N, O and S - all the rest is in the same default color. We also set colors for Mg, P, Cl, Ca, Mn, Fe, Ni.

  • Middle mouse button: centering on atom is performed when the mouse button is released (in coot - when it is pressed), and only if you do not move the mouse when the button is pressed. Otherwise it is interpreted as panning.

  • We use Shift-I for "rocking", not Ctrl-R.

Of course, a lot of features and rendering details is simply not implemented in UglyMol.

I do not know Coot. How to use it?

The help panel (press H to open) shows how to use mouse and keyboard.

Different programs (PyMol, JMol, Chimera, etc) assign different functions to mouse buttons. In UglyMol these are:

Left = rotate
Middle or Ctrl+Left = pan
Right = zoom
Ctrl+Right = clipping
Ctrl+Shift+Right = roll
Wheel = σ level
Shift+Wheel = diff map σ

Rotating, panning and zooming are basic operations in all viewers. Rolling is rotating in the plane of the screen. Clipping refers to the thickness of the visible slab -- other viewers have the same concept of the near and far clipping planes.

The mouse wheel is used for changing the contour level of the electron density maps. It is quite important. Many people like to change it back and forth to get a better sense of the density, which is a volumetric data.

Why the viewer has no menu?

It could be added, either to UglyMol itself or to a web app that embeds UglyMol. We need to gather more feedback what people think.

The current keyboard driven approach is inspired by the excellent AtomEye viewer.

Why it is named UglyMol?

To stress that pretty rendering of molecules is a non-goal.

What electron density map format should I use?

We have a separate wiki page about this.

How to add it to my website?

You need one concatenated JS file: uglymol.js. Get it from Github or from NPM.

And you need a bit of HTML/CSS/JS - see the examples on UglyMol website. The JavaScript calls can be as simple as:

// create a new viewer, the arguments refer to HTML elements in the page
V = new UM.Viewer({viewer: "viewer", hud: "hud", help: "help"});
// load a molecular model and one or two el. density maps
V.load_pdb_and_ccp4_maps("data/1mru.pdb", "data/", "data/");

Loading of files is asynchronous. If you'd like to run a command after the files are loaded you need to use callbacks. For example:

V.load_pdb("my.pdb", null, function() {
  V.recenter([6.31,13.26,52.87], null, 1);

As you can see the documentation is not extensive, but feel free to ask questions (in Github issues or by email).

How to modify UglyMol?

  • Clone or download it from Github,
  • npm install in the uglymol directory grabs all dependencies,
  • npm run download-data downloads files used in examples and tests,
  • after editing files in src/ check if dev.html still works, either accessing it through file:// or through local server (npm start). The former doesn't work in some browsers. In Chrome it works only if the browser is started with option --allow-file-access-from-files,
  • npm run build will run eslint, tests, concatate and minify files.
  • if any of the benchmarks in the perf/ directory are relevant, run them before and after the changes. Either from the command line (node perf/file.js) or in a browser (perf.html).
  • to update uglymol website - clone it and run: tools/ /path/to/
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.