Beginning Mac OS X Tiger Dashboard Widget Development (2006)

iTunes Connection Monitor

// whenever widget is removed, unload preference widget.setPreferenceForKey(undefined,”whichside”);

}

function getside() {

// load side preference

var whichside = widget.preferenceForKey(“whichside”); if(!whichside || whichside.length == 0) {

widget.setPreferenceForKey(“front”,”whichside”);

var whichside = widget.preferenceForKey(“whichside”);

}

return whichside;

}

function flip(side) { if(side == “front”) {

var front = document.getElementById(“front”); var back = document.getElementById(“back”); widget.setPreferenceForKey(“back”,”whichside”);

}else {

var front = document.getElementById(“back”); var back = document.getElementById(“front”);

widget.setPreferenceForKey(“front”,”whichside”);

}

if(window.widget) { widget.prepareForTransition(“ToBack”);

}

searching();

front.style.display=”none”;

back.style.display=”block”;

if(window.widget) { setTimeout(‘widget.performTransition();’, 0); setTimeout(“load_info();”,1);

}

}

function searching() { var side = getside(); if(side == “front”) {

var msg = document.getElementById(“connections”); msg.innerText = “Connected Users: Searching...”;

} else {

var msg = document.getElementById(“songs”); msg.innerText = “Songs Playing: Searching...”;

}

}

The word “Searching” is a placeholder for the user’s IP address and songs playing. When the information is collected, the JavaScript replaces the “Searching” text with the list of IP addresses or the user names.

271

Chapter 18

The load_info() function does the heavy lifting for discovering iTunes users. lsof is a command-line utility that lists the open files on your Macintosh. This means that if a file is open, the utility lists the files in the same way that the ls command does. Entering a simplified version of the command used in the widget in Terminal, for instance, gives you a listing of the currently open music files:

[offhook:~] pfterry% lsof -F -c iTunes | egrep .mp3 n/Users/pfterry/Music/iTunes/iTunes Music/Compilations/10 Years In The Life [Disc 1]/1-02 Relativity (Transeau’s Excursion).mp3

lsof, in the load_info() function, is passed the b switch to build the device file and the F switch to specify a character list. The results of that lsof are piped to grep, which looks for the ‘daap->’ in the output. The outputString undergoes a replacement to get only the users and the machine IP addresses.

function load_info() { var side = getside(); if(side == “front”) { // load front side

var syscall = widget.system(“lsof -b -F -itcp:daap | grep ‘daap->’”, null); if(syscall.outputString !== undefined) {

// process netstat return info

syscall.outputString = syscall.outputString.replace(/\S*->/g,’’); syscall.outputString = syscall.outputString.replace(/:\S+/g,’’); var ipArray = syscall.outputString.match(/\S+/g);

ipArray = ipArray.sort()

// clean duplicates, empties, and localhost entries var ipList = new Array();

var previous = “”;

for(var i=0; i<ipArray.length; i++) { if((ipArray[i].length > 0) && (ipArray[i] != previous)) {

ipList[ipList.length] = ipArray[i];

}

previous = ipArray[i];

}

var return_info = “Connected Users: “ + ipList.join(“, “); } else {

// netstat was empty

var return_info = “Connected Users: No Users Connected”;

}

var msg = document.getElementById(“connections”); msg.innerText = return_info;

}else {

// load back side

var syscall = widget.system(“lsof -F -c iTunes | egrep ‘(\\.aac|\\.mp3|\\.wav|\\.aiff|\\.m4a|\\.m4p|\\.m4b)’”, null);

if(syscall.outputString !== undefined) {

//process lsof return info var regex1 = /.+\//g;

//split output

var songlist = syscall.outputString.replace(regex1,”, “);

var return_info = “Songs Playing: “ + songlist.replace(“, “,””);

272

iTunes Connection Monitor

}else {

var return_info = “Songs Playing: No Songs Playing”;

}

var msg = document.getElementById(“songs”); msg.innerText = return_info;

}

return true;

}

The next portion of the JavaScript cleans up the list of connected users. It creates an empty array and then walks the list of connections to remove any duplicates or localhost entries. The array is then joined to create a flat list of connections and appended to the “Connected Users:” text. If the listing is empty, the “Connected Users: No Users Connected” is used.

The JavaScript for the back side of the widget uses lsof to get a listing of songs by grepping for files ending in one of the standard audio formats and assigns it to the variable syscall. That listing is processed using a regular expression (regex1 = /.+\//g;) and the songlist is built. After a replacement, the songlist is appended to the “Songs Playing:” text and inserted into the widget using msg.innerText.

Summar y

Though you might not expect it, the iTunes Connection Monitor gets the information about who is connected to your music library and which songs they are playing by using elements of a Unix shell script. That function in the JavaScript is able to get the information from the shell and report the IP addresses and the users.

273

Chapter 19

Figure 19-1

Clicking the Dashboard icon takes you to the Dashboard Downloads page. This widget demonstrates how to use all of the widget space for functionality. When you move your pointer over the icon, it is highlighted. The gear menu next to the icon lets you choose a category of widgets from a pop-up menu. The Category that you’ve selected from the Dashboard Downloads page is displayed at the bottom of the widget panel. Additionally, the widget has a search field.

Clicking the widget name in the list of widgets displays the description of the widget from the Dashboard Downloads website (Figure 19-2). Most RSS feed widgets display a listing of articles in the feed and then send you off to read the article when you click the article title. More Widgets displays the information about the widget so you can decide whether you want to download it before you leave Dashboard.

Figure 19-2

276

More Widgets

After you have read the information about the widget, you can click the Back button to return to the listing of widgets. If you want to download the widget, you can click the More Info button. Dashboard is closed and Safari launches and takes you to the widget’s page at Dashboard Downloads.

More Widgets allows you to browse the Dashboard Downloads site without loading a browser. The widget uses the same categories as the site, and the menu at the top of the widget allows you to switch between them (Figure 19-3).

Figure 19-3

The search text box at the top of More Widgets (Figure 19-4) closes the widget and takes you to the search page at Dashboard Downloads with your search term already applied. The search box also returns the most recent searches you’ve conducted.

When you click the info button at the bottom of the widget (Figure 19-5), you see the back side of the widget with the credits and Donate and Done buttons. (Notice the Dashboard icon just visible behind the background in the upper-left corner.)

277

Chapter 19

Figure 19-4

Figure 19-5

More Widgets Internals

When you show the contents of More Widgets, you see the usual set of widget files (Figure 19-6). Because this widget is resizable, the separate images are used to build the widget and give you more control over the interface. The Default.png file is what Dashboard uses to display the widget background when you first add the widget to Dashboard. After that, the Default.png isn’t referenced again.

278

More Widgets

Figure 19-6

Info.plist

The properties list has the AllowNetworkAccess key set so the widget can retrieve the RSS feed from Apple’s website. The BackwardsCompatibleClassLookup is also set so the widget can be used on earlier versions of Tiger.

<dict>

<key>AllowNetworkAccess</key>

<true/>

<key>BackwardsCompatibleClassLookup</key>

<true/>

<key>CFBundleDisplayName</key> <string>More Widgets</string> <key>CFBundleIdentifier</key>

<string>com.edot-studios.widget.morewidgets</string> <key>CFBundleName</key>

<string>More Widgets</string> <key>CFBundleVersion</key> <string>1.2</string> <key>CloseBoxInsetX</key> <integer>13</integer> <key>CloseBoxInsetY</key> <integer>13</integer> <key>MainHTML</key> <string>MW.html</string>

</dict>

</plist>

279

Chapter 19

HTML/CSS

You can see the Apple Classes inside of the widget bundle referenced at the top of the file to provide backward compatibility on older versions of Tiger.

<html>

<head>

<title>More Widgets</title> <style type=”text/css”>

@import “MW.css”; </style>

<script type=”text/javascript” src=”MW.js” charset=’utf-8’/> <script type=’text/javascript’ src=’AppleClasses/AppleScrollArea.js’

charset=’utf-8’/>

<script type=’text/javascript’ src=’AppleClasses/AppleScrollbar.js’ charset=’utf-8’/>

<script type=’text/javascript’ src=’AppleClasses/AppleAnimator.js’ charset=’utf-8’/>

<script type=’text/javascript’ src=’AppleClasses/AppleButton.js’ charset=’utf-8’/>

<script type=’text/javascript’ src=’AppleClasses/AppleInfoButton.js’ charset=’utf-8’ />

<script type=’text/javascript’ src=’Stretcher.js’ charset=’utf-8’ /> </head>

<body onload=”init();”>

<!-- Front Panel -->

In the Front <div>, you can see that the widget saves your last ten search terms. You can also see the values listed for categories on Apple’s site. The changeCategory() JavaScript function in MW.js changes the feed based on the selection you make from this pop-up menu. Below that, the gotoDashboardSite() function is attached to the onmousedown event and is called whenever you click the Dashboard icon on the widget.

<div id=”front”> <div id=”top”>

<div id=”top_left”> </div>

<div id=”top_middle”> </div>

<div id=”top_right”> </div>

<input id=’search’ type=”search” placeholder=”Search widgets...” results=”10” autosave=”searches” onsearch=”searchWidget(this)” />

<img class=”categoryPopupImage” src=”Images/gear.png” /> <select onChange=”changeCategory(this.selectedIndex)”

id=”categoryPopup”>

<option value=”home”>Recent</option> <option value=”top50”>Top 50</option> <option value=””>------</option>

280