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:

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

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.):

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

 //-->
</SCRIPT>

And this will be the effect:

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.

For example,

<SCRIPT LANGUAGE="JavaScript" ><!--
ffen2diag1("-(airplane)(flag)(windmill)-/p.(pr)(prr)(prrr)/2--1/1--2/P.(Pr)(Prr)(Prrr)/-(Airplane)(Flag)(Windmill)-") 
 //-->
</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 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':

<SCRIPT LANGUAGE="JavaScript" >
<!--
ffen2diag1b("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.

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.

Comments

ffen2diag: a tool to make chess and fairy / variant chess diagra. A tool to make chess and fairy / variant chess diagrams.

Charles Gilman wrote on Wed, Aug 1, 2007 02:32 AM EDT:

I am interested in using ffendiagcol for some 4-player pages of mine, but having tried it out I haven't managed to get it to work. Could you give an example similar to that used for the ordinary ffendiag?

Charles Gilman wrote on Wed, Dec 1, 2004 03:42 AM EST:Excellent ★★★★★

I was wondering how to suppress the rank numbers and file letters in correcting my diagram for Avon, in which numbering from 1 would be incorrect. If I understand this page correctly, all I need do is replace ffen2diag1b with ffen2diag1. This will also be useful for some diagrams that I am planning to other new and existing variants of mine.

Nasmichael Farris wrote on Tue, Nov 9, 2004 12:20 AM EST:Good ★★★★

Thanks for this, chessfriends. I will try to make good use of it here.

William Overington wrote on Tue, Oct 1, 2002 01:56 AM EDT:

An interesting matter is that when I sent in my two entries for the 84
spaces contest I sent in both entries as plain text emails, the web pages
being produced by the people at the www.chessvariants.com webspace.

I saved the web page files for both Tree garden chess and Herb garden
chess to local hard disc storage.

However, when looking at them offline some time later, the diagram in the
Tree garden chess page displayed properly but the diagram in the Herb
garden chess page did not.

Investigating the source code of the pages I found that the diagram in the
Tree garden chess page is constructed directly from gif files whereas the
diagram in the Herb garden chess page is constructed with the ffen2diag2
routine.

So, if someone wishes to make a copy of the Herb garden chess page to a
local disc and then look at it later offline, perhaps saving the
collection of files to a floppy disc so as to show the game to someone
when visiting their office, there is a problem over displaying the
diagram.

Is there a way around this or does a diagram which one wishes to view
other than online need to be constructed using gif files directly rather
than use the ffen2diag2 routine?

For example, could there be a support pack for the script so that one can
download that to the local disc as well, so that diagrams can show
properly when a web page is displayed offline please?

I like the idea of using the script to make diagrams as it saves a lot of
work in producing a list of gif files.  However, there do seem to be
support issues over someone wishing to simply save a web page directly to
a floppy disc in a public library and then taking the disc to another PC
in another place for offline viewing.  I wonder if a good idea might be to
offer the algorithm of the Javascript routine in the form of a tool for
offline use in the preparing of lists of gif files so as to facilitate the
drafting of a web page which has a diagram composed of gif files in the
conventional manner.  In that way, an end user would have the advantage of
the web page being capable of being saved for offline use in a
straightforward manner and the designer of a web page would have the
advantage of easier preparation of diagrams.

Number of ratings: 2, Average rating: Excellent, Number of comments: 4