EndUser_Interface

End users notes: user interface

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.

shortcut keys

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

• switching game
  • v load first game
  • m load last game
  • b load previous game
  • n load next game
• browsing the main/current variation
  • h or arrow-up go to game start
  • shift-h or shift-arrow-up go to variation start
  • l or arrow-down go to game end
  • shift-l or shift-arrow-down go to variation end
  • j or arrow-left move backward
  • k or arrow-right move forward
• switching variation
  • shift-k or shift-arrow-right cycle through alternative variations, if any, otherwise move forward
  • dot cycle through alternative variations, if any
  • shift-dot step into the first variation, if any
  • shift-j or shift-arrow-left go to the parent variation
• searching for variations and comments
  • i find previous comment or variation
  • shift-i find previous variation
  • o find next comment or variation
  • shift-o find next variation
• undo
  • u or del undo last chessboard position update
  • shift-u or ins redo last undo

Click here for an example.

The chessboard above helps practising the navigation keys, try the following with the Huebner-Timman game:

• use u and shift-u to undo/redo actions, for instance when typing incorrectly
• from the move 16... Qb8 (the last move of the sub-variation starting 14. Rh3) pressing shift-arrow-left jumps to the move 13... Bd7, that is the last move of the parent variation before branching into the variation leading to 16... Qb8
• from the 13... Bd7 move (second move of the variation starting 13. Bd3, pressing shift-arrow-right repeatedly cycles through the moves 13... Bd7, 13... b5? then back to 13... Bd7, that are the alternative moves to 13... Bd7
• from the move 13... b5? pressing i repeatedly jumps to 13... Bd7 then 13. Ne4 then 12... a6; from the same move 13... b5?, pressing shift-i repeatedly the same sequence is repeated with the exclusion of 12... a6 that is a move with comments but without variations

shortcut squares

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.

touch gestures

On supported touchscreen devices the user can interact with the pgn4web chessboard using touch gestures across the chessboard:

• top-down swipe: load next game, cycling through
• bottom-up swipe: load previous game, cycling through
• left-right swipe: start autoplay; if autoplay already active: go to variation end or to game end; if at last move of live broadcast: replay up to 6 previous half-moves, then autoplay forward
• right-left swipe: stop autoplay; if autoplay not active: go to variation start, then to parent variation, then to game start

developers note

When developing pgn4web based pages and applications shortcut keys can be disabled, see function SetShortcutKeysEnabled(onOff).

Shortcut squares can be disabled and/or redefined:

• function boardShortcut(square, title, functionPointer) allows for the redefinition of a shortcut square
• function clearShortcutSquares(cols, rows) allows for disabling a range of shortcut squares
  Do not redefine or clear shortcut square A8, used by pgn4web for error reporting and alert messages notifications.

See tactics.html for a usage example.

Touch gestures can be disabled and/or redefined, see varaible touchEventEnabled and function customFunctionOnTouch(deltaX, deltaY).