OUseful Info

RESTful Image Generation - When Text Just Won't Do

One of the take homes for me from the recent OU VLE 2.0 show-and-tell was a talk by LTS developer Jonathan "Google Charts, MathTran and editable PNG files" Fine about displaying mathematical equations in online course materials.

This would be easy enough if we could guarantee students had MathML support in their browser, but a fall back position is required if they don't - enter this pretty neat solution to the problem: rendering equations as images, generated from text, using MathTran.

MathTran is essentially an image resource generator: call the the resource via a URL such as the following:

http://www.mathtran.org/cgi-bin/mathtran?D=1;tex=%5Cint%20_0%5E1%20x%5E2%5C%2C%20dx

and you should get an image in return:

The URL arguments are an encoded version of TeX, a text based representation for expressing all manner of weird typographical sh*t (to use the vernacular... anyone who's done a maths or physics degree will know all about it ;-)

(There are issues with this approach of course, such as making the image accessible to a screen reader, but at least this approach makes the equation accessible in a visual way! The alt tag is still available of course, for TeXtual description of the equation, which I'll return to again below...)

This resourceful web service approach is similar in kind to the way the Google Charts API works: pass a description of the chart via a URL to the chart image generator, and get a chart back as a response. For example:

http://chart.apis.google.com/chart?cht=p&chs=450x160&chd=s:DHNEDFD&chtt=Completed%20T175%20users%20stating%2038%20Current%20courses%20%28min%203%20users%29&chxt=y&chxr=0,0,10&chl=BM240%7CM150%7CM255%7CM257%7CM263%7CMU120%7CM366

is responsible for creating this chart:

I use the Google chart API in my evolving Course Profiles Facebook app reporting tool (which I guess I should do a bit more work on and post about... ho hum, one more thing on th eto do list...;-)

As well as pie charts, the Google Chart API will create line graphs and bar charts, scatter plots and Venn diagrams. If you want to have a play, here's a rather neat Google Chart generator. Enter some data, pick a chart type, and it will generate the chart image URL for you...

Although the Google Chart API has only be around for a couple of months, it's already been put to some interesting uses. This Math equation parser/plotter on the Google Chart API group links to a Google Chart maths equation plotter, which lets you type in a simple function and it will then generate a graph for you by running the equation through a web service (I think you have to HTTP POST the arguments through - but I didn't check...) that generates the chart data values and constructs the chart image URL.

Now here's where a general knowledge of design and coding patterns - and what's possible on the web - comes in handy in terms of seeing what the next step might be... (this sort of observation is how I justify reading feeds all day...;-)

Here are a couple more things you need to know, and let's see if you come to the same conclusion as I do about how the maths''n'graphs ideas could merge together...

Firstly, MathTran doesn't just provide a TeX2Image service. They also make available a Javascript library that you can add to your web page which lets you write the TeX equation description in the alt attribute of an image tag, and it will then create the src URL and pull in the image view of the equation.

Here's an example of an image tag as you might write it to encode an image - <img alt="tex:a^2+b^2=c^2"> [Unfortunately, when I tried the script in the original version of this post I got an XML request/cross domain error...]

Secondly, check out this approach to Generating charts from accessible data tables using the google charts API. The idea here is to take the data from a straightforward HTML data table in a web page and use a bit of Javascript to create a corresponding Google Chart URL and embed in the image in the same web page. If javascript is disabled, you stil have the data table. If you're interested, here's the table to chart demo. Here's a typical result:

(via Ajaxian)

So here's where idea fusion comes in: would it be possible to create a MathTran+ service that will take a TeX described equation in a div tag attribute, say, and return two images: one displaying the equation in a properly formatted way (using MathTran, for example) and one displaying a Google Chart of the plotted equation?

Over to you, Jonathan (or have you done this already? I seem to recall you mentioning something about 'executable TeX', or similar, where a textually described equation could be treated as an equation and plotted out? Or did this only work with MathML?)

PS Jonathan also idled about the idea of a musical notation resource generating service - has anyone seen on e of these? I guess the idea would be to pass a textual description of a piece of music to the service, and receive an image of the score, using musical notation, in return...?

PPS whilst on the topic of chart generators-ish, here's a sparkline generator that works on the same principle - pass the data to the service via a URL and get an image back in return:

PPPS Reduced as I am to using the last.fm website rather than the client, which appears to have stopped working on my office machine (one more reason not to bother coming in to work, I guess), I notice they're pushing embeddable radio players... so here's an example of what I was listening to whilst writing this post...

Posted by ajh59 at February 14, 2008 09:43 PM