catesandrew/buildSprite.sh

## buildSprite.sh
#!/bin/bash

# -- Generate html test page --
#
# uses imagemagick to stich together all images supplied and
# then writes a css file with the correct offsets along with a
# test html page for verification that its all good. the big
# difference between this script and the other is that you
# dictate which files are included in the sprite, and that you
# can add a 10px horizontal spacing between the images. i gave
# up using the geometry feature of montage and opted to use
# a blank 1x10 blank png instead to get the desired effect.
#
if [ $# -gt 0 ]
then
    PNG_BLANK="blank1x10.png"
    # create the string of files
    list_of_files="file1.png file2.png file3.png file4.png"
    # declare the array
    declare -a FILES

    FILES=(`echo ${list_of_files// / }`)

    ELEMENT_COUNT=${#FILES[@]}

    INDEX=$ELEMENT_COUNT

    while [ "$INDEX" -gt "-1" ]
    do    # List all the elements in the array.
      echo ${FILES[$INDEX]}
      #    ${FILES[INDEX]} also works because it's within ${ ... } brackets.
      let "J = ($INDEX + 1) * 2"
      ((J--))
      FILES[$J]="$PNG_BLANK"
      ((J--))
      FILES[$J]=${FILES[$INDEX]}

      let "INDEX = $INDEX - 1"
      # Or:
      #    ((INDEX--))
    done
    let "J = ($ELEMENT_COUNT + 1) * 2"
    ((J--))
    unset FILES[$J]

    if [ $3 ]
    then
        ext="."$3; # the extension to save the output file
    else
        ext=".png";
    fi

    name=$1; # output will be placed in a folder named this

    if [ $2 ]
    then
        classname=$2"-sprite";
    else
        classname="sprite";
    fi
    css="$name/$classname.css";
    html="$name/test.html";

    rm -fr $name;
    mkdir $name;
    touch $css $html;

    echo "Generating sprite file...";
    montage +frame +shadow +label -tile 1x -gravity West -background transparent -geometry +0+0 ${FILES[@]} $name/$classname$ext;
    echo "Sprite complete! - Creating css & test output...";

    echo -e "<html>\n<head>\n\t<link rel=\"stylesheet\" href=\"`basename $css`\" />\n</head>\n<body>\n\t<h1>Sprite test page</h1>\n" >> $html

    echo -e ".$classname {\n\tbackground:url('$classname$ext') no-repeat top left; display:inline-block;\n}" >> $css;
    counter=0;
    offset=0;
    for file in $list_of_files
    do
        width=`identify -format "%[fx:w]" "$file"`;
        height=`identify -format "%[fx:h]" "$file"`;
        idname=`basename "$file" $ext`;
        clean=${idname// /-}

        echo ".$classname#$clean {" >> $css;
        echo -e "\tbackground-position:0 -${offset}px;" >> $css;
        echo -e "\twidth: ${width}px;" >> $css;
        echo -e "\theight: ${height}px;\n}" >> $css;

        echo -e "<a href=\"#\" class=\"$classname\" id=\"$clean\"></a>\n" >> $html;

        let offset+=$height;
        let offset+=10;
        let counter+=1;
        echo -e "\t#$counter done";
    done

    echo -e "<h2>Full sprite:</h2>\n<img src=\"$classname$ext\" />" >> $html;
    echo -e "</body>\n</html>" >> $html;

    echo -e "\nComplete! - $counter sprites created, css written & test page output.";
else
    echo -e "There should be at least 1 argument!\n\tbuildSprite.sh output_folder classname output_extension"
fi
	#!/bin/bash

	# -- Generate html test page --
	#
	# uses imagemagick to stich together all images supplied and
	# then writes a css file with the correct offsets along with a
	# test html page for verification that its all good. the big
	# difference between this script and the other is that you
	# dictate which files are included in the sprite, and that you
	# can add a 10px horizontal spacing between the images. i gave
	# up using the geometry feature of montage and opted to use
	# a blank 1x10 blank png instead to get the desired effect.
	#
	if [ $# -gt 0 ]
	then
	PNG_BLANK="blank1x10.png"
	# create the string of files
	list_of_files="file1.png file2.png file3.png file4.png"
	# declare the array
	declare -a FILES

	FILES=(`echo ${list_of_files// / }`)

	ELEMENT_COUNT=${#FILES[@]}

	INDEX=$ELEMENT_COUNT

	while [ "$INDEX" -gt "-1" ]
	do # List all the elements in the array.
	echo ${FILES[$INDEX]}
	# ${FILES[INDEX]} also works because it's within ${ ... } brackets.
	let "J = ($INDEX + 1) * 2"
	((J--))
	FILES[$J]="$PNG_BLANK"
	((J--))
	FILES[$J]=${FILES[$INDEX]}

	let "INDEX = $INDEX - 1"
	# Or:
	# ((INDEX--))
	done
	let "J = ($ELEMENT_COUNT + 1) * 2"
	((J--))
	unset FILES[$J]

	if [ $3 ]
	then
	ext="."$3; # the extension to save the output file
	else
	ext=".png";
	fi

	name=$1; # output will be placed in a folder named this

	if [ $2 ]
	then
	classname=$2"-sprite";
	else
	classname="sprite";
	fi
	css="$name/$classname.css";
	html="$name/test.html";

	rm -fr $name;
	mkdir $name;
	touch $css $html;

	echo "Generating sprite file...";
	montage +frame +shadow +label -tile 1x -gravity West -background transparent -geometry +0+0 ${FILES[@]} $name/$classname$ext;
	echo "Sprite complete! - Creating css & test output...";

	echo -e "<html>\n<head>\n\t<link rel=\"stylesheet\" href=\"`basename $css`\" />\n</head>\n<body>\n\t<h1>Sprite test page</h1>\n" >> $html

	echo -e ".$classname {\n\tbackground:url('$classname$ext') no-repeat top left; display:inline-block;\n}" >> $css;
	counter=0;
	offset=0;
	for file in $list_of_files
	do
	width=`identify -format "%[fx:w]" "$file"`;
	height=`identify -format "%[fx:h]" "$file"`;
	idname=`basename "$file" $ext`;
	clean=${idname// /-}

	echo ".$classname#$clean {" >> $css;
	echo -e "\tbackground-position:0 -${offset}px;" >> $css;
	echo -e "\twidth: ${width}px;" >> $css;
	echo -e "\theight: ${height}px;\n}" >> $css;

	echo -e "<a href=\"#\" class=\"$classname\" id=\"$clean\"></a>\n" >> $html;

	let offset+=$height;
	let offset+=10;
	let counter+=1;
	echo -e "\t#$counter done";
	done

	echo -e "<h2>Full sprite:</h2>\n<img src=\"$classname$ext\" />" >> $html;
	echo -e "</body>\n</html>" >> $html;

	echo -e "\nComplete! - $counter sprites created, css written & test page output.";
	else
	echo -e "There should be at least 1 argument!\n\tbuildSprite.sh output_folder classname output_extension"
	fi