I need to build a Quran app and I want to read out the verses when a user touches it. The problem I'm facing is that some verses may expand to one and half lines (highlighted red verse) or just fit in a quarter of a line (highlighted green verse). So adding each verse to textview or some other view wont work it seems.

I want to detect verses like the red ones in the second image. I have audio files for the verses so no need of text to speech conversion


migrated from stackoverflow.com Apr 14 '12 at 13:06

This question came from our site for professional and enthusiast programmers.

  • 1
    $\begingroup$ Is the page given as image data or rendered Unicode text? $\endgroup$ – Thilo Apr 12 '12 at 6:22
  • $\begingroup$ Text to Speech.. But then, please show us your research. $\endgroup$ – Ghost Apr 12 '12 at 6:22
  • $\begingroup$ I have tried adding each verses image to imageview dynamically, But problem arise is that image view wont expand to one and half line like that. Sometimes some verses may require one and half line, Hope you got what i meant. I need some suggestion to overcome this. $\endgroup$ – Aswin Anand Apr 12 '12 at 6:25
  • 1
    $\begingroup$ Use two lines and just have some overhead? $\endgroup$ – Lucas Apr 12 '12 at 6:25
  • 1
    $\begingroup$ By one and a half line do you mean it takes up the width of the screen, then half of the next line down? $\endgroup$ – Lucas Apr 12 '12 at 6:38

This can be solved fairly straightforwardly with simple template matching. I don't know exactly how you have it set up, so I'll just describe the algorithm generally and use illustrations.

  • Observe that the verse numbers have a distinctive border that can easily be used to detect the start and end of a verse. So create a binarized template for that pattern and store it. Something like this:

    enter image description here

  • Since the number of lines in a screen are known in advance (you're formatting the page) and each verse has a constant height, you can easily infer (algorithmically) where the Y coordinates for the centerlines of the verses should be on the screen. This demonstrates the idea:

    enter image description here

  • When the user touches a verse, get the X-Y coordinates and snap the Y coordinate to the nearest verse center.

  • Then starting with the X coordinate, perform a simple template matching (cross-correlation) across that row. The first match (peak in the cross-correlation) in the forward direction (to the left), will be the end point for the verse. If there are no matches in the reverse direction (to the right), then move up one verse (which you can do, because you know the Y coordinate of the centerline) and repeat. The first match from the left end will be the start point of the verse. Similarly, if there is no forward match on the line, move down one line and repeat.

    Here's a short illustration of the idea. The yellow box is where the user touches the verse. You then do the cross-correlation with your template and the blue circles will be the match.

    enter image description here

    I also use template matching in this answer, if you're interested in seeing it in action.

  • Once you've determined the start point for the verse, then use an Arabic text recognizer to infer the verse number inside that border and play the corresponding audio file.

Simpler solution:

A simpler solution, if you don't want to go through this is to store the X-Y coordinates of the verse starting points (keep it simple and use the center points) and once you get the coordinates of the user input, you can again snap it to the centerline and then walk backwards to see where the verse starts. This might have the advantage of being faster.

I didn't put this forward as the first solution because you seemed to reject a similar idea in the comments. In the end, it depends on your constraints — would you rather do computational work (template matching — which, by the way, also requires you to store the template) or using memory (storing coordinates).

If I were you, I'd probably go with this one, but the image processing solution can be fun to try.

  • $\begingroup$ yoda or anyone else ,can you explain a bit better this issue please.?!Actually what i want to know and im not getting is just how or how to take numbers inside blue circles.?! Thanks a lot! $\endgroup$ – user1291 Apr 24 '12 at 23:42
  • $\begingroup$ @xmenus Once you have locked in on the circle (which you do by pattern matching the distinctive border), you'll have to use an Arabic text/number recognition library for identifying the contents inside. I don't know Arabic and so can't recommend anything. You could try asking the OP... $\endgroup$ – Lorem Ipsum Apr 25 '12 at 0:17
  • $\begingroup$ @xmenus If you need help with Arabic you can ask me, but from what you are asking if you simply wanted to detect an Arabic number you could presumably do the same template matching for them as you are doing with the circles. $\endgroup$ – Spacey Apr 25 '12 at 1:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.