splitbrain · June 10, 2010 18:38
diff --git a/README b/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
diff --git a/index.css b/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;
 }
diff --git a/index.html b/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>
diff --git a/mkcontactsheet.sh b/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

diff --git a/mkindex.sh b/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
diff --git a/url b/url
 http://prothemedesign.com/circular-icons/
diff --git a/url b/url
 http://www.defaulticon.com/
diff --git a/url b/url
 http://www.fatcow.com/free-icons/
diff --git a/url b/url
 http://p.yusukekamiyamane.com/
diff --git a/url b/url
 http://www.icojoy.com/articles/19/
diff --git a/url b/url
 http://www.icojoy.com/articles/19/
diff --git a/url b/url
 http://led24.de/iconset/
diff --git a/url b/url
 http://semlabs.co.uk/journal/free-web-design-icon-set
diff --git a/url b/url
 http://www.famfamfam.com/lab/icons/silk/
diff --git a/url b/url
 http://damieng.com/creative/icons/silk-companion-1-icons
diff --git a/url b/url
 http://www.cagintranet.com/archive/download-famfamfam-silk-companion-2-icon-pack/
diff --git a/url b/url
 http://www.komodomedia.com/blog/2008/12/social-media-mini-iconpack/
diff --git a/url b/url
 http://splashyfish.com/icons/
diff --git a/url b/url
 http://sublink.ca/icons/
diff --git a/url b/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