The Progress and Work Plan of MathEdit

1
The Progress and Work Plan of MathEdit
Wei Su wsu_at_cs.kent.edu 24 September 2007
2
Outline

1. Introduction1.1 MathEdit Overview1.2 Main
   Functionalities
2. Expression Editing 2.1 Template 2.2 Entering
   Expressions2.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
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
The Feature of MathEdit
1.Introduction to 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

5
MathEdit Authoring Environment
1.Introduction to MathEdit
6
1.2 Main Functionalities
1.Introduction to MathEdit

• 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

7
Some Examples of Math expression
1.Introduction to MathEdit

• Demo

8
MathEdit Architecture
1.Introduction to MathEdit
9
2. Expression Editing
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.

10
2.1 Template
2. Expression Editing
11
The Shortcut Key of Tool Button
2. Expression Editing
12
The Shortcut Key of the Templates (1 of 3)
2. Expression Editing
13
The Shortcut Key of the Templates (2 of 3)
2. Expression Editing
14
The Shortcut Key of the Templates (3 of 3)
2. Expression Editing
15
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
2.3 Editing Modes
2. Expression Editing

• MathEdit supports five operational modes
• Visual Edit mode
• MathML Content mode
• MathML Presentation mode
• Infix mode
• Preview mode

17
Visual Edit mode
2. Expression Editing

• 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.

18
MathML Mode
2. Expression Editing

• 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 cant be
  edited.

19
Infix Mode
2. Expression Editing

• In Infix mode a user can enter expressions in
  infix notation or extract the infix
  representation of the expression being edited.

20
Preview Mode
2. Expression Editing

• 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.

21
3. Visual Navigation
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

22
3.1 Basic Navigation
3. Visual 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.

23
3.2 Traversal Navigation
3. Visual 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.

24
Traversal Navigation
3. Visual Navigation
25
PageDown Key or Tab Key
3. Visual Navigation

26
PageUp Key or ShiftTab
3. Visual Navigation

27
3.3 Cursor Movement
3. Visual Navigation

• 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.

28
Cursor Navigation
3. Visual Navigation
29
4. MathEdit API and Example
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()

30
The MathEdit API Library
4. MathEdit API and Example
var myInstance new mathedit(myInstance,stateStr)

Method Apply to Description
newMath( id, parentId ) pop-up Create a new MathML expression.
editMathById( id ) pop-up Edit an existing Math Expression by ID.
editMath(Str,cType,tID,pID) pop-up Edit an existing Math Expression by MathML or Infix
set(attributeName,value) in-page Set attribute value of the MathEdit instance.
display(winID) in-page Display the MathEdit in the page.
getAttributeNames() in-page get all attribute names of the MathEdit instance.
getAttributeValues() in-page get all attribute values of the MathEdit instance.
editMathByCode(Str,cType) in-page Edit an existing Math Expression by MathML or Infix
get(attrID) both Get attribute value of the MathEdit instance.
31
Example 1 Plotting User-Entered Equations
4. MathEdit API and Example

• 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

32
Example 2 Math-enabled BBS
4. MathEdit API and Example
Try It

1. Set insert focus or select existed expression
2. Call MathEdit
3. Edit expression
4. Return MathML to insert point or replace existed
   expression

33
5. Work Plan
5. Work Plan
Need to Improved
IE Version Firefox Version
Navigation Keyboard (Basic and Traversal) Mouse (Cursor)
Main Code Content Presentation
Provide Code Content, Presentation, Infix Presentation
Best for Semantic (Computing, Plotting) Display (BBS, typeset)
Restrict The editing Result must be a math expression Can construct a new math expression
Plugin MathPlayer V1.5 native support
34
Work Plan-Next Step

• Develop Firefox Version
• Requirement needs to be clear (Maybe discuss
  in next week seminar)Content or
  PresentationNavigation Method (Cursor or
  Selection)
• Improve IE versionCollect the feedback and
  improve the MathEdit

35
Thank you!