Stretching @YOKOFAKUN

I’m following Pierre Lindenbaum both on twitter and on his blog. I love his projects, but I don’t like the layout of his blog, so I created a user-script to make the style more comfortable.

The problem is the width of his articles. The content is only about 400 pixel. Since Pierre often blogs about programming projects his articles are very code-heavy, but lines of code are usually very long and word-wrap isn’t appropriate in this case. So you have to scroll a lot to get the essential elements of his programs, see figure 1 as example from the article Visualizing my twitter network with

The Firefox extension Greasemonkey comes to help. As you might know, with this extension you can easily apply additional JavaScript to some websites. So I created a so called user-script to stretch his blog. By default the main content is stretched by 200 pixel, so it’s about 1.5 times wider, see figure 2.

The code:

// ==UserScript==
// @name           YOKOFAKUN stretcher
// @namespace
// @description    stretch the content on
// @include        **
// ==/UserScript==

var stretchPixels = 200;
var removeFriendFeed = false;
var toChange = new Array ("header-wrapper", "outer-wrapper", "main-wrapper");

// thats it, don't change anything below
// unless you know what you're doing!

function addCSS (css)
  var head = document.getElementsByTagName ('head') [0];
  if (!head)
  var add = document.createElement ('style');
  add.type = 'text/css';
  add.innerHTML = css;
  head.appendChild (add);

for (var i = 0; i < toChange.length; i++)
  var element = document.getElementById (toChange[i]);
  if (!element)
  var org = parseInt (document.defaultView.getComputedStyle(element, null).getPropertyValue("width"));
  if (!org)
  addCSS ('#' + toChange[i] + '{width: ' + (org + stretchPixels) + 'px}');

if (removeFriendFeed)
  var friendfeed = document.getElementById ('HTML3');
  if (friendfeed) friendfeed.parentNode.removeChild (friendfeed);

I also added a small feature to hide the friendfeed widget, I don’t like it ;-)

If you have installed Greasemonkey you just have to click the download-link below and Greasemonkey will ask if you want to install the script. To stretch the site by more/less pixel just change the content of the first variable to match your display preferences. If you set removeFriendFeed to true the friendfeed widget will disappear. So far, have fun with his articles!

Download: JavaScript: yokofakun_stretcher.user.js (Please take a look at the man-page. Browse bugs and feature requests.)

Apache: displaying instead of downloading

When I found an interesting script and just want to see a small part of it I’m always arguing why I have to download the full Perl or Bash file to open it in an external program… And then I realized the configuration of my web servers is also stupid.

See for example my monitoring script to check the catalysts temperature. Till today you had to download it to see the content. To instead display the contents I had to tell the apache it is text. Here is how you can achieve the same.

First of all you need to have the mime module enabled. Run the following command as root:

a2enmod mime

You also need to have the permissions to define some more rules via htaccess . Make sure your Directory directive of the VirtualHost contains the following line:

AllowOverride All

Now you can give your web server a hint about some files. Create a file with the name .htaccess in the directory containing the scripts with the content:

<IfModule mod_mime.c>
 AddType text/plain .sh
 AddType text/plain .pl
 AddType text/plain .java
 AddType text/plain .cpp
 AddType text/plain .c
 AddType text/plain .h
 AddType text/plain .js
 AddType text/plain .rc

So you defined scripts ending with .sh and .pl contain only plain text. Your firefox will display these files instead asking for a download location…

Btw. the .htaccess file is recursive, so all directories underneath are also affected and you might place the file in one of the parent directories of your scripts to change the behavior for all scripts at once. I installed it to my wordpress uploads folder.

Displaying compounds with WebGL

After publishing my last article about OPSIN I was interested in using HTML5 techniques to display chemical compounds and found a nice library: ChemDoodle.

With ChemDoodle it’s very easy to display a molecule. Just download the libs and import them to your HTML code:

<script type="text/javascript" src="path/to/ChemDoodleWeb-libs.js"></script>
<script type="text/javascript" src="path/to/ChemDoodleWeb.js"></script>

To display a compound you need its representation as MOL file, include it in less than 10 lines:

<script type="text/javascript">
  var app = new ChemDoodle.TransformCanvas3D('transformBallAndStick', 500, 500);
  app.specs.backgroundColor = 'white';
  var molFile = '\\n  Marvin  02080816422D          \\n\\n 14 15  0  0  0  0            999 V2000\\n   -0.7145   -0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -0.7145    0.4125    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.7145   -0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.7145    0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.0000   -0.8250    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.0000    0.8250    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    1.4992    0.6674    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\\n    1.4992   -0.6675    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\\n    1.9841    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -1.4289   -0.8250    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.0001    1.6500    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.0001   -1.6500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    1.7541    1.4520    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -1.4289    0.8250    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\\n 10  1  2  0  0  0  0\\n  1  2  1  0  0  0  0\\n 14  2  1  0  0  0  0\\n  8  3  1  0  0  0  0\\n  4  3  2  0  0  0  0\\n  7  4  1  0  0  0  0\\n  1  5  1  0  0  0  0\\n  5  3  1  0  0  0  0\\n 12  5  1  0  0  0  0\\n  6  2  1  0  0  0  0\\n  6  4  1  0  0  0  0\\n 11  6  2  0  0  0  0\\n  9  7  1  0  0  0  0\\n 13  7  1  0  0  0  0\\n  9  8  2  0  0  0  0\\nM  END\\n';
  var molecule = ChemDoodle.readMOL(molFile, 1);

Here is a sample with caffeine:

If your browser is able to display WebGL you should see a stick-model. Use your mouse to interact. Very easy to use! Of course you can load the MOL data from a file, but that is beyond the scope of this article.

Benefit of standardization: OPSIN

Just read about a new tool to parse chemical names from systematic IUPAC nomenclature.

OPSIN (Open Parser for Systematic IUPAC nomenclature) is an open source IUPAC nomenclature parser. The IUPAC provides some rules to name chemical compounds, you may have learned some of them in your first course of organic chemistry.

The web interface also comes with an API to generate a 2D picture of the parsed compound. You can speak to the API by calling the image via . For example to get an image for 2λ6,2’,2’‘-spiroter[[1,3,2]benzodioxathiole] just follow these instructions and you’ll get an image like this:

Very smart, isn’t it? Using the web interface they also provide InChI and SMILES strings and a CML definition.

It’s not limited to simple molecules, I’ve tried some more complex names, for example 3,6-diamino-N-[[15-amino-11-(2-amino-3,4,5,6-tetrahydropyrimidin-4-yl)-8- [(carbamoylamino)methylidene]-2-(hydroxymethyl)-3,6,9,12,16-pentaoxo- 1,4,7,10,13-pentazacyclohexadec-5-yl]methyl]hexanamide:

What should I say, I’m impressed! You can download the tool at bitbucket or use the web interface.

R for the web

There is a nice R module for apache: rApache. So you can easily publish statistics.

To install rApache first install the following packages from the Debian/Ubuntu repository:

aptitude install apache2 apache2-mpm-prefork apache2-prefork-dev r-base-dev

So the basics are done. Lets install rApache. Grab the latest version:


extract the contents and cd into it. The installation process should be clear, I had to give a hint for the apxs2 location:

./configure --with-apxs=/usr/bin/apxs2
make install

To notify apache about the new module you need to create two more files. First one is /etc/apache2/mods-available/r.conf :

<Location /R>
SetHandler r-script
RHandler sys.source

<Location /RApacheInfo>
SetHandler r-info

Now all files in /R are assumed to be R-scripts, in /RApacheInfo you’ll find some information about your installation. The second file is /etc/apache2/mods-available/r.load :

LoadModule R_module /usr/lib/apache2/modules/

This file just defines which lib to load. To finish the installation you need to load the rApache module and restart the webserver via:

a2enmod r
/etc/init.d/apache2 restart

That’s it. You can test whether all was successful by browsing to localhost/RApacheInfo, hopefully you’ll see some config stuff. To prepare some own tests create a directory /var/www/R (assuming your document-root is /var/www ) and paste something like this in a file called test :

y = rnorm(100)

Browsing to localhost/R/test you should see something like this:

[1] -0.4969626136 -0.0004799614  1.3858672447 -0.1888848545  0.5577465024
  [6] -0.6463581808  1.3594363388  1.8160182284 -1.8602721944  0.3249432873
 [11]  1.0861606647 -0.5075055497 -0.5152062853  0.4851131375  0.2924883195
 [16] -0.5542238124  1.2741001461  0.2627202474 -0.8986869795 -0.8628182849
 [21] -0.0788598913  0.4843055866 -0.2747585510 -1.1928500793  1.6193763442
 [26]  0.3452218627  0.9518228897 -0.5858433386  1.9585346877 -0.2582043114
 [31] -1.7989436202  1.2713761553  0.9045031014 -0.3456065867  0.3739555330
 [36]  0.7512315203 -0.5289340037 -0.7700091217 -1.5103278314 -1.5195628428
 [41] -0.8100795062  1.1027597227  0.0194147933  0.7819879165 -0.3914496199
 [46] -0.4650911293  0.5889685176 -0.9659270213  1.0570030616 -0.0657166412
 [51] -0.2077095857  0.6421821337 -0.1911934111 -3.1567052058  0.2704713187
 [56] -0.5154689593  0.0923834868 -1.2100314635  0.6693369266 -1.2093881229
 [61]  1.6755264101  1.2151146432  0.6683583636 -0.2982231602  1.4830922366
 [66]  1.6505026636 -0.1769048244  0.3516470621 -0.0053594481 -0.3776870673
 [71] -0.4797554602  1.2207702646  1.2762816419 -2.6137169267 -1.4423704831
 [76] -0.4251822440  0.8007722424 -0.4985947758 -2.0685396392 -1.6844317212
 [81] -0.2509955532  0.7906569225 -0.1259848747 -0.1352738978 -1.4943405839
 [86] -2.4272199144 -0.5778250558  1.2579971393 -1.0476874144  0.2305160769
 [91] -0.2920446292  0.1823053837  1.8858770756  1.4158084170 -1.2539321864
 [96]  1.2667650232  0.1272379338  1.2726069769  0.8745111042  0.3848103655

To create a graphic you need to change the content type to an image type. A small example might give you an idea:

setContentType ("image/png")
temp <- tempfile ()
y = rnorm (100)
png (temp, type="cairo")
plot (1:100, y, t='l') ()
sendBin (readBin (temp, 'raw',$size))
unlink (temp)

Reload the page and you’ll see a more or less nice plot :-P That’s it for the moment, for a more interactive interface take a look at the ggplot2 mod.

Download: R: web-image.R (Please take a look at the man-page. Browse bugs and feature requests.)

Converting peaks to Gaussians

Yesterday I updated the iso2l. One of the improvements is the MS mode, now it’s able to display isotopic clusters as expected by MS instruments instead of only theoretical ones. The task was to estimate a normal distribution of a theoretical isotope peak.

The accuracy of a mass spectrometry (MS) instrument is determined by its resolution. The higher the resolution the easier you can distinguish between two peaks. This is essential especially to identify isotopes. Depending on the charge state of an ion two isotopes may differ in less than 0.1 mass over charge (m/z). To detect the resolution of your MS instrument just select one peak and measure the width of the peak at the half height of it. This expression is called (full width at half maximum). The resolution is calculated by the following equation:

So you see the resolution respects the characteristics of MS instruments that peaks at higher m/z are wider.

Now we want to go the other way around. We have an theoretical mass of an peak and want to estimate a mass distribution as measured by an instrument. These distributions look like normal distributions, so it’s obvious that we want to estimate a Gaussian :

It’s clear that of the Peak, but we have to find sigma to have the distribution half-maximum at . Since the normalization term doesn’t matter in this case, the formula simplifies to with its maximum of 1 at . As you know isn’t affected if we move all data points by a distinct value, so let’s move them by . Now the distribution has its mean at 0. The equation we have to solve is:

You see, the half-maximum is at , with . Reverse, given the we can calculate of the normal distribution with:

Combining everything, a peak at m/z in an instrument with resolution can be approximated with a normal distribution with parameters:

You see, the higher the m/z the bigger is .

Plotting w/o X

This might be interesting for non-X fans like me. I just found a nice way to plot to a simple terminal.

Using gnuplot you can enable terminal plots via set term dumb . Here is an example:

gnuplot> set term dumb
Terminal type set to 'dumb'
Options are 'feed  size 79, 24'
gnuplot> plot [0:6.3] sin(x)

     1 ++---------+--*******-+---------+----------+----------+----------+-++
       +          ***       ***        +          +          sin(x) ****** |
   0.8 ++        *            ***                                         ++
       |       **               **                                         |
   0.6 ++    **                   *                                       ++
       |    *                      **                                      |
   0.4 ++  *                         *                                    ++
       |  *                           **                                   |
   0.2 +**                             *                                  ++
     0 **                               **                                +*
       |                                 **                               *|
  -0.2 ++                                  *                             **+
       |                                   **                           *  |
  -0.4 ++                                    *                        **  ++
       |                                      **                      *    |
  -0.6 ++                                       *                  ***    ++
       |                                         **               **       |
  -0.8 ++                                         ***            *        ++
       +          +          +         +          + ***      +***       +  |
    -1 ++---------+----------+---------+----------+---********----------+-++
       0          1          2         3          4          5          6

Very cool idea, isn’t it!? Ok, you can’t see much details, it might give you an overview even if you are just connected via SSH.

If anybody has an idea how to do it with R please tell me!

Using MathJax to render math

Some time ago I’ve heard about MathJax and decided to integrate it to my blog. Short time later everything was forgotten, but a few days ago I read an article and remembered my plan. So here it is ;-)

Up to now a mathematical formula was converted to an image like this: a^2+b^2=c^2\\a^2=c^2\,

There are some disadvantages, for example you can’t align a number of lines by the equal sign. And also the integration into continuous text is terrible, as you can see in the following sum: \sum i = 5.
Different images have different baselines: i=\circ vs p=\circ. This will destroy any line spacings and it depends on the browser what you see if you zoom into the website.

Here is the same Text rendered with MathJax (you need to have JavaScript enabled so see a difference)

There are some disadvantages, for example you can’t align a number of lines by the equal sign. And also the integration into continuous text is terrible, as you can see in the following sum: . Different images have different baselines: vs . This will destroy any line spacings and it depends on the browser what you see if you zoom into the website.

So you see, MathJax remedies these issues. Simple latex code is rendered into web compatible math symbols. That is done via JavaScript, so your browser has some more to do, but I think in times of Web2.0 it’s negligible. And it’s also mark-able, so you can copy & paste! But what if a visitor is browsing w/o JS? I implemented my version with a fallback to these images. So if you disable JS you’ll see pure output of WP-LaTeX.

I’m actually very busy, so there is no time to create and maintain an official WP-Plugin, but I can offer a How to, so you can handiwork.

How to?

This instruction is for WP-LaTeX version 1.7. Add a comment if you want an update for a newer version.

First of all you have to download MathJax, you’ll get it here. I installed a copy into WP_PATH/wp-content/plugins/ . Now log into you admin panel and install the plugin WP-LaTeX.

If this is done, cd to your plugin directory. The only file you have to edit is wp-latex/wp-latex.php . Since we won’t destroy the original functionality, we will continue creating images. So no need to delete anything. But if JS is enabled, the images should be replaced by MathJax-code. How do we find out whether JS is available!? We take JS to replace the images. So if it’s not enabled, the images won’t be replaced ;-)

Since the MathJax library contains very much JS, we will only load the MathJax-stuff if we need it. Most of the article don’t require latex, it’s a waste of resources if we load the library nevertheless. We introduce a new variable loadMathJax , indicating whether we need MathJax. Have a look at the code and search for function wp_head() { . This function still contains some style stuff, we only need to append some JS code:

function wp_head() {
	if ( !$this->options['css'] )
	<style type="text/css">
	/* <![CDATA[ */
	<?php echo $this->options['css']; ?>

	/* ]]> */
	// -> our code start
	<script type="text/javascript">
	var loadMathJax = false;
	// -> our code end

loadMathJax is false by default, we don’t always need MathJax libs. That was nothing exciting, here comes the intelligence. You’ll also find a function called shortcode . This function is responsible for image creation, here is the code that is send to your browser:

$latex_object = $this->latex( $latex, $atts['background'], $atts['color'], $atts['size'] );

$url = clean_url( $latex_object->url );
$alt = attribute_escape( is_wp_error($latex_object->error) ? $latex_object->error->get_error_message() . ": $latex_object->latex" : $latex_object->latex );

return "<img src='$url' alt='$alt' title='$alt' class='latex' />";

Nice, isn’t it!? We now need to add some piece of code to replace this image with MathJax source code. We change the code to append a small JS:

$latex_object = $this->latex( str_replace("&", "", $latex), $atts['background'], $atts['color'], $atts['size'] );

$url = clean_url( $latex_object->url );
$alt = attribute_escape( is_wp_error($latex_object->error) ? $latex_object->error->get_error_message() . ": $latex_object->latex" : $latex_object->latex );

$id = "latex".md5($url.microtime ());
$start = "\$";
$end = "\$";
if ($latex[strlen($latex)-1] == ",")
	$start = "\\\\begin{align}";
	$end = "\\\\end{align}";
$mathjaxcode = "<script type='text/javascript'>
if (document.createElement && document.getElementById){
	loadMathJax = true;
	var img = document.getElementById('" . $id . "');
	if (img){
		var tex = document.createTextNode(\"" . $start . str_replace("\\", "\\\\", $latex) . $end . "\");
		img.parentNode.replaceChild(tex, img)

return "<img src='$url' alt='$alt' title='$alt' class='latex' id='" . $id . "'/>".$mathjaxcode;

Ok, let me shortly explain this. First we have to replace all & in the latex code that is parsed to an image (line 1). There is a small issue with this WP-LaTeX plugin. You can’t align multiple lines, & isn’t allowed. To nevertheless create multiline MathJax formulas this workaround is my resort. In line 6 I create a random id, so we can call this specific element by just naming it’s id. I additionally defined a tailing , as indicator for multiple lines. You just have to add e.g. \, (a small space) to the end of the last line, and this code expects multiple lines. It will be centered in the line and all & are aligned. After wards the piece of JS follows. You don’t have to understand it, it just looks for an image with the specified id and replaces it with LaTeX-code. It additionally sets the variable loadMathJax to true . Once an image is replaced this variable gets true! If no image will be replaced it will always stay false.

Last but not least the browser has to load the libraries. Since we want to know whether there is LaTeX-code in this side we can’t load it early in the header section. We have to evaluate loadMathJax in the footer section. Add the following to the init () function:

add_action( 'wp_footer', array( &$this, 'wp_footer' ) );

And append a new function to the end of the class:

function wp_footer ()
	<script type="text/x-mathjax-config">
		showProcessingMessages: false,
			messageStyle: "none",
			extensions: ["tex2jax.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
			jax: ["input/TeX", "output/HTML-CSS"],
				tex2jax: {
					inlineMath: [ ['$','$'], ["\\(","\\)"] ],
					displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
					multiLine: true
			"HTML-CSS": { availableFonts: ["TeX"] }
	<script type="text/javascript">
	if (loadMathJax)
		var head= document.getElementsByTagName('head')[0];
		var script= document.createElement('script');
		script.type= 'text/javascript';


The first script section adds the MathJax configuration to the page. Take a look at the documentation to learn more. The second script appends a new DOM node to the head section via JS. If and only if loadMathJax is true and JS is available. If you installed MathJax to a directory different to WP_PATH/wp-content/plugins/ you have to edit the script.src line.

This should work, at least for me ;-) Right-click to these mathematical formulas and choose Settings -> Zoom Trigger -> Click, and each time you click on a formula you’ll see a zoomed version. Very smart I think!

Btw. even if it sounds like I’m arguing about this image variant, I’m not! It’s a very good method and the displayed formula is the same in every browser. Even Wikipedia uses this technique.

Here is a nice last example, based on the sample of WP-LaTeX:

Here is the code for the above formula:

\displaystyle P_\nu^{-\mu}(z)&=\frac{\left(z^2-1\right)^{\frac{\mu}{2}}}{2^\mu \sqrt{\pi}\Gamma\left(\mu+\frac{1}{2}\right)}\int_{-1}^1\frac{\left(1-t^2\right)^{\mu -\frac{1}{2}}}{\left(z+t\sqrt{z^2-1}\right)^{\mu-\nu}}dt\\&=a^2+\pi\cdot x_\infty\\&\approx42\,

Go out, produce smart looking, intelligent web pages! Looking forward to read some scientific articles at your websites!

Why false is sometimes true

We have some specialists in our admin staff, only able to administrate LDAP via phpLDAPadmin. But for several days the connection to the LDAP servers was read-only. It took some time to figure out why.

The configuration in /etc/phpldapadmin/config.php is very extensive, so I always ignored the failure in the following line:

$servers->setValue ('server', 'read_only', 'false');

Do you find the crap? If I comment it out the session isn’t read-only anymore. First we thought of a bug and I started to check the source code, but some more considerations let me have an idea. You might know PHP (like some other languages) interprets everything that is not empty or false explicitly as to be true. So 'hello' , 'true' and 'false' are all true ;-)

Don’t know who inserted this line, but sometimes (or generally?) you just work to correct the work of somebody else…

ShortCut[proprietary]: NVIDIA update

Again I installed a new kernel and again X isn’t able to start. Of course the last time I installed the proprietary NVIDIA driver I downloaded it to /tmp , and curiously it’s lost! The funny NVIDIA website is so damn incompatible, you need to have JavaScript or Flash or both to find your driver, no chance to get the driver with e.g. lynx from command line… So you need to have another running system to download the driver and secure copy it, or you need to reboot into the old kernel. (nonstop swearing at proprietary smut) Does this sound familiar? There is an alternative!

Once you have installed the driver, you’ve also installed a tool called nvidia-installer . This tool is able to find the newest driver at and to downloads it itself via FTP. Just type the following:

nvidia-installer --update

Even if you save your driver persistently, if you installed a new X version and your old driver is out of date you have to get a new driver! So this trick simplifies the world a lot ;-)