splitbrain/README

## README
A set of shellscripts and and some HTML/JavaScript to create an 16x16 icon browser.

The icons need to be placed in folders named <setname>/ico/

The URLs to each set can be found in <setname>/ico/url

mkcontactsheet.sh
    creates the single image montage and the image map. Run it for each set,
    after you put the icons into the correct folders
mkindex.sh
    creates the index for the search function. Run it after the above script was
    used on all sets

## index.css

body {
    color: #333;
    background-color: #fff;
    font-family: sans-serif;
    font-size: 14px;
}

a {
    color: #00a;
    text-decoration: none;
}

img {
    border: none;
}

p {
    clear: left;
    width: 500px;
}

#flattr {
    float: left;
    margin-right: 10px;
}

#sets {
    width: 300px;
    float: left;
}

#search {
    display: none;
    float: left;
    width: 400px;
}

#srch {
    width: 200px;
}

fieldset {
    border: solid 1px #333;
}

#colors {
    margin-top: 50px;
    clear: both;
    border-top: 1px solid #ccc;
}

#colors div {
    width: 20px;
    height: 20px;
    float: left;
    border: 1px solid #ccc;
    margin: 2px;
}

## index.html
<html>
<head>
    <title>16x16 Icons</title>

    <link rel="stylesheet" type="text/css" href="index.css" />

    <script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script language="JavaScript" type="text/javascript" src="index.js"></script>

    <script language="JavaScript" type="text/javascript">
        function search(e){
            // get search string
            var srch = $('#srch').val().trim();
            if(!srch) return;

            // split into words and make regexps
            var q = srch.split(/\s+/);
            for(var i=0; i<q.length; i++){
                q[i] = new RegExp(q[i],'i');
            }

            // grep array
            var result = $.grep(ICONS,function(n,i){
                for(var i=0; i<q.length; i++){
                    if(!n.match(q[i])) return false;
                }
                return true;
            });

            // show results
            $('#srchresult').html('');
            for(var i=0; i<result.length; i++){
                var set = result[i].split('|');
                var html = '<li>'+
                           '<a href="'+set[0]+'/ico/'+set[1]+'.png">'+
                           '<img src="'+set[0]+'/ico/'+set[1]+'.png" /> '+set[1]+
                           '</a>'+
                           ' (<a href="'+set[0]+'">'+set[0]+'</a>)'+
                           '</li>';
                $('#srchresult').append(html);

                if(i == 50) break;
            }

            // no form submit
            e.preventDefault();
            return false;
        }

        $(document).ready(function(){
            $('#search').css('display','block');
            $('#search').submit(search);


            $('#colors div').click(function(e){
                $('#search').css('background-color',$(e.target).css('background-color'));
            });
        });
    </script>

</head>
<body>
    <h1>16x16 Icon Sets</h1>


    <p>
        <div id="flattr">
        <script type="text/javascript">
        var flattr_uid = '8551';
        var flattr_tle = '16x16 Icon Browser';
        var flattr_dsc = 'Browse and search several popular 16x16 icon sets.';
        var flattr_cat = 'software';
        var flattr_lng = 'en_GB';
        var flattr_tag = 'icon, icons, iconset, silk, fugue, splashy, farmfresh';
        </script>
        <script src="http://api.flattr.com/button/load.js" type="text/javascript"></script>
        </div>

        This page let's you easily preview several popular 16x16 icon sets at once.
        You can also search through all the sets based on the icon's filenames
    </p>


    <ul id="sets">
        <li><a href="circular/">Circular</a></li>
        <li><a href="defaulticon/">DefaultIcon</a></li>
        <li><a href="farmfresh/">Farmfresh</a></li>
        <li><a href="fugue/">Fugue</a></li>
        <li><a href="icojoy_1a/">Icojoy 1a</a></li>
        <li><a href="icojoy_1b/">Icojoy 1b</a></li>
        <li><a href="ledicons/">LED Icons</a></li>
        <li><a href="semlabs/">SEM Labs</a></li>
        <li><a href="silk0/">Silk</a></li>
        <li><a href="silk1/">Silk Companionset 1</a></li>
        <li><a href="silk2/">Silk Companionset 2</a></li>
        <li><a href="socialmedia/">Social Media</a></li>
        <li><a href="splashy/">Splashy</a></li>
        <li><a href="sweetie/">Sweetie</a></li>
        <li><a href="vaga/">Vaga</a></li>
    </ul>

    <form id="search">
        <fieldset>
        <legend>Search by filename and iconset (max. 50 results)</legend>
        <input type="text" id="srch" name="srch" />
        <input type="submit" value="Search" />
        <ul id="srchresult">

        </ul>


        <div id="colors" title="change backgound-color">
            <div style="background-color: #fff">&nbsp;</div>
            <div style="background-color: #ccc">&nbsp;</div>
            <div style="background-color: #000">&nbsp;</div>
            <div style="background-color: #f00">&nbsp;</div>
            <div style="background-color: #0f0">&nbsp;</div>
            <div style="background-color: #00f">&nbsp;</div>
            <div style="background-color: #ff0">&nbsp;</div>
            <div style="background-color: #0ff">&nbsp;</div>
            <div style="background-color: #f0f">&nbsp;</div>
        </div>

        </fieldset>
    </form>


    <p>A <a href="http://www.splitbrain.org">splitbrain.org</a> service</p>

</body>
</html>

## mkcontactsheet.sh
#!/bin/sh

DIR=$1

if [ -z "$DIR" ]; then
    echo "Usage: $0 <dir>"
    exit
fi

DIR=`basename $DIR`

if [ ! -d "$DIR" ]; then
    echo "no such dir. run in base directory!"
    exit
fi


if [ ! -d "$DIR/ico" ]; then
    echo "no $DIR/ico directory!"
    exit
fi

echo "creating contact sheet"

montage -label %t -tile 8x -geometry 140x16+1+1 -frame 1 -pointsize 10 $DIR/ico/*.png -quality 80 jpg:- >$DIR/contact.jpg

echo "creating index"

URL=`cat $DIR/url`

echo "<html>"                                                                >$DIR/index.html
echo "<head>"                                                               >>$DIR/index.html
echo "<title>$DIR 16x16 Icons</title>"                                      >>$DIR/index.html
echo '<link rel="stylesheet" type="text/css" href="../index.css" />'        >>$DIR/index.html
echo "<head>"                                                               >>$DIR/index.html
echo "<body>"                                                               >>$DIR/index.html
echo '<a href="..">&larr; back</a>'                                         >>$DIR/index.html
echo "<h1>$DIR 16x16 Icons</h1>"                                            >>$DIR/index.html
echo "<p><a href=\"$URL\">$URL</a></p>"                                     >>$DIR/index.html
echo "<img src=\"contact.jpg\" border=\"1\" usemap=\"#icons\">"             >>$DIR/index.html
echo "<map name=\"icons\">"                                                 >>$DIR/index.html


CEL=0
ROW=0
for FILE in $DIR/ico/*.png
do
    F=`basename $FILE`

    X=$(( ($CEL * 144) + 1 ))
    Y=$(( ($ROW * 37) +1 ))
    W=$(( (($CEL + 1) * 144) - 1  ))
    H=$(( (($ROW + 1) * 37) -1 ))

    echo "<area shape=\"rect\" coords=\"$X,$Y,$W,$H\" title=\"$F\" href=\"ico/$F\" />" >> $DIR/index.html


    CEL=$(($CEL +1))
    if [ $CEL -eq 8 ]; then
        CEL=0
        ROW=$(( $ROW + 1))
    fi
done

echo "</body>" >>$DIR/index.html
echo "</html>" >>$DIR/index.html


## mkindex.sh
#!/bin/sh

echo 'var ICONS = [' > index.js

for X in */ico/*.png; do

    X=`echo $X |sed -e 's/\/ico\//|/'`
    X=`basename $X .png`

    echo "'$X'," >> index.js
done

echo '];' >> index.js

## url
http://prothemedesign.com/circular-icons/

## url
http://www.defaulticon.com/

## url
http://www.fatcow.com/free-icons/

## url
http://p.yusukekamiyamane.com/

## url
http://www.icojoy.com/articles/19/

## url
http://www.icojoy.com/articles/19/

## url
http://led24.de/iconset/

## url
http://semlabs.co.uk/journal/free-web-design-icon-set

## url
http://www.famfamfam.com/lab/icons/silk/

## url
http://damieng.com/creative/icons/silk-companion-1-icons

## url
http://www.cagintranet.com/archive/download-famfamfam-silk-companion-2-icon-pack/

## url
http://www.komodomedia.com/blog/2008/12/social-media-mini-iconpack/

## url
http://splashyfish.com/icons/

## url
http://sublink.ca/icons/

## url
http://www.tenbytwenty.com/vaga.php
	A set of shellscripts and and some HTML/JavaScript to create an 16x16 icon browser.

	The icons need to be placed in folders named <setname>/ico/

	The URLs to each set can be found in <setname>/ico/url

	mkcontactsheet.sh
	creates the single image montage and the image map. Run it for each set,
	after you put the icons into the correct folders
	mkindex.sh
	creates the index for the search function. Run it after the above script was
	used on all sets

	body {
	color: #333;
	background-color: #fff;
	font-family: sans-serif;
	font-size: 14px;
	}

	a {
	color: #00a;
	text-decoration: none;
	}

	img {
	border: none;
	}

	p {
	clear: left;
	width: 500px;
	}

	#flattr {
	float: left;
	margin-right: 10px;
	}

	#sets {
	width: 300px;
	float: left;
	}

	#search {
	display: none;
	float: left;
	width: 400px;
	}

	#srch {
	width: 200px;
	}

	fieldset {
	border: solid 1px #333;
	}

	#colors {
	margin-top: 50px;
	clear: both;
	border-top: 1px solid #ccc;
	}

	#colors div {
	width: 20px;
	height: 20px;
	float: left;
	border: 1px solid #ccc;
	margin: 2px;
	}
	<html>
	<head>
	<title>16x16 Icons</title>

	<link rel="stylesheet" type="text/css" href="index.css" />

	<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script language="JavaScript" type="text/javascript" src="index.js"></script>

	<script language="JavaScript" type="text/javascript">
	function search(e){
	// get search string
	var srch = $('#srch').val().trim();
	if(!srch) return;

	// split into words and make regexps
	var q = srch.split(/\s+/);
	for(var i=0; i<q.length; i++){
	q[i] = new RegExp(q[i],'i');
	}

	// grep array
	var result = $.grep(ICONS,function(n,i){
	for(var i=0; i<q.length; i++){
	if(!n.match(q[i])) return false;
	}
	return true;
	});

	// show results
	$('#srchresult').html('');
	for(var i=0; i<result.length; i++){
	var set = result[i].split('\|');
	var html = '<li>'+
	'<a href="'+set[0]+'/ico/'+set[1]+'.png">'+
	'<img src="'+set[0]+'/ico/'+set[1]+'.png" /> '+set[1]+
	'</a>'+
	' (<a href="'+set[0]+'">'+set[0]+'</a>)'+
	'</li>';
	$('#srchresult').append(html);

	if(i == 50) break;
	}

	// no form submit
	e.preventDefault();
	return false;
	}

	$(document).ready(function(){
	$('#search').css('display','block');
	$('#search').submit(search);


	$('#colors div').click(function(e){
	$('#search').css('background-color',$(e.target).css('background-color'));
	});
	});
	</script>

	</head>
	<body>
	<h1>16x16 Icon Sets</h1>


	<p>
	<div id="flattr">
	<script type="text/javascript">
	var flattr_uid = '8551';
	var flattr_tle = '16x16 Icon Browser';
	var flattr_dsc = 'Browse and search several popular 16x16 icon sets.';
	var flattr_cat = 'software';
	var flattr_lng = 'en_GB';
	var flattr_tag = 'icon, icons, iconset, silk, fugue, splashy, farmfresh';
	</script>
	<script src="http://api.flattr.com/button/load.js" type="text/javascript"></script>
	</div>

	This page let's you easily preview several popular 16x16 icon sets at once.
	You can also search through all the sets based on the icon's filenames
	</p>


	<ul id="sets">
	<li><a href="circular/">Circular</a></li>
	<li><a href="defaulticon/">DefaultIcon</a></li>
	<li><a href="farmfresh/">Farmfresh</a></li>
	<li><a href="fugue/">Fugue</a></li>
	<li><a href="icojoy_1a/">Icojoy 1a</a></li>
	<li><a href="icojoy_1b/">Icojoy 1b</a></li>
	<li><a href="ledicons/">LED Icons</a></li>
	<li><a href="semlabs/">SEM Labs</a></li>
	<li><a href="silk0/">Silk</a></li>
	<li><a href="silk1/">Silk Companionset 1</a></li>
	<li><a href="silk2/">Silk Companionset 2</a></li>
	<li><a href="socialmedia/">Social Media</a></li>
	<li><a href="splashy/">Splashy</a></li>
	<li><a href="sweetie/">Sweetie</a></li>
	<li><a href="vaga/">Vaga</a></li>
	</ul>

	<form id="search">
	<fieldset>
	<legend>Search by filename and iconset (max. 50 results)</legend>
	<input type="text" id="srch" name="srch" />
	<input type="submit" value="Search" />
	<ul id="srchresult">

	</ul>



	<div id="colors" title="change backgound-color">
	<div style="background-color: #fff"> </div>
	<div style="background-color: #ccc"> </div>
	<div style="background-color: #000"> </div>
	<div style="background-color: #f00"> </div>
	<div style="background-color: #0f0"> </div>
	<div style="background-color: #00f"> </div>
	<div style="background-color: #ff0"> </div>
	<div style="background-color: #0ff"> </div>
	<div style="background-color: #f0f"> </div>
	</div>

	</fieldset>
	</form>




	<p>A <a href="http://www.splitbrain.org">splitbrain.org</a> service</p>

	</body>
	</html>
	#!/bin/sh

	DIR=$1

	if [ -z "$DIR" ]; then
	echo "Usage: $0 <dir>"
	exit
	fi

	DIR=`basename $DIR`

	if [ ! -d "$DIR" ]; then
	echo "no such dir. run in base directory!"
	exit
	fi


	if [ ! -d "$DIR/ico" ]; then
	echo "no $DIR/ico directory!"
	exit
	fi

	echo "creating contact sheet"

	montage -label %t -tile 8x -geometry 140x16+1+1 -frame 1 -pointsize 10 $DIR/ico/*.png -quality 80 jpg:- >$DIR/contact.jpg

	echo "creating index"

	URL=`cat $DIR/url`

	echo "<html>" >$DIR/index.html
	echo "<head>" >>$DIR/index.html
	echo "<title>$DIR 16x16 Icons</title>" >>$DIR/index.html
	echo '<link rel="stylesheet" type="text/css" href="../index.css" />' >>$DIR/index.html
	echo "<head>" >>$DIR/index.html
	echo "<body>" >>$DIR/index.html
	echo '<a href="..">← back</a>' >>$DIR/index.html
	echo "<h1>$DIR 16x16 Icons</h1>" >>$DIR/index.html
	echo "<p><a href=\"$URL\">$URL</a></p>" >>$DIR/index.html
	echo "<img src=\"contact.jpg\" border=\"1\" usemap=\"#icons\">" >>$DIR/index.html
	echo "<map name=\"icons\">" >>$DIR/index.html


	CEL=0
	ROW=0
	for FILE in $DIR/ico/*.png
	do
	F=`basename $FILE`

	X=$(( ($CEL * 144) + 1 ))
	Y=$(( ($ROW * 37) +1 ))
	W=$(( (($CEL + 1) * 144) - 1 ))
	H=$(( (($ROW + 1) * 37) -1 ))

	echo "<area shape=\"rect\" coords=\"$X,$Y,$W,$H\" title=\"$F\" href=\"ico/$F\" />" >> $DIR/index.html


	CEL=$(($CEL +1))
	if [ $CEL -eq 8 ]; then
	CEL=0
	ROW=$(( $ROW + 1))
	fi
	done

	echo "</body>" >>$DIR/index.html
	echo "</html>" >>$DIR/index.html
	#!/bin/sh

	echo 'var ICONS = [' > index.js

	for X in /ico/.png; do

	X=`echo $X \|sed -e 's/\/ico\//\|/'`
	X=`basename $X .png`

	echo "'$X'," >> index.js
	done

	echo '];' >> index.js