Compass App in MIT App Inventor

Hello friends and welcome to Obsidian Soft.

In today’s class, I will teach you how to turn your Android device or iPhone into a compass.

So, let’s begin. 

Create a new project and call it CompassApp. For screen 1 properties, make align horizontal center and align vertical center. Also, this is super important that you make the screen orientation portrait. 

Now, we need a nice, vibrant compass image for our app. You can use whatever compass image you like from the internet but use an image with a transparent background and a square size i.e. the length and the width are equal. 

I used this image from freepik.com.

Image by rawpixel.com on Freepik 

I removed the background by using the free site remove.bg: a really helpful site that I frequently use.  I also reduced its size to 500 by 500 pixels as it is a good app development practice not to use huge images. You can reduce image sizes by using Paint on Windows or Preview on MacOS.

There are also free online websites available that can help you in resizing an image.


Upload the resized compass image with the transparent background in your compass app project. Now, drag and drop a Canvas from Drawing and Animation onto the viewer. 

Give it a background color of your choice. I am going to give it a black color. Make height and width fill parent.

Drag and drop an Image Sprite from Drawing and Animation onto the canvas.

Choose the uploaded compass image as the picture. Don’t change any of the properties. Drag and drop a Notifier from the User Interface. Also, drag and drop an Orientation Sensor from Sensors.


The screen design is done. Let's go to the blocks section.

When the screen is initialized, we have to align our compass image properly on the screen so drag and drop screen1’s initialize event. Inside, first set the size of the image to have the same height and width as the canvas. This will make sure that the image displays completely and utilizes all the space available. Also, make the x and y positions such that the image comes in the center of the screen. This can be achieved by dividing the width of the canvas by 2 to get the x position but we have to consider the width of the image in this calculation too so this is the resulting formula:

X position = canvas.width /2 - imageSprite.width/2

Do the same thing for y and change the width to height.

Y position = canvas.height /2 - imageSprite.height/2

Next, check if the device has an orientation sensor and use the notifier to show alert if it isn’t available. 


The orientation sensor determines how much the device is tilted but it also has an azimuth property. Azimuth is 0 degrees when the top of the device is pointing north, 90 degrees when it is pointing east, 180 degrees when it is pointing south, 270 degrees when it is pointing west, etc. Hence, we use this to make our compass operate so if it is not available, the compass will not work.

The actual compass code is very simple now.

Whenever the orientation of the device changes, change the compass image heading to azimuth.


We are done and you can see that such simple code has resulted in such a cool app. I hope you will have fun making this app and impressing your friends and family. Thank you for reading 🙂.


You can also download the project file (aia) from here:

Compass App


You can have a look at the video here:


Please like my videos and share it with your friends and family. Also, subscribe to my channel and press the bell icon so you don't miss any of the great projects I have planned for you.


Please like my Facebook page and Instagram page for more educational resources and tips.



Pinterest:
https://www.pinterest.co.uk/obsidiansoft/_created/
For links to free educational apps, have a look at the educational apps page

Comments

Post a Comment

Popular posts from this blog

Jolly Phonics Group 1

Image
Free Jolly Phonics Group 1 worksheets (s, a, t, i, p, n) According to Oxford Dictionary, phonics is a "method of teaching people to read by correlating sounds with symbols in an alphabetic writing system". In simple words, each letter of the alphabet has a sound. Instead of teaching young children the names of these alphabets, the sounds are taught. For example "a" makes the sound /a/...this is exactly the sound that comes from your mouth in the beginning when you say the word " apple " or " ant ". The letter "a" makes a different sound in words like " arm " and " ate " but these rules are taught later.  Jolly Phonics is a synthetic phonics system where all the letters of the alphabet have been split into seven groups. Each group contains 6 letters or their combinations so a total of 42 sounds are taught. What do I mean by a combination of letters? Remember that the combination of letters "s" and "h...
Read more

Jolly Phonics Group 2

Image
Free Jolly Phonics Group 2 worksheets (c/k, e, h, r, m, d) Hello Friends, I am back with another set of worksheets for helping children learn their phonics sounds. As you might already know, I am a strong proponent of the Jolly Phonics system of synthetic phonics sounds. Jolly Phonics system follows a particular order of teaching alphabet sounds in which there are seven groups. The following image shows the seven groups of Jolly Phonics along with an extra group taught by my Phonics app on Google Play Store. My app called  Phonics Fun  is 100% Free so you can download it and use it on all your Android devices.  It teaches all the letter sounds and different phonics rules and follows the pattern of Jolly Phonics but it is available for free. It is the perfect way to master phonics as you can hear phonics sounds and also test learning by playing many matching games. Coming back to printable Jolly phonics worksheets, I have already published worksheets for practicing...
Read more

Jolly Phonics Flash Cards

Image
Gone are the days of A for apple, B for Ball...this is the time of synthetic phonics where each alphabet has a sound. Now, you don't teach children the name of the letter but the sound made by the letter. A has the sound that comes when we say the word apple, b has the sound that comes when we say bed, and so on and so forth. There are different systems of synthetic phonics but I have felt that Jolly Phonics is the best system. In fact, I made my first mobile app for my son based on the Jolly Phonics style of teaching. However, I know that many people want to limit screen exposure for their children so I decided to make these flashcards.  You can use these flashcards independently or you can use them along with my app called Phonics Fun , available on the Google Play Store. You can hear the sounds from my app. Practice using these flashcards and then, test learning using my app too...a win-win situation :) The Jolly Phonics flash cards are double-sided. I have told you in my previ...
Read more