The Progress and Work Plan of MathEdit - PowerPoint PPT Presentation

About This Presentation
Title:

The Progress and Work Plan of MathEdit

Description:

It is essential to provide convenient and intuitive operations to insert and ... Infix is convenient for users who are familiar with the notation. ... – PowerPoint PPT presentation

Number of Views:20
Avg rating:3.0/5.0
Slides: 36
Provided by: csK4
Learn more at: https://www.cs.kent.edu
Category:

less

Transcript and Presenter's Notes

Title: 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!
Write a Comment
User Comments (0)
About PowerShow.com