PGN Viewer Usage

Chess Tempo PGN Viewer is licensed under a Creative Commons License. You are able to use the viewer for free on your non-commercial web site(s) on the condition that you place a visible link to http://chesstempo.com on the page(s) where you are using the viewer.

To start using the PGN viewer, you need to add several lines to the HTML of the page you wish to view PGN format chess games on.

First you should insert links to the Javascript and CSS used to parse and display the PGN. This can be done by copy and pasting the following into your HTML file:

<!-- Support libraries from Yahoo's YUI project -->
<script type="text/javascript"
    src="http://chesstempo.com/js/pgnyui.js">
</script> 
<script type="text/javascript"
    src="http://chesstempo.com/js/pgnviewer.js">
</script>
<link
 type="text/css" 
 rel="stylesheet" 
 href="http://chesstempo.com/css/board-min.css">
</link>

You should then add the following javascript code to your HTML which will create an instance of the PGN viewer:

<script>
new PgnViewer(
  { boardName: "demo",
    pgnFile: '/kasparov.pgn',
    pieceSet: 'leipzig', 
    pieceSize: 46
  }
);
</script>

The full set of config options are:

• boardName name identifying the current board, if multiple boards are displayed on the same page, a unique boardName should be supplied for each.
• pgnFile A URL pointing to a PGN file to be parsed and displayed. This file MUST be located on the same server that your HTML files are loaded from. Multiple games in the same file will be parsed and the user will be given a dropdown list to select between them (with the first game in the file being shown by default).
• pgnString A string holding one or more PGN formatted games for parsing and display. Any single quote characters in your PGN game(s) must be escaped, i.e. "Petrosian's turn" must be changed to "Petrosian\'s turn". Multiple games per pgnString are supported.
• pieceSet The icon set used to display the pieces, currently support icon sets are: 'merida' (the default), 'leipzig', 'maya', 'condal', 'case' and 'kingdom'.
• pieceSize The size of the pieces to use in pixels, currently supported sizes are '20', '24', '29', '35', '40' and '46'. Default size is 46.
• movesFormat The style of formatting for the moves display, either "default" or "main_on_own_line" for a display which puts the main line moves on their own line with the annotations/variations indented below the main line.
• pauseBetweenMoves The amount of time in milliseconds to wait between moves whilst autoplaying games. The default pause is 800 milliseconds. Move animations take 500 milliseconds so the pause between move should not be less than this, otherwise multiple pieces will be in flight at once (amusing but perhaps undesirable).

The next step is to tell the PGN viewer where to put the board (and optionally the move list). When started, the PGN viewer will search for <div> elements with id attributes associated with the boardName config option supplied above. Using the example above of boardName: 'demo', a <div> with id 'demo-container' will be used as a container for the board and its navigation controls. If you wish to have the move list displayed this can be done by adding a <div> with id 'demo-moves'. These <div> elements can be added anywhere in your page and need not be together. The following example would put the moves list directly after the board:

    <div id="demo-container"></div>
    <div id="demo-moves"></div>

Multiple Boards

Multiple boards can be placed on the same page by creating multiple PgnViewer objects:

<script>
new PgnViewer(
  { boardName: "kasparov",
    pgnFile: '/kasparov.pgn'
  }
);

new PgnViewer(
  { boardName: "karpov",
    pgnFile: '/karpov.pgn'
  }
);
</script>

and creating two container and moves divs:

    <div id="kasparov-container"></div>
    <div id="kasparov-moves"></div>

    <div id="karpov-container"></div>
    <div id="karpov-moves"></div>

Putting too many boards on a single page may slow your web site down, you may need to experiment to determine the optimal number for your page.

Customisation using CSS

In addition to the configuration options mentioned above, cascading style sheets (CSS) can also be used to change the look of the board and the move list.

The colour of the squares can be changed with the following css:

.ct-black-square
{
    background-color: red;
}

.ct-white-square
{
    background-color: yellow;
}

Background images could be added to the squares (images should be the same pixel width and height as the pieces you are using) with:

.ct-black-square
{
    background:  
      url("/images/black-sq-image.gif") no-repeat;
}

.ct-white-square
{
    background:  
      url("/images/white-sq-image.gif") no-repeat;
}

The size and colour of the border can be changed with:

.ct-board-border
{ 
    border:10px solid green;
}

Move list items can also be styled. For example, to change the colour of the main line moves:

.ct-board-move-mainline
{ 
    color: blue;
}

or to change the colour of variation moves:

.ct-board-move-variation
{ 
    color: green;
}

Comments/Annotations can be styled using:

.ct-board-move-comment
{ 
    color: green;
    font-weight: bold;
}

The style of the currently highlighted move can be adjusted using:

.ct-board-move-current
{ 
    color: yellow;
}

If you are using mutiple boards on a page then you can apply styles to specific boards using the following CSS syntax:

#kasparov-container .ct-black-square
{
    background:  
      url("/images/black-sq-image.gif") no-repeat;
}

#kasparov-container .ct-white-square
{
    background:  
      url("/images/white-sq-image.gif") no-repeat;
}

#karpov-moves .ct-board-move-current
{ 
    color: yellow;
}

Other style items such as font size and padding can also be customised using the above CSS classes. All your styles can be either put into a file and placed in the page AFTER the board-mins.css link , or placed directly in your HTML page. For example, placed in an external file:

<script type="text/javascript" 
 src="http://chesstempo.com/js/pgnpage-all.js">
</script>
<link
 type="text/css" 
 rel="stylesheet" 
 href="http://chesstempo.com/css/board-min.css"
/>
<link
 type="text/css" 
 rel="stylesheet" 
 href="/css/your-board-style.css"
/>

Or placed inline:

<script type="text/javascript" 
 src="http://chesstempo.com/js/pgnpage-all.js">
</script>
<link
 type="text/css" 
 rel="stylesheet" 
 href="http://chesstempo.com/css/board-min.css"
/>
<style type="text/css"/>
.ct-board-border
{ 
    border:10px solid green;
}

.ct-board-move-comment
{ 
    color: green;
    font-weight: bold;
}
</style>