This tool is DEPRECATED, and it shall be removed from this site once no pages are using it anymore. Diagrams created with this shall be replaced with Diagram Designer images, in which a single diagram is displayed as a single image that will not break apart and look confusing. If you should come across this page in the meantime, do not use the JavaScript scripts mentioned here. Use the Diagram Designer instead.

shat2diag2: a tool to make chess and fairy chess diagrams

shat2diag2 is a simple tool, that allows to include chess and chess variant diagrams in html pages. shat2diag2 is based on Javascript. It is similar to ffen2diag, but gives uncheckered diagrams, which is rather usefull for games like Shatranj.

How to call shat2diag2

1. Include the library

At any spot in the html-file, before really using the diagrams (e.g., in the head), you must include a command that calls the file at www.chessvariants.com/lib/javascript/shat2diag.js. If you are in the top folder of chessvariants.com, you would use:

<SCRIPT LANGUAGE="JavaScript" src="lib/javascript/shat2diag2.js">
<!--
//-->
</SCRIPT>

If you are in a file that is one level deep, i.e., in a folder that is in the main directory (e.g., a file with a name like www.chessvariants.com/piececlopedia.dir/superpiece.html):

<SCRIPT LANGUAGE="JavaScript" src="../lib/javascript/shat2diag2.js">
<!--
//-->
</SCRIPT>

If you are in a file that is two levels deep, e.g., a file with a name like www.chessvariants.com/large.dir/colossuschess/puzzle.html, then use:

<SCRIPT LANGUAGE="JavaScript" src="../../lib/javascript/shat2diag2.js">
<!-- 
//-->
</SCRIPT>

If you want to use the tool outside the chessvariants.com domain, please email Hans Bodlaender. Non-commercial use of the tool is free.

2. Call a subroutine that makes the diagram

To make now a diagram, we can give a javascript that generates the diagram. Calling the script goes with either shat2diag, shat2diag1, or shat2diag2. If one is `one level deep', use shat2diag1, with between (" ") a string that describes the position. This string is in `Fairy Forsythe Edwards Notation (explained below.):

<SCRIPT LANGUAGE="JavaScript" >
<!-- 
shat2diag1("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR"); 
//-->
</SCRIPT>

And this will be the effect:

At two levels deep, use shat2diag2:

<SCRIPT LANGUAGE="JavaScript" >
<!-- 
shat2diag2("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR");
//-->
</SCRIPT>

One can also explicitly give the path to the collection of pictures that one wants to use. This allows also to use the tool with different sets of pictures, (when such are made.) In this case, use shat2diag, and give the path in the second argument: end with a /. As the pictures from www.chessvariants.com/gif are standard used, the following has the same effect as shat2diag1:

<SCRIPT LANGUAGE="JavaScript" >
<!-- 
shat2diag("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR","../gif/");
//-->
</SCRIPT>

shat-strings

In a shat-string, you describe the position rowwise, from top to bottom, from left to right. You can use:

Upper case characters for white pieces: K for white king, Q for white queen, B for white bishop, N for white kNight, R for white rook, P for white pawn.
Lower case characters for black pieces: k, q, b, n, r, p for black king, queen, bishop, knight, rook, and pawn.
A number for one or more empty squares: 1: one empty square; 8: eight empty squares, 12 for twelve empty squares in one row.
A slash / to mark the end of a row.
A dot . for one empty square.
A - for denoting a square that is not there. This is for chess variants with boards that are not a rectangle.
A name between ( ) to denote a piece with a longer name. See an overview of the type of pieces there are. A white piece starts with an upper case letter; a black piece with a smaller case letter. E.g.: (Airplane) or (airplane).
Some pieces have rotated forms; an r is added for each 90 degree rotation behind the name; use for example (kr), (krr), or (krr) for rotated black kings, (Pr), (Prr), (Prrr) for rotated white pawns.

For example,

<SCRIPT LANGUAGE="JavaScript" >
<!--
shat2diag1("-(airplane)(flag)(windmill)-/p.(pr)(prr)(prrr)/2--1/1--2/P.(Pr)(Prr)(Prrr)/-(Airplane)(Flag)(Windmill)-") <br> 
//-->
</SCRIPT>

gives:

Diagrams with marked columns and rows

It is also possible to mark the columns and rows with numbers and letters. For this one uses shat2diag1b, shat2diag2b, or shat2diagb, i.e., the only change with respect to unlabeled rows and columns is a b at the end of the name of the method called. For example, one can use when `one level deep':

<SCRIPT LANGUAGE="JavaScript" >
<!--
shat2diag1b("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR");
//-->
</SCRIPT>

And this will be the effect:

The maximum numbers of rows and columns are around 30, but your diagrams won't look any good anyhow if they are so big.

Conclusions

In this way, it is relatively simple to include chess variant diagrams into your hmtl-pages without much effort. In case of questions, please contact us. If there is interest in this tool for other websites, please email us. Non-commercial use is free, but do not call the tools on the chessvariants.com site from another site, but let us send you files you can put on your own site. The tool also works with a browser when you view the files at home, i.e., when not connected to the internet, when correctly used.

If one want to use different graphics for the pieces, one needs: for each piece a gif-files, and a gif file for an empty square. All these gif files must have exactly the same number of pixels horizontally and vertically. Email if you want to make such a set of pictures.

Written by Hans Bodlaender

WWW page created: December 10, 2001.