Documentation page

3 Aug 2010
v2.3    v3.0

WIRIS Editor is a WYSIWYG formula editor designed to streamline the process of writing mathematical formulae. It is a powerful tool that allows composing any math expression with high graphics quality, while remaining simple and easy to learn.

The formulae written have to be placed somewhere; in this section we will describe its use within Moodle, but WIRIS editor is used in other contexts with a minimum of differences.

There are two ways you can open WIRIS editor:

  • If you want to modify an existing formula, double click on it;
  • If you want to write a new formula, move the cursor to the place you want to write it in, and then click on the icon in the editor toolbar.

editor_in_context

After writing or modifying the formula, click on OK if you want to insert the formula as it is shown, or Cancel if you want to exit without saving changes.

Formulae are treated as any other kind of object:

  • You can select formulae by either clicking on them or by moving the cursor over them while holding the SHIFT key.
  • You can erase formulae by selecting them and pressing delete, or by moving the cursor after (before) them and pressing the delete (supr) key. If you delete a formula accidentally, you can recover it by clicking on the undo icon, .
  • You can cut, copy and paste formulae in the usual way, by pressing CTRL-X, CTRL-C and CTRL-V; this is particularly useful when you have to write several formulae which are very similar. You can apply all of those edition operations to a single formula or to combinations of formulae and text, and you can paste to other WIRIS windows.
  • Some text formatting functions work with formulae; for instance, if you want to center a formula, select it and click on the icon.
28 Jul 2010

The architecture of a system that uses the WIRIS editor with a WIRIS plugins is explained here.

Architecture related to the view mode

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="limit under x to infinity..."
            data-mathml="«math»«munder»«mi»lim«/mi»…«/math»"
            class="Wirisformula" />
    </li>
    <li>
        <img align="middle"
            src="http://.../wrs_showimage.php/ab12ce19d310b571533a4a202a21ujhg.png"
            alt="limit under x to infinity..."
            data-mathml="«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 the textual version of the formula used for accessibility and that can be read by assistive technologies like, for example, JAWS.

The data-mathml 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 «, » (see the page encoding MathML in HTML attributes for more information).

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.

Architecture related to edit mode

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

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 data-mathml 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.

28 Jul 2010

Find in the submenu on the left the available documents.

If you can't find what you are looking for, do not hesitate to message support@wiris.com.

26 Jul 2010

DOWNLOAD

These are installation instructions for Moodle 2.x. There is another page for installation instructions for Moodle 1.x.

It’s important to note that the installation of the WIRIS plugin for Moodle 2.x implies installing two components: the WIRIS plugin for Moodle 2 and a configured version of the WIRIS plugin for TinyMCE.

Moodle 2.7: ATTO integration is expected by early July 14.

Requirements

  • mbstring extension must be installed and enabled in the server.
  • There must be no errors in http://<moodle>/admin/environment.php

1 Install WIRIS plugin for Moodle 2

The WIRIS plugin for Moodle is a Moodle filter. To install the filter, it suffices to copy the content of the package into the folder filter under the root of moodle.
 

2 Install WIRIS plugin for TinyMCE

2.1 For Moodle 2.4, 2.5, 2.6 and 2.7

Starting from Moodle 2.4 WIRIS plugin for TinyMCE is a standard Moodle plugin. To install it just copy the tiny_mce_wiris directory into lib\editor\tinymce\plugins under the root of moodle.

2.2 For Moodle 2.2 and 2.3

  1. Copy the files in TinyMCE plugins folder
    You need to install a pre-configured version of the WIRIS plugin for TinyMCE that can be found here.Unzip the above file and copy the tiny_mce_wiris directory into lib\editor\tinymce\tiny_mce\<tiny_mce-version>\plugins under the root of moodle.
     
  2. Activate the icons in the TinyMCE editor
    Edit the file lib\editor\tinymce\lib.php and before the line (which is by the end of the file)

    return $params;

    insert the following code in dark green

    $params['plugins'] .= ",tiny_mce_wiris";
    $params['theme_advanced_buttons3'] = "tiny_mce_wiris_formulaEditor,tiny_mce_wiris_CAS,|," . $params['theme_advanced_buttons3'];

    return $params;

3  Install WIRIS plugin for Atto (Moodle 2.7)

 To install it just copy the wiris directory into lib\editor\atto\plugins under the root of moodle.

4 Enable the WIRIS plugin for Moodle 2

To enable the WIRIS plugin for Moodle, login as administrator and go to Settings, Site administration, Plugins, Filters and Manage filters. You will see the Wiris filter and you will be able to enable it.

In order to avoid problems, Wiris filter must be the first. For sure it must be placed before Convert URLs into links and images.

Activating the WIRIS filter

5 Check all is OK

The best way to check all is OK is just to create a formula, save and display it.

Additionally there is an info page at http://<moodle>/filter/wiris/info.php. In any issue, please send screenshots of that to support.

26 Jul 2010

There are two important directories:

Integration Cache directory Formula directory
CKEditor <CKEditor>/plugins/ckeditor_wiris/cache <CKEditor>/plugins/ckeditor_wiris/formulas
Cute Editor <Cute Editor>/cuteeditor_wiris/cache <Cute Editor>/cuteeditor_wiris/formulas
FCKEditor <FCKEditor>/editor/plugins/fckeditor_wiris/cache <FCKEditor>/editor/plugins/fckeditor_wiris/formulas
RadEditor <RadEditor>/cuteeditor_wiris/cache <RadEditor>/cuteeditor_wiris/formulas
TinyMCE <TinyMCE>/plugins/tiny_mce_wiris/cache <TinyMCE>/plugins/tiny_mce_wiris/formulas
Xinha <Xinha>/plugins/xinha_wiris/cache <Xinha>/plugins/xinha_wiris/formulas

On Java integration, these paths are provided by you on the configuration.ini file.

Freeing disk space: cleaning the image cache folder

If you want to free your disk space, you can empty the contents of the cache directory. Do not delete the directory but only remove its contents. The cache directory will be repopulated when users view the formulas. 

Important! Do not remove the formula directory because you will lose all your formulas and it will be difficult to recover them. Some plugins, like the Moodle one, do not have this requirement.

Migrating your web server

If you want to migrate your web server, and you want to backup your formula images, you must migrate also the formula directory.

The formula directory contains the MathML of your web site formula images. If these files are removed, you will lose your formulas. Note that the MathML is still stored in the <IMG> tag but it is useless for recovery purposes.