1
edit
Changes
no edit summary
The objective of Canvas was to provide a drawing interface inside the HTML document which website designers could use to create interactive content. It also allows the designers of the webpage to change the Canvas object on the fly using JavaScript or Python. The Canvas tag exposes the functionality of XUL with added security and safeguards to prevent damage to the client's computer.
= XML 2D/3D Addition to Canvas =
== Rationale ==
The basis of the Canvas tag is to provide immediate drawing to the screen. The drawing can consist of regular 2D pixel manipulations as well as a proposed 3D model manipulation. In addition, it will provide a safe and simple application programming interface (API) to the OpenGL Layer. The OpenGL Layer is a library that handles the math required for 3D transformations. Unfortunately, OpenGL has the power to talk directly to the hardware therefore allowing direct manipulation of the hardware or possibly potential damage. Consequently, the OpenGL Layer will not be included in this project due to its complex nature and constant upkeep. In addition, the OpenGL API is extremely low-level and may be confusing when exposed to the internet. <br/> <br/>
However, the first step in creating a 2D/3D Canvas element is to use a custom XML tag to specify the 2D/3D objects on the screen as well as the drawing area available. In this case, the developer will be able to create 3D objects on the client's screen as well as provide logic to modify these objects in real-time. By using the Document Object Model (DOM) to interpret the XML language and retrieve the attributes of the objects, this causes the objects to be presented for modification purposes.
== The Document Object Model ==
The Document Object Model is an API that allows for the interpretation of HTML and XML documents. It provides a structural representation of the document, which enables for easy modification and visual representation of the webpage. In essence, it connects the markup languages to structural code inside the browser. The DOM is contained in a tree structure that allows for easy search and retrieval of HTML and XML tags and their properties. This technology allows the Canvas tags to be read and retrieved in an efficient manner.
== Use of XML 2D/3D ==
The Canvas 3D Tags will be based upon the syntax of its counterpart, the 2D Canvas tags. Essentially, the syntax will be similar to the following:<br/>
<pre>
<canvas>
-- size is size of draw a qube, size, orientation is a quaternion
<cube position="x y z" orientation="a b c d" size="4"/>
-- size is radiusdraw a sphere
<sphere position="x y z" size="5"/>
-- draw a square on the screen
<rectangle width="4" height="10"/>
</canvas>
</pre>
</pre>
== Use of XML 2D/3D in JavaScript ==
In order to draw the objects onto the screen, JavaScript will be used to call functions inside the core of Firefox. The API will be written to allow programmers to not only access the various attributes of the Objects but also write drawing logic. The webpage will initiate a call to a JavaScript function that will start the drawing/manipulation code. This part of the project is being handled by Vlad Vukicevic from Mozilla.
This is a list of Tags that will be Written as of Oct 1, 2006. This is a tentative List and will change in time:
* 2D Tags**[[Canvas_3D_-_Line_Tag|<line>]]**[[Canvas_3D_-_Arc_Tag|<arc>]]**[[Canvas_3D_-_Circle_Tag|<circle>]]**[[Canvas_3D_-_Rectangle_Tag|<rectangle>]]**[[Canvas_3D_-_Image_Tag|<image>]]* 2D Group Modifiers** [[Canvas_3D_-_Translate_Tags|<translate2D>]]** [[Canvas_3D_-_Scale_Tags|<scale2D>]]* 3D Primative Objects:
** [[Canvas_3D_-_Cube_Tag|<cube />]]
** [[Canvas_3D_-_Sphere_Tag|<sphere />]]
** [[Canvas_3D_-_Light_Tag|<light />]]
** [[Canvas_3D_-_Texture_Tag|<texture />]]
* 3D Complex Objects:
** [[Canvas_3D_-_Mesh_Tag|<mesh />]]
* 3D Group Modifiers:** [[Canvas_3D_-_Transform_Tags|<transformtransform3D>]]** [[Canvas_3D_-_Scale_Tags|<scalescale3D>]]** [[Canvas_3D_-_Rotate_Tags|<rotaterotate3D>]]** [[Canvas_3D_-_Translate_Tags|<translatetranslate3D>]]* 2D Tags**[[Canvas_3D_-_Line_Tag|<line>]]**[[Canvas_3D_-_Arc_Tag|<arc>]]**[[Canvas_3D_-_Circle_Tag|<circle>]]**[[Canvas_3D_-_Rectangle_Tag|<rectangle>]]**[[Canvas_3D_-_Image_Tag|<image>]]= Iterations & Progress =
== XML 3D Progress Completed Iterations ==*<b>Iteration 0: Fix Tag Compatibility (Completed: Dec 2006)</b>** Write DOM Parsing Code** Create Wiki site to detail out the Tags** Write JavaScript code to manage and Draw the Tag information
*<b>Iteration 13: Fix Tag CompatibilityEnhancing the DOM Parsing Code</b>**Restructure Create the parsing Code ability to Accept Dynamically Look for Tags without an Ending Tag**Write a Test test for the above task**Rewrite Tag parsing CodeCreate a way to map a dynamic tag to a function** Create code to modify the Dom tree on the fly**Write Test a test for the Tag Parsing Codeabove task** Research into DOM events which are fired when changes are made**Update the Wiki with new contentSite to reflect Above Changes
*<b>Iteration 24: Create New 2D Grouping Tags</b>**Line Scale Tag***Create <LineScale> Tag***Write Test for the Line Scale Tag**Arc Rotate Tag***Create <ArcRotate> Tag***Write Test for the Arc Rotate Tag**Circle Translate Tag***Create <CircleTranslate> Tag***Write Test for the Circle Translate Tag**Rectangle Transform Tag***Create <RectangleTransform> Tag***Write Test for the Rectangle Tag**Image Tag***Create <Image> Tag***Write Test test for the Image Transform Tag**Update Wiki Site to reflect Above Changes
*<b>Iteration 4svn: Create Grouping Tags</b>**Scale Tag***Create <Scale> Tag***Write Test for the Scale Tag**Rotate Tag***Create <Rotate> Tag***Write Test for the Rotate Tag**Translate Tag***Create <Translate> Tag***Write Test for Translate Tag**Transform Tag***Create <Transform> Tag***Write test for the Transform Tag**Update Wiki Site to reflect Above Changes/zenit.senecac.on.ca/bts630_071r7
[http://wiki.mozilla.org/Main_Page Mozilla Wiki Main Page]<br />
[http://wiki.mozilla.org/Canvas:3D Official Canvas 3D Wiki]<br />
[http://whatwg.org/specs/web-apps/current-work/#scsthe-dynamic 2d Canvas 2D Reference]<br />
[http://whatwg.org/specs/web-apps/current-work/#the-3d Canvas 3D Reference]
