Advertisement

Weather Widget with time, updated for Snow Leopard

TJ Luoma
Updated ·5 min read
Weather Widget with Time

Back in 2005, John Gruber wrote about Hacking Apple's Weather Widget to Show the Time of the Last Update.

I was disappointed to learn that my customized Weather widget no longer worked in Snow Leopard, and for some reason John's instructions no longer worked for the Snow Leopard version of the Weather Widget.

The culprit seemed to be the JavaScript that John had modified to calculate the time. Unfortunately I don't speak JavaScript, but with a little help from Google I was able to find a workaround which will enable this tip to work again.

With John's permission, I'm posting the updated instructions here, but please understand that he did 99% of the work, and I'm just polishing the fenders. If you'd like more of an understanding for why some of these suggestions are made, I would encourage you to read his article.

(Note: all of the line numbers below refer to the files as they exist in 10.6.1 and may change in later versions, which is why context for each line is given.)

Step 1: Make your own copy of the Widget. The official Weather.wdgt is found in /Library/Widgets/ but you do not want to modify that version. Instead, copy it to ~/Library/Widgets/ in your home directory. (If there is already an old copy in there, delete it or rename it.)

Step 2: Edit ~/Library/Widgets/Weather.wdgt/Weather.css in a text editor. To access the component files that make up the Weather widget, right-click your copy of the widget and choose "Show Package Contents."

a) Look for the entry for ".smallinfo" at line 75. Change this line:

color: rgba(255, 255, 255, .7);

to

color: rgba(255, 255, 255, .85);

b) Next, look around line 81 for these lines:

#high {
top: 10px;
}

and then change it to this:

#high-lo {
top: 10px;
}

c) Finally, look around line 85 for

#lo {
top: 37px;
}

and change it to

#updatetime {
top: 37px;
}

Save and close the file.

Step 3: Edit ~/Library/Widgets/Weather.wdgt/Weather.html in a text editor.

a) Around line number 69, replace this line:

<div class="text info smallinfo" id="high">

with this

<div class="text info smallinfo" id="high-lo">/

b) A few lines below that, change this:

<div class="text info smallinfo" id="lo">

to this:

<div class="text info smallinfo" id="updatetime">

Save and close the file.

Step 3: Edit ~/Library/Widgets/Weather.wdgt/Weather.js in a text editor.

This step will be the most intimidating, but you ought to be able to simply copy and paste. This is also the only step which has any significant difference (beyond line numbers) from John's original post.

Open the file and look around line 251 for this:

var lastIcon = null;
function handleDataFetched (object)
{
lastResults = new Array;

The important difference here is that unlike the other steps so far this time we are not going to replace any text. We are going to add text, but do not remove any of the existing text.

After the open bracket "{" simply paste these lines:

// Format the time of the last data refresh
var currentTime = new Date()
var h = currentTime.getHours()
var m = currentTime.getMinutes()
var ampm = 'am';
// default to am
if (h == 12)
{
// noon
ampm = 'pm';
}
else if (h == 0)
{
// midnight
h = 12;
}
else if (h > 12)
{
h -= 12;
ampm = 'pm';
}
if (m < 10) { m = '0' + m; }
document.getElementById('updatetime').innerText = h + ':' + m + ' ' + ampm;

The final result should look something like this (the bold text indicates what we have added):

var lastIcon = null;
function handleDataFetched (object)
{
// Format the time of the last data refresh
var currentTime = new Date()
var h = currentTime.getHours()
var m = currentTime.getMinutes()
var ampm = 'am';
// default to am
if (h == 12)
{
// noon
ampm = 'pm';
}
else if (h == 0)
{
// midnight
h = 12;
}
else if (h > 12)
{
h -= 12;
ampm = 'pm';
}
if (m < 10) { m = '0' + m; }
document.getElementById('updatetime').innerText = h + ':' + m + ' ' + ampm;

lastResults = new Array;

The "lastResults = new Array;" line was already in the file, and is shown simply to demonstrate how the new code should look when integrated with the existing code.

Save and close the file.

That's it! You now have a custom version of the Weather widget in ~/Library/Widgets/. Open that folder, double-click on the widget icon, and it will be added to your Dashboard. (You might want to make sure you don't already have the Weather widget showing, to avoid confusion.)

If anything goes wrong, simply delete the ~/Library/Widgets/Weather.wdgt then copy the original from /Library/Widgets/ and try again.

On the Mac, little things mean a lot. To me, this tip lets me know that I am looking at current information. It's a little thing, but it's a little thing I've used countless times for several years. Thanks again to John for the initial discovery.

UPDATE: TUAW reader Harvey posted a shell script which will automatically patch the necessary files and create a customized widget in your ~/Library/Widgets/ folder. I tested it and found that it worked perfectly for me, but standard disclaimers apply: use at your own risk. To use it, simply save it to your ~/Desktop (or wherever else you choose) and then do

chmod u+x ~/Desktop/CreateNewWeatherWdgt.sh

~/Desktop/CreateNewWeatherWdgt.sh

If you save it somewhere else, adjust the ~/Desktop/ as appropriate. Thanks Harvey!

If you preferred Accuweather, checkout they have a widget available also.