Our Featured Variant: Try the Chinese game of Xiangqi, one of the most popular and enduring Chess variants in the world.
Rate this page! | Skip to comments
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">
<!--
xiangqidiag1("rhemkmehr/9/.c5c./p.p.p.p.p/9/9/P.P.P.P.P/.C5C./9/RHEMKMEHR");
//-->
</SCRIPT>
with a result:
For making an empty board with yellow background, one writes:
<SCRIPT LANGUAGE="JavaScript">
<!--
xiangqidiag1a("9/9/9/9/9/9/9/9/9/9");
//-->
</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.
Last modified: Monday, December 22, 2008
