{"id":5472,"date":"2024-12-31T15:29:01","date_gmt":"2024-12-31T15:29:01","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5472"},"modified":"2024-12-31T15:29:02","modified_gmt":"2024-12-31T15:29:02","slug":"mit-app-inventor-pedometer-mit-app-inventor-step-counter-step-tracker-app-inventor","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/mit-app-inventor-pedometer-mit-app-inventor-step-counter-step-tracker-app-inventor\/","title":{"rendered":"MIT App Inventor Pedometer | MIT App Inventor Step Counter | Step Tracker App Inventor"},"content":{"rendered":"\n

Hello friends,<\/p>\n\n\n\n

Welcome to Obsidian Soft. In this tutorial, I will show you how to make a simple step counter app in MIT App Inventor. I will also show the approximate distance covered in this app. You can expand on this MIT App Inventor Pedometer app, and ask the user to enter his\/her weight, height, and gender and calculate calories burned too. <\/p>\n\n\n

\n
\"\"\/<\/figure>\n<\/div>\n\n\n

So, let\u2019s begin. Open MIT App Inventor and start a new project. Call it StepCounter.<\/p>\n\n\n\n

In screen 1 \u2018s properties, make align horizontal and align vertical both center and the background color: gray. Change the title to Step Counter. And make the screen orientation: portrait.<\/p>\n\n\n\n

Drag and drop a button<\/strong> from the User Interface<\/strong> onto the Viewer. Rename to startStopBtn. Make the background color: green. Make the font: bold and font size: 22. Make the height 10% and width 30%. Also, make the shape rounded and change the text to \u201cStart\u201d.<\/p>\n\n\n\n

Select the button and duplicate it by pressing Ctrl + C and Ctrl + V<\/strong> for Windows and Command + C and Command + V<\/strong> for MacOS.<\/p>\n\n\n\n

Rename to resetBtn, make the background color: orange and change the text on it to \u201cReset\u201d.<\/p>\n\n\n\n

Drag and drop a label<\/strong> from User Interface<\/strong> below this resetBtn.<\/p>\n\n\n\n

Rename to stepsLbl. In its properties, make font: bold and font size: 30. Change textColor to white and change the text to \u201c0 steps\u201d.<\/p>\n\n\n\n

Select this stepsLbl. Again duplicate it. Rename to distanceLbl. Change textColor to orange and change the text to \u201cYou walked 0 m\u201d.<\/p>\n\n\n\n

Drag and drop a pedometer<\/strong> from the Sensors<\/strong>. This is a non-visible component. In its properties, change its stopDetectionTimeout<\/strong> to 1000 ms to make it more responsive. I will also optionally change the strideLength<\/strong> to 0.5 m as I felt that it was more accurate for me this way.<\/p>\n\n\n\n

Lastly, I will also add an empty label between the buttons for spacing. Remove text from it and make height: 2%.<\/p>\n\n\n\n

Our screen design for MIT App Inventor Pedometer app is done so go to the blocks section.<\/p>\n\n\n\n

You might be wondering, where the stop button is. Our startStop button is basically a toggle button and we will switch between the two states of start and stop.<\/p>\n\n\n\n

So, get the startStopBtn\u2019s click event, plug in the if\/else block from Control<\/strong> in it, and use a logic<\/strong> green block to check in the if condition if startStopBtn\u2019s text is equal to the text block \u201cStart\u201d.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

In case the button\u2019s text is equal to Start and the if condition is true, then this means that the button was in the start state when it was pressed so we have to start the pedometer. So, first of all, start the pedometer by plugging in its start block. Next, we have to change the button state to the Stop state. So, change the text to \u201cStop\u201d and change the background color of the button to red. <\/p>\n\n\n\n

In the other scenario, we don\u2019t have to specifically check for the Stop state as our button can only have two states: Start and Stop. So, if start is not true then this means that the button was in a stop state when its click event was triggered. So, now we have to stop the pedometer. So, use the pedometer\u2019s stop block. And in the end, change the button state to start by changing its color and text accordingly. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Be careful with the spelling of Start. It should be the same as what you used in the designer for startStopBtn\u2019s properties.<\/p>\n\n\n\n

Next, get the pedometer.WalkStep event. I will not use the simple step event as according to the MIT App Inventor documents, WalkStep is a much more accurate counter of walking as it also evaluates whether the step is accompanied by a forward motion and that is what an actual walking step should be. So, you can see that the pedometer sensor component of MIT App Inventor has made making a  step counter app super simple.<\/p>\n\n\n\n

Now, get the walk steps and distance from the event and show them to the user by using join blocks.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

In the case of resetBtn\u2019s click event, just reset the pedometer and reset the stepsLbl and distanceLbl to zero values.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The step counter app using MIT App Inventor pedometer is done and it was super easy making this fun step counter app using the pedometer sensor component of MIT App Inventor.<\/p>\n\n\n\n

You can download the project file from the link below:<\/strong><\/p>\n\n\n\n

Step Counter AIA File<\/strong><\/a><\/p>\n\n\n\n

Thank you for reading this tutorial. I hope you liked this tutorial. Please like and share it.<\/p>\n\n\n\n

If you like my tutorials, consider supporting me:<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

You can also have a look at the video here:<\/a><\/p>\n\n\n\n

\n