Qibla Finder or Location Finder 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 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 or some other location direction app too by providing a different longitude and latitude. We will use the longitude and latitude of Kaaba located in Makkah, Saudi Arabia.

So, let’s begin. 

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. 

I will upload a compass image and an arrow image. Use a square compass image with a transparent background.

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/


Drag and drop a Label from the User Interface and rename it to addressLbl. Now, drag and drop a Canvas from Drawing and Animation onto the viewer. Make height and width 500 pixels.


Drag and drop an Image Sprite from Drawing and Animation onto the canvas. Rename to compassImg and choose the uploaded compass image as the picture. Make height and width fill parent.

Drag and drop another Image Sprite from Drawing and Animation onto the canvas. Rename to arrowImg and choose the uploaded arrow image as the picture.  Make height 150 pixels and width 84 pixels.

Drag and drop an Orientation Sensor from Sensors.

Drag and drop a location sensor from sensors and choose 1000 as timeinterval.


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

First of all, make global variables.

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’t 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.

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:

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

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

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

Do the same thing for the arrowImg.



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


Now, we come to our qibla or location arrow. We need the user’s current location for it so we should only calculate direction if user’s location is available.

So call procedure only if valid longitude and latitude.

Let's work on the procedure now. Please copy the code carefully. 

It uses a trigonometric formula to calculate the direction:

Qibla direction = atan2(y,x)

Where y = sin (qiblaLongitude - userLongitude)

And x= (Cos (userLatitude)x tan(qiblaLatitude))-(sin(userLatitude) x cos (qiblaLongitude - userLongitude)).

Source: The Qibla equation was derived by Dr. Kamal Abdali. 

And then, subtract the calculated angle from true north i.e. azimuth to get the custom location direction.

Last but not least, we come to the location sensor code. When the device receives location information, the location changed event is triggered.

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 🙂.

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 Group 1 (s, a, t,
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