Nucleocide : Tutorials

So, like any good programmer / web designer, I was sitting in class hacking away at the latest project. This project can now be seen at the lower right hand corner of the site. What it is is an image generator based on numerical GET input.

The following tutorial will explain everything that is going on. A download of the source and even the photoshop PSD files used for the images will be available for download here. I spent about an hour on this and would like to share it with the community.

The download will include two versions, one only allowing numbers and the other allowing numbers and some letters. There will also be two color sets, one bright green containing numbers and letters, the other being blue and just containing numbers (the one used on this site and in the example is numerical only with the color blue).

The .htaccess file will allow the numbers to be entered in using the scheme: /digits/##.png and /digits/##/##.png. This is the contents of the .htaccess file (only works on apache servers):

RewriteEngine On
RewriteRule ^([0-9\-]+).png$ index.php?code=$1
RewriteRule ^([0-9\-]+)$ index.php?code=$1
RewriteRule ^([0-9]+)/([0-9\-]+).png$ index.php?size=$1&code=$2
RewriteRule ^([0-9]+)/([0-9\-]+)$ index.php?size=$1&code=$2

Line one enables the engine. Line two enables /##.png (the number to be displayed). Line three enables /## (leaving off the .png part). Line four enables /##/##.png (The first number indicates the minimum length of the number, and then the number to be displayed). Line 5 does the same thing minus the .png again.

This is the contents of index.php, which is the script that does the work. If you aren't planning on using the .htaccess, or if .htaccess is disabled for your account you'll want to load the script with index.php?code=##&size=##, where size is optional for the minimum number length and code is the number you want displayed:

# LCD generator
# Copyright 2006 Thomas Hunter of nucleocide.net
# Usage: index.php?size=$1&code=$2
# Released under the GNU GPL. Please leave this notice intact

header("Content-type: image/png"); #tells browser this is an image
$DIGIT_HEIGHT = 17;    #width of a digit character .gif image
$DIGIT_WIDTH = 10;    #height of a digit character .gif image

$code = nukeHex($_GET['code']);    #cleans and get's the code
$size = nukeNum($_GET['size']); #cleans and get's the size
$chars = strlen($code);            #calculates the number of digits

if ($size > $chars) {            #pad with blanks
    $gap = $size - $chars;
    $str = '';
    for ($j=0; $j<$gap; $j++) {
        $str .= 'x';
    }
    $code = $str . $code;
    $chars = $size;
}

$width = $DIGIT_WIDTH * $chars;    #overall = one image * total
$height = $DIGIT_HEIGHT;        #height is just the height of one digit

$image=ImageCreateTrueColor($width,$height);    #allocate our image

for ($i=0; $i<$chars; $i++) {
    if ($code[$i] == '-') 
        $src=imagecreatefromgif('minus.gif');
    else
        $src=imagecreatefromgif($code[$i].'.gif');
    $x_pos = $DIGIT_WIDTH * $i;
    imagecopy($image,$src,$x_pos,0,0,0,$DIGIT_WIDTH,$DIGIT_HEIGHT);
}

imagepng($image);
echo 'nucleocide.net'; #please leave this intact

function nukeHex($value) { return ereg_replace("[^0-9\-]", "x", $value); }
function nukeNum($value) { return ereg_replace("[^0-9]", "", $value); }

There you go. nukeHex() and nukeNum() are two function of mine that make sure the data passed through them are proper characters. In the version allowing more letters nukeHex() allows for more letters, but in this version it only allows for numbers and minus.

Examples:

http://nucleocide.net/digits/5/117.png

http://nucleocide.net/digits/117.png

Please enjoy! Feel free to tear the program apart as much as you want but if someone asks where you got it from please tell them :). If you find any bugs or would like to contribute any image sets please email me and I'll incorporate the changes.