1. The Progress and Work Plan of MathEdit Wei Su wsu@cs.kent.edu 24 September 2007

2. WME Group http://wme.cs.kent.edu/mathedit 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

3. WME Group http://wme.cs.kent.edu/mathedit 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.

4. WME Group http://wme.cs.kent.edu/mathedit 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

5. WME Group http://wme.cs.kent.edu/mathedit MathEdit Authoring Environment 1.Introduction to MathEdit

6. WME Group http://wme.cs.kent.edu/mathedit 1.2 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

7. WME Group http://wme.cs.kent.edu/mathedit Some Examples of Math expression  Demo Demo 1.Introduction to MathEdit

8. WME Group http://wme.cs.kent.edu/mathedit MathEdit Architecture MathEdit Architecture 1.Introduction to MathEdit

9. WME Group http://wme.cs.kent.edu/mathedit 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

10. WME Group http://wme.cs.kent.edu/mathedit 2.1 Template 2. Expression Editing

11. WME Group http://wme.cs.kent.edu/mathedit The Shortcut Key of Tool Button 2. Expression Editing

12. WME Group http://wme.cs.kent.edu/mathedit The Shortcut Key of the Templates (1 of 3) 2. Expression Editing

13. WME Group http://wme.cs.kent.edu/mathedit The Shortcut Key of the Templates (2 of 3) 2. Expression Editing

14. WME Group http://wme.cs.kent.edu/mathedit The Shortcut Key of the Templates (3 of 3) 2. Expression Editing

15. WME Group http://wme.cs.kent.edu/mathedit 2.2 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)

16. WME Group http://wme.cs.kent.edu/mathedit 2.3 Editing Modes MathEdit supports five operational modes:  Visual Edit mode  MathML Content mode  MathML Presentation mode  Infix mode  Preview mode 2. Expression Editing

17. WME Group http://wme.cs.kent.edu/mathedit 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

18. WME Group http://wme.cs.kent.edu/mathedit 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

19. WME Group http://wme.cs.kent.edu/mathedit 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

20. WME Group http://wme.cs.kent.edu/mathedit 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

21. WME Group http://wme.cs.kent.edu/mathedit 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

22. WME Group http://wme.cs.kent.edu/mathedit 3.1 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

23. WME Group http://wme.cs.kent.edu/mathedit 3.2 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

24. WME Group http://wme.cs.kent.edu/mathedit Traversal Navigation 3. Visual Navigation

25. WME Group http://wme.cs.kent.edu/mathedit PageDown Key or Tab Key 3. Visual Navigation

26. WME Group http://wme.cs.kent.edu/mathedit PageUp Key or Shift+Tab 3. Visual Navigation

27. WME Group http://wme.cs.kent.edu/mathedit 3.3 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

28. WME Group http://wme.cs.kent.edu/mathedit Cursor Navigation 3. Visual Navigation

29. WME Group http://wme.cs.kent.edu/mathedit 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

30. WME Group http://wme.cs.kent.edu/mathedit 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);

31. WME Group http://wme.cs.kent.edu/mathedit 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

32. WME Group http://wme.cs.kent.edu/mathedit 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

33. WME Group http://wme.cs.kent.edu/mathedit 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

34. WME Group http://wme.cs.kent.edu/mathedit 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

35. WME Group http://wme.cs.kent.edu/mathedit Thank you ！