Chess Engine 'pgn4web' is for website developers that need a nice chess viewer.


Javascript chess games viewer for websites

Developer: Paolo Casaschi.
Project homepage: (including downloads and wiki)
Contact email: pgn4web(at)casaschi.net

Package pgn4web release 2.53 set here, for new version please follow to links above.

Please note. Game variations support started from release 2.46.

~~~~~~~~~~~~

Useful links to study how pgn4web works.

home.html :: Home page of Package pgn4web release 2.53 on USA2017.INUMO.RU website.

~~~~~~~~~~~~

Features:

• display chess games form a PGN file on a dynamic chessboard on your webpage or blog
• full support for browsing game variations and reviewing comments
• shortcut keys for navigating through the game, for selecting the game from the file and much more; also uses chessboard squares as input buttons (hit escape for help)
• fully customizable display. Each item (board, button bar, game selection menu, PGN header info, game text, game comment and more) can be displayed (or hidden) at pleasure in your html file
• support different chess bitmaps (even custom bitmaps) and different chessboard sizes
• provides a very simple board generator web tool helping you adding chess games to your website or blog without any html/javascript coding (see: , /cheng/board-generator/
• integrated with popular blog platforms (such as blogger and wordpress), portal platforms (such as joomla, drupal and wikimedia), forum platforms (such as phpBB, simplemachines and vbulletin) and hosting services (such as google sites)
• integrated with HTML5 video and YouTube video
• allows for live broadcast of games

~~~~~~~~~~~~

Sample 1: Mikhail Tal :: President of USA2017



~~~~~~~~~~~~

To show sample above on your site or blog you need:

1. Get PGN code of the game:
[Event "The Game"] [Site "usa2017.inumo.ru"] [Date "before 2017"] [Round "1 and only"] [White "Mikhail Tal"] [Black "usa2017"] [TimeControl "720"] [Result "0-1"] [ECO "oft "] 1.d4 Nf6 2.c4 g6 3.Nc3 d5 4.Nf3 Bg7 5.cxd5 Nxd5 6.e4 Nxc3 7.bxc3 c5 8.Rb1 O-O 9.Be2 Bg4 10.O-O Qa5 11.Rxb7 Qxa2 12.d5 Nd7 13.Bg5 Rab8 14.Rxb8 Rxb8 15.h3 Bxf3 16.Bxf3 Bxc3 17.Bxe7 Bd4 18.Bd6 Rb2 19.Bg3 Ne5 20.Bg4 h5 21.Bc8 Rb8 22.Bxe5 Bxe5 23.Bd7 Rb2 24.Qc1 c4 ( 24...Bd4 ) 25.Qg5 Bd4 26.Qf4 Rxf2 27.Rxf2 Qa1+ 28.Kh2 Be5 29.Be8 Bxf4+ 30.Rxf4 Qe5 31.Bxf7+ Kg7 32.g3 h4 0-1

2. Go to the page: /cheng/board-generator/ where use following parameters:
~~~~~
game replay options
~~~~~
game :: autoplay games autoplay first game once, or loop continiously, or autoplay none
5 sec :: autoplay delay
first :: initial game
:: initial variation a number; applies only at the first game load; when blank, defaults to the main variation
start :: initial halfmove start, end, random and comment settings apply at every game load, custom number only at the first load
0 :: initial halfmove number actual halfmove number when the setting above is custom number

~~~~~
chessboard options
~~~~~
60 :: square size a number; must be larger than the piece size plus the highlight border if any
50 :: piece size default selects piece size based on square size
0font :: piece font default selects piece font based on piece size
D0D0D0 :: light squares color
303030 :: dark squares color
000000 :: board border color
border :: board shadow color a color; transparent disables the shadow, border copies the board border color
border :: square highlight mode
FFFFE0 :: highlight squares color
standard :: how to show control buttons browser's standard buttons, or custom colors below, or hidden buttons
custom control buttons background color (no use for standard mode)
custom control buttons text color (no use for standard mode)

~~~~~
header and moves options
~~~~~
10 :: text margin a number; header/moves margin, nice to have when text overflows with scrollbars
centered :: how to show game header
16 :: header font size a number
000000 :: header font color

figurine :: how to show game moves select a game moves display option or use the one click optimized puzzle setup
16 :: moves font size a number
000000 :: moves font color
FFFF90 :: highlight move color a color; background copies the background color
inline :: how to show move comments and variations inline inbetween game moves, or on a newline , or hidden
moves :: comments and variations font size a number; moves copies the moves font size
808080 :: comments and variations font color

~~~~~
header and moves options
~~~~~
horizontal :: chessboard and header/moves layout
560 :: iFrame height a number or board; min 541; when blank, assigned to board
790 :: iFrame width a number or page; min 486; when blank, assigned to page; board width is 486
05 :: iFrame padding a number; border padding around the iframe, included within the iFrame width value
transparent :: background color a color; transparent uses the parent's background color

Click 'generate the HTML code and preview your chessboard', you have to get a code like this:
<iframe height='560' width='790' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' allowtransparency='true' src='/cheng/board.html?am=g&d=5000&ss=60&ps=50&pf=0&lcs=Pc2f&dcs=b2$L&bbcs=$$$$&bscs=b&hm=b&hcs=___v&bd=s&cbcs=W_iH&ctcs=$$$$&hd=j&md=f&tm=5&fhcs=$$$$&fhs=18&fmcs=$$$$&fccs=v71$&hmcs=__Zf&fms=16&fcs=m&cd=i&bcs=t&fp=5&hl=t&fh=560&fw=790&pe=544$zlax9RvgZt85tXex1BHAB0G3vhY_U1wxvjZ6LEG86SG3vig3KCM7fDnDjQzJ_aQsL7PtkS6NJgt4coaZt2l8$GX52CK0HDeSHwilh1NYfdvfuoBrfDnDjQzyX56MaWUlOWW9047j4coaE6V_9P1je54co7IuaD4XAp0ila2$Sx0zJfv4bfCN5$5DNcVy$0zBf3Bk5vjGKj2kSFd$8x0FPo0f5FPo4cfT2GgDm6AP2v03g$ht7bD0rtmfWWj5b2IlxDsGU35f2tD5Rk0B$1iPHWUEN2n0RGizsFPU0I$to$kjBfqv$FEbv9I5fnD$kh4f4K35r$4Kzspg0wL$zRfbij7j$3Cx6IfvL$FdgQEN37$4jBD1Fij7n$aojspg1b$sDp4Abfsw5$$$4K3uV3p$VCF$ITw6$dEnyIjzfvD6pE7wSMKP7r0rXx$xpw$T$g671FAyY24$sFAx6hpwwv0kh9_grBk23$io2R7je5la$0'>your web browser and/or your host do not support iframes as required to display the chessboard</iframe>

Insert this code on your site or blog and all done.

~~~~~~~~~~~~

Sample 2: Carlsen, Magnus :: Svidler, Peter (Wch Blitz, Moscow, 2010.11.18)


PGN code of the game:
[Event "Wch Blitz"] [Site "Moscow RUS"] [Date "2010.11.18"] [Round "30"] [White "Carlsen, Magnus"] [Black "Svidler, Peter"] [Result "1-0"] [SetUp "1"] [FEN "8/6k1/1R6/p2pBnP1/8/8/r7/6K1 b - - 6 62"] [VideoTime "0.6"] 62... Kh7 {[%vt 3.5]} 63. g6 {[%vt 4.3]} 63... Kh6 {[%vt 5.7]} 64. g7 {[%vt 6.4]} 64... Kh7 {[%vt 7.2]} 65. Rb8 {[%vt 7.8]} 65... Nxg7 {[%vt 10.1]} 66. Rb7 {[%vt 10.9]} 66... Kg6 {[%vt 11.9]} 67. Rxg7 {[%vt 12.5]} 67... Kf5 {[%vt 14.1]} 68. Bd6 {[%vt 16.2]} 68... d4 {[%vt 17.1]} 69. Kf1 {[%vt 18.1]} 69... Ke4 {[%vt 18.8]} 70. Ke1 {[%vt 20.1]} 70... a4 {[%vt 21.3]} 71. Rg3 {[%vt 22.6]} 71... d3 {[%vt 23.3]} 72. Kd1 {[%vt 25.6]} 72... a3 {[%vt 27.6]} 73. Rg4 {[%vt 28.4]} 73... Kf3 {[%vt 30.3]} 74. Ra4 {[%vt 31.2]} 74... Ra1 {[%vt 34.6]} 75. Kd2 {[%vt 35.6]} 75... a2 {[%vt 36.7]} 76. Be5 {[%vt 37.5]} 76... Rh1 {[%vt 41.8]} 77. Kxd3 {[%vt 46.7]} 77... Rd1 {[%vt 47.7]} 78. Kc2 {[%vt 49.4]} 78... Rd5 {[%vt 50.6]} 79. Bc3 {[%vt 51.9]} 79... Rd8 {[%vt 54.9]} 80. Rxa2 {[%vt 55.7]} 80... Ke4 {[%vt 56.6]} 81. Ra4 {[%vt 57.4]} 81... Kf5 {[%vt 58.3]} 82. Bd4 {[%vt 59.2]} 82... Rd7 {[%vt 60.6]} 83. Kd3 {[%vt 61.4]} 83... Rd8 {[%vt 62.2]} 84. Ra5 {[%vt 63.2]} 84... Kf4 {[%vt 65]} 85. Ra6 {[%vt 66.4]} 85... Kg5 {[%vt 74.9]} 86. Ke4 {[%vt 75.7]} 86... Rb8 {[%vt 79.4]} 87. Ra7 {[%vt 83.5]} 87... Rb4 {[%vt 84.8]} 88. Rg7 {[%vt 85.8]} 88... Kh4 {[%vt 87.5]} 89. Rg8 {[%vt 89.3]} 89... Ra4 {[%vt 90.2]} 90. Ke5 {[%vt 93]} 90... Kh3 {[%vt 94.4]} 91. Be3 {[%vt 95.8]} 91... Rb4 {[%vt 98.4]} 92. Kf5 {[%vt 99.7]} 92... Ra4 {[%vt 110]} 93. Bf4 {[%vt 110.8]} 93... Ra3 {[%vt 113.7]} 94. Bd6 {[%vt 120.8]} 94... Ra4 {[%vt 121.9]} 95. Rg3 {[%vt 123.9]} 95... Kh4 {[%vt 124.7]} 96. Rg2 {[%vt 127]} 96... Kh5 {[%vt 131.7]} 97. Rg8 {[%vt 137.4]} 97... Kh6 {[%vt 142.3]} 98. Be5 {[%vt 144.1]} 98... Ra7 {[%vt 145.7]} 99. Rg1 {[%vt 149.4]} 1-0

~~~~~~~~~~~~

Sample 3: Task 'mate in 2' (USA2017 ©)


PGN code of the task:
[Event "Task 'mate in 2'"] [Site "USA2017.INUMO.RU"] [Date "2012.04.25"] [FEN "8/Pk2P3/1P6/1K6/8/8/8/8 w - - 0 01"] [SetUp "1"] 1.e8B Ka8 (1... Kc8 2.a8Q#) 2.Bc6#

~~~~~~~~~~~~

Sample 4: piece font alpha, dark squares color blue.



~~~~~~~~~~~~

Sample 5: piece font merida, size of the board is little.



~~~~~~~~~~~~

Sample 6: piece font uscf.



~~~~~~~~~~~~

Sample 7: Big board, text below, piece font merida.



~~~~~~~~~~~~

Portable Game Notation (PGN) is a computer-processible format for recording chess games (both the moves and related data); many chess programs recognize this extremely popular format due to its being stored in plain text.

• Filename extension :: .pgn
• Internet media type :: application/x-chess-pgn (unregistered)
• Developed by :: Steven J. Edwards
• Initial release :: 1993
• Type of format :: Chess game record

PGN code begins with a set of "tag pairs" (a tag name and its value), followed by the "movetext" (chess moves with optional commentary).

Tag pairs.

Tag pairs begin with an initial left bracket "[", followed by the name of the tag in plain text (ASCII). The tag value is enclosed in double-quotes, and the tag is then terminated with a closing right bracket "]". There are no special control codes involving escape characters, or carriage returns and linefeeds to separate the fields, and superfluous embedded spaces (or SPC characters) are usually skipped when parsing.

PGN data for archival storage is required to provide seven bracketed fields, referred to as "tags" and together known as the STR (Seven Tag Roster). In export format, the STR tag pairs must appear before any other tag pairs that may appear, and in this order:

• Event: the name of the tournament or match event.
• Site: the location of the event. This is in "City, Region COUNTRY" format, where COUNTRY is the three-letter International Olympic Committee code for the country. An example is "New York City, NY USA".
• Date: the starting date of the game, in YYYY.MM.DD form. "??" are used for unknown values.
• Round: the playing round ordinal of the game within the event.
• White: the player of the white pieces, in "last name, first name" format.
• Black: the player of the black pieces, same format as White.
• Result: the result of the game. This can only have four possible values: "1-0" (White won), "0-1" (Black won), "1/2-1/2" (Draw), or "*" (other, e.g., the game is ongoing).

The standard allows for supplementation in the form of other, optional, tag pairs. The more common tag pairs include:

• Annotator: The person providing notes to the game.
• PlyCount: String value denoting total number of half-moves played.
• TimeControl: "40/7200:3600" (moves per seconds: sudden death seconds)
• Time: Time the game started, in "HH:MM:SS" format, in local clock time.
• Termination: Gives more details about the termination of the game. It may be "abandoned", "adjudication" (result determined by third-party adjudication), "death", "emergency", "normal", "rules infraction", "time forfeit", or "unterminated".
• Mode: "OTB" (over-the-board) "ICS" (Internet Chess Server)
• FEN: The initial position of the chess board, in Forsyth-Edwards Notation. This is used to record partial games (starting at some initial position). It is also necessary for chess variants such as Fischer random chess, where the initial position is not always the same as traditional chess. If a FEN tag is used, a separate tag pair "SetUp" must also appear and have its value set to "1".

Forsyth–Edwards Notation (FEN) is a standard notation for describing a particular board position of a chess game. The purpose of FEN is to provide all the necessary information to restart a game from a particular position.

FEN is based on a system developed by the Scottish newspaper journalist, David Forsyth. Forsyth's system became popular in the 19th century; Steven J. Edwards extended it to support use by computers. FEN is an integral part of the Portable Game Notation for chess games, since FEN is used to define initial positions other than the standard one. FEN does not represent sufficient information to decide on a draw by threefold repetition; for that, a different format such as Extended Position Description is needed.

A FEN "record" defines a particular game position, all in one text line and using only the ASCII character set. A text file with only FEN data records should have the file extension ".fen".

The board is broken into eight ranks. (A rank is a chess term for a row of eight squares running from left to right.) Each rank is converted into a string, then all eight of these strings are compacted together separated only by slashes (/).

A FEN record contains six fields. The separator between fields is a space. The fields are:

1. Piece placement (from white's perspective). Each rank is described, starting with rank 8 and ending with rank 1; within each rank, the contents of each square are described from file "a" through file "h". Following the Standard Algebraic Notation (SAN), each piece is identified by a single letter taken from the standard English names (pawn = "P", knight = "N", bishop = "B", rook = "R", queen = "Q" and king = "K").[1] White pieces are designated using upper-case letters ("PNBRQK") while black pieces use lowercase ("pnbrqk"). Blank squares are noted using digits 1 through 8 (the number of blank squares), and "/" separate ranks.
2. Active color. "w" means white moves next, "b" means black.
3. Castling availability. If neither side can castle, this is "-". Otherwise, this has one or more letters: "K" (White can castle kingside), "Q" (White can castle queenside), "k" (Black can castle kingside), and/or "q" (Black can castle queenside).
4. En passant target square in algebraic notation. If there's no en passant target square, this is "-". If a pawn has just made a two-square move, this is the position "behind" the pawn. This is recorded regardless of whether there is a pawn in position to make an en passant capture.
5. Halfmove clock: This is the number of halfmoves since the last pawn advance or capture. This is used to determine if a draw can be claimed under the fifty-move rule.
6. Fullmove number: The number of the full move. It starts at 1, and is incremented after Black's move.

Examples:

Here is the FEN for the starting position:
rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1

Here is the FEN after the move 1. e4:
rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 0 1

~~~~~~~~~~~~



More Info about Javascript chess games viewer for websites 'pgn4web' →


~~~~~~~~~~~~

Happy chess games to you!