John Hobbs on coding, Omaha, and life in general

Thursday Quote: Mike Solomon

John Hobbs — Thu, 24 May 2012 15:00:48 +0000

“Linux is good in terms of manholes, there’s always a way to get in and see how your system is behaving.”

Thursday Quote: Robert C. Gallagher

John Hobbs — Thu, 17 May 2012 15:00:20 +0000

“Change is inevitable — except from a vending machine.” - Robert C. Gallagher Related posts: Thursday Quote: Elbert Hubbard Thursday Quote: Pamela Slim Thursday Quote: Randy Pausch Related posts:

Thursday Quote: Joshua Bloch

John Hobbs — Thu, 10 May 2012 15:00:04 +0000

“Basically I’ve become harder on myself over the years — that’s what it takes to write good programs. You really can’t accept bad habits from yourself.”

- Joshua Bloch
<Coders at Work: Reflections on the Craft of Programming

Thursday Quote: Albert Einstein

John Hobbs — Thu, 03 May 2012 15:00:43 +0000

“Anyone who doesn’t take truth seriously in small matters cannot be trusted in large ones either.” - Albert Einstein Related posts: Thursday Quote: Dhanji R. Prasanna Thursday Quote: Paul Graham Thursday Quote: John Casasanta Related posts:

Thursday Quote: Kent Beck

John Hobbs — Thu, 26 Apr 2012 15:00:13 +0000

“All methodologies are based on fear. - Kent Beck Related posts: Thursday Quote: Rollo May Thursday Quote: Harold Ableson Thursday Quote: Scott Belsky Related posts:

Thursday Quote: Dana Contreras

John Hobbs — Thu, 19 Apr 2012 15:00:41 +0000

“Look, all I’m saying is that 9.9999% is “five nines” too.”

- Dana Contreras

Reading Code: Drew Gourley’s Countdown Script

John Hobbs — Tue, 17 Apr 2012 13:30:50 +0000

A core step of growing as a programmer is reading code. I claim to be a fan of reading other peoples code, but I never seem to do it. Yesterday the excellent @DrewGourley tweeted about some code he deployed on the (gorgeous) new MahaMusicFestival.com.

The code behind the coundown timer on the new @mahafestival website is custom from the ground up and is absolutely gorgeous. Just saying…
— Gunnar Gourley (@DrewGourley) April 16, 2012

Since I enjoy Drew’s work (the Oxide site has lots of really neat stuff), but I’ve never really read any of it, I thought I’d give some code reading a whirl. As a little experiment I’ve decided to transcribe my thoughts through the entire reading process; I’m typing it as I read.

This may turn out scattered, but it will show how I read code, and hopefully poke a little hole of insight into Drew’s code.

Note: The code on Maha has since changed, and probably will in the future. For reference I’ve saved off a copy of the code I read, so you can follow along if you’d like. Please recognize that this is not my work, it’s all Drew and the Oxide crews’ – maha.js.

Also, I went back and cleaned up some grammar and spelling errors, but for the most part this is verbatim what I wrote as I was reading.

The Code

So the product I’m going to poke around in is the countdown timer on MahaMusicFestival.com – going there to check it out I find this cool piece.

And, the slick part is this great number animation, which I have captured for posterity here.

Your browser does not support the video tag.

So let’s find the source for it. Popping open view-source I quickly find a script tag for http://mahamusicfestival.com/wp-content/themes/maha2012/js/maha.js in the header. Since every other script tag there is for something generic (jQuery, Modernizr, etc) I’m guessing this is it. Also it looks like the site is based on WordPress – it’s amazing how flexible themes can be.

Clicking over to that source I see it’s a collection of JavaScript bits for the site, wrapped in a jQuery ready event.

1	jQuery(document).ready(function($) {

That’s a nice, and very correct way of using jQuery for page load. I’m usually lazy and just do this:

1	$(function(){

I should probably up my game a bit there, huh? Just in case another library has taken over $ onload of my scripts.

Scrolling down I see some relevant functions that are all prefixed with Oxide, like OxideSlider.

19	function OxideSlider(id) {

My first thought here was “namespace pollution!”, but then I realized that this is all encapsulated in that ready closure, so it’s good to go.

Lot’s of stuff I could look at here, but I’m on a mission: coundown code. Browsing down I find my target. Lines 87-208 seem to be what I’m after. I’ll deal with this in chunks now.

Declarations

First thing up is the variable declarations. Nice and orderly.

    var $dayspan = $('#days span'),
        $hourspan = $('#hours span'),
        $minutespan = $('#minutes span'),
        $secondspan = $('#seconds span'),
        d, h, m, s, go = 0,
        di = 0;

I see a few things here. First, I like the notation of $dayspan – prefixing variables with $ is a good way to visually identify jQuery objects, sort of a Hungarian Notation for jQuery.

Second, I’m a bit skittish of d, h, m, s, go and di. I can instictively identify what the first four are (day, hour, minute, second) but the last two elude me. I’m sure this will become clear as I read on, but since it feels weird to me I guess that means I like my variable names a bit more descriptive. Learning about myself through others!

Core Function

Up next appears to be the core function of which this all revolves around, OxideCountdown. And it’s a doosie, so I’m going to try and chunk it out in pieces.

First up are some variable assingments. Interestingly d, h, m, s are not integers, that’s what I was expecting. This function might hold some surprises for me!

94
95

    function OxideCountdown() {
        d = new Array(), h = new Array(), m = new Array(), s = new Array(), go = 0;

So, this next chunk seems to be pulling the current values out of the spans, one at a time.

        $dayspan.each(function(i, e) {
            n = parseFloat($(e).text());
            d.push(n);
            go = go + n;
        });
        $hourspan.each(function(i, e) {
            n = parseFloat($(e).text());
            h.push(n);
            go = go + n;
        });
        $minutespan.each(function(i, e) {
            n = parseFloat($(e).text());
            m.push(n);
            go = go + n;
        });
        $secondspan.each(function(i, e) {
            n = parseFloat($(e).text());
            s.push(n);
            go = go + n;
        });

Interesting use of parseFloat here, as I would have expected parseInt. Could this be related to the bugs in interpretation by parseInt?

So, it works it’s way through each time span, grabbing the value of the each digit in order and pushing it onto the corresponding array, so that each array would read out the same as the visual version, i.e. today d = [ 1, 1, 6 ];

Also, it’s interesting to see that go seems to be an accumulator, but I’ve not figured out what for yet. It’s just incrementing with all the values of all the digits, which doesn’t seem useful to me. i.e today go would equal 8 (1+1+6) after the $dayspan.each. My curiosity is piqued!

Okay, on to the next chunk!

Math!

So here’s the next block, I warn you it’s a bit hairy!

        di = d.length;
        s[1]--;
        if (s[1] < 0) {
            s[1] = 9;
            s[0] = s[0] - 1;
        }
        if (s[0] < 0) {
            s[0] = 5;
            m[1] = m[1] - 1;
        }
        if (m[1] < 0) {
            m[1] = 9;
            m[0] = m[0] - 1;
        }
        if (m[0] < 0) {
            m[0] = 5;
            h[1] = h[1] - 1;
        }
        if (h[1] < 0) {
            h[1] = 9;
            h[0] = h[0] - 1;
        }
        if (h[0] < 0) {
            h[0] = 5;
            d[di - 1] = d[di - 1] - 1;
        }

So I’m now seeing that di is how many digit’s will be displayed in the days area? I’m lost now, I was operating on the assumption that each section has a fixed number of elements in it. Let’s jump to the HTML real quick…

	
		
			47
			Seconds
		
		
			57
			Minutes
		
		
			17
			Hours
		
		
			116
			Days

So yeah, I suppose it’s possible that days might not have all those spans in it, but that seems true of all of the blocks if we are going down that route. Hopefully reading more will shed some light. But first, let’s double back and look at the math a piece at a time.

        s[1]--;

Looks like this will be called once a second, and will decrement the right-most seconds column by one second (the reverse indexes here could get confusing).

It seems that the rest of this section is just balancing the carry for that subtraction. Here’s the seconds code, but I stuck in comments where I heard them in my head. The pattern repeats up until we hit tens of hours.

        if (s[1] < 0) {
            // Underrun on seconds, take away one from tens of seconds!
            s[1] = 9;
            s[0] = s[0] - 1;
        }
        if (s[0] < 0) {
            // Underrun on tens of seconds, take away a minute!
            s[0] = 5;
            m[1] = m[1] - 1;
        }

Now that we have an underrun on tens of hours we have to tinker with days. So there is what di is for! Since the number of spans for days is (apparently) flexible, we are going to use the length of the days array to access the largest element. Makes you wish JavaScript was allowed negative indicies on arrays (d[-1]), but that would of course break [] object notation for the key “-1″, which as we all know is super useful ;-p

The loop that follows just does the same carry algorithm on all the days blocks.

        if (h[0] < 0) {
            h[0] = 5;
            d[di - 1] = d[di - 1] - 1;
        }
        while (di--) {
            if (d[di] < 0) {
                d[di] = 9;
                if (di > 0) {
                    d[di - 1] = d[di - 1] - 1;
                }
            }
        }

Bug?

At this point I noticed something I thought might be a bug. In the tens of hours decrement block I saw that h[0] is set to “5″. I’m not sure that is possible, since there are only 24 hours in the day, so it seems that at midnight a tick would mess up the count. I’m set up a quick test script for this, since I don’t want to stay awake until midnight watching :-)

// Preset the arrays in an expected failure condition
var d = [1,1,6],
    h = [0,0],
    m = [0,0],
    s = [0,0],
    di = 0;
 
// Code from http://mahamusicfestival.com/wp-content/themes/maha2012/js/maha.js?ver=3.3.1 ( 2012-04-16 18:44 Central)
di = d.length;
s[1]--;
if (s[1] < 0) {
  s[1] = 9;
  s[0] = s[0] - 1;
}
if (s[0] < 0) {
  s[0] = 5;
  m[1] = m[1] - 1;
}
if (m[1] < 0) {
  m[1] = 9;
  m[0] = m[0] - 1;
}
if (m[0] < 0) {
  m[0] = 5;
  h[1] = h[1] - 1;
}
if (h[1] < 0) {
  h[1] = 9;
  h[0] = h[0] - 1;
}
if (h[0] < 0) {
  h[0] = 5;
  d[di - 1] = d[di - 1] - 1;
}
 
console.log( "d:", d );
console.log( "h:", h );
console.log( "m:", m );
console.log( "s:", s );

After running it, I got bad output, sure enough.

$ node test.js
d: [ 1, 1, 5 ]
h: [ 5, 9 ]
m: [ 5, 9 ]
s: [ 5, 9 ]

Corrected code would be this, which actually reaches backwards into h[1] to fix it.

  if (h[0] < 0) {
    h[0] = 2;
    h[1] = 3;
    d[di - 1] = d[di - 1] - 1;
  }

Update: I shot Drew an email and he fixed it. He even gave me credit!

Moving On

Ah ha! Now I finally see what go is for!

150
151

        if (go == 0) {
            clearInterval(timer);

It’s an accumulator to know when to stop this whole thing! Evidently there is a timeout set on timer, which we haven’t seen yet.

When all the digits in the countdown are 0, the accumulator is also 0. Tricky!

I would usually implement it as a boolean, but I like it this way. It’s trickier, but it cleans up a lot of potential if statements. Neat!

Now we are back to animate in all the various numbers, if they need animating. Again we iterate over the digits in each span, and then apply a really cool custom animation on them if they have changed.

The animation takes advantage of hidden overflow in the CSS to animate the digit down and thus out of view, then moves it up above the visible area and animates in back down and into view again. It’s a great combination of CSS and jQuery for a nice effect.

Since the bulk of this is stuff we’ve seen, I’ll just let show the code (though I am curious what’s going on in that “Messy” comment, crazy chaining!

        } else {
            $dayspan.each(function(i, e) {
                if (parseFloat($(e).text()) !== d[i]) {
                    $(e).stop(true).animate({
                        'top': '200px'
                    }, 100, function() {
                        $(e).css({
                            'top': '-200px'
                        }).text(d[i]).animate({
                            'top': '0'
                        }, 100);
                    });
                }
            });
            //Messy: if ( $($dayspan[0]).text() == 0 ) { test1 = $($dayspan[0]).parent().parent().width(); $($dayspan[0]).fadeOut(function() { test2 = $(this).parent().parent().width(); $(this).parent().parent().css({width:test1+'px'}).animate({width:test2+'px'}); }); }
            $hourspan.each(function(i, e) {
                if (parseFloat($(e).text()) !== h[i]) {
                    $(e).stop(true).animate({
                        'top': '200px'
                    }, 100, function() {
                        $(e).css({
                            'top': '-200px'
                        }).text(h[i]).animate({
                            'top': '0'
                        }, 100);
                    });
                }
            });
            $minutespan.each(function(i, e) {
                if (parseFloat($(e).text()) !== m[i]) {
                    $(e).stop(true).animate({
                        'top': '200px'
                    }, 100, function() {
                        $(e).css({
                            'top': '-200px'
                        }).text(m[i]).animate({
                            'top': '0'
                        }, 100);
                    });
                }
            });
            $secondspan.each(function(i, e) {
                if (parseFloat($(e).text()) !== s[i]) {
                    $(e).stop(true).animate({
                        'top': '200px'
                    }, 100, function() {
                        $(e).css({
                            'top': '-200px'
                        }).text(s[i]).animate({
                            'top': '0'
                        }, 100);
                    });
                }
            });
        }
    }

Lastly we declare and kick off the timer for the count down. I would probably have moved this up, it’s a bit weird to see timer on line 151 before it’s declared. It’s a little thing, and just my preference.

208	var timer = setInterval(OxideCountdown, 1000);

Conclusions

So that was neat!

Since I found a bug Drew has fixed that and went back and tweaked the code a bit more. Most notably he pulled out and boiled down the countdown animation into this function.

    function OxideNumberDrop(elem, array, index) {
        $(elem).stop(true).animate({
            'top': '200px'
        }, 100, function() {
            $(elem).css({
                'top': '-200px'
            }).text(array[index]).animate({
                'top': '0'
            }, 100);
        });
    }

This is a really great effect, I can’t emphasize how cool it looks.

Reading another persons code exposed a few things about my own coding style that I wasn’t conscious of. What surprised me most is that I wasn’t bothered by any formatting issues. I’m rather opinionated on formatting, for instance I claim to despise cuddled else’s (no newline between a closing curly brace and an else), but Drew does that and I breezed right over them.

It was also interesting to see a totally different approach to this problem. I implemented a countdown in the middle of last year, but it was day only and not JavaScript. My natural approach would be handling time pieces as plain integers, so it was cool and kind of mind bending to see this approach of partitioning digits into arrays.

I think I will try to make a habit of this process, and I like the brain dump while reading, I think it helped it stick better to express it in writing while fresh in my mind.

Does anyone have any suggestions for what to read next? A favorite piece of code? Preferably something I can do in one sitting.

Thursday Quote: Zach Holman

John Hobbs — Thu, 12 Apr 2012 15:00:56 +0000

“Hours are bullshit. Worry about good work.”

- Zach Holman
How Github Works

CSS Seven-Segment Display Tutorial

John Hobbs — Thu, 12 Apr 2012 02:46:23 +0000

I had an idea for a little project today that needed a seven-segment display. As a first pass I’m going to implement it in all software before seeking out hardware for it.

Knowing I wanted to run my prototype in the browser I looked for a way to show a seven-segment display. I considered images, but then I decided to challenge myself to implement it in CSS only.

I recently read the CSS Hexagon Tutorial by James Tauber and I felt I could apply some of those techniques to get this working.

Step One: A Segment

The obvious first step is to get a single segment displayed.

The basic shape of a segment is actually well defined in all four edges of the box from the hexagon tutorial.

height: 100px;
width: 100px;
border-top: 30px solid #FF3636;
border-bottom: 30px solid #36FF36;
border-left: 30px solid #3636FF;
border-right: 30px solid #FFFF36;

So now I just needed to extract a single edge for my first segment, which proved quite simple.

height: 0;
width: 100px;
border-top: 30px solid #FF3636;
border-left: 30px solid transparent;
border-right: 30px solid transparent;

Step Two: Fill It Out

Iterating from that first segment is easy, just change which borders you need for which segment you require. However, I needed a positioning system. I decided to go with absolute positioning, with a relative wrapper. Traditionally these displays are addressed with each segment being a letter, so I followed that pattern.

The CSS for this is quite similar from segment to segment, it’s mostly positioning and picking which border to colorize.

.seven-segment {
  position: relative;
}
.seven-segment .a {
  position: absolute;
  left: 10px;
  height: 0;
  width: 100px;
  border-top: 30px solid #FF3636;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}
.seven-segment .b {
  position: absolute;
  left: 150px;
  top: 10px;
  height: 100px;
  width: 0;
  border-right: 30px solid #FF3636;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}
.seven-segment .c {
  position: absolute;
  left: 150px;
  top: 180px;
  height: 100px;
  width: 0;
  border-right: 30px solid #FF3636;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}
.seven-segment .d {
  position: absolute;
  top: 320px;
  left: 10px;
  height: 0;
  width: 100px;
  border-bottom: 30px solid #FF3636;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}
.seven-segment .e {
  position: absolute;
  left: 0;
  top: 180px;
  height: 100px;
  width: 0;
  border-left: 30px solid #FF3636;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}
.seven-segment .f {
  position: absolute;
  left: 0;
  top: 10px;
  height: 100px;
  width: 0;
  border-left: 30px solid #FF3636;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}

Step Three: G Segment

Here’s where it gets interesting. Our standard segment shape will not work for the center segment, the G segment, which is beveled on both sides, something we can’t do with a single div. First let’s split it up and treat it differently for top and bottom.

Now we’ll style these using our regular segment markup.

.g .bottom {
height: 0;
width: 100px;
border-top: 30px solid #FF3636;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
.g .top {
height: 0;
width: 100px;
border-bottom: 30px solid #FF3636;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}

It works, sort of. We now have the shape we want, but it’s way too thick. It won’t fit in the slot we have without looking strange.

Halving the borders and extending the width makes it look better.

This would be a good stopping point, but the angled edges don’t seem as long in G, so I tried to fix that.

.seven-segment .g {
  position: absolute;
  top: 160px;
  left: 10px;
}
.seven-segment .g .bottom {
  height: 0;
  width: 130px;
  border-top: 15px solid #FF3636;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}
.seven-segment .g .top {
  height: 0;
  width: 130px;
  border-bottom: 15px solid #FF3636;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

The best solution I came up with was dealing with it at a smaller size, then using a transform to scale it up to where I wanted it. It’s not exact, and it’s not the same width as the other segments, but the slopes are right, it fits and it feels as close to balanced as I’ve been able to get.

.seven-segment .g {
  position: absolute;
  top: 162px;
  left: 35px;
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -o-transform: scale(1.4);
  transform: scale(1.4);
}
.seven-segment .g .bottom {
  height: 0;
  width: 80px;
  border-top: 15px solid #FF3636;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}
.seven-segment .g .top {
  height: 0;
  width: 80px;
  border-bottom: 15px solid #FF3636;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

Conclusion

That was pretty painless! I wish I had a better solution for G, but this one is passable.

You can check out a nifty demo with some JavaScript and on/off states here.

Got some ideas for how to make G better? Please share in the comments!

ImageMagick Wallet Maker

John Hobbs — Tue, 10 Apr 2012 18:15:46 +0000

I’ve got an older script for making thumbnails and contact sheets from a folder of images.

Recently Phillip Vuchetich sent me a related script for taking images, scaling them to wallet sizes and composing them onto 4×6 sheets for easy printing from kiosks. It’s a neat application of the idea, and he said I could post his script, so here it is. It’s also part of my helper-scripts repo at Github.

Thanks Phillip!

Example 4×6 Wallet Sheet

#!/bin/bash
 
# Wallet Photo Script using ImageMagick
#
# Copyright (c) 2012 Phillip Vuchetich
#
# Permissions for the Wallet Photo Script are the same as the original script by John Hobbs.
#
# This script was created to take an entire directory of photos as input,
# rotate them to portrait layout, and create composite 2x2 sheets, suitable
# for printing wallet sized photos standard 4"x6" (US) photo paper.
# This was created to make it easy to send photos suitable for wallets or
# scrapbooking sized photos to retail photo printing locations.
# The use case is a manually pre-selected copy of images that are all placed
# in the input directory (the current directory).
# An output directory will be created if it does not exist.
 
# Original script from John Hobbs:
# Digital camera thumbnail/contact sheet tool.
# http://www.velvetcache.org/2009/03/30/imagemagick-thumbnails-and-contact-sheets
# http://github.com/jmhobbs/helper-scripts
#
# Copyright (c) 2009-2010 John Hobbs
#
# Permission is hereby granted, free of charge, to any person
# obtaining a copy of this software and associated documentation
# files (the "Software"), to deal in the Software without
# restriction, including without limitation the rights to use,
# copy, modify, merge, publish, distribute, sublicense, and/or sell
# copies of the Software, and to permit persons to whom the
# Software is furnished to do so, subject to the following
# conditions:
#
# The above copyright notice and this permission notice shall be
# included in all copies or substantial portions of the Software.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
# OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
# HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
# WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
# FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
# OTHER DEALINGS IN THE SOFTWARE.
 
# CHANGELOG
# 2012-04-10 - Small tweaks for error handling. (John Hobbs)
# 2012-04-07 - Created Wallet Photo Script using John Hobbs's original script. (Phillip Vuchetich)
# 2010-06-14 - Fixed contact sheet problem, thanks to Glenn Turnbull. (John Hobbs)
# 2009-03-30 - Created script. (John Hobbs)
 
### SETTINGS ###
# Scaling Methods:
# resize (Best/Slow)
# scale (Middle/Middle)
# sample (Worst/Fast)
METHOD="resize"
 
# Wallet image Size
# For Wallets intended for 4" x 6" output, should be a multiple of 4x6 to minimize cropping.
# Example: for 4x6, 300ppi use 600x900 (for each photo to be 2"x3").
# For 400 ppi use 800x1200
# Talk to your photo print shop to ask what resolution the printers use, so that their image
# software does not need to resize your image, as resizing will likely reduce quality a little.
# Expect to see some white space, depending on the original image dimensions.
# No cropping is performed.
CONTACTSIZE="600x900"
 
# Contact Sheet Max Width
CONTACTWIDTH="2"
 
# Contact Sheet Max Height
CONTACTHEIGHT="2"
 
# Horizontal Spacing
CONTACTSPACINGH="0"
 
# Vertical Spacing
CONTACTSPACINGV="0"
 
# Contact Sheet Directory
CONTACTDIR="wallet"
 
# Contact Sheet Quality
CONTACTQUALITY="100"
 
################
 
 
CONTACTCOUNT=$(($CONTACTWIDTH * $CONTACTHEIGHT))
 
# Allow .jpg and .JPG files - depending on how the file was stored.
PIX=$(ls -l *.jpg *.JPG 2> /dev/null | wc -l)
 
echo "Processing $PIX Images"
echo
echo "Creating Wallet Photo Sheets"
 
mkdir -p $CONTACTDIR
 
CTR=0
PAGES=$(($PIX / $CONTACTCOUNT))
if [ $(($PIX % $CONTACTCOUNT)) -ne 0 ]; then
   PAGES=$(($PAGES + 1))
fi
PAGE=1
LIST=""
 
# Allow .jpg and .JPG files - depending on how the file was stored.
for i in *.jpg *.JPG; do
   if [ $(($CTR % $CONTACTCOUNT)) -eq 0 ] && [ $CTR -ne 0 ]; then
       echo "$PAGE of $PAGES"
       montage -rotate "90>" -quality $CONTACTQUALITY -tile ${CONTACTWIDTH}x${CONTACTHEIGHT} -geometry ${CONTACTSIZE}+${CONTACTSPACINGH}+${CONTACTSPACINGV} $LIST jpg:- > ${CONTACTDIR}/${PAGE}.jpg
       LIST=""
       PAGE=$(($PAGE + 1))
   fi
   LIST="$LIST $i"
   CTR=$(($CTR + 1))
done
 
if [ "" != "$LIST" ]; then
   echo "$PAGE of $PAGES"
   montage -rotate "90>" -quality $CONTACTQUALITY -tile ${CONTACTWIDTH}x${CONTACTHEIGHT} -geometry ${CONTACTSIZE}+${CONTACTSPACINGH}+${CONTACTSPACINGV} $LIST jpg:- > ${CONTACTDIR}/${PAGE}.jpg
fi