{"id":5512,"date":"2024-12-31T17:21:25","date_gmt":"2024-12-31T17:21:25","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5512"},"modified":"2026-02-03T18:34:14","modified_gmt":"2026-02-03T18:34:14","slug":"compass-app-in-mit-app-inventor","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/compass-app-in-mit-app-inventor\/","title":{"rendered":"Compass App in MIT App Inventor"},"content":{"rendered":"\n

Hello friends and welcome to Obsidian Soft.<\/p>\n\n\n\n

In today\u2019s class, I will teach you how to turn your Android device or iPhone into a compass.<\/p>\n\n\n\n

So, let\u2019s begin. <\/p>\n\n\n\n

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. <\/p>\n\n\n\n

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. <\/p>\n\n\n\n

I used this image from freepik.com.<\/p>\n\n\n\n

Image by rawpixel.com on Freepik <\/p>\n\n\n

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

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.<\/p>\n\n\n\n

There are also free online websites available that can help you in resizing an image.<\/p>\n\n\n\n

Upload the resized compass image with the transparent background in your compass app project. Now, drag and drop a Canvas<\/strong> from Drawing and Animation<\/strong> onto the viewer. <\/p>\n\n\n\n

Give it a background color of your choice. I am going to give it a black color. Make height and width fill parent.<\/p>\n\n\n\n

Drag and drop an Image Sprite<\/strong> from Drawing and Animation<\/strong> onto the canvas.<\/p>\n\n\n\n

Choose the uploaded compass image as the picture. In its properties, make originX = 0.5 and originY = 0.5. Drag and drop a\u00a0Notifier<\/strong>\u00a0from the\u00a0User Interface<\/strong>. Also, drag and drop an\u00a0Orientation Sensor<\/strong>\u00a0from\u00a0Sensors<\/strong>.<\/p>\n\n\n\n

The screen design is done. Let\u2019s go to the blocks section.<\/strong><\/p>\n\n\n\n

When the screen is initialized, we have to align our compass image properly on the screen so drag and drop screen1\u2019s 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:<\/p>\n\n\n\n

X position = canvas.width \/2 \u2013 imageSprite.width\/2<\/p>\n\n\n\n

Do the same thing for y and change the width to height.<\/p>\n\n\n\n

Y position = canvas.height \/2 \u2013 imageSprite.height\/2<\/p>\n\n\n\n

Next, check if the device has an orientation sensor and use the notifier to show alert if it isn\u2019t available. <\/p>\n\n\n\n

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

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.<\/p>\n\n\n\n

The actual compass code is very simple now.<\/p>\n\n\n\n

Whenever the orientation of the device changes, change the compass image heading to azimuth.<\/p>\n\n\n\n

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

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 \ud83d\ude42.<\/p>\n\n\n\n

You can also download the project file (aia) from here:<\/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 have a look at the video here:<\/strong><\/p>\n\n\n\n

\n