ChessViewer written by Andrew Gove
Copyright (C) 1997-2006 Internet Chess Club, Inc.
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
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"
Data and customization information is passed to ChessViewer through
<param> statements, described below. Note that the parameter
names are case-sensitive.
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
<param name=movelist value=
"e2e4 e7e5 d2d4 d7d5 e4d5p|
e5d4p b1c3 b8c6 c1d2 g8e7 d1e2 d8d5p e1c1C">
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
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">
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">
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,
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">
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|
13:First time ever! @p@ Simultaneous resignations (0-0)">
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
<param name=prettymovelist value=
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>
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.