Changes

Canvas elements simplify the drawing of custom pixels to the screen as well as the modification of these pixels in real-time. There have been numerous requests for a canvas tag inside HTML documents which provided cusom drawability custom draw ability inside XUL (A Cross-Platform drawing management library). Unfortunately, XUL is client side based which only allows the modification of webpages web pages from the users user’s endpoint. The Canvas Tag was originally developed in order to create modifications to the browser from the server end. An on-screen Canvas object is basically a wrapper around the XUL engine that allows the visual manipulation of pixels on the webpage.

= XML 2D/3D Addition to Canvas =

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 manipulationsmanipulation. 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 2D and 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 is an APi API that allows for the interpretation of HTML and XML documents. It provides a structual structural representation of the document, which enables for easy modification and visual representation of the webpage. In essence, it connects the markup langages languages to structual 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 thier their properties. This technology allows the Canvas tags to be read and retrieved in an efficient manner.

== Use of XML 2D/3D ==

The Canvas project consists of several iteration focusing primarily on the implementation of HTML that allow access to the 2D drawing functionality. Eventually, the functionality will extent into the 3D world once the canvas API supports it. These 3D Tags will be based upon the syntax of its counterpart, the 2D Canvas tags. Essentially, the syntax for the 2D tags will be similar to the following:<br/>

-- size is size of draw a size, orientation is a quaternionsquare on the screen <cube position="x y z" orientation="a b c d" sizerectangle width="4"/> -- size is radius <sphere position="x y z" sizeheight="510"/>

The Canvas Tags are already handled by the browser syntax of these tags will be intuitive and therefore do not need flexible enough to be implementedalong side regular HTML code. Rather, The initial iterations will focus only on the implementation of the 2D tags that which will create tie into the 3D objects existing 2D drawing code. This will be added essentially allow a developer to use the current Canvas Framework to enable the creation capabilities without writing large amounts of 3D objects in memorycomplex JavaScript code. For example, the <cube /> tag will create a 3D cube in memory. The Attributes associated with it, such as positionIn addition to tags that allow simple drawing, orientation and size are all modifiers that there will be exposed within JavaScript. Each tag that is used inside the Canvas Tag will have similar properties group modifier tags that will also be available for modification in able to change a series of tags at the JavaScript Codesame time. <br /><br /> Within a 3D worldFor example, grouping a programmer can add numerous transformations sequentially in order to place an object in a given placebunch of lines together would allow for group modifications rather then modifying each line separately. It will provide a larger flexability aspect to the markup language:<br/>

-- either with an explicit 2D matrix <transform matrixposition="m1..m16m9"> <cube sizeline startposition="5, 10" endposition="40, 70"/> </transform>  -- or with position and/or orientation <transform positionline startposition="x y z15, 30" orientationendposition="a b c d50, 40"/> <cube sizeline startposition="25, 60" endposition="560, 10"/>

These are Eventually, this functionality will be applied to the basic principles that govern 3D controlls over an Object. An object can be anything from a simple primitive such as a Cube or Sphere to a complex Mesh that can be downloaded from world and will assist in the internet transformation, scaling, and rotation or from 3D objects on the client's computerscreen. Furthermore, the usage of lighting and camera modifications It will follows the same structure as provide a larger flexibility aspect to the primitivesmarkup language.<br/>

These are the basic principles that govern 2D and 3D controls over an object. An object can be anything from a simple primitive such as a line or circle to a complex 3D Mesh that can be downloaded from the internet or from the client's computer. Furthermore, the eventual incorporation of 3D into the Canvas framework will allow this API to become robust as it advances. == Use of XML 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 to mitigate complexity. The webpage will initiate a call to our JavaScript functions, that will start the drawingcode. == Tag Reference ==This is a tentative List and will change in time (Last Updated Feb 16, 2007): * 2D Tags**[[Canvas_3D_-_Line_Tag|<preline>]] (Completed)**[[Canvas_3D_-_Arc_Tag|<canvasarc>]] (Completed)**[[Canvas_3D_-_Circle_Tag|<circle>]] (Completed)**[[Canvas_3D_-_Rectangle_Tag|<rectangle>]] (Completed)**[[Canvas_3D_-_Image_Tag|<image>]] (Completed)* 3D Tags:** [[Canvas_3D_-_Cube_Tag|<cube />]] (Incomplete, Lacking 3D Backend...)** [[Canvas_3D_-_Sphere_Tag|<sphere />]] (Incomplete, Lacking 3D Backend...) ** [[Canvas_3D_-_Quad_Tag|<quad />]] (Incomplete, Lacking 3D Backend...)** [[Canvas_3D_- create a _Light_Tag|<light/>]] (Incomplete, Lacking 3D Backend...)** [[Canvas_3D_-_Texture_Tag|<texture />]] (Incomplete, Lacking 3D Backend...)** [[Canvas_3D_-_Mesh_Tag|<mesh />]] (Incomplete, Lacking 3D Backend...)* Group Modifier Tags (2D & 3D):** [[Canvas_3D_-_Transform_Tags|<transform>]] (Completed)** [[Canvas_3D_-_Scale_Tags|<scale>]] (Completed)** [[Canvas_3D_-_Rotate_Tags|<rotate>]] (Completed) = Iterations & Progress = Link to The Test Pages: <br/>* [http://zenit.senecac.on.ca/~bts630_071g07/canvas/ArcExample.xhtml Arc Example (Updated Mar 20, 2007)]* [http://zenit.senecac.on.ca/~bts630_071g07/canvas/CircleExample.xhtml Circle Example (Updated Mar 20, 2007)]* [http://zenit.senecac.on.ca/~bts630_071g07/canvas/ImageExample.xhtml ImageExample (Updated Mar 20, 2007)]* [http://zenit.senecac.on.ca/~bts630_071g07/canvas/LineExample.xhtml Line Example (Updated Mar 20, 2007)]* [http://zenit.senecac.on.ca/~bts630_071g07/canvas/RectangleExample.xhtml Rectangle Example (Updated Mar 20, 2007)]* [http://zenit.senecac.on.ca/~bts630_071g07/canvas/RotateExample.xhtml Rotation Example (Updated Mar 20, 2007)]* [http://zenit.senecac.on.ca/~bts630_071g07/canvas/ScaleExample.xhtml Scaling Example (Updated Mar 20, 2007)]* [http://zenit.senecac.on.ca/~bts630_071g07/canvas/TransformExample.xhtml Transformation Example (Updated Mar 20, 2007)] BarGraph Test Page: <light typebr />* [http://zenit.senecac.on.ca/~bts630_071g07/canvas/BargraphExample.xhtml BarGraph Example (Updated April 3, 2007)] Development Test Page: <br />* [http://zenit.senecac.on.ca/~bts630_071g07/canvas/CanvasUnitTest.xhtml Viewable Outcome (Updated Mar 23, 2007)] Link to Code: <br/>* [http://zenit.senecac.on.ca/~bts630_071g07/canvas/js/canvas3DCore.js JavaScript Code (Updated Mar 23, 2007)] ="spot" color="blue" positionCompleted Iterations ="x y z" orientation="*<b>Iteration 0: Fix Tag Compatibility (Completed: Dec 20, 2006)</b>** Write DOM Parsing Code** Create Wiki site to detail out the Tags** Write JavaScript code to manage and Draw the Tags *<b>Iteration 1: Fix Tag Compatibility (Completed: Jan 27, 2007)</b>** Restructure the parsing Code to Accept Tags without an Ending Tag** Write a Test for the above task** Rewrite Tag parsing Code** Write Test for the Tag Parsing Code** Update the Wiki with new content** '''Issue: A temporary fix to the first task was to serve the page as XHTML (Cludgy!?)''' * <b c d" >Iteration 2: Create New 2D Tags (Completed: Feb 9, 2007)</b>** Line Tag*** Create <Line> Tag*** Write Test for the Line Tag** Arc Tag*** Create <Arc> Tag*** Write Test for the Arc Tag** Circle Tag*** Create <Circle> Tag*** Write Test for the Circle Tag** Rectangle Tag*** Create <Rectangle> Tag*** Write Test for the Rectangle Tag** Image Tag*** Create <Image> Tag*** Write Test for the Image Tag** Update Wiki Site to reflect Above Changes * <b>Iteration 3: Enhancing the DOM Parsing Code (Completed: Mar 1, 2007)</canvasb>** Refactor the DOM Parsing code to use DOM rather then Objects in memory** Write a test for the above task** Research into DOM events which are fired when changes are made** Write a test for the above task** Update Wiki Site to reflect Above Changes * <b>Iteration 4: Create Grouping Tags (Completed: Mar 15, 2007)</preb>** Scale Tag*** Create <Scale> Tag*** Write Test for the Scale Tag** Rotate Tag*** Create <Rotate> Tag*** Write Test for the Rotate Tag** Transform Tag*** Create <Transform> Tag*** Write Test for Transform Tag** Update Wiki Site to reflect Above Changes

== Tag Reference =References Used =