A Tool for Remapping Your Keyboard

I needed to rename hundreds of files individually, with underscores instead of spaces. I could have named all of my files using spaces, and used str_replace among other PHP tricks to change them to underscores. Instead I turned to the powers that be (read: Google) and discovered a handy tool, AutoHotkey. This tool allows you to do anything from re-mapping a key, to completely automating tasks via it’s native scripting language and macros.


Direct from the AutoHotkey website:

AutoHotkey is a free, open-source utility for Windows. With it, you can:

  • Automate almost anything by sending keystrokes and mouse clicks. You can write a mouse or keyboard macro by hand or use the macro recorder.
  • Create hotkeys for keyboard, joystick, and mouse. Virtually any key, button, or combination can become a hotkey.
  • Expand abbreviations as you type them. For example, typing “btw” can automatically produce “by the way”.
  • Create custom data-entry forms, user interfaces, and menu bars. See GUI for details.
  • Remap keys and buttons on your keyboard, joystick, and mouse.
  • Respond to signals from hand-held remote controls via the WinLIRC client script.
  • Run existing AutoIt v2 scripts and enhance them with new capabilities.
  • Convert any script into an EXE file that can be run on computers that don’t have AutoHotkey installed.

This thing already saved me two hours of shift clicking by allowing me to remap my underscore to the spacebar. Totally a five-star piece of software and my open source recommendation of the month.

Customizing Supersize JQuery

I was recently hired to create a slideshow for a customer’s display at trade shows. For me, the solution was simple… we kill the Batman. All joking aside, I knew exactly what I was going to do from the outset of this project.

The previous revision of this client’s presentation was a combination of circa 2008 hacks and flash. This combo together yielded a surprisingly well working slideshow with menus to select and sort shows. None of this content was dynamic in any way. With relatively short notice, there was no way I was to even salvage any part of the relic that was their past show.

I opted to use Supersized, an awesome jQuery plugin by Sam Dunn of One Mighty Roar.


The unfortunate thing about Supersized is it’s method of serving images. It’s engineered to be user friendly and be easy to use for even the most inexperienced code monkey. In the packages latest release, Sam has included some demos that can safely be used as starting points. This is exactly what I did, cutting what I can only imagine to be more than a week of work out of the project. This gives me more time to focus on the fine details and saves my customer money all the while – we both win.

When you download the supersized.x.x.x.zip file and open it up, you will see this:


Thank goodness for logical naming conventions, this folder is pretty self explanatory. Core holds the most stripped down version of the Supersized slider, while Flickr offers a slider that will pull content from a Flickr feed, and slideshow is the folder we’re after. As a side note: please take time to read and follow the directions as well as licence agreements included with any plugins or work that aren’t completely yours.

The Code – Default Behaviour

The first chunk of code we’re looking for can be found in demo.html

slides : [ // Slideshow Images
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}

This is where the average user would manually enter all of the file names, locations and properties for each slide. We’re going to modify this chunk of code to scan a directory for images, and then output the images into this list. To do that we will have to use PHP. If you don’t have a server to test and develop on (I don’t blame anyone), you have no excuse to not be using XAMPP. XAMPP will emulate a server environment (sort of) on your own local machine, allowing you to work with PHP and databases. I choose to use XAMPP for this project for several reasons.

  1. Connectivity at trade shows is an unknown factor. 
  2. Serving large high-resolution photos remotely is slow and gobbles bandwidth.
  3. By keeping files totally local, there is little to no need to account for security in PHP used.

The Code – Dynamic Behavior

Our PHP will look like this, explanation as we continue.

slides  :[<?php  	  
$directory = "/img/kitchens/";   	 
$directory_thumbs = "/img/kitchens/thumbs/";    	 
$images = glob($directory . "*.jpg");   	 
$images_thumb = glob($directory_thumbs . "*.jpg");  	 
$images_final = array_combine($images,$images_thumb);  	 
foreach($images_final as $image = $key) 		 
echo "{image : ' $image ', title : ' $image ' , thumb : '$key' },";	 		

Line 1 shows that we are opening a section of php code within our page – <?php to open, ?> to close.

Lines 2, and 3 we are establishing our variables. We set where we can find the images to be used in our slideshow, and where their thumbnail images are.

Line 4 runs a command that will scour our directory that we set, looking for all files (the asterisk *) with a ‘.jpg’ at the end. Whatever files are found, are then saved to an array as the variable $images. Line 5 runs the same command for the thumbs folder.

Line 6 is where the magic starts to happen, both arrays – one for whole images, the second for the thumbnails – are combined into one array. It’s important to note that the number of files in both folders (arrays) need to be identical, otherwise the arrays cannot be combined.

Line 7 begins a foreach loop that goes through the array and for every item, gets the combined contents in order and echos them as lines that mimic our starting JavaScript.

There you have it, dynamically loading content for your slideshow.

Polishing and Future Posts

One note to make is that the naming of each file will simply be the file name as it is on your server. You can correct this with PHP’s trim and str_replace.

slides  :
$directory = "/img/kitchens/";    	
$directory_thumbs = "/img/kitchens/thumbs/";    	
$images = glob($directory . "*.jpg");   	
$images_thumb = glob($directory_thumbs . "*.jpg");  	
$images_final = array_combine($images,$images_thumb);  	
foreach($images_final as $image = $key) 		
$name= $image;
$name-chop= trim($name, $directory);
$name-chop= trim($name-chop, ".jpg");
$name-chop= str_replace('_',' ', $name-chop);

echo "{image : ' $image ', title : ' $name-chop ' , thumb : '$key' },";
} 	?>]

These new lines must go inside of the for each loop so that the variable is refreshed with every pass of the array. Trim does exactly what it sounds like, trims what you give it. In this case it’s removing the directory path from the name of the file, and then the .jpg at the end of the name. Str_replace is capable of replacing a string of characters with another string (or nothing at all). In our case, I’m converting the underscores in file names to spaces. With these changes, the file “images/A_burning_page.jpg” will now be titled “A burning page.”

This article will be referenced in the near future when I get into explaining generating a full gallery/list of slideshows based on folders of images. Follow my RSS and comment for further help.