This latest blog post will go into reviewing the latest (and final) updates in the fitness application, aimed at improving the overall user experience. The new additions focus on improving exercise management, accuracy calculations, exercise history tracking, calories burned data, and the introduction of a routine creator.
Saving Exercises to localStorage and retrieving them in /exercises
Users can now save and retrieve exercises, which makes it easier to organize their own exercise library. For the sake of the demo, I’ve used localStorage for the storing of this data.
Pose.js
const newExercise = {
'name': exerciseName,
'poses': tempAnglesArray,
'duration': exerciseDuration,
'created-at': createdAt,
'calories-burned': caloriesBurned.toFixed(2)
};
if (localStorage.getItem("exercises") === null) {
const exercises = [newExercise];
localStorage.setItem("exercises", JSON.stringify(exercises));
window.clearTimeout(interval.current);
navigate('/exercises');
} else {
const exercises = JSON.parse(localStorage.getItem("exercises"));
if (exercises.some(exercise => exercise.name === exerciseName)) {
alert('The name is already taken!');
} else {
exercises.push(newExercise);
localStorage.setItem("exercises", JSON.stringify(exercises));
window.clearTimeout(interval.current);
navigate('/exercises');
}
}As you can see, we save the name of the exercise, the poses, the duration, the date it was created at, and calories burned. The duration is calculated by finding the difference between the timestamp of the last pose and the timestamp of the first pose, and then converted into a more easy-to-read format. duration = lastTimestamp - firstTimestamp. The result will be in the format 00m 00s.
Exercises.js
const [exercises, setExercises] = useState([]);
useEffect(() => {
const storedExercises = JSON.parse(localStorage.getItem("exercises"));
if (storedExercises && Array.isArray(storedExercises)) {
setExercises(storedExercises);
} else {
console.log("No exercises found in localStorage");
}
}, []);In Exercises.js we retrieve this information simply from the localStorage when the component is mounted by using useEffect.
Exercise Playback and Deletion
The playback functionality allows users to play the exercises by using their webcam, similar to how an exercise is created. It uses the angle-matching function we discussed in the previous blog post. Additionally, a function for the deletion of exercises has been integrated, allowing users to permanently delete an exercise if they wish to do so.
Calculating the Accuracy of a Played Exercise
During and after an exercise, the user receives feedback on the accuracy of their movements. This is a simple calculation of the form accuracy = (correctPoses / possibleCorrectPoses) * 100.
Exercise History
The introduction of an exercise history feature allows the user to save workout sessions that include details such as the exercise name, date, duration, accuracy, and the calories burned. This way, the user can keep track of workouts done.
Calculating Calories Burned
The calories burned are also part of the new features. It uses a measurement of calories burned per hour calculated in relation to the duration of the exercise the user has done. If the user hasn’t added their weight and height to the app (which are also a new feature, will talk about them later), then the calculation will use a general value of 270 kcal burned by an average person of 125 lbs, retrieved from health.harvard.edu. If the user has added their personal data, then the calculation is similar to the fitness calculator from fitnessvolt.com. The formula I use in the code is the following: calorieBurnPerHour = ((3.5 * MET *userData?.currentUserData?.weight)/200) * 60; where we adapt the “calories per minute” calculator from the previous website to calculate the calories burned per hour.
Introducing User Data
As I said above, to improve the accuracy of the calorie calculations, I’ve introduced a userData object stored in localStorage, allowing users to input their height and weight. This information is important for generating more precise estimates, and users can easily update this data through a modal from the Dashboard when needed.
Routine Creation Functionality
The routine creator allows users to combine exercises into routines, order them, and get an estimate of the total duration of the routine. These saved routines can be retrieved on the page /routines. This allows for a greater degree of personalization in workouts.
Conclusion
As my study project reaches the end, these will be the final updates to this project. There are certainly features to be improved and bugs to be resolved, but as it is now, it’s a satisfying finish to this project. To see the current demo of the project you can scan the QR code below or visit the following website:
