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&amp;hch=t&amp;pf=merida&amp;scf=t&amp;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&amp;hch=t&amp;pf=u&amp;scf=t&amp;l=t&amp;ewt=analysisframeAdvanced&amp;eww=216&amp;ewh=260&amp;ewup=lch%3DFFCE9E%26dch%3DE3B688%26hch%3DD18B47%26fmch%3D000000%26ctch%3D7D654C%26bch%3DFFCE9E%26ss%3D26%26fpr%3D0%26pf%3Du%26fms%3D11%26fcs%3D19&amp;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&amp;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