The WIRIS Formula Editor is comprised of the Formula Image Service and Applet Editor. This document explains how to install and use such components.

You will normally use the WIRIS Formula Editor with a Formula plugin but there are occasions where the WIRIS Formula Editor can be use alone. For example, a learning platform could provide a quizzes system and the students could type the answer of the mathematical questions with the WIRIS Formula Editor.

Raw Editor

Components

Requirements

Download and installation

Testing and using the formula editor applet

Applet parameters

Testing and using the image service

Image service parameters

WIRIS Formula Editor is comprised of the following components

1. A visual formula editor based on the Java Applets technology which can be embedded in any Web form to allow editing formulas. This editor supports the MathML Presentation standard.
2. An image service based on the Java Servlets technology which translates from MathML to images. The image service can be used to embed formulas in HTML pages without the need of any plug-in.
3. A set of HTML pages to test both the formula editor and the image service.

In the server side, to run the image service, the following requirements are needed:

1. Java 1.4 or higher
2. A Java Web application server (like Tomcat).

The clients that need to edit formulas will require:

1. The Java plug-in for the Web Browser installed and enabled.

Do the following steps

1. Download the formula-XXX.war from http://www.wiris.com/portal/node/368
2. Change the name into formula.war and deploy it in the application server (see the specific documentation of your application server).

Note. In linux or unix servers, when the X libraries are not available the image service might be unable to generate any image. To fix it, the Java property java.awt.headless must be set to true. See

http://www.jguru.com/faq/view.jsp?EID=222296 or http://java.sun.com/developer/technicalArticles/J2SE/Desktop/headless/

 

To test the formula editor, open the URL http://<server>/formula/editor.html where <server> is the server and port of the application server. You should see the following:

This Web page (editor.html and util.js) is an example of how using the formula editor. To get or set the MathML from/to the editor the following methods are available from JavaScript

String getContent()
void setContent(String s)

Applet parameters

The applet supports the following parameters

Name	Type	Description	Default value
content	string-MathML	The initial formula shown by the formula editor. This is an alternative to use setContent.
fontSize	integer	The base font size used by the formula editor	16
bgColor	color	Background color of the image. Ignored if transparency set to true.	#FFFFFF (white)
lang	string	Two letters indicating the language of the user interface. Available languages: ar, ca, de, es, et, en, eu, fr, gl, it, nl, pt, zh	en
identColor symbolColor numberColor	color	Can be used to control the colors of different parts of the formula.	#000000 (black)

The page http://<domain:port>/formula/parameters.html  (former http://<domain:port>/formula/codebase/parameters-editor.html) can be used to test the above parameters.

Enter http://<domain:port>/formula/ to see the main page of the formula editor. The link formula/render points to where the image service is located (it will not work unless the mml parameter with the formula is set). To see a full example, go to Test page.

The image service generates PNG images from xml documents representing a formula. The xml code must be in the MathML format. To generate an image you must send the corresponding parameters using the HTTP GET or POST method to the image service URL. There is only one required parameter, which is the xml code representing the formula; this parameter is called mml.

Image service parameters

In addition to mml, the image service supports all the following parameters:

Name	Type	Description	Default value
mml	string-MathML	The initial formula shown by the editor
fontSize	integer	The base font size used by the formula	16
centerBaseline	boolean	If true the baseline of the formula is always in the center of the image so the image can be aligned with the text in html document (when using the align=center attribute for the image)	false
transparency	boolean	If true the image has a transparent background. Note that for Microsoft Internet Explorer browsers prior to version 7, a grey background is displayed instead.	false
bgColor	color	Background color of the image. Ignored if transparency set to true.	#FFFFFF (white)
identColor symbolColor numberColor	color	Can be used to control the colors of different parts of the formula.	#000000 (black)