iframe.htm | searchcode

/trunk/project/network/jWebSocketClient-1.0/demos/canvas/iframe.htm

https://gitlab.com/BGCX261/zlatnaspirala2-svn-to-git
HTML | 361 lines | 303 code | 38 blank | 20 comment | 0 complexity | bdd8b910c64a60ad7820cc0c1751e8d7 MD5 | raw file

<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01//EN" "http://www.w3.org/TR/html4/transitional.dtd">

<html>

	<head>

		<meta http-equiv="X-UA-Compatible" content="chrome=1">

		<!-- If Google's chrome frame installed, use it! -->

		<!-- Comment needs to be BELOW this meta tag! -->

		<!--

		//	****************************************************************************

		//	jWebSocket Simple Chat (uses jWebSocket Client and Server)

		//	Copyright (c) 2010 Alexander Schulze, Innotrade GmbH, Herzogenrath

		//	****************************************************************************

		//	This program is free software; you can redistribute it and/or modify it

		//	under the terms of the GNU Lesser General Public License as published by the

		//	Free Software Foundation; either version 3 of the License, or (at your

		//	option) any later version.

		//	This program is distributed in the hope that it will be useful, but WITHOUT

		//	ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or

		//	FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for

		//	more details.

		//	You should have received a copy of the GNU Lesser General Public License along

		//	with this program; if not, see <http://www.gnu.org/licenses/lgpl.html>.

		//	****************************************************************************

		-->

		<meta http-equiv="Content-Language" content="en">

		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

		<title>jWebSocket Chat Demo</title>

		<link rel="stylesheet" type="text/css" href="../../res/css/jwebsocket.css">

		<script src="../../res/js/jWebSocket.js" type="text/javascript"></script>

		<script src="../../res/js/jwsCanvasPlugIn.js" type="text/javascript"></script>

		<!-- load file system plug-in to be able to send snap shots of the canvas -->

		<script src="../../res/js/jwsFilesystemPlugIn.js" type="text/javascript"></script>

		<script type="text/javascript" language="JavaScript">

			var lJWSID = "jWebSocket Chat",

			lWSC = null,

			eCanvas = null;

			eStatus = null;

			lIsConnected = false,

			lColor = "#000000",

			CANVAS_ID = "c1";



			var IN = 0;

			var OUT = 1;

			var EVT = 2;

			var SYS = "SYS";

			var USR = null;



			function doOpen() {

				// adjust this URL to your jWebSocket server

				var lURL = jws.getDefaultServerURL()

					+ ( frameElement.id ? ";unid=" + frameElement.id : "");



				// try to establish connection to jWebSocket server

				lWSC.logon( lURL, "Guest", "guest", {



					// OnOpen callback

					OnOpen: function( aEvent ) {

						// start keep alive if user selected that option

						lWSC.startKeepAlive({ interval: 30000 });

						eStatus.src = "../../images/authenticated.png";

						lIsConnected = true;

					},



					// OnMessage callback

					OnMessage: function( aEvent, aToken ) {

					},



					// OnClose callback

					OnClose: function( aEvent ) {

						eStatus.src = "../../images/disconnected.png";

						lIsConnected = false;

						lWSC.stopKeepAlive();

					}

					

				});

			}



			function doClose() {

				// disconnect automatically logs out!

				lWSC.stopKeepAlive();

				var lRes = lWSC.close({

					// wait a maximum of 3 seconds for server good bye message

					timeout: 3000

				});

			}



			var ctx;

			var lPainting = false;

			var lX1 = -1;

			var lY1 = -1;



			function mouseDownLsnr( aEvent ) {

				// aEvent.preventDefault();

				jws.events.preventDefault( aEvent );

				if( lIsConnected ) {

					lPainting = true;

					lX1 = aEvent.clientX - eCanvas.offsetLeft;

					lY1 = aEvent.clientY - eCanvas.offsetTop;

				}

			}



			var eAvg = null;

			var loops = 0;

			var total = 0;



			function mouseMoveLsnr( aEvent ) {

				// aEvent.preventDefault();

				jws.events.preventDefault( aEvent );

				if( lIsConnected && lPainting ) {

					var lX2 = aEvent.clientX - eCanvas.offsetLeft;

					var lY2 = aEvent.clientY - eCanvas.offsetTop;



					loops++;

					start = new Date().getTime();



					lWSC.canvasLine( CANVAS_ID, lX1, lY1, lX2, lY2, {

						color: lColor

					});



					lX1 = lX2;

					lY1 = lY2;



					total += ( new Date().getTime() - start );

					eAvg.innerHTML = ( total / loops + "ms" );

				}

			}



			function mouseUpLsnr( aEvent ) {

				// aEvent.preventDefault();

				jws.events.preventDefault( aEvent );

				if( lIsConnected && lPainting ) {

					lX2 = aEvent.clientX - eCanvas.offsetLeft;

					lY2 = aEvent.clientY - eCanvas.offsetTop;

					lWSC.canvasLine( CANVAS_ID, lX1, lY1, lX2, lY2, {

						color: lColor

					});

					lPainting = false;

				}

			}



			function mouseOutLsnr( aEvent ) {

				mouseUpLsnr( aEvent );

			}



			function selectColor(aColor ) {

				lColor = aColor;

				jws.$( "spanSettings" ).style.borderColor = lColor;

			}



			function doClear() {

				if( lIsConnected ) {

					lWSC.canvasClear( CANVAS_ID );

				}

			}



			var lImgIdx = 0;

			var lImages = new Array();

		

			lImages[ 0 ] = new Image();

			lImages[ 1 ] = new Image();

			lImages[ 2 ] = new Image();

			lImages[ 3 ] = new Image();

			lImages[ 4 ] = new Image();

			lImages[ 5 ] = new Image();

			lImages[ 6 ] = new Image();

			lImages[ 7 ] = new Image();

			lImages[ 8 ] = new Image();



			lImages[ 0 ].src = "../../res/img/image1.jpg";

			lImages[ 1 ].src = "../../res/img/image2.jpg";

			lImages[ 2 ].src = "../../res/img/image3.jpg";

			lImages[ 3 ].src = "../../res/img/image4.jpg";

			lImages[ 4 ].src = "../../res/img/image5.jpg";

			lImages[ 5 ].src = "../../res/img/image6.jpg";

			lImages[ 6 ].src = "../../res/img/image7.jpg";

			lImages[ 7 ].src = "../../res/img/image8.jpg";

			lImages[ 8 ].src = "../../res/img/image9.jpg";



			function paint() {

				var lCanvas = document.getElementById( "cnvDemo" );

				lCanvas.clear = true;

				var lContext = lCanvas.getContext( "2d" );

				/*

				for( var lIdx = 0; lIdx < lImages.length; lIdx++ ){

					lImg.src = lImages[ lIdx ];

					lContext.drawImage( lImg, 0, 0 );

				}

				*/

				lContext.drawImage( lImages[ lImgIdx ], 0, 0 );

				if ( lImgIdx >= 8 ) {

					lImgIdx = 0;

				} else {

					lImgIdx++;

				}

				/*

				lRes = lWSC.fileSend(

					// target was passed as optional argument

					// and thus can be used here

					"target2", // Token.args.target,

					"painting", // Token.fileName,

					// lCanvas.toDataURL( "image/jpeg" ),

					lCanvas.toDataURL( "image/png" ),

					{	encoding: "base64",

						isNode: true

					}

				);

				*/

			}



			function onFileSentObs( aToken ) {

				// console.log( new Date() + ": " + aToken.data.length +  " " + aToken.data.substr(0, 40));

				var lImg = new Image();

				// document.body.appendChild(lImg);

				lImg.src = aToken.data;

				lImg.onload = function() {

					var lCanvas = document.getElementById( "cnvDemo" );

					var lContext = lCanvas.getContext( "2d" );

					lContext.drawImage( lImg, 0, 0 );

				}

			}



			function onFileSavedObs( aToken ) {

				var lImg = new Image();

				lImg.src = aToken.url;

				lImg.onload = function() {

					var lCanvas = document.getElementById( "cnvDemo" );

					var lContext = lCanvas.getContext( "2d" );

					lContext.drawImage( lImg, 0, 0 );

				}

			}



			var lRollingId = 1, lMaxRollingIDs = 9;



			function snapshot() {

				if( lIsConnected ) {

					// png should be supported by all HTML5 compliant browser

					// jpeg may not be supported yet (as of 2011-03-01)

					// by Safari and Opera. Thus, take png as default for now.

					var lRes = lWSC.canvasGetBase64( CANVAS_ID, "image/png" );

					if( lRes.code == 0 ) {

						// the image could be loaded successfully

						// from the canvase element

						var lRes = lWSC.fileSave(

							// use hardcoded file name for now in this

							// demo to keep it as simple as possible

							"canvas_demo_" + lRollingId + ".png",

							// the data is already base64 encoded!

							lRes.data,

							{	scope: jws.SCOPE_PUBLIC,

								encoding: "base64",

								suppressEncoder: true // data already base64 encoded!

							}

						);

						lRollingId++;

						if( lRollingId > lMaxRollingIDs ) {

							lRollingId = 1;

						}

					} else {

						// an error occured

						alert( lRes.msg );

					}

				}

			}



			function initPage() {

				// get some required HTML elements



				eAvg = jws.$("spnAvg");

				eCanvas = jws.$( "cnvDemo" );

				eStatus = jws.$( "simgStatus" );

				ctx = eCanvas.getContext( "2d" );



				jws.events.addEventListener( eCanvas, "mousedown", mouseDownLsnr );

				jws.events.addEventListener( eCanvas, "mousemove", mouseMoveLsnr );

				jws.events.addEventListener( eCanvas, "mouseup", mouseUpLsnr );

				jws.events.addEventListener( eCanvas, "mouseout", mouseOutLsnr );

/*

				eCanvas.addEventListener( "mousedown", mouseDownLsnr, false );

				eCanvas.addEventListener( "mousemove", mouseMoveLsnr, false );

				eCanvas.addEventListener( "mouseup", mouseUpLsnr, false );

				eCanvas.addEventListener( "mouseout", mouseOutLsnr, false );

*/

				// check if WebSockets are supported by the browser

				if( jws.browserSupportsWebSockets() ) {

					// instaniate new TokenClient, either JSON, CSV or XML

					lWSC = new jws.jWebSocketJSONClient({

					});

					lWSC.setFileSystemCallbacks({

						OnFileSaved: onFileSavedObs,

						OnFileSent: onFileSentObs

						// OnLocalFileRead: onLocalFileLoadedObs,

						// OnLocalFileError: onLocalFileErrorObs

					});





					lWSC.canvasOpen( CANVAS_ID, "cnvDemo" );

					doOpen();



				} else {

					// jws.$( "sbtnClearLog" ).setAttribute( "disabled", "disabled" );

					

					var lMsg = jws.MSG_WS_NOT_SUPPORTED;

					alert( lMsg );

				}

			}



			function exitPage() {

				// this allows the server to release the current session

				// immediately w/o waiting on the timeout.

				if( lWSC ) {

					lWSC.close({

						// force immediate client side disconnect

						timeout: 0

					});

				}

				lWSC.canvasClose( CANVAS_ID );

			}



		</script>

	</head>



	<body

		onload="initPage();"

		onunload="exitPage();"

		>

		<div> <!-- style="border:1px solid red" -->

			<p>

				<input style="width:80px" class="sbtnDlg" id="sbtnClear" type="button" value="Clear" onclick="doClear();"

					   title="Clears the current canvas locally and on all connected clients.">&nbsp;

				<input style="width:80px" class="sbtnDlg" id="sbtnPaint" type="button" value="Paint" onclick="paint();"

					   title="Paints some images on the canvas.">&nbsp;

				<input style="width:80px" class="sbtnDlg" id="sbtnSend" type="button" value="Snapshot" onclick="snapshot();"

					   title="Creates a snapshot, save it on the server and broadcasts a 'filesave' event.">&nbsp;

				<img id="simgStatus" alt="status"  src="../../images/disconnected.png"/>

			</p>

			<p id="spnAvg" style="display:none">0ms</p>

			<canvas id="cnvDemo" width="265" height="230"

					style="width:265px; height:230px; overflow:hidden; border:1px solid gray; cursor:crosshair; float:left" >

			</canvas>

			<div id="spanSettings" style="border:1px solid gray; position:relative;

				 top: 0px; left: 5px; width:20px; height:142px; margin-bottom:80px; overflow:hidden">

				<table border="0" cellspacing="2" cellpadding="1">

					<colgroup><col width="20px"></colgroup>

					<tr><td style="cursor: pointer; background-color: #000000" onclick="selectColor('#000000');"

							title="black">&nbsp;</td></tr>

					<tr><td style="cursor: pointer; background-color: #c0c0c0" onclick="selectColor('#c0c0c0');"

							title="gray">&nbsp;</td></tr>

					<tr><td style="cursor: pointer; background-color: #ff0000" onclick="selectColor('#ff0000');"

							title="red">&nbsp;</td></tr>

					<tr><td style="cursor: pointer; background-color: #ff00ff" onclick="selectColor('#ff00ff');"

							title="magenta">&nbsp;</td></tr>

					<tr><td style="cursor: pointer; background-color: #008000" onclick="selectColor('#008000');"

							title="green">&nbsp;</td></tr>

					<tr><td style="cursor: pointer; background-color: #0000ff" onclick="selectColor('#0000ff');"

							title="blue">&nbsp;</td></tr>

					<tr><td style="cursor: pointer; background-color: #ff9900" onclick="selectColor('#ff9900');"

							title="cyan">&nbsp;</td></tr>

				</table>

			</div>

		</div>

	</body>

</html>