DynamicFrame_summary

Dynamic chessboard frame

The HTML file dynamic-frame.html implements a responsive chessboard frame that dynamically adjusts itself to use the available space. The size of the chessboard is maximized and the layout of the surrounding text adjusts to the horizontal or vertical shape of the available frame: this is particularly useful when using the dynamic frame fullscreen with mobile devices and rotating the device's screen.

When adding the dynamic frame to an existing page as an inline frame, please consider that the display has been optimized for an aspect ratio from 16:9 to 2:1, either horizontal or vertical.

The dynamic chessboard frame has fully customizable colors and provides predefined color schemes.

A live broadcast mode is also supported.

The dynamic frame allows for implementation of shortcuts and desktop icons for a fullscreen web app.

Example

Click here for an example.

As usual with pgn4web chessboards, the keyboard arrows keys and the first row shortcut squares allow browsing the game.

Click square H5 or this link for opening the frame in a separate window, then resize the browser window and notice how the chessboard frame adjusts to the available space.

Instructions

The HTML file dynamic-frame.html supports the following parameters:

• pgnData = file.pgn (no default)
• initialGame = initial game (default first)
• live = if set true enables live broadcast with default values (default false)
• refreshMinutes = live broadcast delay (default 0)
• refreshDemo = if set true sets live demo mode (default false)
• pieceFont = 'alpha' | 'merida' | 'uscf' | 'random' (default uscf)
• colorTheme = 'black' | 'blue' | 'braun' | 'dark' | 'gray' | 'green' | 'light' | 'pink' | 'white' | 'wood' | 'yellow' | 'random' (default 'braun')
• fontColorHex = font color hex code, like FF0000 (default according to the selected color theme)
• backgroundColorHex = page background color hex code, like FF0000 (default according to the selected color theme)
• lightColorHex = light square color hex code, like FF0000 (default according to the selected color theme)
• darkColorHex = dark square color hex code, like FF0000 (default according to the selected color theme)
• highlightColorHex = highlight square color hex code, like FF0000, or 'transparent' for no highlight (default according to the selected color theme)
• showColorFlag = if set true shows a color flag for the side to move (default false)
• bare = if set true shows chessboard only (default false)

[Anonymous]

Originally posted by: pa...@casaschi.net

Hint: check the new engine analysis option added to the dynamic frame page!

Click on square E8 to invoke the engine analysis popup window; read all the details at the blog.