Anthony, first I must applaud your effort in writting such a large work. Like anything, the larger (more complex) it gets the more risk there is for error or oversight. I need a little help with your example for the White board. I have entered the first section starting on page 703 and ending on 707. When I attempt activating the WEB page I get an error on loading. I have isolated the problem to the 1st function (marked in Red), but fail to see the fault. Even after emptying the first function and leaving the shell it still errors. I have found similar functions on the internet and see no obvious error. I am working off of a Linux Server and accessing the internet with Internet Explorer 7.
I am hoping this section could start a discussion on the complete section Whiteboard and Chat. I will even donate an example page with the work in progress as long as it is not abused.
Below is the code for the first section as taken from the book based on how I understood the instructions. I retained the remark statements for ease of reading. Since you did not say where to add Walter Zorn's code I added the link inside the Wrapper.
You can see the WEB page in action (or not in action) at
Example in Operation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns-"http://www.w3.org/1999/xhtml" xml:lang-"en">
<html>
<head>
<title>Whiteboard Example</title>
</head>
<body>
<div id=bodyWrapper>
<!--All content goes here -->
/* Path has been modified to protect WEB site */
<script type="text/javascript" src="http://XXX/XXX/ws_jsgraphics.js"> </script>
<script language=JavaScript>
<!--
/**
* This variable, POINT_SIZE , is the size of the pen drawing on the canvas
*/
var POINT_SIZE = 1;
/**
* This variable, POINT_COLOR, is the color of the pen drawing on the canvas.
*/
var POINT_COLOR = '#f00';
/**
* this variable, whiteboard, will be the instatntiation of the jsGraphics class.
*/
var whiteBoard = null;
/* Do all this when the page is done loading... */
Event.observe(window, 'load', function() {
/* Create a new canvas to use for the whiteboard */
whiteBoard = new jsGraphics('whiteBoard');
/* Set the initial color of the pen */
whiteBoard.setColor(POINT_COLOR);
/* Set the initial size of the pen */
whiteBoard.setStroke(POINT_SIZE);
/* Set up events to trap mouse events that occur on the /whiteBoard/ */
Event.observe('whiteBoard', 'mousedown', StartDrawing);
Event.observe('whiteBoard', 'mouseup', StopDrawing);
});
/**
* this function, StartDrawing, is called whenever there is a /mousedown/
* event on the whiteboard, and astarts drawin on the canvas.
*
* @param {object} e The current trapped event.
*/
function StartDrawing(e){
/* did the event actually happen on the whiteboard? */
if(Event.element(e).id == 'whiteBoard')
DrawPoint(Event.pointerX(e), Event.pointerY(e));
Event.observe('whiteBoard', 'mousemove', ContinueDrawing);
}
/**
* This function, StopDrawing, is called whenever there is a /mouseup/
* event on the Whiteboard, and stops all drawing on the canvas.
*
* @param {object} e The current trapped event.
*/
function StopDrawing(e){
/* Stop observin /mousmove/ on the board and reest the last coordinates */
Event.stopObserving('whiteBoard', 'mousemove', ContinueDrawing);
lastPointx = -1;
lastPointY = -1;
}
/**
* This function, Continue Drawing is called as long as there is a
* /mouse/ event on the whiteboard, and draws on the canvas.
*
* @param {object} e The curretn trapped event.
*/
function ContinueDrawing(e){
/* did the event actually happen on the whiteboard? */
if(Event.element(e).id == 'whiteBoard')
DrawPoint(Event.pointerX(e), Event.pointerY(e));
}
/**
** This variable, X_OFFSET, is to act as the constant x-offset value of the
* whiteboard.
*/
var X_OFFSET = 10;
/**
** This variable, Y_OFFSET, is to act as the constant Y-offset value of the
* whiteboard.
*/
var Y_OFFSET = 10;
/**
** This variable, lastPointX, holds the last mouse event X-coordinate on the
* whiteboard.
*/
var lastPointX = -1;
/**
** This variable, lastPointY, holds the last mouse event Y-coordinate on the
* whiteboard.
*/
var lastPointY = -1;
/**
* This function, DrwaPoint, draws the lines on the wiiteboard as the mouse
* interaccts with it. It takes into consideration all offsets for canvas
* postion, and sets the last coordinates for the next line.
*
*@param {Integer} p_x The x-coordinate of the mouse event.
*@param {Integer} p_y The y-coordinate of the mouse event.
*/
function DrawPoint(p_x, p_y){
/* Take offsets into consideration */
p_x = p_x - (X_OFFSET + POINT_SIZE)
p_y = p_y - (Y_OFFSET + POINT_SIZE)
/* Is this the begining of a new drawin sequence? */
If(lastPointX == -1 || lastPointY == -1){
lastPointX = p_x;
lastPointy = p_y;
}
/* Draw the line */
whiteBoard.drawLine(p_x, p_y, lastPointX, lastPointY);
/* Display the line */
whiteBoard.paint();
/* Set the last coordinates to the curretn coordinates */
lastPointX = p_x;
lastPointY = p_y;
}
//-->
</script>
<div id='whiteBoard'></div
</div>
</body>
</html>
Looking forward to an interesting discussion on this intriguing topic.
|
|
|||
O'Reilly Forums: Whiteboard Example - O'Reilly Forums
Page 1 of 1
Whiteboard Example Help implmenting your code
#2
|
|||
© 2013, O’Reilly Media, Inc. (707) 827-7019 (800) 889-8969 All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners. |
