pgn4web is a chess games viewer for websites, blogs and live broadcasts.
The user interface of pgn4web has been designed as minimalistic as possible, avoiding cluttering the chessboard with distracting buttons or messages.
At the same time a powerful way to interact with the chessboard is provided using shortcut keys, shortcut squares and touch gestures.
Basic explanation of the user interface components, including a detailed list of shortcut keys, shortcut squares and touch gestures as implemented by a given pgn4web chessboard is included in the built-in pgn4web help file. Click on square H8 (assuming White on bottom, A1 otherwise) to open the pgn4web help file. It is recommended to be familiar with the pgn4web help file before reading the rest of this wiki page.
Each keyboard key is associated with a chessboard function; click on square F8 (assuming white on bottom, C1 otherwise) for a detailed help; here is a short summary for navigating through games, moves and variations
The chessboard above helps practising the navigation keys, try the following with the Huebner-Timman game:
Each chessboard square, when clicked, is associated with a chessboard function; just hover the mouse over the chessboard and a tooltip help will display the functionality associated to each square; click on square G8 (assuming White on bottom, B1 otherwise) for a detailed help; please note that shortcut squares don't move when the chessboard is flipped, clicking on the same table cell performs the same function; please note that actions associated to shortcut squares can be redefined by the programmer of each page, please always refer to the detailed help from each individual page.
On supported touchscreen devices the user can interact with the pgn4web chessboard using touch gestures across the chessboard:
When developing pgn4web based pages and applications shortcut keys can be disabled, see function SetShortcutKeysEnabled(onOff)
.
Shortcut squares can be disabled and/or redefined:
boardShortcut(square, title, functionPointer)
allows for the redefinition of a shortcut square clearShortcutSquares(cols, rows)
allows for disabling a range of shortcut squares See tactics.html
for a usage example.
Touch gestures can be disabled and/or redefined, see varaible touchEventEnabled
and function customFunctionOnTouch(deltaX, deltaY)
.