Smart Mini Football Table

by runedhaluwin in Living > Toys & Games

149 Views, 1 Favorites, 0 Comments

Smart Mini Football Table

zijaanzicht_lichtt.jpeg
boven_donker2.jpeg

Hello! I have created an awesome Smart Mini Football Table that's perfect for foosball fans who want to take their game to the next level. This table automatically keeps track of the score and shows it on a digital scoreboard and our website. It uses sensors to know where the ball is and which team has the ball most of the time. After someone scores, the ball goes back into play on its own thanks to the servomotors, and there’s a fun effect each time a goal is scored.

On the website, you can see the current score, the ball's live location, how long the match has been going on, the history of goals, which team has had the ball more, and stats from previous matches. It's a super fun and interactive way to enjoy foosball!

Supplies

breadboard.png
23.png
24.png

**Electronics:**


**Basics:**

- Raspberry Pi 4 Model B (4GB)

- 16GB SD Card

- Raspberry Pi 4 USB-C Power Supply

- Breadboard Power Supply

- Jumper Wires


**Sensors:**

- 2x Ultrasonic Sensor

- 6x Hall Sensor

- 1x LDR (Light Dependent Resistor)


**Displays:**

- 2x 7-Segment Display

- LCD Screen


**Actuators:**

- 2x Servomotor

- 12x LEDs


**Components:**

- PCF8574 (I/O Expander for LCD)

- PN2222 Transistor

- Diode

- MCP3008 (Analog-to-Digital Converter)

- 2x Shift Registers


**Passive Components:**

- Potentiometer

- Resistors

- 2x Push Buttons

- 3x Breadboards


---


**Mechanical Components:**


**Structure:**

- MDF Board

- Wooden Stick (Flat)

- Wooden Stick (Cube)

- Aluminum Tube

- Velcro

- Decorative Stickers

- Artificial Grass

- Ditch


**Game Specific:**

- Mini Foosball Table

- Foosball Ball

- Magnetic Ball


**Cost of the project**

The cost of all the components is €343,42

The cost per component is specified in Bom-RuneDHaluwin.pdf (bill of materials).

Assembling the Frame

30.png
31.png
32.png
33.png
34.png
35.png
36.png

The first step was to start assembling the frame of the foosball table. I began by attaching wooden supports underneath the table to form a sturdy foundation. Next, I drilled holes and adjusted the enclosure to ensure that all components would fit properly. Before installing the components, I insulated the connections on the jumper wires to ensure they were safe and secure. Once this was complete, we installed all the components into the enclosure, securing everything in place.

Advanced Framework

43.png
42.png
41.png
40.png

Now, I finished building the rest of the enclosure. This meant making the rods by cutting the aluminum tubes and drilling small holes to attach the players. After that, I put the ultrasonic sensors, the chute, and the servomotor in the goals.

Finalizing the Framework

52.png
51.png
50.png
53.png

In this step, I attached the last components to the enclosure, such as sticking the Hall sensors underneath the field. I also added wooden pieces along the sides and secured the MDF board on top. Additionally, I inserted the new rods into the game. Finally, I assembled all the parts of the foosball table.

Placing Breadboard and Other Components in the Framework

62.png
61.png
60.png

During this step, I securely mounted the breadboard onto the MDF board and connected each component to the Raspberry Pi as per the schematic using T-connectors. I ensured stability by affixing and insulating necessary pieces to ensure everything is firmly in place. Additionally, I applied Velcro to prepare for attaching artificial turf later. Furthermore, I added small pieces of wood on the field next to the goals to prevent the magnetic ball from getting stuck.

Finishing Touch to the Framework

45.jpg
44.jpg
zijaanzicht_licht2.jpeg
zijaanzichtlicht3.jpeg

In this final step for the enclosure, I added the finishing touches to perfect the appearance and functionality. To conceal the old holes, I applied soccer-themed stickers, making them less noticeable. Additionally, I added a textured tape along the sides to enhance the overall finish. Finally, I secured the artificial grass mat to the framework using Velcro for easy removal and maintenance.

Designing Database

dbP1.png

With the hardware fully assembled, it's time to dive into the software setup. I began by designing the database, which I would later integrate into the backend. This normalized database structure ensures that the data is stored efficiently and can be easily accessed and managed.

Start Coding

Schermafbeelding 2024-06-16 222651.png
Schermafbeelding 2024-06-16 222713.png
Schermafbeelding 2024-06-16 222738.png

After setting up the database, I began the coding process. I wrote test programs for each component to ensure everything functions correctly before diving into the main code. This approach helps to validate the proper operation of each part and ensures seamless integration within the overall system.

Backend Python Code

Schermafbeelding 2024-06-16 223048.png
Schermafbeelding 2024-06-16 223111.png
Schermafbeelding 2024-06-16 223304.png
Schermafbeelding 2024-06-16 223414.png
Schermafbeelding 2024-06-16 223530.png
Schermafbeelding 2024-06-16 223645.png
Schermafbeelding 2024-06-16 223734.png
Schermafbeelding 2024-06-16 223756.png
Schermafbeelding 2024-06-16 223822.png
Schermafbeelding 2024-06-16 223928.png
Schermafbeelding 2024-06-16 223956.png
Schermafbeelding 2024-06-16 224010.png
Schermafbeelding 2024-06-16 224040.png
Schermafbeelding 2024-06-16 224054.png
Schermafbeelding 2024-06-16 224110.png
Schermafbeelding 2024-06-16 224301.png

After writing short test code for each component, I have now integrated everything. Here’s a brief overview of the core functionalities of the code:

  • The code starts by importing some libraries and defining classes that will be used. Next, it declares the GPIO pins and creates some variables.
  • When the code runs, it first executes the setup function. From that point on, you can start the game at any time by pressing the yellow button.
  • Once the button is pressed, it resets the scoreboard. If a game is not already in progress, it will start one. This is indicated by a small animation on the LCD screen and the LEDs.
  • Then, all threads are started simultaneously: one thread to update the live timer, and one thread for each sensor that needs to be read.
  • In each thread, the processed value is pushed to the frontend via Socket.IO. Later, in the JavaScript code, I will explain how these values are handled.
  • Finally, my backend/app.py program includes some Socket.IO and app routes.


Managing Data in DataRepository.py

Schermafbeelding 2024-06-16 224652.png

I retrieve data from the database and insert data into it in this way in my datarepository.py as shown in the photo.

Making a Design in Figma

Schermafbeelding 2024-06-17 003936.png
Schermafbeelding 2024-06-17 003950.png
Schermafbeelding 2024-06-17 004002.png

Before actually coding the frontend, I made a design in figma of how I wanted my website to look.

Creating the Frontend

Schermafbeelding 2024-06-17 002031.png
Schermafbeelding 2024-06-17 002053.png
Schermafbeelding 2024-06-17 002509.png
Schermafbeelding 2024-06-17 002526.png
Schermafbeelding 2024-06-17 002542.png
Schermafbeelding 2024-06-17 002551.png
Schermafbeelding 2024-06-17 002826.png
Schermafbeelding 2024-06-17 002839.png

After finishing the backend, I began developing the frontend of the website. The photos above show the basic HTML code alongside some SCSS snippets that I created to design the initial layout and styling of the website. These pieces form the foundational structure and appearance of the site. After designing the basics of the site, I also had to make sure the website was completely responsive, you can also see this in the pictures above.

Finalizing the Frontend

Schermafbeelding 2024-06-17 003510.png
Schermafbeelding 2024-06-17 003524.png
Schermafbeelding 2024-06-17 003537.png
Schermafbeelding 2024-06-17 003546.png

In this step, I demonstrate how I use JavaScript to dynamically update the data on my website.

These are the values i update using JavaScript:

  • The timer when a new game has begun
  • The score of the live match
  • The Value of the light dependent resistor (light sensor)
  • The Value of the hall sensors (magnetic field sensors)

Final Product

mobile1.png
mobile2.png
boven_donker.jpeg
boven_donker2.jpeg
boven_licht.jpeg
zijaanzicht_donker.jpeg
zijaanzicht_licht.jpeg
zijaanzicht_licht2.jpeg
zijaanzicht_lichtt.jpeg
zijkant_donker.jpeg
bovenaanzicht_licht2.jpeg
bovenaanzichtlicht3.jpeg
zijaanzichtlicht3.jpeg

And finally, once everything is working, it should look like this