Check out Atomic Chess, our featured variant for November, 2024.

Diagram Editor with scalable graphics

External image links detected!

You know what would look worse on your page than this big, ugly warning? Broken image links. If you're the author, please make sure that doesn't happen to this page by replacing the following external graphic images with local copies.

Array
(
    [1] => http://winboard.nl/my-cgi/fen2.cgi?s=170&w=ffc000&t=xboard&p=wking
    [2] => http://winboard.nl/my-cgi/fen2.cgi?s=130&w=ffff00&t=xboard&p=wking
    [3] => http://winboard.nl/my-cgi/fen2.cgi?s=100&w=00ff00&t=xboard&p=wking
    [4] => http://winboard.nl/my-cgi/fen2.cgi?s=85&w=00ffff&t=xboard&p=wking
    [5] => http://winboard.nl/my-cgi/fen2.cgi?s=65&w=0000ff&t=xboard&p=wking
    [6] => http://winboard.nl/my-cgi/fen2.cgi?s=50&w=8000c0&t=xboard&p=wking
    [7] => http://winboard.nl/my-cgi/fen2.cgi?s=42&w=ff00ff&t=xboard&p=wking
    [8] => http://winboard.nl/my-cgi/fen2.cgi?p=bknight&b=FF0000&s=100
    [9] => http://winboard.nl/my-cgi/fen2.cgi?p=wlion&t=xboard
    [10] => http://winboard.nl/my-cgi/fen2.cgi?p= http://winboard.nl/my-cgi/fen2.cgi?p=bnightrider-bbishop
    [12] => http://winboard.nl/my-cgi/fen2.cgi?p=wnightrider|wqueen
)

Introduction

fen.cgi 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 fen.cgi 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: just 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. (But first select the piece theme by one of the buttons below the scroll window, if you want to use other than Alfaerie!) Then every click on an empty square of the board will place that piece on the clicked square, until you click another piece. 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 them with another piece.

The default colors and board format can be changed by typing the desired values in the text entries, and pressing 'Apply'. Once the diagram is as you want it, you can press the 'Draw' button below it to make the entire position appear as a single PNG image, of the specified size (which you can also alter, below the interactive board). 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

Board format
Files: Ranks:
Colors
Light: Dark:
White: Black:
satellite=Musketeer graphicsDir=http://winboard.nl/my-cgi/fen2.cgi?s=33&t=xboard&p= whitePrefix=w blackPrefix=b graphicsType= squareSize=35 lightShade=#e8c080 darkShade=#a89060 symmetry=none promoZone=0 useMarkers=1 royal=6 pawn::fmWfcF:::99 knight:N::::99 bishop:::::99 rook:::::99 queen:::::99 king::::e1,,e8:99 archbishop:B~:BN:knight--bishop::99 chancellor:R~:RN:knight--rook::99 amazon:Q~:QN:knight--queen::99 wazir::W:::99 ferz:::::99 dababba::D:warmachine::99 elephant::A:::99 camel:::::99 zebra:::::99 wildebeest:-:NC:knight--camel::99 bird:H:ADGH:::99 unicorn::WN:::99 squirrel:-:NAD:::99 snake:-::::99 crocodile:-::::99 kangaroo:-::::99 ram:-::::99 ox:O::::99 rhino:-::::99 tiger:T::::99 lion:L:KNAD:::99 gryphon:G!:FyafsF:::99 dragon:D!::::99 grasshopper:G;:gQ:::99 vao:B;:mBcpB:::99 cannon:R;::::99 leo:Q;:mQcpQ:paovao::99 wazirknight:N':WN:::99 ferzknight:N`:FN:::99 pegasus:-::::99 nightrider:N^:NN:::99 dababbarider:D^:DD:warmachinerider::99 elephantrider:E^:AA:::99 modern elephant:E`:FA:elephantferz::99 phoenix:E':WA:elephantwazir::99 alibaba:A:AD:elephantwarmachine::99 kirin:-:FD:warmachineferz::99 champion:A':WAD:::99 wizard:C`:FC:moon::99 mage:-::::99 fool:-::::99 man:M:K:::99 archer:-::::99 duke:-::::99 minister:-::::99 cardinal:-::::99 chancellor:-::::99 falcon:-:O:::99 halfbishop:-::::99 halfrook:-::::99 halfqueen:-::::99 flag:-::banner::99 steward:-:mWcF:::99 berolina pawn:-:fmFfcW:berolinapawn::99 asian pawn:P':fW:chinesepawn::99 lance:P^:fR:::99 horse:N~:ffN:::99 silver:S:FfW:silvergeneral::99 gold:G:WfF:goldgeneral::99 tokin:-:WfF:promotedshogipawn::99 promoted lance:-:WfF:promotedlance::99 promoted knight:-:WfF:promotedknight::99 promoted silver:-:WfF:promotedsilver::99 dragon horse:B':BW:promotedbishop::99 dragon king:R`:RF:promotedrook::99
square size: pixels

You can drag pieces from the table to the board. Clicking on a piece name shows its moves

Piece theme:

Betza move description:

Technical description

For all parameters that determine how the pieces will be rendered, fen.cgi 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 fen.cgi 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 only be alfaerie or xboard. In principle different themes can have different defaults for the other parameters, and support a different set of 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 fen.cgi 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 fen.cgi you would use http://winboard.nl/my-cgi/fen.cgi?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 "http://winboard.nl/my-cgi/fen.cgi?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 "http://winboard.nl/my-cgi/fen.cgi?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, fen.cgi 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.) 







 This 'user submitted' page is a collaboration between the posting user and the Chess Variant Pages. Registered contributors to the Chess Variant Pages have the ability to post their own works, subject to review and editing by the Chess Variant Pages Editorial Staff.




 By H. G.  Muller.
Last revised by H. G. Muller.

Web page created: 2020-05-18. Web page last updated: 2023-11-21
Revisions of MSdiagram-editor-with-scalable-graphics