You can copy the viewer to your own website for instance to www.mysite.com/chess/pgnviewer/.
Further you need some pgn files, for instance in www.mysite.com/chess/pgnfiles/. The viewer and the pgn files must
reside under the same domain, otherwise the viewer can not access the pgn file content, because cross site scripting is
not possible with modern web browsers due to security reasons.
The viewer can open a pure pgn file and automatically parse the pgn text to generate a webpage with all the games
which are included in the file: ltpgnviewer.html?ny1927pgn.txt&ParsePgn=2.
The file extension should be .txt instead of .pgn, so that you can be sure that the file will be opened in
any visitor's browser and that not the download dialog pops up.
The pgn file will be loaded in the right frame of the viewer
and after a few seconds it will be automatically transformed into an html file with a select box of all games.
You should always first try to use ParsePgn=2, if this doesn't work use ParsePgn=1. With ParsePgn=2 the parsing of the file
will be faster and also the resulting html file is smaller in size, however in some cases the parsing will not work.
This can happen, when there are characters in the pgn file which cause script errors. In this case use ParsePgn=1 which
should always work in modern web browsers.
To make the games replayable also in older web browsers and to make the loading of the page faster, do the following:
Right-click on the game area, view the source, and save it as an html file.
Now you can use the link ltpgnviewer.html?pgnfile.html (without ParsePgn) to show the games,
which will work in all JavaScript-enabled web browsers.
To select a certain game from the pgn file use "ltpgnviewer.html?ny1927pgn.txt&eval=ParsePgn(1,n)" (n=0,1,2,...) or "ltpgnviewer.html?ny1927pgn.txt&eval=ParsePgn(2,n)" (n=0,1,2,...) or ltpgnviewer.html?ny1927pgn.html&OpenGame=n when using this with an already parsed pgn file.
When you have a pgn file of a round robin tournament, you can also use ParsePgn=3 or ParsePgn=4. This will generate a cross table, where you can click on a game result to replay the game: ltpgnviewer.html?ny1927pgn.txt&ParsePgn=4
When you prefer a score sheet layout, then add &SetScoreSheet=n (n=0,1,2) to the url string. Note that no comments and variations will be visible with this layout option: ltpgnviewer.html?kasparov_deepblue_97_2.txt&ParsePgn=2&SetScoreSheet=2
If you are familiar with JavaScript you can also use the viewer in another webpage. Here is the viewer with a HTML file in the right frame and the pgn board in the left frame which is controlled by
some simple JavaScript commands included in the HTML file: ltpgnviewer.html?ltpgnviewerdemo.html.
You can also open the pages pgnboard.html and ltpgnboard.html in a new window and pass the JavaScript commands via url
window.open("ltpgnboard.html?SetTitle=A Very Short Game&AddText=<B>Click on the board to make a move!<|B>&SetPgnMoveText=1.g4 e5 2.f4 Qh4+&RotateBoard=true&AllowRecording=true&MoveForward=3", "", "width=300, height=440, menubar=no, locationbar=no, resizable=yes, status=no, scrollbars=no");
The commands will be executed in the same order as they appear in the url string. Note, that this will work with some browsers only via http, not in offline mode. Don't use the character for checkmate (#) in the PgnMoveText, because this is also html syntax for an anchor in an url and the commands in the url string would not be executed correctly.
If you want this to work also in the Opera browser, then use "|" instead of "/" in the url string, for instance use <|td> instead of </td>.
For generating HTML pages with pgn variations and comments I recommend to use the LT-PGN-EDITOR.
If you want to setup the start position (for instance for a chess problem) you can do this the following way:
Click the "Setup Board" button and after this on the board to generate the position you want. Click on "Ready" and
the FEN string will be displayed in the FEN input field. It is assumed, that both black and white can
still castle and that no "en passant" is possible in the first half move. If this is not the case, then please edit the
FEN string by hand (for instance replace "KQkq" by "-" at the end of the FEN string).
Here is another page for the setup of a chess position which is maybe a bit more convenient for you.
You can use the viewer also for Chess960 games (Fischer Random Chess),
which has slightly different castling rules. For recording you can alternatively click on the king and then on the rook, when you want to castle.
The viewer also has nullmove support, the pgn for nullmoves should look like this:
1. e4 --- 2. d4 d5 3. --- e5
If you want to disable the recording of nullmoves, use AllowNullMove=0 in the url string or AllowNullMove(0)
in the JavaScript which controls the viewer.
Moves can be recorded either by click & click or by drag & drop and the pieces can be jumping or sliding in the replay mode.
Drag & drop is off by default, you can use the parameter SetDragDrop=1 in the url string to set it on.
You can also click on the labels underneath the bord to switch it on/off.
To flip the board, click on the labels at the right side.
There are some additional sets of chess figures which
have been generated from the free chess fonts from
http://www.enpassant.dk/chess/fonteng.htm.
You can specify the ImagePath variable either directly by editing the file ltpgnboard.html or use it as parameter in the URL string: ltpgnviewer.html?my_games.html&SetImagePath=alpha30/
To show a board with a border around the squares, either add the JavaScript command SetBorder(1) at the top of the file ltpgnboard.html or append &SetBorder=1 to the url string (usefull when you want to give visual hints by colored borders): default border:default,
cases27,
alpha30,
merida33,
leipzig35 visual hints, border=1:default,
cases27,
alpha30,
merida33,
leipzig35
To give visual hints by Arrows, Borders or bgColors, you can add <commands> to the moves, i. e. 1.e4 d5<Ae4d5R><Be4G><Cd5B>
The commands must be appended directly behind a move, without spaces, included in <> and consist of the letter
A (Arrow), B (Border) or C (bgColor) + the target square(s) + R (red), G (green) or B (blue) or a hex color code i.e. FFFFFF (without #).
Instead of the target squares you can also use this or last to emphasize the current move or the last move which was made, i.e. 1.g4 e5 2.f4 Qh4+<BlastG><AthisR>
It is possible to include additional images before or after the board in the HTML page, this will not bother the script.
If you want to use the provided additional chess figure sets or create your own sets for the use on your website then
read the additional remarks about chess pieces and labels.
For using more than one board in a webpage have a look at the
multi board example 1 and
multi board example 2 (uses iframes).
The mini board example shows, how
to include and use the viewer within a menu.
The viewer can also be used for chess problems and puzzles: example 1 (make some wrong moves to see visual hints), example 2 (without hints).
The viewer comes with a pgn annotator which can be helpful for webmasters to let their users annotate chess games from a database. Note that this is only an example which doesn't really save the annotation. For further hints how to use it have a look at the source code of the file annotation.html.
You can also broadcast live games in real time. All you need is to update a text file with the pgn on your server.
The following example simulates this by using the files livetest1.txt ... livetest9.txt, so that you can see how it works:
ltpgnlive.html?livetest1.txt&SetScoreSheet=2 ltpgnlive.html?livetest1.txt&SetImagePath=leipzig35|&SetBGColor=E0C8A0
The update is currently every 10 seconds, you can change this by editing the line var UpdateInterval=10; //10 seconds in the file ltpgnlive.html.
You can generate animations which can run without user interaction, see the tutor example
how to make a quick win (uses Microsoft Agent technology).
When you use Internet Explorer, then the animation shows the MSAgent Merlin ((c) 1996-1998 Microsoft Corporation, all rights reserved), who speaks the comments.
This example loads a bunch of ActiveX controls, which should normally be downloaded automatically from the Microsoft website,
if not already installed. If this doesn't work, go to the Microsoft Agent download page
to see what you are missing. Have a look at the source code of the file animation1.html, to see how you can create your own animations.
You also can convert pgn from/into another language: Paste the pgn text into the text area at the right side of the game board and input you SAN letters into the input field next to the button Show, then click "Show". This works also in conjunction with parsing pgn files. When you want to use another SAN in an html file which was generated by parsing a pgn file, then append the SAN at the url string in the following way: ltpgnviewer.html?ny1927pgn.html&ShowSAN=KDTSLB
You can also directly convert pgn files by using the LT-SAN-CONVERTER.
Some other tools which might be useful for you: LT-PGN-TO-FEN-CONVERTER LT-PGN-CONTROL LT-ELO-CALCULATOR
LT-PGN-Viewer is freeware, but when it makes you feel better, you can donate. This will
maybe help me, to find the motivation for user support and further developments (and maybe help you to get a better
karma ;)