Smoky Cogs

Recently I decided to experiment a bit more with developing Android applications. I had played around with Android a rather long while ago, creating two rather simple apps – Dutch Public Holidays and Plasmatic, but decided to look at it again.

I have improved upon my two previous apps, making them much more useful, and created a third app, using webservices to look up animal and plant scientific names.

Thanks to the thousands of Android tutorials littering the web, it is not hard at all to get started in Android development, and the integrated Eclipse/Android SDK makes for a very pleasurable development environment.

Since there is nothing that can’t be found in other tutorials in the applications, I won’t list the code for the apps themselves, but you can download the source code for the apps from the links below.

Dutch Public Holidays
This was the first app I wrote, and is rather very simple in construction. It merely shows a list of public holidays for the Netherlands for a particular year.
Installer – Source

Plasmatic
I ported some code from my C# fractal library I had written a while back to Java to draw plasma fractals. The application generates a plasma fractal based on a set of preferences, and is able to save the generated images to a file on the mobile device.
Installer – Source

Scientific Name Search
This app makes use of a webservice provided by www.itis.gov to search for information such as the scientific name and taxonimic classification of plants and animals.
Installer – Source

I was playing around with some code recently, and came across a very easy way to create a city lookup field using jQuery’s UI components and a very useful webservice provided by Geonames.

How the autocomplete functionality in jQuery works, is by wrapping the functionality around a standard html text input field, populating a dropdown list of values from an ajax call to a webservice, in this case, the Geonames webservice.

When supplied with a partial city name, the GeoNames webservice returns back a list of information for cities matching the partial city name supplied, allowing you to display, and keep track of, the country, province, full city name, and a host of other info. Full documentation is provided on the GeoNames site.

$( "#city" ).autocomplete({
  source: function( request, response ) {
    $.ajax({
      url: "http://ws.geonames.org/searchJSON",
      dataType: "jsonp",
      data: {
        featureClass: "P",
        style: "full",
        maxRows: 12,
        name_startsWith: request.term
      },
      success: function( data ) {
        //Display city name, state name, country name
        response( $.map( data.geonames, function( item ) {
          return {
            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
            value: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName
          }
        }));
      }
    });
  },
  minLength: 2,
  select: function( event, ui ) {
    $('#city').val(ui.item.value);
    return false;
  }
});

One of the most frustrating things about JavaScript is being able to determine what events are being fired for a particular element, especially in a complex web application where a single element might have several different functions attached to a particular event.

Well, jQuery comes to the rescue.

jQuery has a very useful, and rather unknown, method to return all the events attached to an element, which is particularly useful when used in the web browser’s console while debugging a web page.

All this needs is one single line of code, and hey presto!

$(element).data('events');

To focus on an element using jQuery is really easy, since all it takes is one function – .focus(). There are cases though were it is just a little bit trickier.

Let’s take the scenario where after entering a field, you need to validate it, and if the validation fails, you need to return focus to the field. You would expect the following code to do the job:

$(elem).blur(function(){
   if (do some validation fails) {
      $(this).focus();
   }
});

This code, logically, should work, and indeed it does in Internet Explorer, but Firefox stubbornly refuses to set the focus.

The problem is that the event is firing at the wrong time for Firefox, and therefore the focus event is being lost.

The solution for this is to delay the focusing by a small bit, which then yields a solution that works in all browsers

$(elem).blur(function(){
   if (do some validation fails) {
      var $this = $(this);
      setTimeout(function () { $this.focus(); }, 10);
   }
});

At long last, my little pet project is alive on the web. The Night Sky Notebook is a website which implements a whole range of astronomical calculations, much like Urania, my desktop version, but fully implemented in Javascript.

When I first had the idea of putting up astronomical calculations on the internet, it was simply going to be a convertion to JavaScript from the C# code that I have written about extensively on this blog. Afterwards, however, I decided to rewrite the entire library from scratch to improve the quality of the code, as well as the accuracy of the calculations, basing the new code largely on the algorithms specified in the book Astronomical Algorithms by Jan Meeus.

In addition to the pages containing pure calculations, the site also has a number of pages making use of HTML5 canvas features to render animations for things such as the Moon phase, planetary positions and Jupiter’s moons. This means, of course, that the site works best on newer browsers that support HTML5, such as Internet Explorer 9+, Firefox 5+ and Chrome.

The source code for the library is open-source and is released under the MIT license, and is available for download from here.

I hope that you have as much fun using the new site and astronomical library as I have had in writing it.

Google has come out with the Google Font API, which enables you to use interesting fonts on a web page, without worrying whether or not the font is available on the user’s browser.

All you need to do is add a link to the Google Font API in your page, passing the name of the font you want to use, and then you can use that font in the CSS styling for an element on the page.

The best part, is that it does not require any browser plugins, as Google downloads the font to the browser cache for use within the page, and the supported browsers are also very broad. The code runs on IE6+, Firefox 3.5+, chrome 4.249.4+, Safari 3.1+ and Opera 10.5+.

So, as an example, the code to produce the following text:

is

<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC&subset=latin' rel='stylesheet' type='text/css'>
<div style="font-family: 'IM Fell English SC', arial, serif; font-size:48px;">Some fancy text</div>

Google Font Directory contains a gallery of available fonts for use with the Google Font API