Fitness Counter

Intro:
This project is for people who want a project what motivates them and can actually use if you work-out. This project is mainly for squats and push-ups but there is also a custom option where you can let your creativity flow! If you're tired of counting or if you can't count and always mess up in your workout this is just for you. You can see the progress made over weeks, months or even years if you wanted to. There's also a 2 player game where you have to get the most amount in the time you setted. The one who has the most amount will win, don't worry the effort you putted in the game will not be lost! This also counts as progress! You can compare different users with each other. Now let's get started and see what you'll need.

Suplies:
1x Raspberry pi 4 model B
1x breadboard
1x GPIO extention board
1x RFID-RC522
1x HC-SR04
1x CCS811
1x OLED Display 128x64
1x Active buzzer
1x Rotary encoder

Make a prototype on a breadboard for testing the code and every component. In the picture above you can see how to connect it.

Test every component so you're sure that nothing is broken. You can test your components with these test programmes.

Make a database to store the data, like the actions, the devices, the users, the RFID tags and the Values of the sensors you'll be getting. In the photo above you'll find the model and some tables where you alread have to put in data like devices and actions.

Create the backend with all the routes, threads and read the values of the sensors. Also You'll have to do the OLED Display with the current value of the counter and the CO2 data, it's important you show the Wifi IP adress to beceause you or others will need that to visit the website of the device you're making. We'll begin making the website in the next steps. Don't forget to make the Datarepository's to add, read, update or remove the data from the database.

You'll have to make a design if you want your website to look pretty, it's recommened you do it in adobe xd. It's easy to pick up on. First search a font you want to be using, i'll use "Houshka Pro" from Adobe fonts. You'll need to find a colorpallete you want to use. It's important that the contrast between them is big enough. After you've done that you can begin designing the website. See my design in the photo's.

Now you'll have to make the HTML of the websites you just have designed. Don't try to let it look good, you'll do that in the next step using CSS. Just focus on getting everything in the right order with the right javascript query selectors and classes for the CSS. HTML is important so we can use every functionality, the desinging is to make it look pretty. You'll find the HTML code here:

Now you'll have to make a javascript file in the frontend what will communicate with the backend and the visualisation of the frontend. Add all the sockets from Back to Frontend and listen to the UI in the website and send the data to the backend if nessesary. It's important that you work page per page so you dont get errors in the console of every HTML page you made.

Now you'll have to design your HTML pages with CSS. You can look at your adobe xd design you made. Make this design using the classes you added in the HTML pages. Don't forget to add your collors and fonts here to. You'll have to make it mobile first, so it's accacible to mobile or tablet users. Here you'll see the CSS i used on the HTML pages:

Run the app.py and surf to the IP adress on your OLED dislplay. Now you'll be able to test it out.

If something doesn't work i recommend reading all the steps with the code and see what's different.

If everything works you'll have to make a prototype board so we can avoid lose cables. On this prototype stripboard you'll set a buzzer and 2 resistors with extra grounds and voltage (3.3V and 5V). You can take the suplly from the Raspberry pi.

Now that's done you can begin with making the 3D-print. Design this print in Thinkercad, it's easy to get the hang of but don't use the sliders to set a height, width or length.. This isn't the actuall height, width or length. You'll see the render in the pictures above. Also you can download the 3D-print with this file:

If the 3D print is ready you'll have to add the components in the 3D print and you'll have to connect the components with each other again. You'll see the breadboard or schema in the pictures. The finishing result will also be in these pictures. Now you can use the project to your hearts content.

You finished the project, congrats!

Many thanks to everyone who helped me and others during this project. Deffenitly a big thanks to Howest in Kortrijk, without them this wouldn't be possible.

Also thanks to you for making or reading about this project.