Since I had this problem with my digitalized movie collection and I wanted to browse them casually, while at parties and with friends on my Macbook Pro, or simply at home on a dull afternoon, I figured something out to make everything a lot more appealing. Dive on in.

You need very little tools, and a bit of effort for this improvement in your movie-browsing user experience. First of all, get img2icns - it’s a neat freeware, open-source app that will turn images you drag onto its icon into an ICNS file, a folder icon (which is what we want) or something else, which isn’t needed in this how-to. Get it here.

Now that you have the right tools, it’s time to get cracking. List your movies, and find DVD cover artwork or posters (whatever strikes your fancy - I prefer posters) for them. Drag them onto img2icns’ icon (make sure ‘folder icon’ is checked) and the icons will pop up on your desktop by default. You can copy-paste these icons over as you would any other icon. After some clicking, here’s my result;

And that’s all there’s to it to beautify your collection. Try it in Cover Flow - img2icns supports icons up to 512×512 pixels, so using large images will result in some very nice images!

For this how-to, you need;

- an Apple Airport wireless base station.

- Airport Utility

- OS X 10.4 or higher (yes, Leopard is fine)

- your Mac’s installation discs if you don’t have the Developer tools installed yet.

Ready? Let’s go!

Step One: First of all, authenticate with your wireless network and open your Airport Utility. You should see something like this;

Note the name of the base station here; we will need it later. As you can see in the source list on the left, mine’s “Prokyon”. Click “Manual Setup”, and once the settings have been loaded, select “Advanced” from the toolbar.

This is the selection of tabs you will find under “Advanced”. The first tab, “Logging & SNMP”, is the tab we need. Check ‘allow SNMP’ (it doesn’t have to be over WAN, as this will allow you to monitor statistics over the internet, exposing a possible security hole). That’s it for Airport Utility for now. Save the settings and quit the utility.

Step Two: Now we’re going to set up MRTG. You can get an easy-to-use binary from here; follow the basic instructions, namely;

Open a terminal,

cd (directory containing )mrtg-2.9.4-mosx.tgz

su

enter your root password

tar xzf mrtg-2.9.4-mosx.tgz

cd mrtg-2.9.4-mosx

./install.sh

exit

If all goes well, you now have ‘mrtg’ installed. Test it by typing ‘mr’ at the command line followed by pressing the ‘tab’ key. It should, given you don’t have other utilities installed beginning with ‘mr’, autocomplete to ‘mrtg’.

Step Three: Now, before we start setting up MRTG to use the SNMP services of your router, let’s test if it actually works. Open a terminal, and enter;

snmpwalk -v 2c -c public -M /usr/share/snmp/mibs:$HOME/share/mibs -m+AIRPORT-BASESTATION-3-MIB (Base station name).local 1.3.6.1.4.1.63.501

All on one line. In this case, replace ‘-c public’ with either the community string you set in the Airport Utility (’-c thestringyouentered’) - if you left this blank in the Airport Utility, it either defaults to ‘public’ or your base station password. Try both; it will either time out or spit out a huge amount of information. Also replace ‘Base station name’ with your base station name, as I told you to note in the first step. Mine would be ‘Prokyon.local’. Done filling the blanks? Press enter, and let it roll.

If it times out, check if SNMP is enabled or restart your Airport (also remember to check if the community string you set with the -c flag is either ‘public’ or your password). If it gives an error about missing something, download the Airport MIB from Apple and copy it to “/usr/share/snmp/mibs” (you can ‘Go to folder’ with CMD+Shift+G in Finder to reach this directory), then try again.

You should get a whole lot of output in your terminal. Working? Great, let’s go to the next step.

Step Four: Along with MRTG, we installed a utility called ‘cfgmaker’, that will generate MRTG configuration files for us. In the terminal, we will have to generate such a configuration. Don’t sweat, it’s very painless.

cfgmaker public@192.168.2.5 > ~/mrtg.cfg

Ensure that ‘public’ is your community string. As described in the last step, this is most likely either your base station password (-not- the network password) or just ‘public’. 192.168.2.5 is my router’s IP address in this case; you should check what yours is, either by doing a ‘port scan’ with the Network Utility on your Mac, or by checking with your network preferences in System Preferences. It’s possibly also listed in the trusty Airport Utility. Fill in your IP address (ensure the community string and the IP address are separated by just a ‘@’) and let it do its job. The file ‘mrtg.cfg’ has been generated in your home directory.

Step Five: Now we can let MRTG do it’s first run. For sharing on the local network, I placed my MRTG web-pages and graphs in “~/Sites/MRTG/” - note that ‘~’ stands for /Users/myname/ here - as it is also very convenient. If you want to go on the safe side and do the same thing, make the directory in advance; MRTG -will not- do this for you.

Edit the newly generated mrtg.cfg with an editor like TextMate or nano (in the terminal). For the least hassle, I will describe using nano in your terminal to add the final changes to let MRTG know where to put its files.

nano ~/mrtg.cfg

Is what you need to type into your terminal. You’ll see something a bit like this;

Move your cursor to the line “# FOR UNIX” and delete the single leading hash mark (#) in the line beneath it. Enter the path of where you want to store the files here, as you can see, I chose /Users/superuser/Sites/mrtg/, as my account’s short name is ’superuser’. To save the changes, press CTRL+X, and “Y”.

Step Six: Now we will run the MRTG application. Since on Leopard, MRTG complained that I used a Unicode environment, I set the shell’s environment variable ‘LANG’ to ‘C’ before using it. The whole command to run MRTG then looks like this;

env LANG=C mrtg ~/mrtg.cfg

This is provided you followed my instructions and your .cfg file is located in ~/ (your user directory). If all goes well, MRTG should just do its thing and return your control over the prompt after a second or a few. If it outputs errors, check the steps to see if you didn’t do something a bit different. You can now check your directory (~/Sites/mrtg/ for me) to see your first graphs.

This is my MRTG output directory, and as you can see, it generated files with (your router IP address).html as a name, with a number appended to indicate the interface. Several interfaces exist on the Airport Extreme; the most interesting ones are the WAN and ATH0 interfaces, respectively your internet connection port and the wireless interface. The graphs for these, provided you run MRTG periodically, show the data throughput graphed over time. Now, since it is a bit tiresome to run MRTG all day in your terminal, we need something to do that -for- us.

Step Seven: Fortunately, there’s an excellent tool for adding such a ‘daemon’ function to our system. Running Leopard, mind that there is an extra step here, which I will let Tiger users do as well for certainty. Download ‘Lingon’, Peter Borg’s excellent GUI for launchd, OS X’s initialisation system and more. Once the download has completed, run it, and open a terminal.

In the terminal, we’re going to make a shell script with the single line of instructions that loads up MRTG. Let’s use nano for convenience again, so enter;
nano mrtg.sh
and enter the command you used to run MRTG ( env LANG=C mrtg ~/mrtg.cfg in my case), but add the complete paths this time. My command would look like this;

env LANG=C /opt/local/bin/mrtg Users/superuser/mrtg.cfg

Exit and save again with Ctrl + X. Remember to make sure the paths are accurate and the command works (test run it in your terminal to see if you get any errors). Place the shell-script somewhere out of your user directory, like /Users/Shared/, and switch to Lingon.

In Lingon, press ‘New’ and make an appropriate choice; you can use these settings as an example;

At the bottom, you can see I let it run every three minutes. You can make it run as often as you want. Save settings, and depending on your choice of Agent, reboot or log out to make the changes happen.

Congratulations! If all went well, you should have an auto-updating set of graphs now. You can choose to do two things now; check these graphs occasionally, or present them on your desktop using GeekTool like I did. Geektool’s website is down right now, so download it from last post and install it to your System Preferences by double-clicking the preference pane in the disk image.

Last Step: Once it’s installed, System Preferences opens and shows you the preference pane. Make sure you have just System Preferences shown so you can see your entire desktop (most importantly, the top left). Add an item to the left list; and set something like this;

The blue rectangle is the active overlay that will contain the image you choose. You can set a refresh interval (I use 10 seconds because it’s the default), resize the image, and place it wherever you like. Although GeekTool is old (well, it hasn’t seen a lot of updates), it’s well coded in that it won’t vanish when you use Exposé or even Spaces.

My result can be seen here; if there’s demand for it, I will upload the PSD of my little ‘comm station’ overlay so you can use it with whatever wallpaper you desire. Perhaps I will write a second part with how to put this into a widget form, and tracking the amount of users on your wireless network and graphing other miscellaneous statistics. Enjoyed this how-to? Comments / blog reactions / email is welcome!

digg it!

Open Terminal.app and enter;

defaults write com.apple.dock no-glass -boolean YES; killall Dock

Before and after images at the source. Thanks Michel!

Here’s an example of toolbar buttons in Tiger:

In Leopard, however, this style has been abandoned, in favor for a more dark, unified and bezeled look;

Whichever one you like better doesn’t matter, but we’re going to make a Leopard button now. You can adorn your Finder with it later on, or do whatever you want. It’s a good idea, however, to start thinking what kind of a button you want to make. Let’s say we want to make a whole new button that, when pressed, opens iCal.

What this means is that you’ll want to find an appropriate glyph. iCal is an easy example; we already have a convention for an ‘iCal’ or calendar glyph in OS X. No, really, check it out;

As you may observe, these buttons resemble Leopard’s quite a bit. They also have that nice bezel. Let’s make a screenshot (take this one, if you want to follow along) or make a new glyph if there is no convention. “But wait, Sebastiaan!”, I hear you say, “why remake a button that’s already there?”

Well, here’s good design lesson number one; imitate to learn. You want to learn how to make buttons like this? A good idea is making an attempt to remake it. Lesson two: Design for the future. Be thoughtful in your designs. Before you kick up your favorite image editor, think what you want to make, but also how long you want to use it. Are there future requirements for the graphic you are making? For normal work, you might consider making things at a high resolution so you can print beautifully, but in this case, Leopard needs some high-res resources for buttons.

And you can even set your working size to be infinite. Yeah. That’s right, you can make your resources as big as you want them if you make them from scratch. With Photoshop? Yup.

Follow along. If at some point you stop getting it, just keep reading and at the end there’s a nice PSD to try it all out for yourself. Let’s start with our calendar glyph screengrab. It’s not too big…

Let’s make it a bit bigger. Select “percent” from the image size dialog.

Then proceed to resize to to 400% it’s original size. Select “Nearest Neighbor” from the resample dropdown.

Okay, now that you’ve got it in the size it should be minimally for Leopard in bitmap, you can start making a vector out of it. Use the Pen Tool in Photoshop to trace its lines. Be sure to select Shape when making it and sample its color.

After a bit of working the lines and tweaking the edges to be exactly 90 degrees, this is the result. Your mileage may vary, depending on your Pen Tool skills, but just keep tweaking with the white and black arrow tools to tweak the shapes. There are plenty of Pen Tool tutorials out there.

If we were to overlay this to it’s original background now, it looks like this;

That’s not too funky; it doesn’t really work this way because it looks like a graphic slapped on a gradient. It’s just too flat, you know? Let’s add a bezel. Although this ‘pixeled’ icon contains only sharp edges, you can apply the same method for round shapes, in vector, to make bezels that actually work (instead of working at the small size with 1 pixel ‘outer bevel’ layer effects, that really get messy).

As you can see, you can, without resorting to layer styles, make a white form behind your existing vector shapes. At this level, you can see it’s a white form. At our classic size, however…

As for the background of the button, some people insist on fussy practices of sampling colors. In this case, take a 1 pixel wide selection to rapidly ‘prototype’ the button background without having to create a whole gradient;

Take this selection, copy it to a separate layer and scale it about 20 times wider. Once you are happy with your glyph, you can take the shape of the button, make a vector and apply the proper gradient on it.

As you can see from the PSD, you can export this as a ‘regular’ size (as the button was before, thus, 25% of our current image) and as 4x to comply with the Resolution Independent guidelines laid down in the now public session at WWDC ‘06. You can also, as the buttons we see here are easy to make in the new Interface Builder under Leopard, export them as PDF’s. Be sure to fit the path in an ‘image’ of appropriate pixels, though, or your shape might be placed quite oddly in the NSButton.

Now that you know the basics of putting together these kind of buttons, go make an alternative set to Safari’s! Or perhaps some new toolbar buttons for Mail? Preview? Let’s see what you can come up with in some spare time!

If you enjoyed this tutorial, you can take some time to comment, share with delicious, or digg it. Kind words over email are also appreciated ;).