Chessboard.js and fen-to-svg.py

5. 3. 2024

The easiest way to embed a chess board on your site.

https://chessboardjs.com/download

Ruy Lopez example: ↓

Multiple boards ↓

Notes: ↓

If one doesn’t know js that well, this is pain to setup
Pieces are pngs for some reason, why not svgs? (FIXED)

Relevant Code of this post ↓

Where chessboard part (js, img, css) is hosted on ‘my’ server in /public/js/chessboard/..

    ## Ruy Lopez example:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/public/js/chessboard/css/chessboard-1.0.0.min.css">
    <script src="/public/js/chessboard/js/chessboard-1.0.0.min.js"></script>

    <div id="ruyLopez" style="width: 550px"></div>

    <script>
    var config = {
    pieceTheme: '/public/js/chessboard/img/chesspieces/svg/{piece}.svg',
    position: 'r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R',
    draggable: true,
    dropOffBoard: 'trash'
    }
    var board = Chessboard('ruyLopez', config)
    </script>

    ## Multiple boards

    <div id="board1" style="width: 200px; display: inline-block;"></div>
    <div id="board2" style="width: 200px; display: inline-block;"></div>
    <div id="board3" style="width: 200px; display: inline-block;"></div>

    <script>
    var board1 = Chessboard('board1', {
    position: 'start',
    pieceTheme: '/public/js/chessboard/img/chesspieces/svg/{piece}.svg',
    showNotation: false
    })

    var board2 = Chessboard('board2', {
    position: 'r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R',
    pieceTheme: '/public/js/chessboard/img/chesspieces/svg/{piece}.svg',
    showNotation: false
    })

    var board3 = Chessboard('board3', {
    position: 'r1k4r/p2nb1p1/2b4p/1p1n1p2/2PP4/3Q1NB1/1P3PPP/R5K1',
    pieceTheme: '/public/js/chessboard/img/chesspieces/svg/{piece}.svg',
    showNotation: false
    })
    </script>

FEN to svg chessboard using python ↓

Using venv:

# make folder to host virtual enviroment
mkdir chess && cd chess
python3 -m venv .
source ./bin/activate
which python
# should return non-system-wide binary:
/home/b/chess/bin/python
python3 -m pip install --upgrade pip
pip install python-chess

Get this script in the chess directory as well:
https://gist.github.com/bngsudheer/47a150aa8ac3d2dcc9f8a0c34dbafa80

Run as:

python ./fen-to-svg.py 'r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3' test

And voila:

to remove coordinates and border, the modified fen-to-svg.py script would look like:

import chess, sys
import chess.svg

# Install python-chess to your Python3 virtualenv
# virtualenv -p python3 ~/path/to/myvenv
# source /path/to/myvenv/bin/activate
# Usage: python3 fen-to-svg.py 'myfenstring' outputfilename
# or /path/to/myvenv/bin/python3 fen-to-svg.py 'myfenstring' outputfilename
fen = sys.argv[1]
file_name = '{}.svg'.format(sys.argv[2])

board = chess.Board(fen)

boardsvg = chess.svg.board(board = board, coordinates = False, borders = False)
with open(file_name, "w") as f:
    f.write(boardsvg)

rendering as:

chess