12.3 WebEQ
|
| < Day Day Up > |
|
12.3 WebEQ
As we saw in Section 7.4, WebEQ is a Java-based suite of programs for authoring and displaying mathematics on the Web. In Section 9.3, we discussed the use of the WebEQ Editor (for authoring MathML equations) and the WebEQ Viewer Control (for displaying the equations in a Web page). In this section, we look at some additional features of the Editor and Viewer Control that are relevant for creating interactive mathematical content. We also discuss a third component of the WebEQ suite, the Input Control, which is an applet for authoring and editing equations in a Web page.
A key feature of WebEQ is that it includes a set of JavaScript and DOM APIs for scripting the Viewer Control and Input Control applets. Using the API functions, you can create scriptable mathematical content in Web pages.
Viewer Control
The WebEQ Viewer Control is a Java applet for displaying mathematical formulas in Web pages. As discussed in Section 7.4, the equations to be displayed are embedded in an HTML document in an applet tag, in either MathML or WebTeX format. The display of the applet requires a special set of class files that can either be installed locally on the client machine or downloaded directly from the server along with the document to be viewed. The location of these files is specified using the codebase and code attributes.
A typical Viewer Control applet tag has the following structure:
<applet codebase="classes" code="webeq3.ViewerControl" width=200 height=100> <param name=eq value=mml_string> </applet>
Here, mml_string is a string that specifies the MathML markup for the equation to be displayed. Alternatively, you can place the MathML markup in a separate file, whose location you can specify via an absolute or relative URL using the parameter src, as shown below:
<applet codebase="classes" code="webeq3.ViewerControl" width=200 height=100> <param name=src value=url> </applet>
The Viewer Control applet supports various parameters for controlling the appearance of an equation, such as its font size, color, and alignment. One of the parameters is controls, which can take the values true or false. If this parameter is set to true, as shown in the following code fragment, right-clicking the displayed equation opens a dialog that allows the user to change the font size of the equation:
<applet codebase="classes" code="webeq3.ViewerControl" width=200 height=100> <param name=src value=url> <param name=controls value=true> </applet>
Figure 12.3 shows a Viewer Control applet displayed in IE, along with the font size control panel that appears when you right-click the equation.
Figure 12.3: A Viewer Control applet displayed in IE that shows the pop-up menu for changing the font size of the displayed equation.
Actions in WebEQ
For authoring formulas to be displayed using the Viewer Control, you can use the WebEQ Editor, as explained in Section 9.3. Once you have created an equation using the Editor, you can export the equation as a WebEQ Viewer Control applet tag, which is suitable for pasting into an HTML document that can be displayed in a browser.
WebEQ provides support for three types of interactive actions in equations:
-
Mouseover: moving the cursor over an equation changes the background and foreground colors, to highlight it.
-
Link: this turns an equation into a hyperlink that points to a specified URL.
-
Toggle: clicking on an equation causes it to alternate between two different displays.
To create any of these types of actions, you choose the corresponding command from the Insert ▸ Actions menu in the WebEQ Editor window (Figure 12.4). This opens a dialog with fields for specifying the various parameters that define the action. These actions are all implemented using the maction element of presentation MathML. In other words, a maction tag with the appropriate attribute values set is automatically added in the underlying markup for the equation you are authoring. This tag can then be interpreted by the Viewer Control when it displays the markup. Thus you can author interactive equations using the WebEQ Editor and display them in a Web page using the WebEQ Viewer Control.
Figure 12.4: Authoring an equation with an action in WebEQ Editor.
As we saw in Section 4.6, the maction element takes an attribute called actiontype, which defines the type of interactivity in the equation. In WebEQ, this attribute can take one of three values: mouseover, link, or toggle, which correspond to the three types of actions supported. In addition, for each type of action, some "pseudo-attributes" specify additional information about the action. These attributes are not part of the MathML specification. They are supported by WebEQ only for implementing specific actions and have the namespace prefix dsi. These attributes are listed in Table 12.1.
| Attribute | Values | Meaning |
|---|---|---|
| dsi:color | #rgb | #rrggbb | html-color name | Foreground color of equation |
| dsi:background | #rgb | #rrggbb | html-color name | Background color |
| dsi:href | string | URL to link to (for actiontype ='link' only) |
| dsi:cue1 | string | Message displayed in the status line of the browser when the mouse is moved over the equation |
| dsi:cue2 | string | Message displayed in the status line of the browser when the mouse is moved over the alternate equation (for actiontype = ‘toggle' only) |
Here is the applet tag for an equation with a mouseover action:
<applet codebase="classes" code="webeq3.ViewerControl" height=100 width=200> <param name="eq" value=" <math> <mrow> <maction actiontype='mouseover' dsi:color='red' dsi:background='blue' dsi:cue1='Mouseover effect'> <mrow> <mi>x</mi> <mo>+</mo> <mn>1</mn> </mrow> </maction> </mrow> </math>"> </applet>
When the cursor is moved over the applet, the equation's text color becomes red, the background color becomes blue, and a message is displayed in the browser's status bar. These properties are specified using the WebEQ pseudo-attributes that we saw in Table 12.1.
The applet tag for the same equation to act as a link is shown below:
<applet codebase="classes" code="webeq3.ViewerControl" height=100 width=200> <param name="eq" value=" <math> <mrow> <maction actiontype='link' dsi:color='red' dsi:background='blue' dsi:cue1='integral' dsi:href='http://www.examples.org/webeq_link'> <mrow> <mi>x</mi> <mo>+</mo> <mn>1</mn> </mrow> </maction> </mrow> </math>"> </applet>
The main differences between this markup and the previous one are that here, the actiontype attribute has the value link instead of mouseover and the extra attribute dsi:href is used to specify the destination URL.
To create a toggle action, the maction element has two arguments, which represent the two expressions to alternate between. In other words, the element has the following syntax:
<maction actiontype="toggle" dsi:cue1=message1 dsi:cue2=message2> expr1 expr1 <maction>
Here is the applet tag for an equation with a toggle:
<applet codebase="classes" code="webeq3.ViewerControl" height=100 width=400> <param name="eq" value= "<math><mstyle displaystyle='true'> <mrow><mrow><mfrac><mrow><mi>π</mi></mrow> <mrow><mn>4</mn></mrow></mfrac></mrow><mo>=</mo> <maction actiontype='toggle' dsi:cue1='Leibniz formula' dsi:cue2='first few terms in the series'> <mrow><mrow><munderover><mo>∑</mo><mrow> <mi>n</mi><mo>=</mo><mn>1</mn></mrow><mrow> <mi>∞</mi></mrow></munderover><mrow><mfrac> <mrow><mo>(</mo> <mo>-</mo><mn>1</mn><msup><mrow> <mo>)</mo></mrow><mrow><mi>n</mi><mo>+</mo> <mn>1</mn></mrow></msup></mrow><mrow><mo>(</mo> <mn>2</mn> <mi>n</mi><mo>-/mo><mn>1</mn><mo>) </mo></mrow></mfrac></mrow></mrow></mrow><mrow> <mn>1</mn><mo>-</mo><mfrac><mrow><mn>1</mn> </mrow><mrow><mn>3</mn></mrow></mfrac><mo>+</mo> <mfrac><mrow><mn>1</mn></mrow><mrow><mn>5</mn> </mrow></mfrac><mo>-</mo><mfrac><mrow><mn>1</mn> </mrow><mrow><mn>7</mn></mrow></mfrac><mo>+</mo> <mn>...</mn></mrow></maction></mstyle></math>"> </applet>
The MathML markup in this example is shown without the normal indentation and linebreaking (to save space). Although the markup is verbose, remember that the entire applet tag along with the MathML markup inside it can be generated automatically using the WebEQ Editor. Hence, you will rarely need to author such expressions by hand. The purpose of this example is mainly to explain the structure of the underlying markup, so you can see how toggle actions work.
Inserting this applet into a Web page causes the display to switch between the two expressions shown in Figures 10.5 and 10.6. You can switch between the two views by clicking anywhere on the right-hand side of the equation. The message in the status line of the browser window also changes with the equation being displayed.
Figure 12.5: A Web page that contains a Viewer Control applet with a toggle action.
Figure 12.6: The same Web page as in Figure 12.5, but this one shows the alternate display you get when you click the equation.
Scripting the Viewer Control
WebEQ includes a set of APIs for scripting the Viewer Control applet. The APIs contain high-level functions that can be called by other Java applets or JavaScript programs to access or change various properties of the displayed equation. This allows you to create various types of interactive behavior; for example, changing the display of an equation when the user clicks a button or chooses an item from a menu. Table 12.2 shows a few of the functions included in the Viewer Control API.
| Method | Description |
|---|---|
| setEquation(String neweq) | Changes the value of the eq parameter to neweq. |
| setBGColor(String newcolor) | Sets the applet background color to newcolor, where newcolor is of the form "#rrggbb", "#rgb", or a predefined color keyword (as defined in the HTML 4.0 specification). |
| setFGColor(String newcolor) | Sets the applet foreground color to newcolor, where newcolor is of the form "#rrggbb", "#rgb", or a predefined color keyword. |
| setSize(int size) | Changes the point size of the characters in a single instance of the WebEQ applet. The point size is set to the largest number on the list (36, 30, 24, 18, 16, 14, 12, 10, 8) that is less than or equal to size. |
| preferredHeight() | Returns the height of the rendered equation. This is also the value to which the height parameter in the applet tag should be set. |
| preferredWidth() | Returns the width of the rendered equation. This is also the value to which the width parameter in the applet tag should be set. |
Le's look at some examples of using these functions to implement some simple interactive behavior.
Example 12.3 sets up a Web page (Figure 12.7) with a text area in which a user can type in any MathML expression When the user clicks the "Display" button, the Viewer Control renders the MathML as an applet embedded in the page.
Example 12.3: An HTML document for rendering a specified MathML expression.
 |
<html> <head> <title>WebEQ Viewer Control</title> <script language="javascript"> function showMath( ) { var expr = document.MMLForm.MMLString.value; document.mathapplet.setEquation(expr); } </script> </head> <body bgcolor="white"> <h1>WebEQ scripting example</h1> <p>Enter MathML string: <p><form name="MMLForm"> <textarea name="MMLString" rows=10 cols=30></textarea> </form> <p><form><input type="button" name="MMLSend" value="Display" onclick="showMath()"> </form> <applet codeBase="../../classes" code="webeq3.ViewerControl" align="middle" width="400" height="50" name="mathapplet" mayscript> <param name="parser" value="mathml"> <param name="eq" value=""> </applet> </body> </html> |
Figure 12.7: A Web page that renders an arbitrary MathML expression as a Viewer Control applet.
Example 12.3 works in the following way. When the user clicks the "Display" button, the JavaScript function showMath is called. This function consists of two statements. The first statement retrieves the MathML expression typed by the user and assigns it as the value of the variable expr, as shown here:
var expr = document.MMLForm.MMLString.value;
The second statement updates the display of the Viewer Control applet, called mathapplet, by using the function setEquation, as shown here:
document.mathapplet.setEquation(expr);
You can also use the setEquation function to create interactive demos for showing the steps involved in solving specific mathematical problems. This is illustrated in Example 12.4, which shows an HTML document consisting of a Viewer Control applet and a button. When this document is first loaded into a browser, a mathematical problem is displayed by the applet (Figure 12.8). Each time the user clicks a button, the applet display is updated to show the next step in the solution of the problem. This continues until the problem is completely solved. After this, clicking the button again causes the original problem to reappear.
Example 12.4 works like a toggle action but with a repeating cycle that can be of any arbitrary length. This type of behavior is useful for educational Web sites, for example, to demonstrate the solution of problems in an assignment.
Example 12.4: An HTML document for showing the steps in solving a problem..
|
<html> <head> <title>WebEQ Viewer Control</title> <script language="javascript"> var i=1; function nextStep() { i++; if (i==1) { document.mathapplet.setEquation(mml_string1);} if (i==2) { document.mathapplet.setEquation(mml_string2);} if (i==3) { document.mathapplet.setEquation(mml_string3);} if (i==4) { document.mathapplet.setEquation(mml_string4); i=-1;} } </script> </head> <body bgcolor="#ffffff"> <h2>Finding a derivative using the product rule</h2> <p>Click the Next button to see the next step.</p> <applet codebase="classes" code="webeq3.ViewerControl" height=50 width=400 name="mathapplet" mayscript> <param name="parser" value="mathml"> <param name="color" value="#dddddd"> <param name="size" value="18"> <param name="align" value="left"> <param name="eq" value="mml_string1"> </applet> <form><input type="button" value="Next" onclick="nextStep();"> </form> </body> </html> |
Figure 12.8: An interactive Web page that shows the steps in the solution of a calculus problem.
Example 12.4 works as follows. Each time the user clicks the "Next" button, the JavaScript function nextStep is called. This function increments the value of the counter i by 1 and calls the setEquation function to change the equation displayed in the Viewer Control applet. The various steps in the solution are hard coded as MathML expressions. A different MathML string is specified as the argument of the setEquation function for each value of i. Hence, with each click of the button, the applet displays successive steps in the equation until the original equation reappears and the cycle starts again.
In Example 12.4, the MathML expression that corresponds to the mathematical problem to be solved is denoted by mml_string1, and the three steps involved in the solution of the problem are denoted by mml_string2, mml_string3, and mml_string4. In a working implementation of this example, these would be replaced with the MathML strings for the specific mathematical expressions to be displayed.
WebEQ and the DOM
The DOM is a W3C recommendation designed to simplify the processing of XML documents. The DOM defines a set of objects and methods for selecting and modifying any part of the XML document tree. These objects and methods are specified as abstract interfaces that any application can implement. For example, many Web browsers define an object hierarchy that is based on the DOM. The DOM is useful because it provides a standard way of working with XML documents that is independent of any specific platform, programming language, or application.
The WebEQ API implements many of the standard interfaces defined in the W3C specification of the DOM. WebEQ also implements some parts of the MathML DOM, which is defined in the MathML 2.0 specification. The MathML DOM extends the generic DOM by adding some extra interfaces for handling specific types of MathML expressions.
Using the objects and methods defined in the WebEQ DOM API, you can navigate the MathML tree to select a specific node and change its attributes. You can also add or delete nodes to interactively modify a part of the displayed equation. This is illustrated in Example 12.5, which shows an HTML document that contains a Viewer Control applet. You can update the color of the equation by choosing a color from a pull-down menu. Figure 12.9 shows how this document looks when viewed in a browser.
Example 12.5: An HTML document with a menu for changing the color of an equation.
|
<html> <head> <title>Using the WebEQ DOM API</title> <script language="javascript"> function colorText() { var i = document.form1.menu1.selectedIndex; var item = document.form1.menu1.options[i]; var fgcolor = item.text; var appletNode=document.equation var mathDocument=appletNode.getMathMLDocument(); var mathnode= mathDocument.getFirstChild(); var mstylenode=mathnode.getFirstChild(); mstylenode.setAttribute("mathcolor", fgcolor); } </script> </head> <body bgcolor="white"> <h1>Using the WebEQ DOM</h1> <p>Use the menu to change the color of the equation.</p> <table><tr><td> <form name="form1"> <select onChange="colorText()" name="menu1"> <option>black <option>red <option>blue <option>green <option>yellow </select> </form></td> <td><applet codebase="classes" code="webeq3.ViewerControl" width=250 height=50 align="middle" name="equation" mayscript> <param name="parser" value="mathml"> <param name="eq" value=" <math><mstyle mathcolor='black'><mrow><mi><x></mi> <mo>+</mo><mn>1</mn></mrow></mstyle></math>"> </applet></td></tr></table> </body> </html> |
Figure 12.9: Using the WebEQ DOM API to access a specific node of an equation and change its attributes.
In Example 12.5, the select tag is used to indicate a pull-down menu, with each item in the menu specified using an option tag. When the user changes the currently displayed item in the menu, an onChange event occurs, which calls the JavaScript function colorText. This function reads the currently selected color and assigns it as the value of the variable fgcolor. The function then uses the following three methods from WebEQ's implementation of the DOM to pick out a specific element in the MathML expression and change it:
-
getMathMLDocument(): returns the complete MathML expression tree, when applied to the Viewer Control applet node
-
getFirstChild(): returns the first child of the node it is applied to
-
setAttribute(attr, value): changes the attribute value of a particular node
By applying these methods in sequence, the colorText function first selects out the mstyle tag that encloses the MathML expression. It then sets the value of the mathcolor attribute of this element to that stored in the fgcolor variable. This causes the color of the equation displayed in the Viewer Control applet to be updated to the item that the user selects in the menu.
Input Control
The WebEQ Input Control is a Java applet that acts as an interactive graphical equation editor that can be embedded in a Web page. Its interface and operation are very similar to those for the WebEQ Editor. However, there are some important differences between them. The Editor is a standalone application with a standard menu-drive interface. It allows you to export equations in a variety of formats (including images) or MathML markup tailored to a variety of rendering applications (such as MathPlayer, Mozilla, or WebEQ Viewer Control applets).
The Input Control, on the other hand, is an applet that is intended only for use in a Web page. It does not have any menus and is more limited in its export options. You can think of the Input Control as a simplified version of the Editor. The main advantage of the Input Control is that it provides a way to interactively author mathematical notation in a Web page.
To embed the Input Control in a Web page, you simply add the following applet tag to an HTML document, as shown here:
<applet codebase="classes" code="webeq3.editor.InputControl" name="output" height=200 width=525 mayscript> <param name=eq value="<math><mrow></mrow></math>"> </applet>
The applet tag used here is very similar to the applet tag for the Viewer Control, the main difference being the value of the code attribute. The Input Control also supports a slightly different set of parameters than the Viewer Control. For example, you can use the toolbar parameter to customize the toolbar displayed at the top of the Input Control. The value of this parameter is a string that specifies the exact configuration of the toolbar. You specify the toolbar's configuration, in terms of a special XML-based language that includes keywords for the different types of palettes and symbols available. By using the toolbar parameter, you can create a customized toolbar that contains only the palettes and symbols relevant to a particular type of problem.
The WebEQ JavaScript and DOM APIs include a number of methods for manipulating the Input Control. You can use these methods to interactively access and modify the equations created using the Input Control. Table 12.3 shows a selection of the functions included in the JavaScript API for Input Control.
| Method | Description |
|---|---|
| getMathML() | Returns a string that contains formatted presentation markup for the current equation. |
| getContentMathML() | Returns a string that contains formatted content markup for the current equation. |
| getEscapedMathML() | Returns a string that contains presentation markup for the current equation in which unnecessary characters have been escaped in order for the string to be safely transmitted as CGI data. |
| getEscapedContentMathML() | Returns a string that contains content markupfor the current equation in which unnecessary characters have been escaped in order for the string to be safely transmitted as CGI data. |
| getPackedMathML() | Returns a string that contains unformatted presentation markup for the current equation. The markup is stripped of extra white space (including linefeeds and indenting) and is much more compact than formatted MathML. |
| getPackedContentMathML() | Returns a string that contains unformatted content markup for the current equation. The markup is stripped of extra white space (including linefeeds and indenting) and is much more compact than formatted MathML. |
| getSelection() | Returns a string that contains formatted presentation markup for the current on-screen selection. |
| getContentSelection() | Returns a string that contains formatted content markup for the current selection as above. |
| setMathML(String mml_str) | Replaces the current equation with the equation described by mml_str. |
| getEquationImage() | Returns a Java AWT (Abstract Window Toolkit) image of the current equation for use by another Java applet. |
| getEquationImage(int n) | Returns a Java AWT image of the current equation rendered in a specified font size. |
| getEquationImage(int n, String color) | Returns a Java AWT image of the current equation in a specified point size and with the background set to a specified color. |
Scripting the Input Control
This section illustrates how you can use the Input Control API functions to extract information about the equation authored using the Input Control. This information can then be used in concert with JavaScript programs or Java applets to implement various kinds of interactive behavior.
Example 12.6 shows an HTML document that contains the Input Control applet along with two buttons. The user can author an equation using the Input Control and then click a button to get either the presentation markup or content markup that corresponds to that equation. Figure 12.10 shows how this document looks in a browser.
Example 12.6: An HTML document that contains the WebEQ Input Control.
|
<html> <head> <title>WebEQ Input Control</title> <script language="javascript"> function showPresentation() { mml_data = document.output.getMathML(); alert(mml_data);} function showContent() { mml_data = document.output.getContentMathML(); alert(mml_data);} </script> </head> <body bgcolor="white"> <h1>Converting a Formula into MathML</h1> <applet codebase="classes" code="webeq3.editor.InputControl" name="output" height=200 width=525 mayscript> <param name=eq value="<math><mrow></mrow></math>"> </applet> <p><tr><td> <form> <input type="button" value="Show Presentation MathML" onclick="showPresentation()"> </form></td> <td> <form> <input type="button" value="Show Content MathML" onclick="showContent()"> </form></td></tr> </body> </html> |
Figure 12.10: Using the WebEQ Input Control to enter a formula and view its MathML representation.
Clicking the "Show content MathML" button, for example, runs the JavaScript function showContent. This function uses the getContentMathML function from the Input Control API, which returns a string that contains the content markup representation of the equation currently displayed in the Input Control. The standard JavaScript function alert is then used to display a dialog that contains the content MathML string (Figure 12.11).
Figure 12.11: Using the WebEQ Input Control to get the MathML representation of a formula.
Viewing the MathML for a formula is not very useful by itself. The Input Control becomes much more useful if you process the MathML output in some way to return a result to the user. You can do this on the client side by using JavaScript or Java applets. Alternatively, you can send the MathML string to the server and perform some computations on it, using, for example, mathematical software like Mathematica or Maple. We will discuss examples of doing server-side computations on user input in Sections 12.6 and 12.7. However, for now, we confine ourselves to examples of how the data provided by the Input Control can be processed on the client machine.
One important use of the Input Control is to create courseware for educational or training purposes. For example, you can use it to set up Web pages for online testing. Each Web page would display a mathematical problem and require a user to enter the answer to the problem via the Input Control. You can then use a JavaScript function to check the answer and return a message saying whether the answer was right or wrong. Example 12.7 shows an HTML document of this type.
Example 12.7: An HTML document for entering and checking the answer to a problem.
|
<html> <head> <title>Input Control Example</title> <script language="javascript"> function checkAnswer() { var mml_string = document.answer.getPackedContentMathML(); var solution = "<math><apply><plus/><apply><times/> <cn>2</cn><ci>x</ci></apply><apply><divide/><cn>1 </cn><apply><times/><cn>2</cn><apply><root/><ci>x </ci></apply></apply></apply></apply></math>"; if (mml_string==solution) {alert("Correct answer.");} else {alert("Wrong answer. Try again.");}} </script> </head> <body bgcolor="white"> <h1>Calculus Test</h1> <p><b>Problem 1 </b>Calculate the following derivative: </p> <applet codeBase="../../classes" code="webeq3.ViewerControl" align="middle" width="100" height="50"> <param name="parser" value="mathml"> <param name ="selection" value="true"> <param name ="eq" value= "<math><apply><diff/><bvar> <ci>x</ci></bvar><apply><plus/><apply><power/><ci>x </ci><cn>2</cn></apply><apply><root/><ci>x</ci> </apply></apply></apply></math>"> </applet> <p>Enter your answer here:</p> <applet name="answer" codeBase="../../classes" code="webeq3.editor.InputControl" width="525" height="200" mayscript> </applet> <form> <input onclick="checkAnswer()" type="button" value="Check Answer"> </form> </body> </html> |
The HTML document described in Example 12.7 displays a calculus problem that involves finding the derivative of a particular function. The mathematical notation for the problem is displayed using a Viewer Control applet (Figure 12.12). The user can enter the answer to the problem in standard mathematical notation using the Input Control, and then click the "Check Answer" button. This launches the JavaScript function checkAnswer, which retrieves the MathML markup that corresponds to the answer and then compares it with the solution for that particular problem, which is hard coded as a string. If the user's answer matches the solution, an alert saying the answer is correct is produced; otherwise, an alert prompting the user to try again is produced.
Figure 12.12: Using the WebEQ Input Control API to check the answer to a mathematical problem.
Another useful thing to do with the input received from the Input Control is to convert the MathML expression into an image that can be displayed in any standard Web browser. You can use the Input Control as one component of an e-mail discussion group or bulletin board for posting messages on mathematical topics. For example, students in a mathematical course can author and submit formulas (using the Input Control) that are automatically converted to images for displaying in a Web page. Other students can then view the message and respond to it, authoring and submitting other formulas as part of their response.
Example 12.8 shows an HTML document that converts the formula displayed in the Input Control into an image, which is then displayed in the same Web page using a Java applet. Figure 12.13 shows how this document looks when viewed in a browser.
Example 12.8: An HTML document that uses a Java program to convert an equation into an image.
|
<html> <head> <title>Displaying a java.awt.Image from the WebEQ Input Control</title> </head> <body> <applet code="webeq3.editor.InputControl" codebase="classes" height=200 width=600 name="Equation" mayscript><param name=eq value= "<math><msqrt><msup><mrow><mi>z</mi></mrow><mrow> <mn>3</mn></mrow></msup><mo>-</mo><mn>4</mn> <mo>-</mo><mfrac><mn>1</mn><mi>z</mi></mfrac> </msqrt></math>"> </applet> <p /><input type="button" value="Show Java Image" onclick="document.ImageApplet.setImage( document.Equation.getEquationImage(36));"><p/> <applet code="ImageApplet" height="200" width="600" name="ImageApplet"></applet> </body> </html>
|
Figure 12.13: Converting equations authored using the Input Control to an image using another Java applet.
Example 12.8 uses the getEquationImage function from the InputControl API to convert the MathML representation of an equation into a Java AWT image. When the user clicks the "Show Java Image" button, this image is passed on to another Java applet for displaying in a different window. Here is the Java code for the setImage function used in Example 12.8:
import java.applet.*; import java.awt.*; import java.awt.image.*; public class ImageApplet extends Applet { private Image myImage; public void setImage(Image newImage){ myImage = newImage; repaint(); } public void update(Graphics g){ paint(g); } public void paint(Graphics g){ g.setColor(Color.white); g.fillRect(0,0,getSize().width,getSize().height); if(myImage != null) g.drawImage(myImage, 0, 0, null); }} This code defines a class called ImageApplet that extends the standard Applet class. It then uses the standard Java graphics functions, paint, setColor, fillRect, and drawImage, to first draw a rectangle of the desired size and then render the image of the equation produced by the Input Control in that rectangle. This example illustrates how the WebEQ API functions can be accessed from Java applets as well as JavaScript functions.
Another technique for converting MathML equations into images is to use GtkMathView, an open-source MathML rendering engine written by Luca Padovani. This consists of a set of libraries that can be used either as a standalone widget or as part of another application. You can download the GtkMathView package as well as instructions for installing and using it from the following Web site: http://le.cs.unibo.it/helm/mml-widget/.
Drew Bowering has written a program called mathmlrender that uses GtkMathView in combination with PHP to translate MathML into JPEG or PNG images. PHP is a general-purpose scripting language that is widely used for Web development. PHP scripts can, like JavaScript programs, be directly embedded in an HTML document. mathmlrender is a module for PHP. You can download the files for mathmlrender at the following URL: http://www.math.mcgill.ca/~drew/mathmlrender.
|
| < Day Day Up > |
|
EAN: 2147483647
Pages: 127