One of the largest issues with the TDGi.iconMgr class was the fact that it used individual icons instead of one large file. I still argue that a single huge file is too much for a browser to download on the internet. This argument, however, does not work well for intranet applications, where speed doesn’t matter. So, I decided to start working on a montage.
I found this task to be extremly simple with the use of the wonderful image automation tool, ImageMagick with some clever shell scripting:
montage -adjoin -tile 1x1462 \ -geometry 16x16+0+0 -quality 90 -background -none `ls *png | sort` ../collage.png
Next was the task to create the JSON required to display the montage. Again, using simple BASH scripting:
X=0
for i in `ls | grep png | sort`; do
name=`echo $i | awk -F. '{print $1}'`
print "{n:'$name',f:'$i',y:$X},"
X=`echo $X+16 | bc`
done
I edited the file manually to include the JS array tags “[]” and deleted the trailing comma. Lastly, we needed to create the JavaScript to parse this stuff. Here are the sprites in gif (IE6) and png (Fx and IE7+) formats!
Once complete, we have our new iconMgr using the new sprite:
test drive (click the button): http://tdg-i.com/js/examples/ext/tdgiux/TDGi.iconMgr.new/
Known issues:
Filters can be slow – yes I’m aware and will be looking to see if i can optimize it.
To do:
Enable sprites for iconMgr
No comments.