RSS
people
Mar 12 2009

Make a textarea Hindi transliterable

By Vikash | Filled under: javascript

Transliteration is not an unfamiliar word these days. When you write Hindi in roman script and it automatically converts in Devanagari, then the user of your application feels happy. Like google indic transliteration page or orkut scraps, you can make any textarea. All you need to know is about “Google AJAX Language API“.

Without much discussion, let’s see how this works. This is the minimal code required.

1
2
3
4
5

<html>
  <head>
    <!-- Following line is necessary to include api -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

      // Load the Google Transliteration API
      google.load("elements", "1", {
            packages: "transliteration"
          });
 
      function onLoad() {
        var options = {
          sourceLanguage: 'en',            //en for English
          destinationLanguage: ['hi'],    //hi for Hindi
          shortcutKey: 'ctrl+g',   //key combination to toggle between languages
          transliterationEnabled: true
        };
 
        var control =
            new google.elements.transliteration.TransliterationControl(options);
 
        // List all the IDs of textarea/textboxes below
        // These IDs should be present in HTML code
        var ids = [ "transl1", "transl2" ];
 
        control.makeTransliteratable(ids);
      }
      google.setOnLoadCallback(onLoad);
29
30
31
32
33
34
35
36
37

    </script>
  </head>
  <body>
  <center>Type in Hindi (Press Ctrl+g to toggle)</center>
    <br>Title: <input type='textbox' id="transl1"/>
    <br>Body:<br>
    <textarea id="transl2" style="width:600px;height:200px"></textarea>
  </body>
</html>

Right now transliteration is supported for Arabic, Hindi, Kannada, Malayalam, Tamil & Telugu. (Language codes: ar, hi, kn, ml, ta, te respectively).

If you want to write text in Malayalam instead of Hindi then only line 14 of above script will change as

14

      destinationLanguage: ['ml'],

Optionally we can also show a button control to toggle between English and the indic language. We just need to add one line in onLoad function of script.

25

      control.showControl('translControl');

How to enable Hindi writing in wordpress comment box?

We can use the same concept to make wordpress comment box transliterable in Indian languages. Only 4 simple steps.

  1. Note down id of your comment textarea in comments.php file of your theme. (say id=”comment”)
  2. copy the lines between <head>and </head> in the script written above.
  3. paste the copied code in header.php file of your theme, inside head section.
  4. replace the line var ids = [ "transl1", "transl2" ]; with id of your comment textarea. (var ids = [ "comment" ]; if ID noted in step 1 was comment)

Based on this concept, I have created a wordpress plugin which allows visitors to comment in Hindi. (Other languages to be added soon). Once you install the plugin, none of the steps are needed. Visit plugin page here.

11 Comments | Tags: , , , , , , , , , ,
Mar 11 2009

Write an SMS Application – 2

By Vikash | Filled under: PHP, SMS

If you have not read first part of “Write an SMS Application”, read it here.

Continuing from next time, let’s assume that we registered a keyword ‘QUOTE’. It means that any message which starts with QUOTE (or quote or QuOtE) and sent to 56767888 will call our AppURL http://webkoof.com/quote.php. This is how it will exactly happen:

  1. Someone sends QUOTE <anything after it> to 56767888. (Please note that the space after QUOTE is needed. QUOTER will not call your appURL)
  2. SMSGupShup will recieve the message and will call our AppURL with sender’s phone number and content of the SMS.
  3. They will pass the sender’s phone number and SMS to our application as GET parameters. Which means that if someone with phone number 9876543210 sends QUOTE to 56767888 then they will actually call http://webkoof.com/quote.php?msisdn=919876543210&content=QUOTE

Notice that parameter name for phone number is msisdn and for SMS content is content. Also notice that phone number is always prefixed by the country code (91 for India).

Our applicaton should start with GETting these parameters.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php
$sender = $_GET["msisdn"];  // Get the phone number
$content = $_GET["content"]; // Get the message
 
/* Remember that an user can send anything after QUOTE to the application.
So, QUOTE GANDHI will also come to your application and so will QUOTE xxx.
Let's make sure that we recieved only QUOTE or send an error.           */
 
if ($content == 'QUOTE') 
       $reply = selectQuote();  //selectQuote is a function, which we need to define.
else
       $reply = 'You have sent wrong command. You should only send QUOTE to 56767888.';
 
fucntion selectQuote() {
 
       /* Do something and find out a quote. You can use a pre defined array of quotes 
          and pick one. or you can fetch a RSS feed of quotes from somewhere and pick one. 
          Right now, I'm returning a fixed quote every time. */
 
        $quote = "There is no gain without pain";
        return $quote; 
}

In the code till now, we decided what to send based on what we get. Please remember that choosing the quote (selectQuote function) can be a very simple algorithm which involves picking up one random quotes from a given array (or text file or even mysql database) or it may be a complex one involving RSS feeds. The way you select the quote is a programming problem and it may vary from user to user. In this case, we are returning the same quote every time because we want to learn the SMS App flow in simplistic manner.

So, we finally decided what to send back ($reply variable) and to whom ($sender variable). How will we send back the SMS then? It is not as complex as it may seem. If your script outputs in a given JSON or XML format, SMSGupShup will handle all the dirty work and automatically send the SMS. Acceptable formats are following:

1. JSON

[{ "msisdn":"919876543210", "content":"Our Reply here"},
{"msisdn":"919876543211", "content":"Another message to same or different number"}]

2. XML

<ApplicationResponse>
     <Response>
           <msisdn>919876543210</msisdn>
           <content>Our Reply here</content>
      </Response>
      <Response>
            <msisdn>919876543211</msisdn>
            <content>Another message to same or different number</content>
      </Response>
<ApplicationResponse>

Notice that a single incoming SMS can result in sending more than one messages as response to different numbers. But, for our simple application we only need to send one message to only one user. So, we need to format our response in the given format. We can use simple echo command or more advanced json_encode command. Continuing our quote.php file:

24
25
26

// Using simple echo fucntion
echo "[ { \"msisdn\":\"$sender\", \"content\":\"$reply\"}]"; 
?>

Alternatively, you can also use json_encode function (PHP5). Although it seem little complex but, for creating jsons in other complex cases are too much to handle using echo.

24
25
26
27
28

// Using more advanced json_encode function.
$reponseArray = array('msisdn'=>$sender, 'content'=>$reply);
$json_response = json_encode($responseArray);
echo "[$json_response]";
?>

Similarly you can also choose to output XML format. Again, it does not matter if you use echo to create your XML or you use other complex functions to write XML.

Hence, we created our first SMS application which is very simple but gives us good enough idea of the flow logic involved. Wait for complexities.

And ya…! Happy Holi. :)

6 Comments | Tags: , , , , ,
Older Entries