Step Counter

Page 1

Walking Steps Counter App

to open MIT App Inventor App Inventor is a cloud-based tool, which means you can create apps for phones or tablets right in your web browser. Let’s see how to use MIT App inventor: 1. Go to Your web browser 2. Type in MIT App Inventor
Instruction

3. Click on the very first link.

4. Click on the Create Apps! Option on the top for getting started.

Walking Step Counter App

Objective : Learning use of pedometer sensor to count walking steps, buttons and event handling concept.

A pedometer sensor is a simple step-counting device that measures the number of steps takes in a given time and calculates the approximate number of calories burned.

Started

Getting
Login to your MIT Platform and then create a new project and then click OK.
You will get to see this window
1 : Changing App Screen title Select Screen1 in component list and find the title property on the right side and change it accordingly.
Step
Adding Layouts
Layout in the left and drag & drop 1 vertical arrangement for arranging components.
Step 2:
Select
Vertical arrangements and change it’s height and width to fill-parent.
Step 3: Changing Properties Select
change its
alignment to center.
Step 4: Changing Background Color Select vertical arrangement and
background color and

Step 5: Adding Image

in this step we will drag an image components in a vertical arrangement from the User Interface palette.
its height and width accordingly.
Now
Change

Step

6: Changing Properties

Uploading an image related to Step Counter.

Step 7: Adding Horizontal Arrangement

Step 8: Change its properties Change its background color accordingly and add two buttons in it one for start count and one for stop count. Change its font size, background color, renaming buttons and other properties accordingly.
Step 9: Adding Label Add one label to show the count steps value in the App. Change its font size, text etc.
Step 10: Adding Reset Button: Add one button to reset the value for steps counter. Change its properties like background-color, text, font-size etc.
Step 11: Adding Pedometer Sensor: Drag and drop pedometer sensor to the app layout.

Let’s Code:

Go to the blocks editor and select the Stop Count Button. Now drag and drop the Stop Count. Click Block.

Let’s Code: Select the pedometer and drag and drop pedometer.stop and connect with Stop Count.Click
the Start Count Button. Now drag and drop the
Count.
Let’s Code: Select
Start
Click Block.
Let’s Code: Select the pedometer and drag and drop pedometer.start and connect with Start_Count.Click
Let’s Code: Select the Reset button and drag and drop Reset.click block to the code viewer.
Let’s Code: Select the pedometer and drag and drop pedometer.reset and connect with Reset.Click. Set the text of label 1 to 0.

Let’s Code: Select the pedometer and drag and drop the following block to the blocks viewer.

Let’s Code: Select the label1 and drag and drop this following block.

Complete Blocks Part:

Download and test your app Build the QR Code and install the App.

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.
Step Counter by bidyutedutech - Issuu