Py2Web is an utility for people who create webpages.
It allows embedding chess problems viewer into the webpages in a way similar to that in which the PGN viewers work.
The difference is that Py2Web supports many features that PGN viewers don't, e.g.: idling (set-play, threat, series-movers),
twins, fairy pieces, fairy effects (rebirth, piece color change etc).
Demo
Example #3 problem by V. Chepizhny >>153689. Feel free to test your problems.
Starting position
in popeye 'Pieces' clause format:
Solution
in popeye output format with optional {comments}:
(Protip: you can copy and paste both fields from olive)
(Protip2: click right/left parts of the diagram to play the solution forward/backward)
More examples
Something more complicated. View this page source to check the syntax (it is 100% popeye output format).
Twins, promotions, rebirth and promotion as result of the rebirth
C. J. Feather
Fairings (28/5), 2012-11
white Pb3 Bg1 Ra4 Ka2
black Pb6h2a3g7b5 Sb2f5 Bc5d7 Kd4 Re4
h#2
CouscousCirce + Isardam
b) bPg7→g4
a)
1.h2*g1=Q[+wBd8] Ra4-c4 2.Bc5-f8 Bd8*b6[+bPc1=Q] #
b) bPg7-->g4
1.Sb2*a4[+wRg8] Bg1-e3 2.Re4-e7 Rg8*g4[+bPh1=S] #
Fairy piece (nightrider), T&M notation, color change, kobul king
You can temporary hide solution from solvers, it is stil working.
P. Tritten & D. Turevski
Julia's fairies, 2013/I, 7th Prize ded. to D. Kostadinov
Note how empty comments are used to add linebreaks. Also you can add any static HTML in comments.
Diamond-shaped rook-locust illustrates the usage of the glyphs attribute (see "Usage" below, here glyphs='{"lr":"d"}').
Py2Web shrinked the solution from 29 lines output by Popeye down to 5 (well, ok, 7). Also using "notation" attribute (new in 0.14.10) to display the solution in figurine notation.
A. Selivanov
JT V. Kopyl- 50, 2007
1st Prize
white Qc2 Rh6e8 Ke1 Bf5h8 Sb2h5
black Pg2e2g3 Kd5 Bf1
This is what you add to the <body> part of your document where you want the diagram and solution widgets to be displayed:
<divclass="p2w-diagram"id="myUniqueId"glyphs='{"g":"q1","du":"p2"}'>
[Starting position (in popeye 'Pieces' clause format)]
</div><divclass="p2w-solution"target="myUniqueId"full-move="wb"start-node="first"notation='{"S":"N"}'>
[Solution (in popeye output format)]
</div>
.p2w-diagram attributes:
id - (required) element identifier
glyphs - (optional) changes the default representation of pieces, in JSON. In example above Grasshoppers will be displayed as queens rotated 90 deg (default is 180 deg) and Dummies will be displayed as upside-down pawns (instead of X-s).
fen - (optional) starting position in Forsyth-Edwards notation. When present, the contents of the p2w-diagram are ignored.
.p2w-solution attributes:
target - (required) the id of the corresponding .p2w-diagram
full-move - (optional) attribute may be either "wb" (for direct problems and hs*) or "bw" (for helpmates and series-helpmates). In most cases it can be omitted, but not when there's castling in the solution.
start-node - (optional) attribute may be either "first" (this is default) or "last" (to display proofgames).
notation - (optional) attribute similar to glyphs attribute, but used in solution.
capture-glyph - (optional) symbol used to indicate capture (default is small latin letter "x").
Py2Web defines one useful JS method that you can call on your pages if you need more dynamics and flexibility.
Py2Web.init(selector)
It has no return value. It iterates through all children of the selector that have class .p2w-solution and replaces their content with the solution widget while also replacing the content of the corresponding .p2w-diagram elements with the diagram widget.
As you already may have guessed Py2Web calls
Py2Web.init('body')
when the page has loaded. However, you can load problem content dynamically into some container later and then call
Py2Web.init(container)
The live demo at the top of this page works in exactly this way. It dynamically creates .p2w-solution and .p2w-diagram elements
based on values in the textboxes, nests them within '#demo' div and then calls Py2Web.init('#demo'). Here's the actual source code, jQuery-style:
Starting from version 0.14.10 you can change the default behaviour of Py2Web with some special comments:
{display-departure-square} - comment placed after a move would force Py2Web to include the departure square into the move text representation (e.g. Ba1-e5, instead of Be5). Also available are {display-departure-file} and {display-departure-rank}
Error handling
Is minimal as of yet. Syntax and semantic errors (if any) are logged in the javascript console. If something isn't working - check console (Ctrl+Shift+J in Chrome and FF).
Under the hood
Py2Web is a free software with open source code.
The parser part of the Py2Web is written in JS/CC which is a lexer/parser generator.
You may need to have a general knowledge of what a compiler-compiler is.