Diagram Editor with scalable graphics

Introduction

https://chessvariants.com/cgi-bin/fen2.php is an on-line service for providing images of fairy-chess positions or individual pieces. What makes it special is that the images are not just provided by copying a file, but are processed according to user specification first: it is possible to customize the colors of squares and pieces, as well as the sizes. To make that possible the images are stored on the server as 'scalable vector graphics', and requesting them through fen2.php will make the server render them to a PNG image according to specification.

Below you find an applet that can be used for creating a diagram as PNG image: After selecting a piece theme (if you don't want to use Alfaerie), and then board size & coloring (pressing the 'Apply' button to enforce those), you can select a piece you want to put in the diagram from the scroll window with available pieces on the right, by clicking on its image there. Then every click on an empty square of the board will place that piece on the clicked square, until you click another piece.

Initially pieces will be placed in color-reversed pairs to speed up the process, until you press the 'Asymmetric' button, after which pieces will be placed one at the time. Pieces already on the board can be clicked or dragged for moving them; this way you can correct the location of misplaced pieces, or capture the latter with another piece.

Once you set up the complete position, you can press the 'Draw' button below it to make it appear as a single PNG image, of the specified size. (Which you can also alter, below the interactive board, by typing another square size.) You can then fetch this image by right-clicking it, and selecting 'Save image as...' from the context menu of your browser. Or you can copy-paste one of the text forms that would generate the image on the fly in various contexts, such as a URL or in a HTML text.

Diagram editor

Technical description

For all parameters that determine how the pieces will be rendered, fen2.php has a default value, and if those values suit you, the only thing you have to specify is the piece or board position. These have to be specified by suffixing the URL from which you request the image with ?p=NAME for a piece, and ?f=FEN for an entire position diagram, where NAME is the name of the piece (like wqueen for a white Queen), and FEN is the board part of a FEN (like rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/BNRQKBNR for the start position of orthodox Chess). If you ask for a piece it will be provided with transparent background, if you ask for a position the squares will be opaque background. The default colors for the square shades are light and dark brown for Alfaerie, but can depend on the piece theme. By default the pieces will be rendered as 50 x 50 (pixels), and use the Alfaerie image set, with white interior for the white pieces, and greyish-blue interior for the black pieces, just as when you would directly refer to the .gif files of the Alfaerie set. The difference is that the images obtained through fen2.php are anti-aliased, and will thus look much less ragged than the .gif images.

s=100&b=FF0000

Defaults can be altered by suffixing &NAME=VALUE pairs to the URL, where NAME is l or d for the light and dark square shade, and w or b for the interior color of white and black pieces, respectively. The VALUE for these colors has to be specified in the hexadecimal RGB system also in use with HTML: FFFFFF for white, FF0000 for bright red, etc. The size can be specified by suffixing &s=N, which then will produce images of N x N pixels for each piece. Finally, the theme can be selected by suffix &t=THEME, where THEME currently can be alfaerie, xboard, utrecht, motif, magnetic and Greenwade. In principle different themes can have different defaults for the other parameters, and support a different set of pieces. Some themes have separate ('solid') images for the black pieces. These will be used when the black color is set to 202020; other colors will be used to fill the white ('outline') pieces. The THEME refers to a directory on the server that contains the scalable image files for the pieces in that theme, so in principle other themes can be installed as well.

&t=xboard

You can use the piece images provided by fen2.php in all places where you would otherwise use images directly from a file on the server. E.g. to get a white Knight from an image file you would use a URL like http://chessvariants.com/graphics.dir/alfaerie/wknight.gif , to get it through fen2.php you would use /cgi-bin/fen2.php?p=wknight . This means you can also use these pieces in scripts like the Interactive Diagram, which ask for the URL of the directory where they should look for pieces, what prefixes they should use to distinguish white and black pieces, and a 'graphics type' to use as extension to the filename (.gif, .jpg or .png). You would just specify "/cgi-bin/fen2.php?p=" as 'directory name', 'w' and 'b' as color prefixes, and leave the graphics type empty. To render with non-default parameters you could specify these immediately before the "p=", like "/cgi-bin/fen2.php?s=33&w=FF0000&b=00FF00&p=" to render with red and green pieces of size 33 x 33 pixel. (The order of the various parameters is never important, just make sure they are separated by &.)

Orientation and compound pieces

<wqueen

All available pieces can be rendered in other orientations. This can be done by prefixing the piece name with < (less than), > (greater than) and _ (underscore), to rotate 90-degree left, 90-degree right or 180 degree, respectively. A second < or > can be added after the first, to do an extra rotation of 45 degree left or right.

bnightrider-bbishop
wnightrider|wqueen

It is also possible to construct images for compound pieces by rendering two pieces in one square, the second one behind and slightly above the other. This can be done by by writing the front and background pieces with a hyphen in between, like wknight-wqueen to get a Queen behind a Knight. It is also possible to combine two pieces vertically, one flipped upside down. In that case the pieces have to be separated by a | (vertical bar).

When making compound pieces using the full piece names, (where the color is an explicit prefix, rather than derived from the case as in FEN), you can specify the colors of the pieces to be combined independently. But that would not work when the piece is used in scripts that apply the color prefixes themselves, as they would only apply it to the first (foreground) piece. To solve that the color prefix of the second (background) piece can be written as hyphen (so that the names are separated by two hyphens), which is that taken to mean "same color prefix as the first piece".

Fairy pieces

In principle every piece image in the set can be used in a FEN, by putting the filename of the image (without extension) between parentheses in the desired position. This leads to very long FENs, though. To avoid that, the most common pieces can be specified by an ID consisting of a single letter (capitals for white, lower case for black), possibly followed by a punctuation symbol. The orthodox Chess pieces are indicated by their normal IDs: P, N, B, R, Q and K. But there are also single-letter IDs for most elementary leapers: Ferz, Wazir, Daddaba, Camel and Zebra (F, W, D, C, Z). Popular animals also have their own letter: E (Elephant), T (Tiger), L (Lion), O (Ox), H (Hawk), M (Man) even when there is no obvious move associated with them. Remember that the purpose here is to create images, not game rules, so how pieces move is not really relevant, although the Alfaerie set of course has many piece images that directly imply the move. The letter A is assigned to the Alibaba, however, as the Alfil is usually depicted by the Elephant, which already is E. The letters S and G indicate the Shogi Silver and Gold General.

Letters can be suffixed with the symbols ' (quote), ` (back-quote), " (double quote) ~ (tilde), ^ (circumflex), ! (exclamation point) and : (colon). To make it easy to remember, fen2.php has adopted a few conventions for their use. The tilde is used for 'knighted' pieces (because it looks a bit like the letter N). So the Archbishop is B~, the Chancellor R~, the Wildebeest C~. The single quotes are used to indicate 'crowned' pieces; the normal quote for orthogonal steps, the back-quote for diagonal steps (because it is usally slanted in most fonts). So the Crowned Rook (Dragon King) is R`, the Crowned Bishop (Dragon Horse) is B'. C` would be the Omega Chess Wizard (Camel + Ferz moves). Because the A is for the Alibaba (Alfil + Dababba moves), the Omega Chess Champion is A' (i.e. Wazir moves on top).

With these rules some pieces can be written in two ways. E.g. the Wazir-Knight could be W~ or N'. We will adopt the convention that, whenever possible, pieces with Knight moves will use the N.

A colon indicates a hopper: The Xiangqi Cannon is R: . A circumflex is used to indicate riders: N^ for Nightrider, D^ for Dababba-rider, etc. An exclamation point can be used for pieces that somehow are fearsome or impressive, if their starting letter is already in use for some other piece. (E.g. D! for Dragon.)

Last revised by H. G. Muller.