viewer.htm | searchcode

/trunk/project/network/jWebSocketClient-1.0/demos/slideshow/viewer.htm

https://gitlab.com/BGCX261/zlatnaspirala2-svn-to-git
HTML | 165 lines | 121 code | 23 blank | 21 comment | 0 complexity | 5709bc7b0b8b8118872d84304c572f8f 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 RPC Demo (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 Slide Show Viewer</title>

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

		<!-- load the jWebSocket JavaScript client library -->

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

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



			var eLog = null;

			var eCount = null;

			var lCurSlide = 0;

			var lMaxSlides = 19;



			function scrollLogToBottom() {

				if( eLog.scrollHeight > eLog.clientHeight ) {

					eLog.scrollTop = eLog.scrollHeight - eLog.clientHeight;

				}

			}



			function log( aString ) {

				eLog.innerHTML +=

					aString + "<br>";

				scrollLogToBottom();

			}



			function clearLog() {

				eLog.innerHTML = "";

				eLog.scrollTop = 0;

			}



			var lWSC = null;



			function connect() {

				var lURL = jws.getDefaultServerURL();



				log( "Connecting to " + lURL + " ..." );

				var lRes = lWSC.open( lURL, {



					// OnOpen callback

					OnOpen: function( aEvent ) {

						log( "<font style='color:#888'>jWebSocket connection established.</font>" );

						jws.$("simgStatus").src = "../../images/connected.png";

					},



					// OnWelcome callback

					OnWelcome: function( aEvent ) {

						

					},



					// OnMessage callback

					OnMessage: function( aEvent ) {

						log( "<font style='color:#888'>jWebSocket message received: '" + aEvent.data + "'</font>" );

						jws.$("simgStatus").src = "../../images/authenticated.png";



						jws.$("slblClientId").innerHTML =

							"&nbsp;Client&#x2011;Id:&nbsp;"

							+ lWSC.getId() + "&nbsp;"

							+ ( jws.browserSupportsNativeWebSockets ? "(native)" : "(flashbridge)" );

					},



					// OnMessage callback

					OnToken: function( aToken ) {

						if( "slide" == aToken.action ) {

							if( lCurSlide != aToken.slide ) {

								eSlide.src = "slides/Slide" + jws.tools.zerofill( aToken.slide, 4 ) + ".gif";

								lCurSlide = aToken.slide;

							}

							eCount.innerHTML = aToken.clientCount;

						} else if( "event" == aToken.type

							&& "connect" == aToken.name ) {

							eCount.innerHTML = aToken.clientCount;

						} else if( "event" == aToken.type

							&& "disconnect" == aToken.name ) {

							eCount.innerHTML = aToken.clientCount;

						}

					},



					// OnClose callback

					OnClose: function( aEvent ) {

						log( "<font style='color:#888'>jWebSocket connection closed.</font>" );

						jws.$("simgStatus").src = "../../images/disconnected.png";

						jws.$("slblClientId").innerHTML = "&nbsp;Client&#x2011;Id:&nbsp;-";

					}



				});



				log( lWSC.resultToString( lRes ) );

			}



			function disconnect() {

				if( lWSC ) {

					log( "Disconnecting..." );

					var lRes = lWSC.close({ timeout: 3000 });

					log( lWSC.resultToString( lRes ) );

				}

			}



			function initPage() {

				eLog = jws.$( "sdivLog" );

				eSlide = jws.$( "simgSlide" );

				eCount = jws.$( "slblCount" );



				if( jws.browserSupportsWebSockets() ) {

					lWSC = new jws.jWebSocketJSONClient();

				} else {

					var lMsg = jws.MSG_WS_NOT_SUPPORTED;

					alert( lMsg );

					log( lMsg );

				}



				connect();

			}



			function exitPage() {

				disconnect();

			}



		</script>

	</head>



	<body

		onload="initPage();"

		onunload="exitPage();"

		style="background-color:#000"

		>

		<table class="tblHeader" width="100%" cellspacing="0" cellpadding="0">

			<tr>

				<td class="tdHeader" width="">

					jWebSocket Slideshow Viewer: &quot;Boosting Web Communication with WebSockets&quot;

					&nbsp;<span id="slblCount">-</span> online

				</td>

				<td class="tdHeader" width="1%"><img id="simgStatus" src="../../images/disconnected.png" align="right"/></td>

				<td class="tdHeader" width="1%"><span id="slblClientId">&nbsp;Client&#x2011;Id:&nbsp;-</span></td>

			</tr>

		</table>

		<!-- <p>Welcome to the jWebSocket Slideshow Viewer.</p>  -->

		<img id="simgSlide" src="slides/Slide0001.gif"/>

		<div id="sdivLog" class="sdivContainer"

			 style="display:none; position:relative; height:100px; overflow:auto;">

		</div>

	</body>

</html>