xiangqidiag: a tool to show Xiangqi diagrams in webpages

Xiangqidiag

Xiangqidiag is a tool to include Xiangqi (Chinese Chess) diagrams into webpages. We have a large number of small pictures, showing one position on the Xiangqi-board, with or without a piece, and the tool automatically selects the right pictures and puts them in place to show the full diagram. Using the tool is not hard. Here, it is explained how this can be done for webpages on the chessvariants.com website; it can be done similarly on other websites: if you want to use the tool for your own website, please email Hans Bodlaender.

To use the tool, follow the following two steps.

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/ffen2diag.js. If you are in the top folder of chessvariants.com, you would use:

<SCRIPT LANGUAGE="JavaScript" src="lib/javascript/xiangqidiag.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/xiangqidiag.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/xiangqidiag.js"><!-- 
//-->
</SCRIPT>

2. Call a function that makes the diagram

Now, call a function of the script. The function is called xiangqidiag, xiangqidiag1, xiangqidiag2, xiangqidiaga, xiangqidiag1a, xiangqidiag2a. The options are as follows:

xiangqidiag, xiangqidiag1, xiangqidiag2 give diagrams with a transparent background.
xiangqidiaga, xiangqidiag1a, xiangqidiag2a give diagrams with a yellow background.
xiangqidiag1 and xiangqidiag1a should be used when calling one level deep in the directory structure.
xiangqidiag2 and xiangqidiag2a should be used when calling two levels deep in the directory structure.
xiangqidiag and xiangqidiaga are given a second argument that is the path to the place where the pictures are. This can e.g., be used when at the top level or three levels deep.

To the function, one gives a string that describes the position as an argument. In this string, we give the contents of the positions, starting at the top row from left to right, and then the next row, etc. A piece is represented by a single letter, as in the following table. Red pieces are lower case; black pieces are upper case.

K, k: King
R, r: Rook
E, e: Elephant
C, c: Canon
M, m: Mandarin
P, p: Pawn
H, h (or: N, n): Horse or knight

The end of a row must be marked with a slash: /.

Empty spaces are denoted by a number: the number of empty spaces; or a point ( . ) for one empty space. Thus, the opening setup of Xiangqi goes to the string: rhemkmehr/9/.c5c./p.p.p.p.p/9/9/P.P.P.P.P/.C5C./9/RHEMKMEHR

At depth one, we can then write:

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

with a result:

For making an empty board with yellow background, one writes:

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

More diagrams

An example page giving diagrams for all pieces on all squares can be seen here.

Written by Hans Bodlaender

WWW page created: October 19, 2001.