View this PageEdit this Page (locked)Attachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

The Imagineers, Milestone IV Case

Milestone IV Case Study

Tension mounted as the grueling milestones were worked through as the semester progressed, always in the back of our mind the nagging wonderment of what could the mystery milestone be? The notion haunted us through each of the previous milestones, forcing us to speculate as to what change was going to be made to the specification for the project, and how can we make this transition more easy in what we designed then. Would we have to parse the user's built equation's mathematically? Would we have to somehow make our user interface from M2 available through the Web? Then the fateful day came.

The class of July 6th, Mark revealed that our the infamous mystery milestone would be creating a web user interface, that generated an image from user specified LaTeX. We were relieved. This would be easy. In M2, we used real-time input from the user's mouse which would have been complicated to port over to something that could be used through a browser. We were up for that challenge, but we actually liked this one better. It is easier to formulate the LaTeX for an equation in your head, than it is to drag&drop or use other creation tools for building equations. This would be a fast way to create equations on the web!

After Mark lectured about his Pluggable-Web-Server for Squeak, it was unanimous: We would simply use this built-in server, using as an action a class we would create that would fetch user's input via the Common-Gateway-Interface, parse the LaTeX using our former work in M3, and use the built in methods to convert from the generated form to a GIF, sending this back out to the user. The rest would be a little HTML.

We created one class.
Uploaded Image: uml_langford.jpg


This class is simply an event which can be plugged into the Pluggable-Web-Server.

"initialize" and "start" initialize the PWS and set all actions to send an event to the MathEquationWebUI class.

"process: " takes an event. It simply uses if-statements to determine if the user requested "equation.gif", or anything else. If it requested "equation.gif" it will parse and render the GIF, and send it out. If it is anything else, it will send out the webpage request the user's input.

When "equation.gif" is specified, "process: " knows what to parse by looking at the CGI "get" data sent with it, in the "latex" variable. Example: "http://localhost:8080/equation.gif?latex=\frac{a}{b}" When the user POSTs the data using the original request page, the server generates another webpage that simply references this "equation.gif" in it, with the POSTed data now GETen. This solved the caching problem many people were having. Because the URL generated for the rendered equation included the latex itself, it was unique for each equation. That way the browser could still cache the equations, lets say to display an equation already generated, but still not mistakingly reload an inappropriate one.

The only problem we ran into was that all characters can't simply be dumped onto the GET data line of the URL. Characters such as '+' and a space (' ') are special to the protocol. These have to be encoded via the '%xx' method, where XX is the hex equivalent of the desired character. To do this I wrote the "encodeField: " method which, for simplicity, translates each character to its hex equivalent. So, this "plug" gets the raw latex string POSTed by the user, encodes it, and included it in the output page for later GETing.

We wanted to do it this way because we wanted more than just the lone image being spit out. We wanted some structure around it. The way we did it provides more flexibility for anyone who wants to add to the page for rendered equations in the future.

"latex" is the last string the user entered to be parsed. This is preserved so if the user requests "equation.gif" from the server without specifying a latex string, it will simply parse this one, again.

Here is where the user enters a LaTeX formatted string:
Missing File (/cs2340/uploads/webUI_1.jpg)


Here are some sample outputs:
Missing File (/cs2340/uploads/webUI_2.jpg)

Missing File (/cs2340/uploads/webUI_4.jpg)

All-in-All it was more of a "fun" milestone, exploring Mark's Pluggable-Web-Server and boning up on CGI. Because we had designed our milestones correctly previously, seperating the view from the model, the equation generating components of this milestone were mere tools in our toolbox. This milestone only took about an hour.


Code:equation formatter complete.st and graphics.tar...unzip the tar file and put the graphics that are inside it in the same directory as your image.

To make it go, type:

MathEquationWebUI start

then go to the webpage: http://localhost:8080/

From there you can type laTeX equations and render them.




The Imagineers are:

Links to this Page