1<!DOCTYPE HTML> 2<html> 3 4<!-- 5 pgn4web javascript chessboard 6 copyright (C) 2009-2015 Paolo Casaschi 7 see README file and http://pgn4web.casaschi.net 8 for credits, license and more details 9--> 10 11<head> 12 13<title>flash replacement</title> 14 15<link rel="icon" sizes="16x16" href="pawn.ico" /> 16 17<style type="text/css"> 18 19html, 20body { 21 margin: 0px; 22 padding: 0px; 23} 24 25body { 26 padding: 1.75em; 27 font-family: sans-serif; 28 color: black; 29 background: #F4F4F4; 30} 31 32a { 33 color: black; 34} 35 36p { 37 padding: 0.25em; 38} 39 40ul { 41 list-style-type: square; 42} 43 44.exampleLink { 45 background: #E8E8E8; 46 padding-left: 0.25em; 47 padding-right: 0.25em; 48 white-space: pre; 49} 50 51</style> 52 53</head> 54 55<body> 56 57<h1 style="margin-top:0px; padding-top:0px; text-align:right;"> 58<span style="float:left; color:black;"> 59pgn4web live broadcast: flash replacement 60</span> 61<span style="width:49px; height:29px; background:url(pawns.png) -47px -15px; vertical-align:baseline; display:inline-block;"></span> 62</h1> 63 64<div style="height:1px;"></div> 65 66<p> 67What about replacing with a broadly supported technology a well known live chess broadcast client based on the adobe flash technology and therefore not supported by mobile devices such as android phones and tablets, the iphone and the ipad? This page shows equivalent functionality based on HTML5 (javascript + css) that works on mobile devices as well. 68</p> 69 70<a name="basicExample"></a> 71<h3>basic example</h3> 72<p> 73This replicates the flash based client layout and functionality: 74</p> 75<p> 76<center> 77 78 79<!-- 80 this is the inline frame code showing the live chessboard on the page; 81 when copying the code on a new live page, please adjust the inline frame src 82 property with the relative path from the new live page to dynamic-frame.html 83--> 84<iframe id='gameframe' frameborder='0' scrolling='no' 85 style='width: 640px; height: 360px; border: solid black 1px; padding: 5px; margin: 0px; background: transparent;' 86 src='./dynamic-frame.html?ct=blue&hch=t&pf=merida&scf=t&l=t' 87>your web browser and/or your host do not support iframes as required to display the chessboard 88</iframe> 89 90 91</center> 92</p> 93<p> 94</p> 95 96<a name="advancedExample"></a> 97<h3>advanced example</h3> 98<p> 99This shows additional functionality of the pgn4web viewer, including customized colors, customized chess pieces and integrated user/engine analysis board: 100</p> 101<p> 102<center> 103 104<table style="border: 40px solid #FFCE9E; border-radius: 10px; background: #FFCE9E; box-shadow: 0 0 25px #CC9966;" cellspacing="0" cellpadding="0" border="0"><tr><td valign="middle"> 105<iframe id='analysisframeAdvanced' name='analysisframeAdvanced' frameborder='0' scrolling='no' 106 style='width: 208px; height: 260px; margin-right: 40px; opacity: 0.9;' 107 src='./blank.html' 108>your web browser and/or your host do not support iframes as required to display the chessboard 109</iframe> 110</td><td valign="middle"> 111<iframe id='gameframeAdvanced' frameborder='0' scrolling='no' 112 style='width: 580px; height: 320px;' 113 src='./dynamic-frame.html?ct=brown&hch=t&pf=u&scf=t&l=t&ewt=analysisframeAdvanced&eww=216&ewh=260&ewup=lch%3DFFCE9E%26dch%3DE3B688%26hch%3DD18B47%26fmch%3D000000%26ctch%3D7D654C%26bch%3DFFCE9E%26ss%3D26%26fpr%3D0%26pf%3Du%26fms%3D11%26fcs%3D19&ewpi=t' 114>your web browser and/or your host do not support iframes as required to display the chessboard 115</iframe> 116</td></tr></table> 117 118</center> 119</p> 120<p> 121</p> 122 123<h3>more examples</h3> 124<p> 125Please find below links to few more live chess broadcast examples showing the multiple options available from pgn4web: 126<ul> 127<li><a id="liveCompact" href="./live-compact.html" target="_blank">live compact view</a></li> 128<li><a id="liveFullscreen" href="./dynamic-frame.html?l=t&scf=t" target="_blank">live fullscreen view</a></li> 129<li><a id="liveMosaic" href="./live-mosaic.html" target="_blank">live mosaic view</a></li> 130<li><a id="liveResults" href="./live-results.html" target="_blank">live results view</a></li> 131</ul> 132</p> 133 134<h3>end user hints for the client user interface</h3> 135<ul> 136<li>use the arrow keys to move throughout the game</li> 137<li>click on the dots at the bottom or click on square F5 for the list of available games</li> 138<li>click on square H5 for a fullscreen view, then use the browser's back button to return to this page</li> 139<li>click on square E8 of the main board to activate the analysis board, copying the postion from the main board and starting the built-in chess engine (if supported by the web browser); try moves and variations clicking the from/to squares on the analysis board.</li> 140<li>click on square H8 for further general help</li> 141</ul> 142 143<h3>webmaster hints to setup a live games broadcast</h3> 144<p> 145The following instructions refer to the basic example; the advanced example including the integrated user/engine analysis board is relatively more complex, please contact the pgn4web project for detailed instructions based on specific requirements. 146</p> 147<ul> 148<li>copy the pgn4web files on the server, for instance in the folder accessible as <span class='exampleLink'>http://example.com/somewhere/pgn4web/</span></li> 149<li>reuse the same tools that generate the chess moves for the flash based client processing the inputs from the electronic boards</li> 150<li>configure those tools to save games as a PGN file accessible as <span class='exampleLink'>http://example.com/somewhere/pgn4web/live/live.pgn</span>, including clock information if available</li> 151<li>replace the flash object in the live web pages with an inline frame using a src url similar to the example of this page, such as <span class='exampleLink'>http://example.com/somewhere/pgn4web/dynamic-frame.html?<span id='urlparameters'></span></span></li> 152<li>set the inline frame height/width as appropriate to each live web page on the server and add any desired iframe css style property</li> 153<li>done</li> 154<li>more info about configuration options <a href="http://pgn4web-project.casaschi.net/wiki/DynamicFrame_summary">at the pgn4web wiki</a></li> 155</ul> 156 157<!-- 158 the following scripts are normally not required in user pages embedding 159 dynamic-frame.html and should be left out unless otherwise instructed 160--> 161<script src="pgn4web-server-config.js" type="text/javascript"></script> 162<script type="text/javascript"> 163"use strict"; 164 165var pgn4web_live_pointer_url; 166var theIframeObject; 167var theSpanObject; 168var theLinkObject; 169 170if (pgn4web_live_pointer_url === undefined) { pgn4web_live_pointer_url = "."; } 171if (theIframeObject = document.getElementById('gameframe')) { 172 theIframeObject.src = fixUrlAllParameters(theIframeObject.src); 173 if (theSpanObject = document.getElementById('urlparameters')) { 174 theSpanObject.innerHTML = extractParametersAfterRemoving(theIframeObject.src); 175 } 176} 177if (theIframeObject = document.getElementById('gameframeAdvanced')) { 178 theIframeObject.src = fixUrlOnlyParameters(theIframeObject.src); 179} 180if (theIframeObject = document.getElementById('analysisframeAdvanced')) { 181 theIframeObject.src = fixUrlNoParameters(theIframeObject.src); 182} 183if (theLinkObject = document.getElementById('liveCompact')) { 184 theLinkObject.href = fixUrlOnlyParameters(theLinkObject.href); 185} 186if (theLinkObject = document.getElementById('liveFullscreen')) { 187 theLinkObject.href = fixUrlOnlyParameters(theLinkObject.href); 188} 189if (theLinkObject = document.getElementById('liveMosaic')) { 190 theLinkObject.href = fixUrlOnlyParameters(theLinkObject.href); 191} 192if (theLinkObject = document.getElementById('liveResults')) { 193 theLinkObject.href = fixUrlOnlyParameters(theLinkObject.href); 194} 195 196function fixUrlAllParameters(url) { 197 if (pgn4web_live_pointer_url == "." && !window.location.search.match(/\?.+$/)) { return url; } 198 var matches = url.match(/\?(.*)(#|$)/); 199 var parameters = matches ? matches[1] : ""; 200 matches = url.match(/.*(\/[^\/\?]*)/); 201 return pgn4web_live_pointer_url + matches[1] + "?" + window.location.search.replace(/^\?(.+)$/, '$1&') + parameters; 202} 203 204function extractParametersAfterRemoving(url) { 205 var parameters = url.replace(/(^[^\?]+|#.*$)/g, ""); 206 return parameters.replace(/(^|\?|&)(pd|pgnData|rm|refreshMinutes|rd|refreshDemo)=[^&]*/g, "").replace(/^[\?^]+/, ""); 207} 208 209function fixUrlOnlyParameters(url) { 210 if (pgn4web_live_pointer_url == "." && !window.location.search.match(/\?.+$/)) { return url; } 211 var matches = url.match(/\?(.*)(#|$)/); 212 var parameters = matches ? matches[1] : ""; 213 matches = window.location.search.match(/(\?|&)((pd|pgnData)=[^&]*)(&|$)/); 214 parameters = (matches ? matches[2] + "&" : "") + parameters; 215 matches = window.location.search.match(/(\?|&)((l|live)=[^&]*)(&|$)/); 216 parameters = (matches ? matches[2] + "&" : "") + parameters; 217 matches = window.location.search.match(/(\?|&)((rm|refreshMinutes)=[^&]*)(&|$)/); 218 parameters = (matches ? matches[2] + "&" : "") + parameters; 219 matches = window.location.search.match(/(\?|&)((rd|refreshDemo)=[^&]*)(&|$)/); 220 parameters = (matches ? matches[2] + "&" : "") + parameters; 221 matches = url.match(/.*(\/[^\/\?]*)/); 222 return pgn4web_live_pointer_url + matches[1] + "?" + parameters; 223} 224 225function fixUrlNoParameters(url) { 226 if (pgn4web_live_pointer_url == ".") { return url; } 227 var matches = url.match(/.*(\/[^\/]*)/); 228 return pgn4web_live_pointer_url + matches[1]; 229} 230 231</script> 232 233</body> 234 235</html> 236