黑客攻击苹果的天气小部件显示最后一次更新的时间

[2009年9月28日更新:本页说明不再与当前版本的Mac OS X 10.6.1天气小部件TJ骆马湖请贴更新说明)

My favorite Dashboard widget to date, by far, is Apple’s Weather widgetIt’s the only one I keep running at all times, and I refer to it often to check the temperatureIn theory, my usage of the Weather widget fits perfectly with the way Apple intended widgets to be used:

  1. 调用仪表板的关键
  2. 看一眼温度
  3. 冲击的关键又回到我在做什么

Just one problem, though: the Weather widget only syncs its data periodically, and only while it’s displayedSo sometimes when you show it, it displays hours-old weather info for a few seconds until it has time to fetch updated data from AccuWeatherSo in practice, my usage of the Weather widget was like this:

  1. 调用仪表板的关键
  2. 看一眼温度
  3. 等待几秒钟,看看它的变化
  4. 冲击的关键又回到我在做什么

Sometimes you can know at a glance that the data is stale and needs to updated; e.gif you’re checking at night and the Weather widget is still displaying the sun, or vice-versaOther times, however, it’s hard to tell, so I ended up waiting sometimes even when I didn’t need to.

My frustration was that I wanted to know at a glance whether I needed to wait for updated data所以我砍它。

这是Apple原始小部件的左上角:

截图的苹果天气小部件。

这是我的破解版本:

截图的苹果天气小部件。

差异:

  1. I moved today’s predicted high and low temperatures together, above the name of the city.

  2. 下面城市的名字,我显示最后一个数据的时间同步。

So, if the time displayed in my hacked Weather widget is close to now, I know the data is fresh, and there’s no need to waitIf time is more than an hour ago, I know I need to wait.

更新:A few readers have pointed out that the degree symbol in the top-right corner of the Weather widget pulses when you first display the widget, and it stops pulsing when the data has been refreshed我从来没有注意到这个But, still, I enjoy knowing just how current the data is, and so I probably would have written this hack even if I’d noticed.

黑客如何应用

The first thing you need to do is make a copy of Apple’s original Weather.wdgt package我不能强调这足够强烈:Make a copy, then hack the copy.

I moved my copy of the Widget.wdgt package to the Widgets folder in my user account:/Users/gruber/Library/Widgets/Weather.wdgt

By placing the widget here, it will replace the original Weather widget in the Widget Bar in the Dashboard layer, but Apple’s original Weather widget still resides at its normal location in the top-level (local domain) Library folder:/图书馆/ widget / Weather.wdgt

This way, if Apple updates the Weather widget in a future release of Mac OS X, you can just move or delete the hacked version in your home folder to revert to Apple’s.

Once you’ve made a copy, open the package with the Finder’s Show Package Contents contextual menu command.

  1. 打开'Weather.html'。

    改变从68行:

    < div id = =“高”类的文本信息smallinfo > < / div >

    (这个应该在一行上):

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

    Change line 70 from:

    < div id = =“lo”类的文本信息smallinfo > < / div >

    至:

    <div id ='updatetime'class ='text info smallinfo'> </ div>

    保存并关闭'Weather.html'。

    在原始小部件中,有两个单独的< div >tags for the predicted daily high and low temperatures; the high div is above the location div, the low div belowBoth tags are empty in the HTML, because the actual temperature values are set dynamically by the JavaScript later on(This is pretty much how most widgets are architected: the HTML is an empty framework, and the contents are filled in by JavaScript that modifies the HTML document dynamically viaDOM脚本。)

    In this hack, we’re putting both the high and low temperatures into a single div, above the locationTo reflect this change in our element names, we change the name of this div from “high” to “high-lo”I added spans within the div for the high and low temperatures, using the sameelement IDs used in Apple’s original widgetThis allows Apple’s original JavaScript code for updating the high and low temperatures to continue working without change — the JavaScript doesn’t care whether the现在横跨代替div元素。

    This allows us to use the other div, where the low temperature used to go, for displaying the time of the last update.

  2. 打开“Weather.css”。

    改变第77行:

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

    至:

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

    This change isn’t necessary for the hack; all it does is use a bit less transparency for the text in thesmallinfoclass. This class is used for both the divs we’re hacking.

    改变从81行:

    # {高

    至:

    # high-lo {

    最后,改变第85行:

    # lo {

    至:

    # updatetime {

    保存并关闭'Weather.css'。

    None of these changes to the CSS are strictly necessary; we could have just kept using the original element ID names in our hack. But even in a short hack such as this one, it’s a good idea to keep your variable / ID names accurately descriptive; it’s a recipe for confusion to have a div named “lo” which contains a time, not a temperature, or to have a div named “high” which contains both a high and low temperature.

  3. 打开“Weather.js”。

    257年线后,插入以下行:

    // Format the time of the last data refresh
    var h = object.time.hour;
    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';
    }
    var m = object.time.minute;
    if (m < 10) {
        m = '0' + m;
    }
    document.getElementById('updatetime').innerText =
            h + ':' + m + ' ' + ampm;

    以下是JavaScript代码段的作用:

    插入到小部件的代码handleDataFetched()function, which, as its name implies, is called whenever new data has been fetched and needs to be displayed对象命名宾语(不是我的苹果的变量名)已经包含了时间属性的小时和分钟持续更新The original widget never displays this time, but it uses the time to decide whether the current data is old and needs to be refreshed.

    所以我们构建了三个变量:h,,上午下午(which is set to either “am” or “pm”).object.time.houruses 24-hour time, so it ranges from 0-23如果是12,是我们在变上午下午to “pm”; if it’s 0, we changehto 12; if it’s greater than 12, we subtract 12 and change上午下午“点”(更新:If you’d prefer a 24-hour time format,Eric Meyer指令为了你。)

    For the minutes, we need to concatenate a leading ‘0’ character if the value is less than 10; otherwise, if the time were 2:04, we’d see “2:4”(JavaScript没有相当于Perl或Csprintf的()。)

    Finally, we use DOM scripting to set the contents of the element with ID “updatetime” to the time.

    Save and close ‘Weather.js’, then open your hacked Weather widget in DashboardIt should show the daily high and low together on one line, and the time of the last update below the location.

前一: 制作书
下一个: 洗牌