Having the weather on your lock screen is nothing particularly new, there are enough Winterboard themes that allow you to do this. However, this is slightly different. I’ve never really understood why you’d only ever want to know what the weather was like in your home town. What does it matter? That is of course unless you never actually go anywhere. Why not have the weather for where you are? Yes I know you could just look out of the window or actually go outside but that’s beside the point. What I wanted was to have the weather for where I actually am right now. So, as part of my iPhone tracking system I added the ability for the weather to follow me too. The implementation is rather simple.

Since I’m already sending my location and retrieving the wallpaper image I’m also getting an override (overRide.js) for my weather configureMe.js. The overRide.js contains a single line, the location – as per the configureMe.js format:

var locale="Lelystad,NL"

So each time the wallpaper is updated, so is this file. One of the key things you need to do to accomplish this for yourself is what is called reverse geocoding. That is, getting the name of your location from your GPS coordinates.

Now, the best way I’ve found of doing this so far is by using geonames this is a fantastic site that allows you to do the reverse geocoding without even blinking. For example, calling geonames using the url

http://ws.geonames.org/findNearbyPlaceName?lat=50.455&lng=-3

would result in the following xml being returned

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <geonames>
    <geoname>
        <name>Seaton</name>
        <lat>50.7049382166946</lat>
        <lng>-3.06999206542969</lng>
        <geonameId>2638278</geonameId>
        <countryCode>GB</countryCode>
        <countryName>United Kingdom</countryName>
        <fcl>P</fcl>
        <fcode>PPL</fcode>
        <distance>28.2265</distance>
    </geoname>
  </geonames>
</xml>

This gives you pretty much everything you could possibly want and for free too. Note the inclusion of your distance between your coordinates and the the coordinates returned (nearest named location).

Now I know what you’re thinking. Why would I retrieve a file with the data in it from my server, why not parse the xml in the javascript on the lock screen. You’re right, I could and you, possibly, should. I don’t because I keep all my GPS data in a database on that server so I update the database with the actual locations too. I don’t parse the xml on the iPhone because I don’t need to.

Of course I haven’t yet tested being in some obscure location that the weather provider doesn’t know about. Incidentally, geonames is so freaking good that, if you want to, you can download a daily dump of the database.

1. Start Xcode and pick one of the templates.
2. Load up the AppDelegate code and skip to ‘applicationDidFinishLaunching’.
3. Type ‘application.’ (note the full stop after the word application)
4. Hit escape and you’ll get a list, scroll down to items starting with P
5. Oh look there it is…

For those without Xcode here’s a picture.

Oh, that must be the non-public public api...

For those that want to see the what the documentation says


proximitySensingEnabled

Unfortuneately once some people grab hold of false information no facts will get in their way. Anyone that knows me will tell you that I’m really not fond of either Google or Apple, but let’s just get stuff right shall we.

Update: I’ve had some discussion on irc and it was felt that I should point out that proximityStateChanged is used and following some additonal chatter on IRC with UncleBob who pointed out that “It’s not private in the OBjC sense just the Apple documented SDK sense. ” he then went on to say “the whole thing is definately a peanut-gallery cockfest” which sums it all up really.

Update: Added a screenshot when rotated. The iPhone SDK handles the rotation automatically, all you need to do is specify which parts of which objects move or resize. All that can be done from Interface Builder. Easy as pie. Also note the changed title bar colour, in keeping with LinITX, and the title text. The shop title (LinITX) and shop base product URL are read from a plist file. I suppose they could be read from the sqlite db but I am experimenting so learning how to read a plist file is useful too.

Update 2: Spent ages last night trying to work out why some of the text descriptions for products came out of the database as null. Discovered that when importing the data file it wasn’t using UTF8 encoding, which is apparently all sqlite deals with. Loading up the source data file into TextEdit under OSX and saving it as UTF8 then reimporting solved the problem. I also modified how things are displayed. The image and text are inserted into a UIWebView so are now scaleable by the user. The images are also base64 encoded and in the database. This increases the database size but means the application can still be used offline. Before none of the pictures would display if there was no network connectivity.

Update 3: Added the ability to search the list. The search bar appears when the search button is pressed and hides again when the search is complete.

The JO is available with the neoprene in one of 7 colours, the base frame is always black but the colour range is varied enough for most tastes.

If you’re looking for a passive holder for your phone or music player then for the money the JO series suit. One thing I did notice when looking at the pricing on their site compared to Amazon was that although the x castro site and Amazon prices matched (after shipping), there seemed to be no way to select the free shipping for the UK. The 3 options in the dropdown box all added more to the price.

Well, now they don’t need to. For users with firmware 2.1, if you add the following lines to the <head> section of your web application page then, when someone adds your web application to their home screen and then uses it all they will see is the standard bar showing carrier name, signal and battery level. As ever the pictures should make it much clearer. Notice that there is no address bar or lower toolbar at all, even when scrolling.

<meta name="viewport" content="width=device-width; 
 initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" />
 
<meta name="apple-mobile-web-app-capable" content="yes" />
 
<meta names="apple-mobile-web-app-status-bar-style" 
 content="black-translucent" />

One thing I should point out is that, if you already have a link to a particular web application on your home screen, you will need to delete it and recreate it after the above lines have been added.

.shield {
        position: relative;
        float: left;
        padding: 7px;
}
 
.badge {
        font-family: helvetica;
        font-weight: bold;
        position: absolute;
        text-align: center;
        top: -2px;
        left: 52px;
        width: 30px;
        height: 24px;
        padding: 3px 0;
        background: url(imgs/badge.png) no-repeat 0 0;
        color :  white;
}

the badge.png image is just a copy of the original from the iPhone. Then we just wrap the icon and badge in the ’shield’ div

 
<div style="height: 220px; width: 320px;">
 
<div class="shield">
    <img id="CallIcon" style="display:block" 
         src="imgs/call.png" alt="" />
    <div id="CallIconB" class="badge" 
        style="display:none">0</div>
</div>
<div class="shield">
    <img id="MailIcon" style="display:block" 
         src="imgs/mail.png" alt="" />
    <div id="MailIconB" class="badge" 
        style="display:none">0</div>
</div>
<div class="shield">
    <img id="SMSIcon" style="display:block" 
         src="imgs/sms.png" alt="" />
     <div id="SMSIconB" class="badge" 
          style="display:none">0</div>
</div>
<div class="shield">
    <img id="VoiceMailIcon" style="display:block" 
         src="imgs/voicemail.png" alt="" />
    <div id="VoiceMailIconB" class="badge" 
        style="display:none">0</div>
</div>
</div>

Now it’s just a case of tweaking the javascript to update the values of the badges. The showElement function gets a new parameter, the count for this icon’s badge. We set the value and make the badge visible.

function showElement(name,count) {
 
   elCn = document.getElementById(name+'B');
 
   if (elCn) {
       elCn.innerHTML = count;
       elCn.style.display = 'block';
   }
    document.getElementById(name).style.display = "";
}

The hideElement function gets a little change to hide the badge completely if the count is 0. I’m a little undecided as to if the icons should always be on display, I think I prefer that they are – hence the commenting out of the style change.

function hideElement(name) {
 
   elCn = document.getElementById(name+'B');
 
   if (elCn) {
      elCn.innerHTML = 0;
      elCn.style.display = "none";
   }
      //document.getElementById(name).style.display = "none";
}

All that remains is a small change to the call to showElement to pass the value.

function updateIcon(name) {
 
   var value;
   var elVa;
 
   try { 
      elVa =  xmlReq.responseXML.getElementsByTagName(name);
      value = elVa[0].firstChild.nodeValue;
 
      if (value != "0") {
          showElement(name + "Icon",value);
      } else {
          hideElement(name + "Icon");
      }
} 
 
   catch(error) {
   }
}

There are some limitations on the number and size of the maps that you can retrieve so I employed a very simple caching mechanism to ensure I didn’t annoy Google. This certainly helps speed things up when testing and also enabled me to identify a small issue I was having.

One of the things I wanted to happen was that the image on the phone would only change if the location of the phone had changed and the phone had a network connection of some type (wifi/edge etc). So far it works pretty well except when the phone uses SkyHook IP  which manages to be 100’s of kilometers out. Thankfully since my positioning database has the source of the positioning I can filter out those dodgy SkyHook IP results.

I also found that it was better to remove the text from the docked icons. Well, technically, I didn’t actually remove it I just made it transparent. The text for the other icons was made red so that it can be seen over the underlying map. It’s a simple process. By adding the following lines to the Info.plist of my Winterboard theme, I get the desired effect.

 
	<key>UndockedIconLabelStyle</key>
	<string>font-size: 13px; color: red</string>
 
	<key>DockedIconLabelStyle</key>
	<string>font-size: 13px; color: transparent</string>

Any of the Google maps styles can be used (roadmap, mobile, satellite etc) but I prefer the mobile one since it’s clearer and the number of bytes that need to be transmitted is less than half of that for the satellite image.

What?

“Way to go spoiling it?”

I don’t care.

What it has done is cast a shadow over the Big Boss & Planet-iPhones repositories which either don’t verify or don’t care what ends up in their listings. While a Rick Roll isn’t dangerous it does highlight the dangers of installing applications etc from these repositories. It’s all about trust, if you can’t trust a repository it has no value. While the theme was probably a joke it has just made these repositories untrustworthy.