Easy Recipe for WYSIWYG Math Formulas in Drupal

Posted: June 15th, 2010 | Author: | Filed under: Dreamhost, Drupal | Tags: , , , , , , , , | No Comments »

Objective: An easy recipe to setup Drupal to allow users to write / edit mathematics expressions.

Check List:

    Required Drupal Modules

  1. Mathematics Filter aka Mathfilter

    Required Non Drupal Components

  1. Mathtex or Mimetex
  2. TinyMCE


  1. Install Mimetex or Mathtex and Mathematics Filter. This will allow basic LaTeX markups to be rendered as graphics. Make sure this part works first before proceeding.
  2. At this stage, create an “Input Format” for Math. Since Mimetex / Mathtex is an external binary, use a seperate input method that only authenticated users can use, it is better be safe than sorry.
  3. Install WYSIWYG API and TInyMCE. Verify they work. Assign TinyMCE as the editor for the Math Input Method under the WYSIWYG module configuration.
  4. Here is the tricky part. Install WYSIWYG ASCIIMATH module into the /modules directory also the /sites/all/modules directory. You would want to create symbolic links from of your mimetex binaries to where the respective mimtex directories! eg my mathtex lives in /cgi-bin directory, so in the /modules/wysiwyg_asciimath/mimetex directory I issue ln -s ../../../cgi-bin/mathtex mathtex command.
  5. Go back to the WYIWYG, click on Edit in the Math Input Format. Check ASCIIMath and ASCIIMathCharmap and Save

Why no ASCIIGraph? For some reason ASCIIGraph doesn’t seem to render well once I switch to View mode. So for now I am going to stick with my JSXGraph module.

Adding MimeTex or MathTex to Dreamhost

Posted: May 31st, 2010 | Author: | Filed under: Dreamhost, Drupal | Tags: , , , , , , , | No Comments »

I use Deamhost for hosting and for 99.9% of the tasks one would face it is great. The only let down is lack of full Latex support as it doesn’t support dvipng.

In the end, I had decided to use Mathtex / Mimetex.
The installation instructions between Mathtex and Mimtex are similiar and straight forward. One thing you have to watch out for is to unzip Mathtex on Dreamhost if you are using a Windows computer. As the C file uses UNIX encoding only, it will give you weird errors like:

mathtex.c:205: error: expected expression before â/â token


mathtex.c: In function âsetpathsâ:
mathtex.c:1697: error: âonvertpathâ undeclared (first use in this function)
mathtex.c:1697: error: (Each undeclared identifier is reported only once
mathtex.c:1697: error: for each function it appears in.)

If you want to fix the above while you are in Windows. Use Notepad++, make sure the encoding is for UNIX, remove the offending key etc setpath and retype it and save. If you have unzip the file on Dreamhost, you shouldnt’ have to go through that step.

In Dreamhost, you have access to latex, dvips and convert. You can use the which command to see where the commands reside.

To compile the file you issue the following (for Dreamhost and it will output PNG files):

cc mathtex.c -DLATEX="/usr/bin/latex" -DDVIPS="/usr/bin/dvips" -DCONVERT="/usr/bin/convert" -DPNG -o mathtex.cgi

Note: \” is the delimiter.

mathtex.cgi will be compiled. You then move it to your cgi-bin directory and change the correct permission. It is ready to be used!

The main difference between mathtex and mimetex is mathtex is quite a bit smaller (240kb vs 980kb) because it requires outside programs. Functionally, they are the same.

Once you have that setup, you can integrate it with Drupal via the Mathematics Filter module. You can then create Latex based math text with the [$ your math expression here $] tag. I find the tag conflicts with HTML Filter and other filters, so it is wise to create a separate Input Format with MathFilter input method and only allow authenticated user to use it.

Some notes on submitting code to Drupal.org

Posted: May 27th, 2010 | Author: | Filed under: Drupal | Tags: , , , , , , , | No Comments »

The web browsers have improved by leaps and bounds. However it is still a pain for academics to communicate and present their formulas and graphs. Good thing there are now Javascript solutions like MathJAX and JSXGraph to bridge the gap (not to mention relatively cheap bandwidth). However there aren’t that many off the shelf plugins/modules that integrates easily to CMS systems like Drupal.

Recently I helped a friend create a Drupal plugin for JSXGraph. Since all the code is GNU. I applied for CVS access at Drupal.org. Here are some notes:
The code itself:
Formatting: Tab is 2 spaces. Give the Coding Standard document a quick read through.
3rd party code: In my case, the JSXGraph core files are not created by me, so they are not allowed into the drupal.org repository.

    Apply for CVS access:

  1. Have your source code production ready and have them in a zip file.
  2. Make an account on drupal.org.
  3. Apply for CVS access here. Once approved, it is attached to your drupal.org account.
  4. Attached the zip file into the review queue, and set the status tag to “need review”
  5. Patiently wait for volunteers to review your code and suggest changes

    Configure your client for CVS:

  1. I use TortoiseCVS under //s and Windows.
  2. Install Tortoise and create a local directory for CVS files (non zipped) to reside.
  3. Once your code has been reviewed, your Drupal account will be CVS enabled.
  4. Right click on the directory in Step 2 and select Check Out, paste in the CVSROOT information. You will check out all the directories in contribution/modules directory.
  5. Alternatively, I find it easier just to do a cvs checkout -l contributions/modules
  6. Once you have checked out the modules directory, you can create your own.
  7. For more information refer to here.
  8. Move your source files via Explorer into the directory you set Tortoise to in step 2.
  9. You can then Add and Commit the files and files will be added to the CVS!.

    Project Page

  1. Create your project page.
  2. Create a new release node BEFORE you create a new release, if not it will give you some weird errors like ‘The Patch-level must be “x” for snapshot release from a branch (or HEAD)’, even when you got everything right.
  3. Click on “Add New Release” at the Project page.

    Advantages of submitting your code to Drupal.org:

  1. Users of your module will able get to get the latest plugins on their Drupal installations automatically.
  2. You can use drupal.org to handle all feature requests and bug fixes.
  3. It is good to contribute to the greater good of the world.