[Sogo7]

Hi folks, here's a sneak preview of something I'm working on and
hope to have the code tidied up and presentable as a tutorial before xmas.

Dynamic Animated Images
For those that want to add a bit more 'wow' factor to their signature tags.
I've done this demo one as a homage to the Bio-Chips of the 'Rogue Trooper'
comic strip but if you have any suggestions for designs leave a message.




Here is a little work in progress for somebody

[Sogo7]

Signature tags are a common sight across the the Internet created by forum users as a means of expressing their individuality, allegiances or just a shameless plug for a website they are building.

For a long time they came in only two basic types, still images (jpg,gif,png,bmp) and animated gif images. Depending on your skill with a graphics package these could be created in a few minutes for simple examples, animated ones naturally taking a bit longer because you have to create each frame of the sequence.

Then came along the GD-Library, this allowed the webserver to create or ammend images, add text, merge and generally mess around before sending them to the visitor and so was born the dynamic signature tag.

Very often you will find owners of such tags changing the image depending upon factors such as time of day, visitors IP and even the owners Yahoo status to name but a few. Cool and geeky but there is a catch because the GD-Library was never made to handle animated gif's so you cannot have the best of both with dynamic content AND eye catching animation together...

Well that's what most people will tell you, but don't believe everything you read online.

Animated gif images are of course just ordinary gif images joined together like a roll of film and as we allready know that the GD-Library can create ordinary gif images so it is just a matter of using the GD Library to create the individual frames then a special script to string them all together and create the animated gif file.

Thankfully all the hard work required to stitch the still gif images together into an animation has allready been done by László Zsidi and a similiar script exists for the newer animated png format that is not limited to just 256 colours like gifs are.

How it's done Part1
As we are building a dynamic tag then we have to go fetch some information. For this example I'm using visitors IP and the owners Yahoo messenger status as these are pretty simple to obtain. However if you are familiar with cURL then there are a lot more posabilities.

fetch.php

PHP Code:

<?php
////////////////////////////// USER IP ADDRESS

if ( isset($_SERVER["REMOTE_ADDR"]) )    {
    $users_ip = $_SERVER["REMOTE_ADDR"];
} else if ( isset($_SERVER["HTTP_X_FORWARDED_FOR"]) )    {
    $users_ip =  $_SERVER["HTTP_X_FORWARDED_FOR"];
} else if ( isset($_SERVER["HTTP_CLIENT_IP"]) )    {
   $users_ip = $_SERVER["HTTP_CLIENT_IP"];
} 
////////////////////////////// USER AGENT STRING

$user_agent = $_SERVER['HTTP_USER_AGENT'];

////////////////////////////// REFERRER URL

if (isset($_SERVER['HTTP_REFERER'])) // check if referrer is set
{
    $referrer =  $_SERVER['HTTP_REFERER']; // echo referrer
}
else
{
     $referrer = 'No referrer set'; // echo failure message
}
//////////////////////////////
// The above code is optional and will retirive the IP address and User_Agent string of the visitor viewing the tag
// not really useful but it is sometimes nice to see how many people have seen your signature tag. So it is up to you
// to add in your own data logging script if required.

////////////////////////////// 




////////////////////////////// YAHOO MESSENGER STATUS
$id='your yahoo ID';
$url='http://opi.yahoo.com/online?u='.$id.'&m=a&t=1';
$op= file_get_contents($url);
if ($op== '01'){
$comm_check='ONLINE';
// reset db counter
}
else  {
$comm_check='OFFLINE';
// su
}
////////////////////////////////////

$url ='combo_tag.php?comms='.$comm_check; // pass yahoo status to GD library script  
 header('Location: '.$url);
?>

Once you have that lovely fresh information it gets passed to a script using GD library to create the individual frames of the animation. This has proved to be a little quirky and what works fine on a local test server may be have hiccups on a live web server and there are notes in the code about this.

[Sogo7]

How it's done part2

The code below adds in text and merges the still background image with stills from the animated sequence into a single gif image. There are 34 of them in this demo and they are all saved to a holding folder prior to assembly by the enoder script.

cobo_tag.php

PHP Code:

<?php
//// GET variables from fetch.php
$comms = $_GET["comms"];
$text2 = $_GET["name"];
$rank = $_GET["rank"];

/////// FIXED SETUP OPTIONS
//$comms='Offline';
$text2='ROGUE';
$rank='Trooper ID';




$frames = array ('001','002','003','004','005','006','007','008','009','010','011','012','013','014','015','016','017','018','019','020','021','022','023','024','025','026','027','028','029','030','031','032','033','034');

//////////////// UGLY HACK to compensate for ani.php misbehaving on live web servers
///////////////// you may need to ammend this if animation is not playing frames in correct order
$order = array ('026','002','010','006','003','034','013','027','024','032','033','025','014','031','028','030','022','008','018','001','004','029','020','012','023','015','009','019','007','016','021','017','005','011');
$or = 0;
//////////////////////


foreach ($frames as $frame) {

$pulse= "pulse/".$frame.".gif";
$temp= "base/base1.gif";
$temps     = imagecreatefromgif($temp);
$pulses     = imagecreatefromgif($pulse);


/// setup colours
$red = imagecolorallocate($temps, 0xFF, 0x00, 0x00);
$grey = imagecolorallocate($temps, 128, 128, 128);
$white = imagecolorallocate($temps, 255, 255, 255);
$blue = imagecolorallocate($temps, 141, 170, 214);

// Path to our ttf font file
$font_file = 'fonts/gun4f.ttf';
$font_file2 = 'fonts/arial.ttf';


// Draw the text  using font size 14, 0 rotation, 190 pixels from left edge, 25 pixels from top edge
imagefttext($temps, 10, 0, 190, 25, $blue, $font_file2, $rank);

imagefttext($temps, 12, 0, 190, 40, $blue, $font_file, $text2);
// font size / rotation /  pad left  / pad top



$time_tweek = (microtime()*(100^10)*100000);/// ugly math hack 

imagefttext($temps, 10, 0, 190, 57, $blue, $font_file2, 'Comms '.$time_tweek);
imagefttext($temps, 12, 0, 190, 72, $blue, $font_file,$comms);

//////////////////////////////////////// CHANGES STATUS using time variable
//////////////////////////////////////// every ten seconds
$t=time();
$stat_time=(date("D M d y",$t));
//$h = intval(date("H",$t));
$h = intval(date("s",$t));
$clk= (date("H i s",$t));
if ($h>=1 && $h <=9) $status    ='asleep';
if ($h>=10 && $h <=20) $status  ='Briefing';
if ($h>=20 && $h <=30) $status  ='Training';
if ($h>=30 && $h <=40) $status  ='day ops';
if ($h>=40 && $h <=50) $status  ='ChowTime';
if ($h>=50 && $h <=60) $status  ='coffee';
///////////////////////////////////////////////////

imagefttext($temps, 10, 0, 190, 90, $blue, $font_file2, 'Status '.$stat_time); // adds snapshots of millisecond counter
imagefttext($temps, 12, 0, 190, 105, $blue, $font_file, $status);
imagefttext($temps, 8, 0, 190, 118, $blue, $font_file2, 'Updated '.$clk);// human readable clock


// upper grid blocks
// Draw a white rectangle        +13    +13
imagefilledrectangle($temps, 63, 13, 72, 22, $grey);
imagefilledrectangle($temps, 63, 25, 72, 35, $grey);
imagefilledrectangle($temps, 63, 38, 72, 48, $grey);
imagefilledrectangle($temps, 63, 51, 72, 61, $grey);



// Copy+merge 
imagecopymerge($temps,$pulses,  10, 13, 000, 00, 50, 50,100);

// OPTIONAL EXTRA
// get qr code
// https://chart.googleapis.com/chart?chs=120x120&cht=qr&chl= your own text or URL

$skulls= "base/chart.gif";
$skull     = imagecreatefromgif($skulls);
imagecopymerge($temps,$skull,  10, 72, 000, 00, 50, 50,100);

// Output image to the browser or save to file
// Save the image as 

 
imagegif($temps, 'temp/'.$order[$or].'.gif');  /// /// use this option or the one below - saves still image to folder

//imagepng($im);                                ///  using both together will crash script - direct output to browser

$or++;// increment assembly order of images to create smooth animation


// Free up memory
imagedestroy($temps);
imagedestroy($pulses);
}
//////////////////////////////////////////////////////////////////

/// call animation script
$url ='ani.php';
 header('Location: '.$url);
?>

Now comes putting it alltogether with help from the GIFEncoder class written by László Zsidi.

[Sogo7]

How it's done part 3
This fetches all the static images from the holding folder and stiches them together into a single animated gif image. The GIFEncoder.class.php file is available freely around the web and included in the demo zip file.

ani.php

PHP Code:

<?php

include "GIFEncoder.class.php";
/*
    Build a frames array from sources...
    NB!!! this does not behave correctly on a live web server
    and sends image files in the WRONG order to the combo-script
    see combo_tag.php ( $order = array )
    
*/
if ( $dh = opendir ( "temp/" ) ) {
    while ( false !== ( $dat = readdir ( $dh ) ) ) {
        if ( $dat != "." && $dat != ".." ) {
            $frames [ ] = "temp/$dat";
        
            $framed [ ] = 5;
        }
    }
    closedir ( $dh );
}
//    print_r ($frames);  /// DEBUG WRITE ORDER 
/*
        GIFEncoder constructor:
        =======================

        image_stream = new GIFEncoder    (
                            URL or Binary data    'Sources'
                            int                    'Delay times'  millseconds
                            int                    'Animation loops' 0=infinite
                            int                    'Disposal' ????
                            int                    'Transparent red, green, blue colors'
                            int                    'Source type'
                        );
*/
$gif = new GIFEncoder    (
                            $frames,
                            $framed,
                            0,
                            2,
                            255, 255,255,
                            "url"
        );
/*
        Possibles outputs:
        ==================

        Output as GIF for browsers :
            - Header ( 'Content-type:image/gif' );
        Output as GIF for browsers with filename:
            - Header ( 'Content-disposition:Attachment;filename=myanimation.gif');
        Output as file to store into a specified file:
            - 
*/
//fwrite ( fopen ( "sig1.gif", "wb" ), $gif->GetAnimation ( ) ); //// save finished animated gif to file
Header ( 'Content-type:image/gif' );  /// output animated gif to web browser direct
echo    $gif->GetAnimation ( );
?>

[Sogo7]

Demo files for the classic Rogue Trooper biochip 1.8Mb and includes the encoder class plus the png file for the background image along with the font files.

NOTE:
Not all forums allow you to use a php file extension in the [img] tag BB code so you may need to add some lines to your sites .htaccess file. This rewrite and redirect rule will allow the fetch.php file to look like it is an image.

Options +FollowSymLinks
RewriteBase /
RewriteEngine On
RewriteRule ^(bio-tags)/(.+?)\.gif$ /bio-tags/fetch.php

Now any request for a gif image from the folder 'bio-tags' will be sent to the file 'fetch.php'.

[Sogo7]

Going Advanced

All the above code is fine for a single webmaster showing off, but there is more that can be done!

Because a script can read the URL being used to call it, thus information can be passed to the signature tag scripts. Remember that the htaccess script is already redirecting everything with a gif extension so lets revist the fetch.php file.

PHP Code:

<?php
function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}


echo curPageURL()."</br>";


$patterns = array();
$patterns[0] = '/http(.+?)tags\//';
$patterns[1] = '/\.gif/';

$patterns[2] = '/script/';

$replacements = array();
$replacements[0] = '';
$replacements[1] = '';

$replacements[2] = '';

$data = preg_replace($patterns, $replacements, curPageURL());

$pieces = explode("-", $data);



//echo $data;// has to be full url because use of sub domain data throws relative url
///////////////////////////////////////////////////////////////// CLAN               NAME                  
$url =' -yoursite- /bio-tags/demo/combo_tag.php?id='.$pieces[0].'&name='.$pieces[1].'&status='.$pieces[2];
//echo $url;
 header('Location: '.$url);
?>

The above code allows the URL to read and split into parts that can be used to control the tags appearance.

http://bishop.comxa.com/bio-tags/TT-barney -xxxx.gif

In the above example URL the first group denotes a clan logo, the second is the users name and the last xxxx is for expansion at a later date. Try swapping in (CA,DB,EF,G,MP,TT) and add your own name.

[CSS_Man]

Can any of these php scripts be used in your signature here or on other common types of forums like myBB, SMF, phpBB, etc.

[Sogo7]

Provided the forum allows [IMG] tags then it should work anywhere with the aid of the .htaccess rewrite.