39
MathEdit: A Web-based Visual MathEdit: A Web-based Visual Interactive Editor for Mathematical Interactive Editor for Mathematical Expressions Expressions Wei Su ( 苏苏 ) 1 , Paul S.Wang 2 and Lian Li ( 苏苏 ) 1 Department of Computer Science, Lanzhou University, PRC Department of Computer Science, Kent State University, USA [email protected] 2009-11

MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

Embed Size (px)

Citation preview

Page 1: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

MathEdit: A Web-based Visual Interactive Editor MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressionsfor Mathematical Expressions

Wei Su (苏伟 )1, Paul S.Wang 2 and Lian Li (李廉 ) 1 Department of Computer Science, Lanzhou University, PRC Department of Computer Science, Kent State University, USA [email protected]

2009-11

Page 2: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

OutlineOutline

1. Background

2. Introduction

3. Input methods

4. Output format

5. Customization and MathEdit API

6. Content-based Editing and Presentation-based Editing

7. Comparison

Page 3: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

1. Background1. Background

WME is a modern distributed system on the Web for mathematics education. The approach is to provide each participating school with a website that is comprehensive, well-organized, dynamic, interactive, hands-on and ready to use by teachers for mathematics teaching in the classroom.

Page 4: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

BackgroundBackground

1. A totally Web-based tool for the interactive entering and editing of mathematical expressions especially for applying the Web in of mathematics, science, and technology.

2. The editor should be easy to use and provide an intuitive GUI for editing mathematical expressions

3. This editor must be easily integrated with the Web-based systems. And the entered expressions should be encoded as common formats which have interoperability with other programs .

4. The editor must also be flexible, customizable and extensible to address different user groups at various levels.

Page 5: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

Background (cont.)Background (cont.)

5. The editor should satisfy two distinct needs for mathematical expressions

– Capturing meaning and semantics (Content)

The expressions can be used to compute, prove and plot

– Describing the visual appearance (Presentation)

The expressions can be used to display, typeset in the applications or on the Web.

Page 6: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

MathMLMathML

The Mathematical Markup Language (MathML), a W3C standard, supports both a presentation encoding and a content encoding for the different purposes.

Page 7: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

2. Introduction2. Introduction

• MathEdit, a Web-based visual interactive mathematical expression editor, aims to provide an integrated solution of on-line entering and editing of mathematical expressions.

Page 8: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

MathEdit Overview MathEdit Overview

MathEdit provides convenient and intuitive graphical user interface.

It provides MathML-Content based editing and MathML-Presentation based editing.

MathML, OpenMath, LaTex, Infix, Picture (Gif, Png), PDF could be generated by MathEdit.

It also provides well-defined API.

It can work with IE and the Mozilla-family browsers

Written in JavaScript and MathML.

Developed jointly by Lanzhou university/China and Kent State University/USA .

Page 9: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

MathEdit Authoring EnvironmentMathEdit Authoring Environment

Page 10: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

The Feature of MathEditThe Feature of MathEdit

Totally Web-based tool

Integrate Content-based editing and Presentation-based editing

Easy to use, what you see is what you get

Various editing mode

Adaptable and customizable

Easily to include in your web application

Open source and Free

Page 11: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

The architecture of MathEditThe architecture of MathEdit

Page 12: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

Some Examples of Math expressionSome Examples of Math expression

Demo

Page 13: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

3 Input Methods in MathEdit3 Input Methods in MathEdit

Full-visual Input Style

In full-visual input style the expression is edited by directly manipulating and navigating its on-screen display.

Character-string Input Style

In character-string input style editing can be done via infix or some other string representations of the expression.

Page 14: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

3.1. Visual Navigation3.1. Visual Navigation

Convenient visual navigation is important and a user has two ways to visually navigate the displayed expression:

Basic Navigation Traversal Navigation Mouse Click

Page 15: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

Basic Navigation 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.

▪MathEdit also allows the user to use the mouse click to select single operand.

Page 16: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

Traversal Navigation 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.

Page 17: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

PageDown Key or Tab KeyPageDown Key or Tab Key

Page 18: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

PageUp Key or PageUp Key or Shift+TabShift+Tab

Page 19: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

3.2 Standard Infix Format3.2 Standard Infix Format

In all the character-sting input formats, infix is the most readable and efficient for entering mathematical expressions.

Infix is also most widely used in computing systems such as computer algebra systems (maple, mathematica, maxima), general-purpose programming languages, and electronic calculators.

Unlike being concerned with presentation in asciimathml and MS word, the standard infix format represents the semantic content of mathematical expressions with proper typographical display.

Page 20: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

Standard Infix FormatStandard Infix Format

Page 21: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

ExampleExample

(sin(AL)-cos(x^2))/sqrt(x^3+1)

Page 22: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

MathEdit Infix VersionMathEdit Infix Version

Page 23: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

4. Output Format4. Output Format

Page 24: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

ConversionConversion

Mathematical Expression Conversion Web Service can be accessed at http://www.mathedit.org/mets/

Page 25: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

5. Web API and Customization 5. Web API and Customization

Page 26: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

User-customizable ConfigurationsUser-customizable Configurations

1. GUI properties such as the toolbar, the input palettes and other properties

2. Input methods and output formats

3. Editing mode such as Presentation-based editing, Content-based editing or mix editing mode

4. Initial mathematical expression for editing

5. Shortcut key for entering and editing formula

6. Templates and corresponding MathML

7. Mathematical functions

Page 27: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

Web APIWeb API

var matheditWin2=new mathedit("matheditWin2");

matheditWin2.set("editmode","content");

matheditWin2.set("EditorSize","286,100");

matheditWin2.set("toolbarID","tnew,tundo,tredo,tcut,tcopy,tpaste");

matheditWin2.set("templateID","s1sqrt,s1root,s1sup,s1divides,s3log");

matheditWin2.display("embed2");

var mathmlpst=matheditWind2.get("mmlpresentation");

var infixm=matheditWind2.get("infix");

Page 28: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

MathEdit Usage ExamplesMathEdit Usage Examples

Page 29: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

6. Content-based editing Vs. Presentation-based editing6. Content-based editing Vs. Presentation-based editing

Content

perform computations indicated by the formulas (semantics)

Presentation:

visually display mathematical formulas

Page 30: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

Content-based editing and Presentation-based editingContent-based editing and Presentation-based editing

The two distinct needs for mathematical expressions are to visually display mathematical formulas and to perform computations indicated by the formulas. The former is the presentation aspect whereas the latter is the semantics aspect of a mathematical expression.

By customizing by MathEdit API, MathEdit supports Content-based editing and Presentation-based editing for the two purpose of entering mathematical expression mention above.

Page 31: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

For MathEditFor MathEdit

we must improve the ability for capturing semantic meaning in content-based editing and describing more layout appearances in presentation-based editing, very different requirements indeed.

But our editor should provide a uniform user interface, coherent user interactions, and same output results in both of these modes.

Page 32: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

Well-formedWell-formed

Page 33: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

Presentation-based editingPresentation-based editing

Presentation-based editing enables users to enter arbitrary expressions that may or may not have widely accepted mathematical meaning or may not be mathematical at all.

Page 34: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

The Difference between Content-based Editing The Difference between Content-based Editing and Presentation-based Editingand Presentation-based Editing

Page 35: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

Integrated for Content and PresentationIntegrated for Content and Presentation

Page 36: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

7. Compare the other editors with MathEdit 7. Compare the other editors with MathEdit

Page 37: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

MathBoardMathBoard

Page 38: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

MathEdit UsersMathEdit Users

More than 200 users downloaded MathEdit from April 2009

The Users came from 32 countries, including: China , USA, UK, India, Greece, Brazil, Argentina, Germany, Romania, Finland, Canada, Nigeriam, Philippines, Colombia, Malaysia, Austrilia, Iran, Japan, Korea,…

25 universities, including:University of Oxford, Bluesky Academy, Korea University, NTU, NAU, OSU, University of Toronto, College of Charleston

Some companies:IDEAL Group Inc.,June Inc.,TSL Jamaica Ltd,and pellissippi State Tech CC,GMA Enterprise.

Page 39: MathEdit: A Web-based Visual Interactive Editor for Mathematical Expressions Wei Su ( 苏伟 ) 1, Paul S.Wang 2 and Lian Li ( 李廉 ) 1 Department of Computer

ICCM Lab

http://www.mathedit.org

Lanzhou University

Thank you!