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 II Case

For the Graphical User Interface to our equation formatter, we built something that looked a little like this:

Uploaded Image: equpro2.jpg

It is a drag an drop interface that you can pull parts of equations or greek symbols off of the pallettes, then combine these parts via our new dual selection interface.

Uploaded Image: equpro3.jpg

As you can see in the above picture, our selections are of two colors, red and yellow. The idea is that you select some small portion of an equation by clicking on it with the red button to get a red selection or the yellow button to get a yellow selection. Then you may dray the piece of the equation onto the other selection(red to yellow and yellow to red both work) to embed a copy of the dragged piece in place of the selection that you drop on.

For instance, in the above picture, you could drag the 'b' that is in the red selection to the 'x' that is in the yellow selection, and then a 'b' would be in the place where the x was. You could have also dragged the x to the b, and then an x would be in the place that the b is currently, making that equation x+y. If you wanted to select all of the a+b, all you would ahve to do is click it again with the same button, and the selection area would widen to the whole morph.
Another feature of our interface is that you can drag any equation out of the user interface to make a form that can be used in another applications, or exported to some other format.

Problems in development

The code base that we started off from worked pretty well for this assignment, with only additions and refinements being added, with very little redesign. The code to insert one equation into another was a little tricky, and required a little method that we called "updateModelReplacing:with:". This function is implemented in each of our classes, and basically checks to see if the first argument is referentially equal(==) to any of its parts. If it is, we replace that part. This also required a reference to the model from the morphs that we used to make our interface, which was something that we were a little leary of at first, but turned out to be okay in the end, since it was really a version of the Observer design pattern.
Another development problem that we suffered was the fact that we made a decision to reimplement drag and drop. We tried for many hours to use the built in mechanism, but it never would suit our needs. While reimplementing drag and drop, we had to make such things as a wrapper for the cursor to remember what it picked up, and we also had to do tons of playing with reception of events. The lesson that we learned: do something else if you think that you need to reimplement drag and drop.
We also had to make our unique selection method work. This was a treat in itself. If you ever do "precise" layout in morphic, you will know how hard formatting can be. It produces morphs in morphs in morphs in morphs. This was a bit of a problem for us, because our morphs still connected to a model that also was extremely nested. How did we fix this problem? Ultra-uniformity. All of the morphs that make up our equations are nested in a very regular way, that almost exactly maps to the structure of the model. This way we can go to our parent's parent on the morph side, to always find the morph that corresponds to our "parent" in the actual equation. This was invaluable in our selection. To make it work, we used a combination of locking and embeding of morphs.
Why don't you look and play with it(Missing File (/cs2340/uploads/ and graphics.tar...unzip the tar file and put the graphics that are inside it in the same directory as your image)? Type "MathEquationUI start" and doit to make the editor run. Try embedding an entire fraction in the defnominator portion of another by clickign on the little halo that is there. Change the text for one of the letters to something else. Put parens around something, then put something bigger inside them and watch them grow. Have all the fun you might ever want and more!

The Imagineers are:

Links to this Page