WIRIS Formula Editor Architecture

The architecture of a system that uses the WIRIS editor might depend on how exactly WIRIS editor is used.

Formulas that appear in HTML Web pages are encoded using ordinary images. This allows that such pages can be displayed correctly in all web browsers. The names of the images are irrelevant from the point of view of the user. For the curious, it corresponds to the md5 computation of the source code of the formula (usually MathML).

Web Page example with formulas

A fragment of the source code of the example HTML page is the following:

...
<p>Example 4.6.2.</p>
<ul>
    <li>
        <img align="middle"
            src="http://.../wrs_showimage.php/ebcec7125e1caefc7da84ce32862edc3.png"
            alt="«math»«munder»«mi»lim«/mi»…«/math»"
            class="Wirisformula" />
    </li>
    <li>
        <img align="middle"
            src="http://.../wrs_showimage.php/ab12ce19d310b571533a4a202a21ujhg.png"
            alt="«math»«munder»«mi»lim«/mi»…«/math»"
            class="Wirisformula" />
    </li>
...

The ugly name ebcec7125e1caefc7da84ce32862edc3is the md5 encoding of the source of the formula which is MathML.

<math>
  <munder>
    <mi>lim</mi>
    <mrow>
      <mi>x</mi>
      <mo>&rarr;</mo>
      <mo>&infin;</mo>
    </mrow>
  </munder>
  <mfenced>
    <mrow>
      <mn>2</mn>
      <mo>+</mo>
      <mfrac>
        <mn>1</mn>
        <msup>
          <mi>x</mi>
          <mn>2</mn>
        </msup>
      </mfrac>
    </mrow>
  </mfenced>
  <mo>=</mo>
  <mn>2</mn>
</math>

The MathML will be used to modify existing formulas by authors.

The alt attribute stores a copy of the MathML of the formula. In view mode, this attribute is not used but is needed for the edition. In both cases (viewing and edition), the <img> tag is the same. Note that the MathML stored in this tag does not use the common <, > symbols but «, ».

The server is responsible to provide such images, because they are stored in the file system or are computed dynamically calling the Web WIRIS Formula Image service. The server must also keep a cache of the computed images and a way to recover the source code of the image from its name (the md5). This task is performed by server-side scripting with technologies like PHP, Java or others.

Note that the WIRIS Formula Image Service can be located in a different machine than the Http Server.

Diagram with the main components of the view mode

To see this in more detail, the sequence diagram associated to the view mode is the following:

The User opens a Web page that contains formulas.

The responsibility of the Http Server is serving content to the user computer, in particular, all formulas and images.

WIRIS plugin server-scripting is a collection of scripts that executes on the server side and is part of the WIRIS plugin. For example, they can be written in PHP or Java.

WIRIS plugin storage. The WIRIS plugin needs to store information about how to recover the formulas source (MathML) from the md5 computation. This storage can be files or a database.

WIRIS plugin cache. The images associated to the formulas are stored here. Because this is a cache they can be removed anytime.

WIRIS Formula Image Service. It is the Web Service that generates images from the formula source.

The events proceed as following:

1. formula (md5 image): The user opens a Web page that contains formulas. The formulas are images; so, they are requested to the remote Http Server. The name of each formula is the md5 computation of the source code of the formula.
2. The Http Server delegates the formula image request to the WIRIS plugin server-scripting.
3. The WIRIS plugin server-scripting tries to retrieve the image from the cache (get image from md5). However, the image might be inexistent (because this is the first time the image is requested or the cache has been cleaned).
4. If the image is not in the cache, the source code of the formula is recovered from the WIRIS plugin storage (get image from md5) and the WIRIS Formula Image Service is called (get image from formula). The image is stored in the cache (put image and md5).
5. Either because the image is in the cache or is computed with the Image Service, it is finally returned to the Web browser.

The edition of formulas is a little bit more complex. We assume that the edition of formulas is done inside an HTML editor.

See http://www.geniisoft.com/showcase.nsf/WebEditors for a list of editors.

The following is a screen-shot of an HTML editor which contains an icon to insert formulas (this example is taken from the Moodle integration).

The following sequence diagram explains how the edition on a new formula works.

The User means the author who wants to edit a new formula once he HTML editor is already loaded in a Web page.

The HTML Editor is the software component that manages the HTML edition.

The WIRIS plugin javascript is the component that has been installed inside the HTML editor that enables the insertion and edition of formulas. It is implemented with JavaScript and related resources.

The WIRIS plugin Formula Editor PopUp is a pop up Window that contains a Java applet with the Formula Editor.

WIRIS plugin server scripting is a set of scripts that are called by the WIRIS plugin.

WIRIS plugin storage means any way to store the association from the computed md5 to the original formula source code. This can be done using simple files or a database.

The sequence of messages is the following.

1. The user “clicks the new formula icon” to insert a new formula where the cursor is placed. The event is intercepted by the HTML Editor which delegates it to the WIRIS plugin.
2. The WIRIS plugin “opens” a PopUp window with the formula editor.
3. Then, the user edits the desired formula (“formula edition”).
4. And decides to “accept” the formula.
5. The “formula” is sent to the WIRIS plugin.
6. The WIRIS plugin calls a server-side script to compute the img tag with the md5 that will be inserted in the HTML editor.
7. The WIRIS plugin inserts the img tag in the HTML editor where the cursor is placed.

Now, the editing HTML page contains an img tag that corresponds to a formula. Then, all the process explained in the view mode takes place.

The edition of existing formulas process is quite similar to the creation of new ones. When the user clicks over the “formula icon”, the WIRIS plugin checks whether an image of a formula is selected and if it is the case, the Pop Up Window with the formula editor is opened. The content of the formula editor is populated with the value of the alt attribute of the img tag of the existing formula (see view mode). On accepting the formula, the image is replaced instead of being inserted anew.