yahapar world: October 2009

Saturday, 31 October 2009

How to configure the chess game viewer?

This post explains how you can adapt your template in order to use the Chess Game Viewer, but first configure and try the FEN-viewer.

If the FEN-viewer is working fine we start to configure the chess game viewer.
Go to Layout » Edit html
and make a backup of your template

Then find something like

]]></b:skin>
</head>
<body>

We are going to add some lines above and below this, but also adding an onLoad statement to the body tag.

#pc1 {position:absolute; visibility:hidden; cursor:hand;}
.qzs {position:relative; visibility:hidden;}

]]></b:skin>
</head>
<body onLoad='InitSys();'>
 <div id='pc1' onClick='DropPc(cg)'>
 <img name='dpc'
  src='http://sites.google.com/site/viewchessgame/pcs/i.gif'/>
</div>

And (after saving your template) the configuration part is finished.

Let's try it by adding the following code to a post.

<SCRIPT language='JavaScript' 
type='text/javascript'>
Game('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR 1',
'sc@@K[@@z^@@@Q@@|a@@ET@@^L@A',
'1.e4 e5 2.Qh5 Nc6 3.Bc4 Nf6 4.Qxf7# 1-0',
1,6);</SCRIPT>

This is the Scholar's Mate.

The arguments for the Game function are similar to the Fen2Page function. At the moment we still have to add the coded moves (that can be copied from the file generated by Palview). The last optional argument indicates the initial position that has to be shown, because the starting position of the chess board isn't very informative.

Monday, 19 October 2009

Night Chess

Night Chess by Wiccked
All sizes of this photo are available for download under a Creative Commons license

Thursday, 15 October 2009

How to configure the FEN viewer?

I'm going to explain how you can publish re-playable chess games on your blogspot blog without the need to use another external site. This will be done in some different steps, which will enable you to detect possible problems as early as possible (without having done a lot of work).

This first step will enable you to use the FEN viewer.

First, Go to Layout » Edit html
and make a backup of your template

Now we look for the line with the title tag. This is probably something like <title><data:blog.pageTitle/></title> and copy the following lines just before this line.

<script src='http://sites.google.com/site/viewchessgame/js/gv.js'
type='text/javascript'/>

Next you have to add the following lines to the css part

.board img{margin:0;padding:0;border:0;background:none transparent}
.board table,tr{margin:0;line-height:9px}

If you don't know where to add it an appropriate place is probably just before the line

]]></b:skin>

And now the configuration part is finished (after you have saved your template) and you are able to use the FEN-viewer in your posts, just like in the post about displaying a diagram and about the improved blogspot FEN viewer.
Use the edit html to insert this kind of code in a post. The used code (in your post) for this last mentioned diagram with the letters, figures and Black to move indication is

<script language="JavaScript">
Fen2Page('rnbqk2r/ppp2pp1/5n1p/3p2B1/1b1P4/2N5/PPQ1PPPP/R3KBNR',2,1);
</script>

The first argument is the FEN code of the diagram that has to be displayed
The second optional argument (0, 1 or 2) indicates if the White/Black-to-move indication has to be shown. No move indication: 0, White to move: 1 and Black to move:2
The third optional argument indicates if the figures and letters have to be shown.

The code mentioned above results in:

Tuesday, 6 October 2009

Overview of Chess Publishing Methods

This blog is in fact an overview of all kind of Chess Publishing Methods. This post tries to give a short overview of my personal opinions about these methods.

Chesspastebin
Chesspastebin is based on JsPGNViewer, which can also be used if you are able to include the jsPgnViewer.js in your webpage.
The jsPgnViewer library takes the PGN of the chess game and parses it on the fly, which makes this JavaScript code very interesting.

The main disadvantages are:

It runs within an iframe on another site
There is an additional scrollbar, which makes that you have to scroll to see all the moves
Sometimes the games seem to disappear making that you have to publish them again

Chesspublisher

Chesspublisher creates a nice replayable diagram, but the result is limited to a diagram with some buttons. The main drawbacks of Chesspublisher are:

the lack of clickable moves and the fact that it is impossible to add variations.
and it also runs within an iframe like almost all chess publishing methods
In addition you have to genertate the diagram on their site

Chess Publisher 2

Chess Publisher 2 was an improved version of the original Chesspublisher, but not available anymore. This emphasizes that you can't really depend on other sites for the publishing of your chess games.

HTML Code Generator for Blogs

Quite another method to publish chess games on your blog is by means of the HTML Code Generator for Blogs, The method to publish chess games is described very well on their site and it can also be used for puzzles.

Some of the disadvantages

Fixed width and very limited possibilities to configure, like having a fixed width
Comments and variations are hidden
This method uses Java which takes a rather long time to load
The code runs and is dependatn on an external site.

LT-PGN Editor and Viewer

The LT-PGN Editor and Viewer is another rather nice method to publish chess games. There is no need to visit a site in order to convert your games or to generate the diagrams. You just have to add an iframe in your post with the url and the pgn data.

Some disadvantages:

Uses external site
The method uses iframes which makes that the viewer code is loaded for each game to be published

All files are available to run them on your own host.

Adapted version LT-PGN Viewer

An adapted version can be created that even has some more advantages. An example of this can be found in Some traps in the Sicilian game, but I used Google Pages to host the files which will probably be discontinued in the future.
The method can still be used on another host.

This adapted version fulfilled most of my requirements and I even thought that the Mission to find the right chess publishing method was accomplished, but I still had to do some experiments with chess puzzles and the method was still dependant on another site.
The originals requirements/wishes also stated that it should all be integrated within the blogspot template. Therefore the search continued.

Blogspot Chess Diagram Viewer

If you only want to display a chess diagram it can rather easy be accomplished by JavaScript that you include in your blogspot template as you can see in this improved version post.

Blogspot Chess Game Viewer

I also am convinced that it is rather easy to add replayable games based on a combination of Palview and the method I used to display the diagrams. You already can see some of the experiments with this method (see the two previous posts) and I will explain it in more detail later, but at the moment the code is still changing every day.

Monday, 5 October 2009

Mate in three

The moves above will be shown as soon as you make the correct move or after three wrong attempts. You can make a move by clicking at a piece followed by clicking the target square.

This mate in three diagram is only used as an experiment of this new chess publishing method.

Friday, 2 October 2009

Kramnik - Kasparov, SuperGM 2003

It seems to work rather well, but let me know in the comments if you experience some difficulties.