Wednesday, April 20, 2005

The Quick&Dirty Guide to Using LT-PGN-Viewer

Nezha asked how the embedded boards work. I gave a short explanation in a comment to the last post. Here's the long explanation.

The game boards are on a website outside of blogspot, since you can't upload files to blogspot. I use the LT-Pgn_Viewer package. Get the pgnviewer.zip file from that link, upload it to your website, and unzip it into a directory of your choice.

Then you upload your pgn files to your website; give them a .txt extension rather than .pgn, because if your browser doesn't know what to do with a pgn file, it will download it instead of displaying.

Now you can display the games with the live board in your browser by using a url like: http://www.panix.com/~gaillard/chess/ltpgnviewer.html?games/ali.pgn.txt&ParsePgn=1 My website is "http://www.panix.com/~gaillard"; "chess" is the directory I unpacked the pgnviewer.zip in; "ltpgnviewer.html is from the LT-PGN-Viewer package; "games" is a subdirectory of "chess", and "ali.pgn.txt" is the pgn file to display. The "ParsePgn=1" tells the ltpgnviewer that it needs to parse the PGN into clickable JavaScript commands.

You should be able play though the game on most browsers (I've used Firefox and IE) if you have JavaScript enabled. However, some, like Opera, will not work.

To get it to work in Opera, you now do this: load that url in IE (or Firefox), right-click on the game area, view the source, and save it as an html file. Upload that html file to your website.

Now a URL like http://www.panix.com/~gaillard/chess/ltpgnviewer.html?games/ali.html should let you play over the game in any JavaScript-enabled browser. Notice that the "ParsePgn" argument is gone from the URL in this case; that's because when you saved the html file, you saved the already-parsed game.

Finally, to put that game board into your blogspot blog, you put an iframe in your post. The HTML looks like this: <iframe name="ali" scrolling="no" src="http://www.panix.com/~gaillard/chess/ltpgnviewer.html?games/ali.html" height="380" width="100%"></iframe> You need to give the iframe a unique name if you have more than one in your blog, and you need to specify the height and width. LT-PGN-Viewer has a lot of other options, like being able tyo have more than one game in a PGN file with, with a list you can select individual game from. It comes with documentation.

Many thanks to Lutz Tautenhahn, author of LT-PGN-Viewer, both for providing this excellent free tool for chess websites, and for his great help in getting this to work on this blog.


Comments:
This article has been very useful. I now blog my chess at:
http://www.xanga.com/home.aspx?user=smtalim
 
Thanks for writing this up. I couldn't figure out how to put an interactive chess diagram into my blog until I saw your explanation and use of the <iframe> tag.

I put the little additional information that I can add to your article in our blog at picturethis.topicalweb.com/what_just_happened/wp-trackback.php/116

It happens that I use similar but different PGN to Javascript software, called PGNtoJS, from www.mailchess.de

It seems to work essentially the same. Thanks for blazing the trail.

Roger
 
Post a Comment

<< Home

This page is powered by Blogger. Isn't yours?