/trunk/project/network/jWebSocketClient-1.0/demos/canvas/iframe.htm
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.">
- <input style="width:80px" class="sbtnDlg" id="sbtnPaint" type="button" value="Paint" onclick="paint();"
- title="Paints some images on the canvas.">
- <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.">
- <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"> </td></tr>
- <tr><td style="cursor: pointer; background-color: #c0c0c0" onclick="selectColor('#c0c0c0');"
- title="gray"> </td></tr>
- <tr><td style="cursor: pointer; background-color: #ff0000" onclick="selectColor('#ff0000');"
- title="red"> </td></tr>
- <tr><td style="cursor: pointer; background-color: #ff00ff" onclick="selectColor('#ff00ff');"
- title="magenta"> </td></tr>
- <tr><td style="cursor: pointer; background-color: #008000" onclick="selectColor('#008000');"
- title="green"> </td></tr>
- <tr><td style="cursor: pointer; background-color: #0000ff" onclick="selectColor('#0000ff');"
- title="blue"> </td></tr>
- <tr><td style="cursor: pointer; background-color: #ff9900" onclick="selectColor('#ff9900');"
- title="cyan"> </td></tr>
- </table>
- </div>
- </div>
- </body>
- </html>