Archive for the ‘Programming’ Category

Google Voice Recognition

Saturday, November 22nd, 2008

After realising the newly updated Google Mobile iPhone app was failing to perform its voice recognition because of the university proxy I tested the system and found it to be quite accurate:

  • “university of melbourne”
  • “interactive system design”

However I also got the following response:

  • “tea green way.com”

Damn you google!

jQuery Context Menu Plugin

Thursday, November 6th, 2008

Okay, this jQuery plugin (by Cory S.N. LaViska) is awesome:

Basically you can achieve a right-click drop-down menu via the following jQuery code:

$("#selector").contextMenu({
menu: 'myMenu'
});

Where ‘myMenu’ is the id of the HTML you want to appear as the menu:

<ul id="myMenu" class="contextMenu">
<li class="first_option"> <a href="#first_option">Option #1</a></li>
<li class="second_option"> <a href="#second_option">Option #2</a></li>
</ul>

I may need to use this in my next version of Chalk :-)

Debugging Javascript

Saturday, August 23rd, 2008

So far my experience with Javascript has not required too much dealing with its raw form. I’m a big fan of the jQuery library and I’ve heard described as a swiss army knife for Javascript. I think that’s an understatement though, it goes beyond just being a toolset. I believe it is a framework in its own right. And in fact, it pushes all your Javascript code into a more structured form.

I recently fixed a problem with a website that was developed by someone using raw Javascript. Basically it failed to work in IE. The underlying problem was that IE doesn’t recognise the visual text of a drop down select box in the DOM of the page as the ‘value’ of the element in the drop down select box.

So if you selected “5pm” from the box, the Javascript can’t be:

foo = frm.select[bar].value;

It has to be:

foo = frm.select[bar].text;

If you want it to work across all the browsers. In jQuery, you would never even write code like the above. You’d be using the CSS selectors:

$("#date_select").text();

The above would find the element with id ‘date_select’ and extract its text. Why the dollar sign? It tells Javascript we’re dealing with the jQuery library.

So you see, jQuery just looks different to raw Javascript most of the time. For example, take a load of this raw Javascript:

document.getElementById(&quot;x20&quot;).style.display='none';
document.getElementById(&quot;x21&quot;).style.display='none';
document.getElementById(&quot;x22&quot;).style.display='none';

var d = frm.Dates;
var dval = d.options[d.selectedIndex].text;
var idx;

for (x=frm.Times.length;x&gt;0;x=x-1)
{
        frm.Times.remove(x);
}

Ugh, messy. jQuery steps away from the ‘document’ rubbish by using the CSS selectors mentioned previously. And the for loop? jQuery provides you with functions to iterate throughout CSS selected elements:

$("#times_list li").each(function () {
  this.remove()
}

Where ‘this’ is one of the CSS selector’s matched elements, iterated by the ‘each’ function.

Embedded data extraction

Monday, August 4th, 2008

I recently developed a small website that allowed users to add students to a database and then allow them to be assigned software license keys. Part of the problem that the website aimed to solve was that previously students were purchasing the license keys when they weren’t necessarily entitled to them. Even after writing instructions for those selling the keys there was a failure of the students’ details being checked.

To check the details we required the student’s surname and access to the University of Melbourne email directory. Not terribly difficult but it did require those selling the keys to open a bookmarked page, enter the surname, browse the search results.

In order to improve accountability and the tracking of the purchases I decided to develop the website to allow the sellers (i.e. the users of the system) to more effectively manage the selling of keys to students. This improved management would hopefully:

  • Stop students from purchasing multiple keys wherein not entitled.
  • Make sure only eligible students were purchasing keys.

The first problem was easily solved by uniquely identifying the students and using the database. I won’t go into how this was solved as it is fairly trivial. The cool part was the checking of student’s eligibility for the keys.

Students are only eligible if they are enrolled in certain courses (Computer Science, Software Engineering, Information Science, Melbourne Model IT degrees). At first I linked to the Unimelb email directory on the student creation page. However, I decided I’d like a solution wherein the user did not even need to leave the website.

Hence, I developed the following Javascript (with jQuery support) to enable an embedded extraction of the Unimelb email directory’s data:

\\ A small anchor element with id 'email_check' sits next to the surname input field on the page:
$("#email_check").click(function()
{
  \\ The embedded results from the extraction are placed in a div with id 'check_list':
  $("#check_list").html("");

  \\ The surname input field has id 'surname_field', jQuery allows us to access the value attribute:
  var surname = $("#surname_field").attr("value");

  \\ .get is a jQuery Ajax function. We're going to invoke another page on the site, parse.php
  \\ and give it the surname we're interested in. The function argument is a callback for when
  \\ the Ajax call is complete. The returned page data is a string called 'page_data'.
  $.get("./parse.php?surname=" + surname, function(page_data)
  {
    \\ From the page_data we want to look at each of the results. The data is luckily
    \\ grouped within <tr> elements with the class 'vcard':
    $("tr.vcard", page_data).each(function ()
    {
      \\ Within these <tr> elements are the full names of the students and their courses,
      \\ kept in <td> elements with classes 'fn' and 'org', respectively.
      var fullname = $("td.fn", this).text();
      var course = $("td.org", this).text();

      \\ Finally we want return this data to the actual page of our website.
      \\ Using the append function we can drop new HTML into the existing dom:
      $("#check_list").append("<li><label>" + fullname + "</label>" + course + "</li>");
    });
  });
});

Accessing the off-site web page (the Unimelb email directory) was achieved via the parse.php page on my site, which took the form of:

<?php
  $surname = $_GET['surname'];

  $file = fopen("http://www.unimelb.edu.au/cgi-bin/mail/email.pl?name=".$surname, "r");

  while(!feof($file))
  {
    echo fgets($file);
  }
  fclose($file);
?>

The results work quite well. Users of the system are able to easily search for a student’s surname without having to leave the comforts of our website!

Now if anyone is caught selling keys inappropriately there are absolutely no excuses :-)