About ChessViewer

ChessViewer written by Andrew Gove
Copyright (C) 1997-2006 Internet Chess Club, Inc.

[Table of Contents]

To use ChessViewer:

Simply manipulate the scroll bar to move forward and backward in the displayed game, or click in the move-list box to jump directly to a position. Comments and analyses are written in the textbox below the board.

New in Version 2:

• [v2.1] Added support for using Arrow-Keys or Spacebar, fixed bug of not displaying final few moves correctly in movelist, Updated to support Java 1.1.7+.
• GIF piece graphics at multiple sizes (images by William Dyche, used with permission). [Note: whitepiece and blackpiece color parameters are now obsolete.]
• Two-column movelist-box, with figurine notation. [Note: the prettymovelist parameter's syntax has changed.]

To upgrade your old HTML files to version 2, you may either use the updated form to create new HTML files from PGN files, or manually change the archive statement in the applet tag from ChessViewer.zip to ChessViewer2.zip, change the code tag from ChessViewer.class to ChessViewer2.class, and remove everything except algebraic moves from the prettymovelist parameter (i.e. delete all the ellipsis and move numbers).

To incorporate ChessViewer into your own web pages:

ChessViewer is being offered free to the public on condition that it is not modified in any way without the express written permission of Internet Chess Club. We recommend not making local copies of the applet ".class" files, so that any upgrades and bugfixes we make will immediately be reflected in your web page. If you must have a local copy, read these installation instructions.

Please contact us if you have any questions or desired modifications.

Creating a ChessViewer from a PGN file

We have provided a web page that automatically converts PGN format games to HTML code. Simply use the FORM provided here, paste your PGN code into the form, press "submit", and then paste the result into your own HTML file. An example PGN-file (US Championship finals, Round 4) is provided. An example HTML file that calls ChessViewer is also available.

Understanding the HTML code

If you want to customize the HTML created by the PGN-converter, or if you are creating a new ChessViewer display from scratch, you should understand the HTML tags used by ChessViewer.

The <applet> tag

The <applet> tag describes the dimensions of the ChessViewer on your web page, which you can change to suit your needs. <applet> is similar to <image> in form; however, do not use ALIGN to place the ChessViewer where you want it, since some versions of Netscape have a bug that prevents ALIGNed applets from running.

Your choice of height and width will affect the size of the board. See also layout for a description of "tall" and "wide" formats.

<applet codebase="/chessviewer/"
        code=ChessViewer2.class
        archive=ChessViewer2.zip
        height=300
        width=350>

Parameters

Data and customization information is passed to ChessViewer through <param> statements, described below. Note that the parameter names are case-sensitive.

movelist

The only absolutely required parameter is the "movelist". Moves are in Smith notation, a computer-friendly game representation. Internally, ChessViewer does not use algebraic notation, since that would require doubling the size of the code (and therefore doubling the download time). Moves are separated by spaces or vertical bars ("|"). Newlines are allowed, but will not necessarily delimit the moves (this varies from browser to browser, so their use is discouraged). If you must use a newline, also use a bar to guarantee the move is separated from the next move.

<param name=movelist value=
 "e2e4 e7e5 d2d4 d7d5 e4d5p|
e5d4p b1c3 b8c6 c1d2 g8e7 d1e2 d8d5p e1c1C">

initial

This parameter defines the initial state of the board. When omitted, the standard starting position is used. To show only a partial game (an endgame, for example), use "initial" to specify the placement of each piece. The board is specified from upper-left to lower-right (i.e. from a8 to h1), using the letters 'rnbqkp' to specify the pieces rook, knight, bishop, queen, king, and pawn, respectively. An empty square must be specified using a '-'. Upper-case pieces are used for white, lower-case for black.

Note that, even when starting at the middle of a game, turn-numbers begin at 1.

<param name=initial value="rnbqkbnrpppppppp--------------------------------PPPPPPPPRNBQKBNR">

title, whitename, blackname

These parameters determine the labels used by ChessViewer. "title" is the heading over the board. "whitename" and "blackname" are the names of the players in the match. If these parameters are omitted, no label is displayed.

<param name=title value="US Championships (Final), Round 3">
<param name=whitename value="Benjamin, Joel">
<param name=blackname value="Christiansen, Larry">

flipped, layout

These parameters affect the organization of the ChessViewer. If "flipped" is set to "true", then the chess board is shown from black's perspective (i.e. white on top, black on bottom). Otherwise, the default perspective is white's. If "layout" is set to "tall", all the components of the ChessViewer will be laid out vertically. Otherwise, the default layout is to have the board on the left and player names, scrollbar, and buttons on the right (space permitting). ChessViewer will automatically switch to a "tall" configuration if the supplied dimensions do not allow a "wide" layout.

Note that the "tall" format omits the move-list box.

Normally, these parameters are omitted.

<param name=layout value="tall">
<param name=flipped value="true">

textrows

This parameter affects the size of the textbox below the board. It defaults to 3 lines of text, and has a minimum value of 2.

<param name=textrows value=2>

textsize, titlesize, labelsize, listsize

These parameters determine the size of the font used in the comment text, the title, the move-list box, and the players' names. "textsize" defaults to a 12-point font (6-point minimum), "titlesize" defaults to 14, and labelsize defaults to the same size as "titlesize". "listsize" defaults to the same value as "textsize".

<param name=textsize value=12>
<param name=titlesize value=16>
<param name=labelsize value=14>
<param name=listsize value=12>

background, foreground, darksquare, lightsquare, blackpiece, whitepiece, highlight

These parameters allow you to customize the colors used to display the ChessViewer. Each of these parameters is in RGB hexadecimal format, used to specify a 24-bit color. For example, "00ff00" is bright green, because the G (green) digits are maxed out at ff, and the R (red) and B (blue) digits are zero.

"background" is the background color of the applet. "foreground" is the foreground color of the applet (labels, etc). "darksquare" and "lightsquare" are the colors of the spaces on the chess board. "blackpiece" and "whitepiece" are the colors of the chess pieces [these are obsolete in version 2]. "highlight" is the color of the highlighting square used to accent the most recent move.

<param name=background value="aaaaaa">
<param name=darksquare value="118011">
<param name=lightsquare value="dddddd">
<param name=blackpiece value="111133">
<param name=whitepiece value="ffeeee">
<param name=highlight value="ff0000">

comments

This parameter determines the commentary and analysis text below the board. There can be a comment associated with each move. The "comments" parameter consists of a concatenation of all the comments for the entire game. Comments begin with the move number (1 for white's first move, 2 for black's first move, etc.), followed by a colon, followed by the text of the comment, followed by a vertical bar ("|").

Paragraphs can be specified by using a "@p@" tag to indicate the paragraph break.

The PGN translater automatically adds the algebraic form of each move to the comments section.

<param name=comments value=
"1:e2-e4?? What was he thinking?|
4:This is a really stupid move|
8:Even worse...|
13:First time ever! @p@ Simultaneous resignations (0-0)">

prettymovelist

This parameter determines the text used inside the move-list box. Moves are separated by a vertical bar ("|") or a space. The number of items in the prettymovelist should equal the number of items in the movelist. When the initial letter of a move is one of R, N, B, Q, or K, it will be replaced with a figurine of size closest to the listsize parameter.

<param name=prettymovelist value=
"e4|e5|d3|Nb6">

from

This parameter allows you to "sign" your game. It is used in the tracking info passed to chessclub.com when someone clicks the "Visit ICC" button. The parameter value should not have any spaces.

In the future, we may use this information to give free months to members who successfully advertise the ICC through the use of the ChessViewer.

<param name=from value="Slimemold">

The </applet> tag and alternate HTML

After all the parameters you wish to include, add the </applet> tag.

Unfortunately, not everyone has a Java-enabled browser. For those who don't, you can include alternate HTML code that will only be visible to browsers that can not run Java. All text and HTML code (except <param> tags) that occurs between the <applet ...> and </applet> tags will be seen only by non-Java-enabled browsers.