GeometryEditor & GeoSiteGeometryEditor & GeoSite(1(1stst test version to be released 01/01/2008) test version to be released 01/01/2008)

Nov. 14, 2007Nov. 14, 2007Xun LaiXun Lai

Department of Computer ScienceDepartment of Computer ScienceKent State UniversityKent State University

GeometryEditor OverviewGeometryEditor Overview

A Dynamic Geometry System to explore matheA Dynamic Geometry System to explore mathematical conceptsmatical concepts• Manipulative authoringManipulative authoring

A Web-based systemA Web-based system• No software installation requiredNo software installation required

(for developers) A package for building more s(for developers) A package for building more sophisticated Web applications that need mathophisticated Web applications that need mathematical drawing supportematical drawing support• GeoSite, BBS, DMAD and so on…GeoSite, BBS, DMAD and so on…

GeoSite OverviewGeoSite Overview

A Web-based applicationA Web-based application• Manipulative authoringManipulative authoring

GeometryEditorGeometryEditor Other authoring tools following some standardsOther authoring tools following some standards

• Educational page authoringEducational page authoring More than normal WYSIWYG HTML editingMore than normal WYSIWYG HTML editing Interaction between manipulatives and surrounding HTMInteraction between manipulatives and surrounding HTM

LL Repository of manipulatives and educational pRepository of manipulatives and educational p

agesages• Can be embedded/reused elsewhereCan be embedded/reused elsewhere

Status of GeometryEditorStatus of GeometryEditor

Progress, goals and implemented featuresProgress, goals and implemented features• http://www.cs.kent.edu/~xlai/geosite/GeometryEdhttp://www.cs.kent.edu/~xlai/geosite/GeometryEd

itor/doc/2007/tasks.htmlitor/doc/2007/tasks.html (04/06-02/07) (04/06-02/07)

• http://www.cs.kent.edu/~xlai/geosite/GeometryEdhttp://www.cs.kent.edu/~xlai/geosite/GeometryEditor/doc/2007/shorttermTasks.txtitor/doc/2007/shorttermTasks.txt (02/07-present) (02/07-present)

• Need to prioritize unfinished requirementsNeed to prioritize unfinished requirements Before or after the release of the first test Before or after the release of the first test

versionversion

• First test version to be released (01/01/08)First test version to be released (01/01/08)

GeometryEditor Modules CompositiGeometryEditor Modules Compositionon

Graphical core (jsmin-ed)Graphical core (jsmin-ed)• 260KB, 18,000 lines of codes, 110 classes260KB, 18,000 lines of codes, 110 classes

GeometryEditor.js: a layer between the graphiGeometryEditor.js: a layer between the graphical core and a client Web applicationcal core and a client Web application• 50KB, 2,000 lines of codes50KB, 2,000 lines of codes

Around 40 types of dialogs and their related JaAround 40 types of dialogs and their related Javascript filesvascript files

Open source libraries used:Open source libraries used:• Dynarch.comDynarch.com DHTML menus DHTML menus (50KB integrated into (50KB integrated into

GeometryEditor.js)GeometryEditor.js)

An authoring toolAn authoring tool

A package for building Web-A package for building Web-applicationsapplications

Documentation:Documentation:• http://wme.cs.kent.edu/geosvg/http://wme.cs.kent.edu/geosvg/

documentation.htmldocumentation.html Selected examples:Selected examples:

• Function plottingFunction plotting• Cutting a circleCutting a circle

Calculator in GeometryEditorCalculator in GeometryEditor

Infix input and MathML displayInfix input and MathML display• has nothing to do with SVGhas nothing to do with SVG

Real-time calculationReal-time calculation Real-time error message feedbackReal-time error message feedback Operands can be objects from the canvasOperands can be objects from the canvas Can handle numeric, boolean and color expresCan handle numeric, boolean and color expres

sionssions Can convert different units in distance and angCan convert different units in distance and ang

lele

Technology detail: algorithms for Technology detail: algorithms for authoring supportsauthoring supports

Skipped….Skipped….• Who is interested???Who is interested???

Technology detail: GeometryEditor.Technology detail: GeometryEditor.jsjs

A layer between the graphical core and a A layer between the graphical core and a client Web applicationclient Web application

Most problems I encountered and solved Most problems I encountered and solved may be helpful to your projectsmay be helpful to your projects

Relates to the Manipulative Architecture Relates to the Manipulative Architecture Dr. Wang has definedDr. Wang has defined• http://www.cs.kent.edu/~xlai/geosite/http://www.cs.kent.edu/~xlai/geosite/

GeometryEditor/doc/2007/manipulativeGeometryEditor/doc/2007/manipulative%20arthitecture.txt%20arthitecture.txt

Will come back to this if time allowsWill come back to this if time allows

Status of GeoSiteStatus of GeoSite GeoSite is just a Web-application built upon GGeoSite is just a Web-application built upon G

eometryEditor eometryEditor • GeometryEditor does NOT provide any special codes for GeoSGeometryEditor does NOT provide any special codes for GeoS

iteite Features that can demonstrate the capability Features that can demonstrate the capability

of GeometryEditor are being developed firstof GeometryEditor are being developed first AJAX is extensively usedAJAX is extensively used First test site will be released with GeometryEFirst test site will be released with GeometryE

ditor (01/01/08)ditor (01/01/08) http://www.cs.kent.edu/~xlai/geosite/viewfolder.html?id=/testehttp://www.cs.kent.edu/~xlai/geosite/viewfolder.html?id=/teste

r1/r1/

Embedding in your page a manipulEmbedding in your page a manipulative from GeoSiteative from GeoSite

Experience with embedding Youtube vidExperience with embedding Youtube videos in your Web pageseos in your Web pages??

GeoSite provides the html codes for you GeoSite provides the html codes for you to embed a manipulative correctlyto embed a manipulative correctly

Example:Example:• http://totemmath.blogspot.com/http://totemmath.blogspot.com/

Again technology detail in GeometrAgain technology detail in GeometryEditor: GeometryEditor.jsyEditor: GeometryEditor.js

is the only javascript file you need to include: is the only javascript file you need to include: • class class GeometryEditorGeometryEditor is in this file is in this file• its constructor creates instancesits constructor creates instances

set up correct connection amongset up correct connection among• the container element the container element • embed elementembed element• window object of the embedded svg document window object of the embedded svg document • pop-up dialogspop-up dialogs• data from an URLdata from an URL

GeometryEditor.js (cont.)GeometryEditor.js (cont.)

Dialog managementDialog management• simulate modal dialog ( checkFocus)simulate modal dialog ( checkFocus)• disable dialog/window belowdisable dialog/window below• cascading closing of dialogs: closing an opener will cascading closing of dialogs: closing an opener will

close its descendent dialogsclose its descendent dialogs• cooperate with the graphical core to determine whcooperate with the graphical core to determine wh

at objects can be selected as an input to the dialogat objects can be selected as an input to the dialog• onload/onunload/onOK/onCancel/onFinish/onStaronload/onunload/onOK/onCancel/onFinish/onStar

t/onApplyt/onApply• communications among dialogscommunications among dialogs

GeometryEditor.js (cont.)GeometryEditor.js (cont.) data retrievingdata retrieving

• able to load data stringable to load data string• able to load a data URL from anywhereable to load a data URL from anywhere

menu/toolbar customization and setting-menu/toolbar customization and setting-upup• customization of system provided customization of system provided

menu/toolbarmenu/toolbar• adding application-defined menu/toolbaradding application-defined menu/toolbar• enable/disable menu items and toolbar buttons enable/disable menu items and toolbar buttons

depending on system statusdepending on system status• setup menu items or toolbar buttons for setup menu items or toolbar buttons for

macrosmacros

GeometryEditor.js (cont.)GeometryEditor.js (cont.)

Serialization of dataSerialization of data• macromacro• data from graphical coredata from graphical core• menu/toolbarmenu/toolbar

GeometryEditor.js (cont.)GeometryEditor.js (cont.)

Callback APIsCallback APIs• Must handle asynchronization correctlyMust handle asynchronization correctly

svg file loadingsvg file loading data update invoked by API (either set dataURL or dataValdata update invoked by API (either set dataURL or dataVal

ue)ue)• from dataURL: asynchronization inavoidablefrom dataURL: asynchronization inavoidable• from dataValue: avoid spendinging too much time interpretifrom dataValue: avoid spendinging too much time interpreti

ng the dataStrng the dataStr• GeometryEditor_OnCreateDoneGeometryEditor_OnCreateDone• GeometryEditor_onUpdateDoneGeometryEditor_onUpdateDone• onObjectChangeListeneronObjectChangeListener• onSaveListeneronSaveListener

GeometryEditor.js (cont.)GeometryEditor.js (cont.)

Non-callback APIsNon-callback APIs• addMenuset()addMenuset()• addToolbarset()addToolbarset()• getDataValue()getDataValue()• getInitDataValue()getInitDataValue()• getDataURL()getDataURL()• addMacro()addMacro()• getMacro()getMacro()• get()get()• addObjectChangeListener()addObjectChangeListener()

More APIs??More APIs??

It’s possible to provide APIs likeIt’s possible to provide APIs like• newCS( x, y, … ) // coordinate systemnewCS( x, y, … ) // coordinate system• newPoint( x, y )newPoint( x, y )• newLine( point1, point2 )newLine( point1, point2 )• newLine( equation )newLine( equation )

Are they needed?Are they needed? Need to see more requirementsNeed to see more requirements

Future workFuture work

Release the first test version 01/01/2008Release the first test version 01/01/2008• Where to announce it?Where to announce it?

MathforumMathforum• geometry-software-dynamic@support1.mathforum.org geometry-software-dynamic@support1.mathforum.org

SVG groupSVG group• http://www.svg.org/http://www.svg.org/• svg-developers@yahoogroups.comsvg-developers@yahoogroups.com

More ??More ?? Collect feedbacksCollect feedbacks Finish features listed in that Finish features listed in that shorttermTasks.txtshorttermTasks.txt fi fi

lele