Choose your preferred setup method:
- Least technical
- Works with Blogger, WordPress
Custom - Most flexible
- Host the files on your server
Play chess online for free on Chess.com with over 50 million members from around the world. Have fun playing with friends or challenging the computer! Chess FEN Viewer Forsyth-Edwards Notation (FEN) Viewer. Drag and drop chess pieces on the board to arrange the chess board to a custom starting position. Online interactive chessboard with PGN viewer and editor, diagram editor and puzzle editor. Set up any position to play against computer or analyze with a chess engine. Make diagrams with arrows and selected squares or animations indicating moves with arrows. Create links to your chess positions or embed chessboards on your own pages. Chess Viewer: Demonstration of XSL FO and XEP. The power of XSL lies in its ability to perform radical transformations of the XML data source. This page contains yet another proof for this fact: you can build a chessgame viewer with a stylesheet! The source document is a transcription of a chess game played by Garry Kasparov against a chess.
STEP 1: Create the Viewer
Copy/Paste the following code into your webpage:
Blogger
Blogger lets you add scripts directly to your posts:
- Click on Edit for your post.
- In the upper left, switch the edit mode from 'Compose' to 'HTML'.
- On the right, under Post settings -> Options -> Compose mode, select: 'Interpret typed HTML'
Wordpress
If you are using the hosted version of Wordpress.com (your blog URL ends with .wordpress.com), you are not able to add Canvas Chess at this time, as it does not support scripts.
If you are hosting your own Wordpress blog, you can to add scripts to posts:
- Click on Edit for your post.
- Above the edit box, on the right side, switch the from 'Visual' to 'Text'.
STEP 2: Add the PGN
You should be able to view your page and see the Lasker vs Capablanca game. To change the PGN, replace this entire line:
With this line:
You now need to encode your PGN text before you can paste it between the single quotes ('). Paste the contents of your PGN file into the box below, then click Encode PGN.
After pasting the encoded PGN between the single quotes, you should be able to view your PGN on your webpage.
STEP 1: Download the Project
If you prefer to host the project on your own server, you will need to:
- Download the latest version of Canvas Chess + PGN Viewer from the downloads page.
- Unzip the folder and upload the files to your web hosting server.
The exact location will depend on your server setup, but you should place the files within your website's root folder in appropriately named directories, such as:
- /webroot/mysite/canvaschess/pgn.css
- /webroot/mysite/canvaschess/canvaschess.js
STEP 2: Create the Viewer
- Include the PGN stylesheet in the head of your HTML (line 5).
- Paste the JavaScript code in your HTML body (lines 8-14).
- Remember to update the paths for the JS/CSS and the file name for the PGN.
If you run into any problems, take a look at the Easy Setup. It provides an alternative to hosting the project and PGN files (linking to the Canvas Chess hosted files, and using a text string instead of a PGN file).
Note: Canvas Chess does not offer any services for creating or hosting PGN files.
Home | PGN Viewer FAQ | Chess Around the World | support@kvchess.com
Click here to learn more about KnightVision mobile apps for iPad, iPhone, iPod Touch and Android.
Please note that some of the publishing defaults and options below have recently changed (February 2013).
Chess piece graphics
The chess pieces used in KnightVision Chess PGN Viewer are based on the svg chess pieces from Wikimedia at http://commons.wikimedia.org/wiki/Category:SVG_chess_pieces and the work of users Cburnett and Antonsusi and are licensed under the BSD license:
Copyright The author
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:- Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
- Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
- Neither the name of The author nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
Jangaroo
The mobile version KnightVision PGN Web Publishing leverages Jangaroo from CoreMedia AG, Hamburg and is licensed under the Apache license:
Copyright (c) 2008-2010 CoreMedia AG, Hamburg. Licensed under the Apache License, Version 2.0 (the 'License'); you may not use this software except in compliance with the License. You may obtain a copy of the License at
Chess Viewer For Linux
http://www.apache.org/licenses/LICENSE-2.0Chess Viewer
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.