This tool is DEPRECATED, and it shall be removed from this site once no pages are using it anymore. The output of this tool is not mobile-friendly, because it displays ranks as series of images that can get broken up if the screen width is too narrow. 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.
ffen2diag: a tool to make chess and fairy chess diagrams
ffen2diag is a simple tool, that allows to include chess and chess variant diagrams in html pages. ffen2diag is based on Javascript.
How to call ffen2diag
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: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/ffen2diag.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/ffen2diag.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.<SCRIPT LANGUAGE="JavaScript" src="../../lib/javascript/ffen2diag.js"><!--
//--> </SCRIPT>
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 ffen2diag, ffen2diag1, or ffen2diag2. If one is `one level deep', use ffen2diag1, with between (" ") a string that describes the position. This string is in `Fairy Forsythe Edwards Notation (explained below.):And this will be the effect:<SCRIPT LANGUAGE="JavaScript" ><!-- ffen2diag1("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR")
//--> </SCRIPT>
At two levels deep, use ffen2diag2:
<SCRIPT LANGUAGE="JavaScript" ><!-- ffen2diag2("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 ffen2diag, 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 ffen2diag1:
<SCRIPT LANGUAGE="JavaScript" ><!-- ffen2diag("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR","../gif/")
//--> </SCRIPT>
FFEN-strings
In a FFEN-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.
gives:<SCRIPT LANGUAGE="JavaScript" ><!-- ffen2diag1("-(airplane)(flag)(windmill)-/p.(pr)(prr)(prrr)/2--1/1--2/P.(Pr)(Prr)(Prrr)/-(Airplane)(Flag)(Windmill)-")
//--> </SCRIPT>
Diagrams with marked columns and rows
It is also possible to mark the columns and rows with numbers and letters. For this one uses ffen2diag1b, ffen2diag2b, or ffen2diagb, 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':And this will be the effect:<SCRIPT LANGUAGE="JavaScript" > <!-- ffen2diag1b("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR"); //--> </SCRIPT>
The maximum numbers of rows and columns are around 30, but your diagrams won't look any good anyhow if they are so big.
Colored pieces
If you want to use colored pieces, then call instead of ffen2diag.js the file ffen2diagcol.js. Some of the pieces have colored variants; write the piece between brackets `(' and `)' and put the number at the end; e.g. (r2) for a yellow rook; (k3) for a green king, (general4) for a red general, and (ship5) for a blue ship.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 two gif-files, one on a black square, and one on a white square, and gif-files for an empty black and an empty white 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: September 18, 2001.