Digital Chess - Track Your Chess Game Online

I've been playing a lot of chess ever since i was young, and since the web has a huge amount of websites to play chess on against computers or live opponents, I never once found a website which tracks your chess game that you're actually playing in real life. So with this project i'm hoping to realize that!

I am hoping to:

• Be able to track the movement of the chess pieces
• See some leaderboards about past games.
• Track time and play fast like a professional game.

It's a very complex project since if completed it would require 64 light sensors and 8 chips to read. Which is already a big task and we're not even counting any of the other sensors.

My college gave us a big list of things to do:

1. Create a schematic for our project
2. Create a database for the storing and getting of data.
3. Design a website using Adobe XD
4. Recreate this website with CSS and HTML
5. Read the sensors with python
6. Show the sensor data on the website using flask.

In this instructable i will guide you on my journey, and all the troubles and moments of salvation i've gone through these last couple of weeks.

Supplies, materials and tools are the first step to a succesful project!

Tools:

• Soldering Iron
• Soldering Tin
• Pliers
• Drilling machine
• Tape

Supplies:

• Raspberry Pi with micro SD card (4GB should be enough)
• Rasberry Pi T-cobbler
• Chess Board with pieces
• 7 segment display (TM 1637)
• 2 Touch sensors (TTP223B)
• RFID Reader with cards (MFRC522)
• MCP3008 (Depending on how far you want to go, for every MCP you can read 8 Chess coordinates)
• Light Dependent Resistor type 5288 (8 for every MCP you have)
• Headers (Male to Male and Female to Male)

If you need to buy everything, the estimated cost price should be around 125 euros including shipping costs (Supplies only)!

There's an Excel file attached with links and prices to everything you need!

The next step in this project is to create a schematic. I made 2: One on breadboard and one purely electronical. We're gonna need this schematics to keep everything clean and make sure we don't connect any unnecessary stuff!

I used a program called "Fritzing" to create these schematics if anyone is interested.

Color Coding:

• Red = power supply
• Green = connection
• Blue = ground

Raspberry Pi connections:

• 3V3 => VC line on the breadboard, powering everything
• 5V => VCC of 7 segment display
• GND:
  
  • Ground on the breadboard
  • Ground of the 7 segment display
• GPIO4 => Clock Select pin of the MCP3008
  
• GPIO10 => MOSI pin of the MCP3008
• GPIO9 => MISO pin of the MCP3008
• GPIO11 => CLK pin of the MCP3008
• GPIO7 => SDA pin of the MFRC522
• GPIO19 => DIG pin of the first Touch sensor
• GPIO26 => DIG pin of the second Touch sensor
• GPIO20 => CLK pin of the seven segment display
• GPIO21 = DIO pin of the sevent segment display

A couple notes on the schematics:

• This schematic contains only 1 MCP, this means that only 8 coordinates will be able to be read fully.
• I will be using GPIO pins as my Chip Select. Since only 2 Chip select pins are available with potentially 8 MCP's.
• The 7 segment display is one suggested by a teacher, only 4 wires are needed since it works on it's own protocol.
• The resistors on the digital pin of the touch sensors are not fully needed, but are adviced.

Explaining the components:

• MCP with light sensors:
  • An MCP3008 is an 8 channel 10 bit ADC:
    
    • an MCP3008 will read the light sensors' analog value, this value depends on the amount of light is currently shining on the sensor.
    • In my python code i will receive that analog value and convert it into a 1 or 0

• Touch sensors:

  • Works just like a button, i use a class for this with a callback method. More on this later

• RFID reader (MFRC 522):

  • Uses a specific protocol (SPI) with an installed package.
  • Not hard to code with an installed package
  • Reads the tag and returns the value of the tag
  • You can also write a value to a tag, so instead of returning the hexadecimal value, it returns a name for example

• 7 Segment (TM1637)

  • Also uses an installed package for easy coding
  • Create a variable with an integer value, then split it up in 4 character and show those characters

The third step towards this project is creating a 3NF normalized SQL database!

We will be needing this for:

• Inserting data
• Getting data and showing it on our website
• Being able to see exactly how many turns have gone by in the current game of chess!

Tables explained:

• Games
  • This tracks who won a certain game and when the game was played
  • The primary key here is a GameID
  • The Date has a standard value of the current date
  • The winner and score will be added in later, after the game is finished!
• Players (Spelers in dutch)
  • These are inserted manually, but can also be inserted using the RFID card system.
  • Write a name to your card, then read the card and insert the name into this table
  • It also tracks the win / loss record of each player, to be displayed on the website
• Historiek (History)
  • This is the turn history
  • when a chess piece is moved, it'll be updated here
  • It has 3 foreign keys, player, game and chesspiece
  • the ReadDate (InleesDatum) is the date when the sensor got read
  • ReadTime is the same as ReadDate but with a timestamp
  • LocationID(LocatieID) is the name for the coordinate where it's positioned on. for example "a3"
• Chess Pieces (Schaakstukken in dutch)
  • Every chess piece has an ID, team, name and a status
  • The team is either 1 or 2, black or white;
  • The name of ever piece would be ie "Pawn 1"
  • The status means the piece is alive or dead!

Now that we've got all the correct pieces in place, we can start creating something!

Let's divide this part into sub steps as it'll be easier to explain:

• Step 1: You want to drill a hole into every coordinate of your chessboard as shown in the first picture, also drill a hole where you want to place the touch sensors, RFID reader and 7 segment display.
  • Don't forget to drill some holes on the side of the board, these are for the wires of the different components on top of the board. Lots of drilling, i know.
• Step 2: Try to wire one or two sensors to the Raspberry Pi, check if they work. You want to connect them to the MCP analog reader as explained earlier in Step 2 (The schematics).
• Step 3: This might be tricky and very nerve wrecking, since the jumper headers aren't very stuck in place, you might want to tape them all to the board, either individually or multiple at once. You have to make sure they stay stuck on the chessboard, otherwise you won't be able to read the sensors successfully
  • TIP! If it makes it easier for you, some glue might actually help keeping the sensors more in place while taping them, I discovered this the hard way.

After you've made hardware that you can test, let's try write some code for it! If you want to take a look at my code, please head over to my github.

Back-end
First we're going to need a couple of packages to be installed, i went ahead and made a list for you:

• flask
  • This is what your python code will be running on
• Flask-socketIO
  • To communicate between front-end and back-end
• numpy
  • Useful for reading the light sensors, works with matrix's
• netifaces
  • To print your own IP address on the 7 segment display
• Flask-CORS
  • Cross origin recourse sharing, allows packages to be shared across different domains.

Next to that, i've written a couple of classes and you're free to use them.

Front-end

The website code is also available on my github page!

For the front-end I will be using Chessboard.js. This inserts an easy-to-use chessboard with easy-to-move pieces!

Everything on the board is customisable so have fun! After having downloaded the latest version, you'll have to drag the files over into your project and link them to the page where you want to show a chessboard!

After that, let's try to create a board, doesn't look too hard:

• First, in your html :

<div class="o-chessbaord" id="board1" style="width: 400px"></div>

• Second, in your javascript file:

board1 = ChessBoard('board1', 'start');

and there you have it, you should be able to see a chessboard now! Feel free to customize the board in the CSS files!

Now, we want to see some moves on the chessboard, not too hard. But we need to customize it so the move command gets sent by the back-end. I won't go into too much detail, but we want to do something like this:

new_lijst = [Data.data[0], Data.data[1]];<br>commando = new_lijst[0].concat('-', new_lijst[1]); 
board1.move(commando);

We receive a list from our back-end programm, and put a dash inbetween the two coordinates, then use the board.move command to execute the move!

That's my explanation of what we need of the chessboard.js plugin, head over to my github to take a look at the code yourself