Added to Tutorials on 29/6/09.

Make a "Grab Up" screenshot script that posts live and gives a Bit.ly link.

This script was originally written by a friend of mine to run on Linux. I had found the new GrabUp service that allows you to upload screen shots from your Mac to a server for other people to see. He would not hear of a shiny GUI solution, so he scripted a screen shot program to run on Linux. I knew GrabUp would eventually resort to displaying ads, which I don't care for. So I studied his script and converted it to run on a Mac. Using Quick Silver to trigger the script is extra nice because all I have to do is press "Command + Shift + 5" to take the shot, load it to the server and have the address inside my clipboard for pasting into emails and IM.

Comfort level: Intermediate

You don't have to be a whiz kid to pull this off, but you will need some basic comfort on the command line and with the SSH and SCP protocols.

We will be using:

• A Mac, but these techniques can easily be modified to run on Linux. ( and uh, . . .I guess Windows)
• QuickSilver
• scp (sescure copy protocol) and ssh (secure shell protocol)
• Your own hosting server with shell access

STEP ONE:

First we need to build a script. Open your favorite text editor and enter the following code. Save the file as something like "screen_shot_me.sh" or something descriptive like that.

The parts that say "your_user","your_ip" and "your_url" will be your own unique user-name, ip-address and web site address. You may also find that your paths are slightly different.

#!/bin/bash
NOW=`date +%Y-%m-%d_%Hh-%Mm-%Ss`
mkdir -p /tmp/screenshots
/usr/sbin/screencapture -i /tmp/screenshots/$NOW.png
scp /tmp/screenshots/$NOW.png your_user@your_ip:~/public_html/screenshots/
BITLY=`curl http://bit.ly/?url=http://www.your_domain_name.com/~user/screenshots/$NOW.png | grep shortUrl | awk '{print $2}' | sed 's/[",]//g'`
echo -n $BITLY | pbcopy
open $BITLY

So what is going on?

1. The variable "NOW" is set with the current time stamp from the computer. This is a unique name for the image file we are about to create.
2. We make a temporary directory for the image to stay in before we upload it.
3. We call the built in "screencapture" utility from OS X. It's the same thing that happens when you do "Command + Shift + 4". The "i" switch is for "interactive" which lets you draw a marquee.
4. Secure copy is used to copy the file to the web server.
5. The final web address is sent to the Bitly API as a query string. The results of this are grepped into awk and sed which do a great job of filtering out extra variables from the Bitly API.
6. The new tiny URL from Bitly is copied into the clipboard so it can be pasted into email or IM.
7. At the same time, the image opens in your browser to see how it looks

Notes on scp and ssh: These are great tools that some people are highly familiar with and others are clueless. There are a lot of great tutorials. You can Google for "scp" and "ssh" along with "tutorial" or "how to". I learned a great deal from this tutorial over at Slicehost. Here is another tutorial.

Update (2/20/09): Thanks to Steve for pointing out that you need to have public key encryption set up on your server for this to work smoothly. Otherwise, you will be prompted for a password each time. Once you copy your public key from your local machine to your server, you can ssh into the server without a password. The article above from SliceHost shows you how to get that set up on Linux. Here is another article with similar information. You can also Google for "Public Key Authentication" for more hints and tips for your particular system.

STEP TWO:

Well fine. Now we have a script. Make sure it's executable. Use the terminal to go to the directory and type "ls -la" along with your file name. If you don't see permissions that start "-rwx", you can type "chmod 755" along with your file name to change it to be executable.

Hint: If you can't find your script in the terminal then type "cd " (cd and a space) and then drag your script folder icon from the Finder to the terminal prompt. Then press enter. By dragging the folder over, you gave the terminal the correct path to "change directory" to.

[ Arcadia ][ scripts ] ls -la screen_shot_me.sh
-r-xr--r--@ 1 lance  lance  327 Aug 14 12:12 screen_shot_me.sh
[ Arcadia ][ scripts ] chmod 755 screen_shot_me.sh
[ Arcadia ][ scripts ] ls -la screen_shot_me.sh
-rwxr-xr-x@ 1 lance  lance  327 Aug 14 12:12 screen_shot_me.sh
[ Arcadia ][ scripts ]

Now to run the script, you can just use "./screen_shot_me.sh" at the command line. Great. That's all fine and good. But I want to be able to use "Command + Shift + 5" like I use "Command + Shift 4" to create local screen shots. Here's where QuickSilver comes in handy.

Open the QuickSilver Preferences and you should find a tab for "Triggers". You may need to enable advanced features or Google for "QuickSilver Triggers" for more information. On the Triggers pane, use the "+" icon on the bottom of the screen to create a new trigger. In the first field you will type the name of the script to allow QS to find it. If that doesn't work, then try the name of the folder the script is in and then use QS to navigate to the file. The action should be "Run", which usually comes up automatically. Save the Trigger.

With the new trigger still selected in the Trigger pain, click the "i" icon on the bottom right to extend the information panel. Click "Edit" in the "Hot Key" pane and then use the keyboard shortcut that you want to record. I like to use "Command + Shift + 5" because it's similar to the built in shortcuts for OS X. You can also adjust the scope tab to allow the script to run in all Applications or just one application like Finder. I like my script to be available system wide.

That should be it. Now you should be able to press the keyboard shortcut and immediately see a drawing tool to draw a marquee on your screen. Seconds later, you will have a web address to paste into an email or Instant Message. You will also see your default browser open the image for you to view.

I'm sure for many people, GrabUp will work just fine. But if you hate ads and have the DIY spirit, then this should be a fun project for you.

But I have Linux!

I had an interested party ask about running this type of script in Linux. You can accomplish most of the same things. There are some different tools that you use:

#! /bin/bash
NOW=`date +%Y-%m-%d_%Hh-%Mm-%Ss`
mkdir -p /tmp/screenshots
scrot -s /tmp/screenshots/$NOW.png
scp /tmp/screenshots/$NOW.png your_user@your_ip:~/public_html/screenshots/
BITLY=`curl http://bit.ly/?url=http://www.your_domain_name.com/~user/screenshots/$NOW.png | grep shortUrl | awk '{print $2}' | sed 's/[",]//g'`
firefox $BITLY

The big difference is that you are using the "Scrot" utility. Scrot takes the capture with the '-s' switch so that you can crop the image. I was trying to use gThumb at one point. Thanks to one of my readers for pointing out the Scrot -s switch.

As far as launching the script, check out this article at Life Hacker that shows you how to assign keyboard shortcuts to scripts.

I haven't tested this linux part yet, but it should work. I have to get my VM up. Once I do, I'll report back.

Won't you do me a favor and check out my friend Remi's blog. His brilliant mind has been responsible for several of the elements of this tutorial. If you are a Ruby freak, you will especially enjoy his screen-casts.

---------------------
Thanks to Tom Constant for catching an earlier mistake in the code. Where the file is named with a time stamp, the 'Hh' should have been named with a percent symbol like '%Hh'. It will work either way, but with the hour stamp, it makes it easier to go back and find images by time.