{"id":5509,"date":"2024-12-31T17:18:42","date_gmt":"2024-12-31T17:18:42","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5509"},"modified":"2026-03-03T15:40:50","modified_gmt":"2026-03-03T15:40:50","slug":"qibla-finder-or-location-finder-app-in-mit-app-inventor","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/qibla-finder-or-location-finder-app-in-mit-app-inventor\/","title":{"rendered":"Qibla Finder or Location Finder 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 into a Qibla app. A qibla app is an app that points toward Kaaba (the holiest place for muslims around the world). They have to pray five times a day while facing Kaaba so having a qibla app is a must in their lives. However, you can turn this app into your home finder<\/strong> or some other location direction app<\/strong> too by providing a different longitude and latitude. We will use the longitude and latitude of Kaaba<\/strong> located in Makkah, Saudi Arabia.<\/p>\n\n\n

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

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

Create a new project and call it QiblaApp. For screen 1 properties, make align horizontal center and align vertical center. Make the screen orientation portrait. <\/p>\n\n\n\n

I will upload a compass image and an arrow image. Use a square compass image with a transparent background.<\/p>\n\n\n\n

You can download the compass image from here:
https:\/\/www.freepik.com\/free-vector\/illustration-compass_2807758.htm

You can remove the background of the image by using:
https:\/\/www.remove.bg\/<\/p>\n\n\n\n

Drag and drop a Label<\/strong> from the User Interface<\/strong> and rename it to addressLbl. Now, drag and drop a Canvas<\/strong> from Drawing and Animation<\/strong> onto the viewer. Make height and width 500 pixels.<\/p>\n\n\n\n

Drag and drop an\u00a0Image Sprite<\/strong>\u00a0from\u00a0Drawing and Animation<\/strong>\u00a0onto the canvas. Rename to compassImg and choose the uploaded compass image as the picture. Make height and width fill parent. Scroll down in the properties and make originX = 0.5 and originY = 0.5.\u00a0<\/p>\n\n\n\n

Drag and drop another\u00a0Image Sprite<\/strong>\u00a0from\u00a0Drawing and Animation<\/strong>\u00a0onto the canvas. Rename to arrowImg and choose the uploaded arrow image as the picture.\u00a0 Make height 150 pixels and width 84 pixels. Also, make originX = 0.5 and originY = 0.5.\u00a0<\/p>\n\n\n\n

Drag and drop an Orientation Sensor<\/strong> from Sensors<\/strong>.<\/p>\n\n\n\n

Drag and drop a location sensor from sensors and choose 1000 as timeinterval.<\/p>\n\n\n\n

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

First of all, make global variables.<\/p>\n\n\n\n

We are giving invalid values to user longitude and latitude so that we are able to distinguish when actual values are available. The longitude can\u2019t be more than 180  and the latitude cannot be more than 90. When the screen is initialized, we need to ask for location permission so get askForPermission block from screen1 and choose course location.<\/p>\n\n\n\n

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

Also, we have to align our compass image and arrow image in center of canvas. 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 compassImg.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 compassImg.height\/2<\/p>\n\n\n\n

Do the same thing for the arrowImg.<\/p>\n\n\n\n

\"\"<\/figure>\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

Now, we come to our qibla or location arrow. We need the user\u2019s current location for it so we should only calculate direction if user\u2019s location is available.<\/p>\n\n\n\n

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

So call procedure only if valid longitude and latitude.<\/p>\n\n\n\n

Let\u2019s work on the procedure now. Please copy the code carefully. <\/p>\n\n\n\n

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

It uses a trigonometric formula to calculate the direction:<\/p>\n\n\n\n

Qibla direction = atan2(y,x)<\/p>\n\n\n\n

Where y = sin (qiblaLongitude \u2013 userLongitude)<\/p>\n\n\n\n

And x= (Cos (userLatitude)x tan(qiblaLatitude))-(sin(userLatitude) x cos (qiblaLongitude \u2013 userLongitude)).<\/p>\n\n\n\n

Source: The Qibla equation was derived by Dr. Kamal Abdali<\/a>. <\/p>\n\n\n\n

And then, subtract the calculated angle from true north i.e. azimuth to get the custom location direction.<\/p>\n\n\n\n

Last but not least, we come to the location sensor code. When the device receives location information, the location changed event is triggered.<\/p>\n\n\n\n

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

We are done and you can see that although the trigonometric code was a bit complicated but if you follow it carefully, it will result in a very, very cool app that you can show to friends and family and impress them. Thank you for reading \ud83d\ude42.<\/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