The Progress and Work Plan of MathEdit Wei Su 24 September 2007

WME Group Outline 1.Introduction 1.1 MathEdit Overview 1.2 Main Functionalities 2.Expression Editing 2.1 Template 2.2 Entering Expressions 2.3 Editing Modes 3.Visual Navigation 3.1 Basic Navigation 3.2 Traversal Navigation 3.3 Cursor Movement 4.MathEdit API and Example 5.Work Plan

WME Group 1. Introduction  MathEdit is a browser-based tool implemented in JavaScript that provides a convenient and intuitive graphical user interface for creating and editing mathematical expressions as well as a well-defined API for interoperating with its containing Web page. MathEdit can produce MathML Content and Presentation Markup as well as infix expressions for Web applications. The results returned can be displayed in a Web page or used in further computations. Today, I will describe the methods of expression editing, visual navigation, and the MathEdit API. I will also present the examples of using MathEdit in such interactive Web applications as curve plotting and Math-capable BBS.

WME Group The Feature of MathEdit  Works with any popular Web browser  Written in Standard JavaScript and DOM  Works within Independently or embedded in other systems ， such as WME ， MAG, MathPass system  Using MathML Content and Presentation Encoding, Support infix inputting  Extensible and Customizable 1.Introduction to MathEdit

WME Group MathEdit Authoring Environment 1.Introduction to MathEdit

WME Group Main Functionalities  Create a new or edit an existing mathematical expression interactively with a convenient GUI  Direct editing of MathML code and Infix code  Set mathematical expression format and style  Customize toolbar, palette and expression template  Import/Export MathML –Capture and retrieve the MathML markup or Infix from other applications or webpage. – Open an existing MathML file or Infix stored in the local file system or at the originating Web server – Save MathML in a local or remote file –Return the result mathematical encoding (content, presentation, composite and infix) to the parent window 1.Introduction to MathEdit

WME Group Some Examples of Math expression  Demo Demo 1.Introduction to MathEdit

WME Group MathEdit Architecture MathEdit Architecture 1.Introduction to MathEdit

WME Group 2. Expression Editing It is essential to provide convenient and intuitive operations to insert and remove the desired structures, including sub-expressions, operators and characters. MathEdit supports several forms of user input, infix, MathML and template. Infix is convenient for users who are familiar with the notation. For others, the common approach is to use graphical templates that can be selected to enter particular kinds of mathematical expressions such as fractions, square roots, powers, and so on. 2. Expression Editing

WME Group Template 2. Expression Editing

WME Group The Shortcut Key of Tool Button 2. Expression Editing

WME Group The Shortcut Key of the Templates (1 of 3) 2. Expression Editing

WME Group The Shortcut Key of the Templates (2 of 3) 2. Expression Editing

WME Group The Shortcut Key of the Templates (3 of 3) 2. Expression Editing

WME Group Entering Expressions 2. Expression Editing Table 1. Inputting Operation Methods in MathEdit Table 1 shows how the treatment of a new token (row headings) is dependent on the previous token (column headings)

WME Group Editing Modes MathEdit supports five operational modes:  Visual Edit mode  MathML Content mode  MathML Presentation mode  Infix mode  Preview mode 2. Expression Editing

WME Group Visual Edit mode  Generally, the Visual Edit mode is for users to create and edit mathematical expressions interactively.  In Visual Edit mode, the MathML Content code of the currently selected expression is always displayed in the MathEdit status bar. It shows, at a glance, the nesting of the MathML structure at the cursor location, and gives users an easy way to select sub-expressions containing the cursor. 2. Expression Editing

WME Group MathML Mode  In MathML mode, a user can view, enter, and edit MathML source code directly. Copy and paste of MathML code is supported.  There are two kinds of MathML code: Content and Presentation. The Presentation code can’t be edited. 2. Expression Editing

WME Group Infix Mode  In Infix mode a user can enter expressions in infix notation or extract the infix representation of the expression being edited. 2. Expression Editing

WME Group Preview Mode  In Preview mode, the expression is displayed in its final form and no editing is allowed. Previewing is usually the last step before a user is done creating or editing an expression. 2. Expression Editing

WME Group 3. Visual Navigation Convenient visual navigation is important and a user has multiple ways to visually navigate the displayed expression:  basic navigation  traversal navigation  cursor navigation 3. Visual Navigation

WME Group Basic Navigation MathEdit keeps track of the sub- expression and displays a color background to visually identify it to the user. The arrow keys are used to move the current sub-expression up to the parent node down to the first child left/right to sibling nodes. 3. Visual Navigation

WME Group Traversal Navigation  MathEdit also supports a systematic traversal of the entire expression so the user has a way of reaching any node on the tree. By pressing the PageDown key, the current node is moved in a traversal sequence defined by DFS (depth-first search). The PageUp key, on the other hand, provides the inverse-orient traversal. 3. Visual Navigation

WME Group Traversal Navigation 3. Visual Navigation

WME Group PageDown Key or Tab Key 3. Visual Navigation

WME Group PageUp Key or Shift+Tab 3. Visual Navigation

WME Group Cursor Movement  MathEdit also allows the user to use the mouse to move the current node. Now mouse is just supported in Firefox version.  In MathEdit the location of the cursor is indicated by a blinking vertical line. The cursor indicates the current insertion point and may be positioned either to the left or right of the current expression. 3. Visual Navigation

WME Group Cursor Navigation 3. Visual Navigation

WME Group 4. MathEdit API and Example  The MathEdit API, supported by a set of JavaScript functions, allows applications to create an editor instance, sets any initial expression in it, configure its template palette and other GUI features, and set/retrieve the MathML code and Infix code it contains.  There are two methods of applying MathEdit into interactive Web: pop-up window and in-page frame. –pop-up window: user can activate MathEdit by the methods of newMath() or editMathByID(). A pop-up window with MathEdit will open and user can edit their desired math expressions by MathEdit. When user clicks Return button, the object math code (MathML or Infix) will transfer to the main program. –in-page frame: the MathEdit can be embedded in interactive Web by using mathedit(tID,stateStr) to define a new mathedit instance. User can customize the templates and toolbars through MathEdit API function set() 4. MathEdit API and Example

WME Group The MathEdit API Library Method Apply to Description newMath( id, parentId )pop-upCreate a new MathML expression. editMathById( id )pop-upEdit an existing Math Expression by ID. editMath(Str,cType,tID,pID)pop-upEdit an existing Math Expression by MathML or Infix set(attributeName,value)in-pageSet attribute value of the MathEdit instance. display(winID)in-pageDisplay the MathEdit in the page. getAttributeNames()in-pageget all attribute names of the MathEdit instance. getAttributeValues()in-pageget all attribute values of the MathEdit instance. editMathByCode(Str,cType)in-pageEdit an existing Math Expression by MathML or Infix get(attrID)bothGet attribute value of the MathEdit instance. 4. MathEdit API and Example var myInstance = new mathedit(myInstance,stateStr);

WME Group Example 1: Plotting User-Entered Equations  The user first clicks on an icon to pop up the MathEdit tool in order to create a desired formula interactively. When done, the user clicks the return folder icon on the menu bar to close the MathEdit window.  After filling in the plotting range, a click on the plot button triggers JavaScript code, in the enclosing Web page, which obtains the string representation of the formula created via the MathEdit API. The formula string then becomes part of a POST request to a curve plotting program which displays the result 4. MathEdit API and Example

WME Group Example 2: Math-enabled BBS ① Set insert focus or select existed expression ② Call MathEdit ③ Edit expression ④ Return MathML to insert point or replace existed expression 4. MathEdit API and Example Try It

WME Group 5. Work Plan IE VersionFirefox Version NavigationKeyboard (Basic and Traversal)Mouse (Cursor) Main CodeContentPresentation Provide Code Content, Presentation, InfixPresentation Best forSemantic (Computing, Plotting)Display (BBS, typeset) RestrictThe editing Result must be a math expression Can construct a new math expression PluginMathPlayerV1.5 native support 5. Work Plan Need to Improved

WME Group Work Plan-Next Step  Develop Firefox Version Requirement needs to be clear: (Maybe discuss in next week seminar) Content or Presentation Navigation Method (Cursor or Selection)  Improve IE version Collect the feedback and improve the MathEdit

WME Group Thank you ！