Title: The Progress and Work Plan of MathEdit
1The Progress and Work Plan of MathEdit
Wei Su wsu_at_cs.kent.edu 24 September 2007
2Outline
- Introduction1.1 MathEdit Overview1.2 Main
Functionalities - Expression Editing 2.1 Template 2.2 Entering
Expressions2.3 Editing Modes - Visual Navigation 3.1 Basic Navigation 3.2
Traversal Navigation 3.3 Cursor Movement - MathEdit API and Example
- Work Plan
31. 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.
4The 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
5MathEdit Authoring Environment
1.Introduction to MathEdit
61.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
7Some Examples of Math expression
1.Introduction to MathEdit
8 MathEdit Architecture
1.Introduction to MathEdit
92. 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.
102.1 Template
2. Expression Editing
11The Shortcut Key of Tool Button
2. Expression Editing
12The Shortcut Key of the Templates (1 of 3)
2. Expression Editing
13The Shortcut Key of the Templates (2 of 3)
2. Expression Editing
14The Shortcut Key of the Templates (3 of 3)
2. Expression Editing
152.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)
162.3 Editing Modes
2. Expression Editing
- MathEdit supports five operational modes
- Visual Edit mode
- MathML Content mode
- MathML Presentation mode
- Infix mode
- Preview mode
17Visual 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.
18MathML 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.
19Infix 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.
20Preview 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.
213. 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
223.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.
233.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.
24Traversal Navigation
3. Visual Navigation
25PageDown Key or Tab Key
3. Visual Navigation
26PageUp Key or ShiftTab
3. Visual Navigation
273.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.
28Cursor Navigation
3. Visual Navigation
294. 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()
30The 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.
31Example 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
32Example 2 Math-enabled BBS
4. MathEdit API and Example
Try It
- Set insert focus or select existed expression
- Call MathEdit
- Edit expression
- Return MathML to insert point or replace existed
expression
335. 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
34Work 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
35Thank you!