1. GeometryEditor & GeoSite March 07, 2007 Xun Lai

2. Part One: User’s Point of View Part Two: Developer’s Point of View Part Three: Technical Point of View

3. Part One: User’s Point of View

4. Part One: User’s Point of View GeometryEditor (previously GeoSVG)

5. How a manipulative looks like Menu Menu Toolbar Toolbar Graphical area Graphical area

6. How a manipulative looks like

7. Working Environment Purely based on HTML and SVG (no longer use XUL Purely based on HTML and SVG (no longer use XUL Full Features (menu, toolbar, the graphical area, and interaction between SVG and HTML) work Full Features (menu, toolbar, the graphical area, and interaction between SVG and HTML) work on Firefox on all platformson Firefox on all platforms on Windows IE with ASVon Windows IE with ASV on Opera (partially test)on Opera (partially test) Only graphical area works Only graphical area works on Mac Safari with ASVon Mac Safari with ASV on Netscape on all platformson Netscape on all platforms

8. Authoring Supports Drawing tools Drawing tools Selection and draggingSelection and dragging PencilPencil PointPoint Line/Ray/SegmentLine/Ray/Segment CircleCircle MacroMacro

9. Drawing tools

10. Authoring Supports (cont.) Construction Construction MidPoint of segmentMidPoint of segment Circle of a center and a segmentCircle of a center and a segment Parallel/Perpendicular LineParallel/Perpendicular Line PolygonPolygon Point on a Line/CirclePoint on a Line/Circle Perpendicular PointPerpendicular Point Parallelogram PointParallelogram Point

11. Construction

12. Authoring Supports (cont.) Advanced construction (dialog-based) Advanced construction (dialog-based) Synchronized CopySynchronized Copy IterationIteration CalculationCalculation

13. Authoring Supports (cont.) Transformation Transformation TranslationTranslation RotationRotation ReflectionReflection DilationDilation

14. Transformation

15. Authoring Supports (cont.) Measurement Measurement Line length, and slopeLine length, and slope Circle radius, diameter, circumference, and areaCircle radius, diameter, circumference, and area Polygon perimeter, and areaPolygon perimeter, and area Distance between a point and a point/line/circleDistance between a point and a point/line/circle AngleAngle Coordinates, abscissa, and ordinateCoordinates, abscissa, and ordinate

16. Measurement

17. Authoring Supports (cont.) Graphing and supports for different unit systems (partially done) Graphing and supports for different unit systems (partially done) Coordinate systemCoordinate system Point plottingPoint plotting Function definition and plottingFunction definition and plotting Rulers in different units (inch, cm or a coordinate system)Rulers in different units (inch, cm or a coordinate system) ProtractorProtractor GridsGrids

18. Graphing

19. Rulers, Protractor, and Grids

20. Authoring Supports (cont.) Action buttons Action buttons Show/HideShow/Hide MovementMovement PresentationPresentation Circulation EventsCirculation Events AnimationAnimation Synchronized Copy (to be finished)Synchronized Copy (to be finished)

21. Action Buttons

22. Authoring Supports (cont.) Simple user input and text block support in the SVG area Simple user input and text block support in the SVG area

23. Authoring Supports (cont.) Basic statistics supports Basic statistics supports Min/Max, Median, Q1/Q3, and Count of a sequence of measurements of user inputsMin/Max, Median, Q1/Q3, and Count of a sequence of measurements of user inputs

24. Basic statistics supports

25. Dialogs Assisting Authoring Property dialogs Property dialogs Calculator Calculator Synchronized Copy dialog Synchronized Copy dialog Iteration dialog Iteration dialog Transformation dialogs Transformation dialogs Menu/Toolbar customization dialogs Menu/Toolbar customization dialogs Animation dialog Animation dialog And so on …… And so on ……

26. Property Dialog

27. Translation Dialog

28. Calculator

29. Synchronized Copy Dialog

30. Dialogs Assisting Authoring (cont.) They are all pop-up browser windows They are all pop-up browser windows Must set the browser to allow pop-up windows from the Web site using the GeometryEditor systemMust set the browser to allow pop-up windows from the Web site using the GeometryEditor system Mechanism to simulate modal windows as in installable applications (details in technical point of view)Mechanism to simulate modal windows as in installable applications (details in technical point of view)

31. Menu and Toolbar Customization System commands System commands Each system command can be represented as a menu item or a toolbar button, or bothEach system command can be represented as a menu item or a toolbar button, or both Customization Customization An author can customize what menu items and toolbar buttons to be with a manipulativeAn author can customize what menu items and toolbar buttons to be with a manipulative Learning view Learning view

32. Menu Customization Dialog

33. Menu and Toolbar Enabling and Disabling Menu items and toolbar buttons can be enabled or disabled based on the objects selected and the current system status Menu items and toolbar buttons can be enabled or disabled based on the objects selected and the current system status More details in technical point of viewMore details in technical point of view

34. Undo and Redo Unlimited undo and redo for Unlimited undo and redo for Object(s) creationObject(s) creation Object(s) deletionObject(s) deletion Object(s) movementObject(s) movement And some other operationsAnd some other operations

35. Delete Deletion of selected objects Deletion of selected objects

36. Macro Support Grouping several steps into one command Grouping several steps into one command Objects involved with a macro are divided into (more in technical point of view) Objects involved with a macro are divided into (more in technical point of view) GivensGivens Selected by a user from an object on the canvas Selected by a user from an object on the canvas Automatically generated Automatically generated Associated with an object on the canvas (to be finished) Associated with an object on the canvas (to be finished) ResultsResults A macro can come from a data string or a URL (more in developer ’ s point of view) A macro can come from a data string or a URL (more in developer ’ s point of view) Examples Examples

37. Synchronized Copy Synchronized copy dialog Synchronized copy dialog The mathematical relations among copied objects are always the same as the source objectsThe mathematical relations among copied objects are always the same as the source objects Action button for synchronized copy (to be finished) Action button for synchronized copy (to be finished) An author can define a button. When the button is clicked, a group of objects will be duplicated.An author can define a button. When the button is clicked, a group of objects will be duplicated.

38. Features to be finished (GeometryEditor) System unit definition *** System unit definition *** Locus and envelops *** Locus and envelops *** Arcs * Arcs * Conics * Conics * Animation dialog *** Animation dialog *** Action Button for synchronized copy *** Action Button for synchronized copy *** Integration of MathML into the calculator ** Integration of MathML into the calculator ** Around 40 small improvements and new features */**/*** Around 40 small improvements and new features */**/***

39. Status of GeometryEditor The first trial version will be ready hopefully by the end of this semester The first trial version will be ready hopefully by the end of this semester A progress table A progress table http://boar.cs.kent.edu/geosite/GeometryEditor/doc/20 07/tasks.htmlhttp://boar.cs.kent.edu/geosite/GeometryEditor/doc/20 07/tasks.html although it can be understood only by mealthough it can be understood only by me User manual and training materials needed User manual and training materials needed

40. Part One: User’s Point of View GeoSite

41. GeoSite Features A Web application based on A Web application based on GeometryEditoor: for manipulative authoringGeometryEditoor: for manipulative authoring FCKeditor: for HTML section authoringFCKeditor: for HTML section authoring Web-based authoring Web-based authoring No software installation requiredNo software installation required Manipulatives and HTML pages publishing immediatelyManipulatives and HTML pages publishing immediately

42. GeoSite Features (cont.) Resource sharing Resource sharing Manipulatives and pages are grouped under different usersManipulatives and pages are grouped under different users Viewing, copying, or linking other users ’ manipulatives is easyViewing, copying, or linking other users ’ manipulatives is easy An author ’ s manipulative can be manipulated by other users, and manipulation results can be submittedAn author ’ s manipulative can be manipulated by other users, and manipulation results can be submitted An author on GeoSite A can create pages that embed manipulatives from GeoSite B; Macros can also be requested across multiple GeoSitesAn author on GeoSite A can create pages that embed manipulatives from GeoSite B; Macros can also be requested across multiple GeoSites

43. GeoSite Features (cont.) Interaction Interaction Manipulatives are interativeManipulatives are interative Manipulatives and HTML sections are interativeManipulatives and HTML sections are interative HTML sections can retrieve data from manipulatives HTML sections can retrieve data from manipulatives HTML sections can drive manipulatives HTML sections can drive manipulatives

44. Status of GeoSite Will be my focus after GeometryEditor is done Will be my focus after GeometryEditor is done User account management User account management Features mentioned in previous slides Features mentioned in previous slides Web services across multiple GeoSites Web services across multiple GeoSites

45. GeoSite Examples Manipulative viewing Manipulative viewing The authoring window The authoring window All the GeometryEditor built-in authoring featuresAll the GeometryEditor built-in authoring features Some plug-in features into the GeometryEditor (more in developer ’ s point of view)Some plug-in features into the GeometryEditor (more in developer ’ s point of view) Manipulative and HTML section interaction Manipulative and HTML section interaction

46. Part Two: Developer’s Point of View About how to integrate GeometryEditor into your system

47. Links Documentation Documentation http://wme.cs.kent.edu/geosvg/docume 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 Click the link Documents for developers Click the link Documents for developersDocuments for developersDocuments for developers http://boar.cs.kent.edu/geosite/GeometryEd itor/samples/index.html http://boar.cs.kent.edu/geosite/GeometryEd itor/samples/index.html http://boar.cs.kent.edu/geosite/GeometryEd itor/samples/index.html http://boar.cs.kent.edu/geosite/GeometryEd itor/samples/index.html Lots of samples at the end of the page Lots of samples at the end of the page Package Package http://wme.cs.kent.edu/geosvg/softwar e.htmlhttp://wme.cs.kent.edu/geosvg/softwar e.html

48. Part Three: Technical Point of View About how the GeometryEditor is developed: algorithms, SVG, Javascript, browser technology and a Java version

49. System Composition Graphical core Graphical core 220KB, 15,000 lines of codes, 110 classes220KB, 15,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 20 types of dialogs and their related Javascript files Around 20 types of dialogs and their related Javascript files Open source libraries used: Open source libraries used: Dynarch.com DHTML menusDynarch.com DHTML menusDynarch.com DHTML menusDynarch.com DHTML menus FCKeditorFCKeditorFCKeditor

50. Technical Details To be finished To be finished

51. Thank you!