GeometryEditor & GeoSite (1 st test version to be released 01/01/2008) Nov. 14, 2007 Xun Lai Department of Computer Science Kent State University

GeometryEditor Overview A Dynamic Geometry System to explore mathematical concepts A Dynamic Geometry System to explore mathematical concepts Manipulative authoringManipulative authoring A Web-based system A Web-based system No software installation requiredNo software installation required (for developers) A package for building more sophisticated Web applications that need mathematical drawing support (for developers) A package for building more sophisticated Web applications that need mathematical drawing support GeoSite, BBS, DMAD and so on …GeoSite, BBS, DMAD and so on …

GeoSite Overview A Web-based application A Web-based application Manipulative authoringManipulative authoring GeometryEditor GeometryEditor Other authoring tools following some standards Other authoring tools following some standards Educational page authoringEducational page authoring More than normal WYSIWYG HTML editing More than normal WYSIWYG HTML editing Interaction between manipulatives and surrounding HTML Interaction between manipulatives and surrounding HTML Repository of manipulatives and educational pages Repository of manipulatives and educational pages Can be embedded/reused elsewhereCan be embedded/reused elsewhere

Status of GeometryEditor Progress, goals and implemented features Progress, goals and implemented features ditor/doc/2007/tasks.html (04/06-02/07) ditor/doc/2007/tasks.html (04/06-02/07) ditor/doc/2007/tasks.htmlhttp:// ditor/doc/2007/tasks.html ditor/doc/2007/shorttermTasks.txt (02/07- present) ditor/doc/2007/shorttermTasks.txt (02/07- present) ditor/doc/2007/shorttermTasks.txthttp:// ditor/doc/2007/shorttermTasks.txt Need to prioritize unfinished requirementsNeed to prioritize unfinished requirements Before or after the release of the first test version Before or after the release of the first test version First test version to be released (01/01/08)First test version to be released (01/01/08)

GeometryEditor Modules Composition 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 graphical core and a client Web application GeometryEditor.js: a layer between the graphical 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 Javascript files Around 40 types of dialogs and their related Javascript files Open source libraries used: Open source libraries used: Dynarch.com DHTML menus (50KB integrated into GeometryEditor.js)Dynarch.com DHTML menus (50KB integrated into GeometryEditor.js)Dynarch.com DHTML menusDynarch.com DHTML menus

An authoring tool

A package for building Web- applications Documentation: Documentation: ntation.htmlhttp://wme.cs.kent.edu/geosvg/docume ntation.htmlhttp://wme.cs.kent.edu/geosvg/docume ntation.htmlhttp://wme.cs.kent.edu/geosvg/docume ntation.html Selected examples: Selected examples: Function plottingFunction plottingFunction plottingFunction plotting Cutting a circleCutting a circleCutting a circleCutting a circle

Calculator in GeometryEditor Infix input and MathML display Infix input and MathML display has nothing to do with SVGhas nothing to do with SVG Real-time calculation Real-time calculation Real-time error message feedback Real-time error message feedback Operands can be objects from the canvas Operands can be objects from the canvas Can handle numeric, boolean and color expressions Can handle numeric, boolean and color expressions Can convert different units in distance and angle Can convert different units in distance and angle

Technology detail: algorithms for authoring supports Skipped …. Skipped …. Who is interested???Who is interested???

Technology detail: GeometryEditor.js A layer between the graphical core and a client Web application A layer between the graphical core and a client Web application Most problems I encountered and solved may be helpful to your projects Most problems I encountered and solved may be helpful to your projects Relates to the Manipulative Architecture Dr. Wang has defined Relates to the Manipulative Architecture Dr. Wang has defined ryEditor/doc/2007/manipulative%20arthitectur e.txthttp:// ryEditor/doc/2007/manipulative%20arthitectur e.txt Will come back to this if time allows Will come back to this if time allows

Status of GeoSite GeoSite is just a Web-application built upon GeometryEditor GeoSite is just a Web-application built upon GeometryEditor GeometryEditor does NOT provide any special codes for GeoSiteGeometryEditor does NOT provide any special codes for GeoSite Features that can demonstrate the capability of GeometryEditor are being developed first Features that can demonstrate the capability of GeometryEditor are being developed first AJAX is extensively used AJAX is extensively used First test site will be released with GeometryEditor (01/01/08) First test site will be released with GeometryEditor (01/01/08) tester1/ tester1/ tester1/ tester1/

Embedding in your page a manipulative from GeoSite Experience with embedding Youtube videos in your Web pages? Experience with embedding Youtube videos in your Web pages? GeoSite provides the html codes for you to embed a manipulative correctly GeoSite provides the html codes for you to embed a manipulative correctly Example: Example:

Again technology detail in GeometryEditor: GeometryEditor.js is the only javascript file you need to include: is the only javascript file you need to include: class GeometryEditor is in this fileclass GeometryEditor is in this file its constructor creates instancesits constructor creates instances set up correct connection among set up correct connection among the container elementthe container element embed elementembed element window object of the embedded svg documentwindow object of the embedded svg document pop-up dialogspop-up dialogs data from an URLdata from an URL

GeometryEditor.js (cont.) Dialog management Dialog management simulate modal dialog ( checkFocus)simulate modal dialog ( checkFocus) disable dialog/window belowdisable dialog/window below cascading closing of dialogs: closing an opener will close its descendent dialogscascading closing of dialogs: closing an opener will close its descendent dialogs cooperate with the graphical core to determine what objects can be selected as an input to the dialogcooperate with the graphical core to determine what objects can be selected as an input to the dialog onload/onunload/onOK/onCancel/onFinish/onS tart/onApplyonload/onunload/onOK/onCancel/onFinish/onS tart/onApply communications among dialogscommunications among dialogs

GeometryEditor.js (cont.) data retrieving data 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- up menu/toolbar customization and setting- up customization of system provided menu/toolbarcustomization of system provided menu/toolbar adding application-defined menu/toolbaradding application-defined menu/toolbar enable/disable menu items and toolbar buttons depending on system statusenable/disable menu items and toolbar buttons depending on system status setup menu items or toolbar buttons for macrossetup menu items or toolbar buttons for macros

GeometryEditor.js (cont.) Serialization of data Serialization of data macromacro data from graphical coredata from graphical core menu/toolbarmenu/toolbar

GeometryEditor.js (cont.) Callback APIs Callback APIs Must handle asynchronization correctlyMust handle asynchronization correctly svg file loading svg file loading data update invoked by API (either set dataURL or dataValue) data update invoked by API (either set dataURL or dataValue) from dataURL: asynchronization inavoidablefrom dataURL: asynchronization inavoidable from dataValue: avoid spendinging too much time interpreting the dataStrfrom dataValue: avoid spendinging too much time interpreting the dataStr GeometryEditor_OnCreateDoneGeometryEditor_OnCreateDone GeometryEditor_onUpdateDoneGeometryEditor_onUpdateDone onObjectChangeListeneronObjectChangeListener onSaveListeneronSaveListener

GeometryEditor.js (cont.) Non-callback APIs Non-callback APIs addMenuset()addMenuset() addToolbarset()addToolbarset() getDataValue()getDataValue() getInitDataValue()getInitDataValue() getDataURL()getDataURL() addMacro()addMacro() getMacro()getMacro() get()get() addObjectChangeListener()addObjectChangeListener()

More APIs?? It ’ s possible to provide APIs like It ’ 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 requirements Need to see more requirements

Future work Release the first test version 01/01/2008 Release the first test version 01/01/2008 Where to announce it?Where to announce it? Mathforum Mathforum SVG group SVG group More ?? More ?? Collect feedbacks Collect feedbacks Finish features listed in that shorttermTasks.txt file Finish features listed in that shorttermTasks.txt file shorttermTasks.txt