DraughtBoard online PDN 3.0 Viewer now available

[ArthurK]

DraughtBoard is a set of Javascript modules supporting the visual display of draughts on a webpage.
It is designed for the international 10x10 draughts.

With these modules I made two pages implementing an online PDN 3.0 Viewer:
- page A: shows the progress of a game on a structured way in a table.
- page B: shows the progress of a game in a syntax highlighted text.
Both PDN Viewers can also be used as a checker for validating PDN 3.0 text.

The PDN Viewer uses two modules: a PDN parser and a FEN parser.
With these modules you should be able to make your own online PDN viewer.

I have tested the viewer pages with Firefox on Linux and on Windows 7. I hope it will work on a Mac.
Pieces are displayed using unicodes. There are special unicodes for displaying pieces and kings.
It seems that Firefox on Windows 7 does not (?) recognize these unicodes for pieces and kings.
If that is the case other characters can be chosen to display the pieces.

You can find an introduction of DraughtBoard and the two PDN Viewers here:
http://home.deds.nl/~svg_experimenten/d ... index.html

I hope DraughtBoard will be useful.

Arthur

[ArthurK]

DraughtBoard is now extended with a page for online drawing a board image.

Configuration options for the board can be set:

• A position can be set with the standard FEN notation
• Size of board and canvas
• User defined colors for canvas, squares and pieces
• Ten predefined piece image themes
• Lines of text for top and bottom of the board

The configuration settings can be converted to a string and saved. Settings can be restored by pasting this string.
Note:
The HTML5 canvas element is used to draw the board, on the fly, via scripting.
The canvas element is supported by Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.
Note that Internet Explorer 8 and earlier versions, do not support the canvas element.

Here you find the Board Image page.

Examples of images I have created:

canvas1.png (20.97 KiB) Viewed 7558 times

canvas2.png (17.46 KiB) Viewed 7558 times

canvas3.png (18.21 KiB) Viewed 7558 times

I hope Board Image will be usefull for you.

Arthur

[Wieger Wesselink]

Great work Arthur, it looks really good! I saw that you even display variations, and use move animations. A quick look at the internals gave me the impression that the design is very clean. So this is definitely useful.

Regards,

Wieger

[ArthurK]

I have extended DraughtBoard with two new features.
Besides some minor improvements the next features are implemented:

1. A new page PDN Viewer C is added.
   This page is a copy of the Viewer A page but utilizes the advantages of the HTML5 canvas element for displaying the board.
   With the canvas element colorfull themes for displaying the board are available. And at each moment of the game you can make an image of the board. To mail it to a friend, insert into your documentation or use it on a website.
2. The Board Image page has a new feature which makes life easier: to add or remove a piece on the board, click one or more times on a square.

Arthur

[ArthurK]

Hello draughts players,

I will inform you about the new version of my DraughtBoard program.
No big changes but some fine tuning.

Changes for the Board Image page which gives you more flexibility in designing your board image.

1. The color of the square border can now be set.
2. Two new piece image themes are added.
3. Some minor improvements of the colorpicker.

See the link: Board Image.

The PDN viewer pages are extended with a button Hlight: pushing the button will set ON/OFF the highlight of squares involving a move.

Regards,

Arthur

PS

• If someone has a beautiful design of draughts pieces, and you will make it available, send me the images and I will implement it on the Board Image page.
• An example of a generated draughts diagram with the new version:

Example of a generated diagram

draughtboard.png (22.09 KiB) Viewed 7411 times

========================================================================================================================