Guide: How-to Make A Dynamic Ladder-slasher Sig - Topic

Member

Posts: 1,899

Joined: May 8 2007

Gold: 4,462.26

Aug 27 2008 05:13am

Intro
This guide is made as a promise to myself mostly. When Njaguar made it possible to read your character stats from an XML file, he made it possible to create dynamic signatures. Everybody wanted one in the first few days it became possible. Since I was kinda busy that days I wans't able to write the guide at that time. So, I know this guide is a bit late, but maybe some people still need one, want one or just like to see a guide.

In one of the first topics about this alot of people didn't know how to make one, and the ones who knew made for money but didn't care to explain why. Why should they, they made money... Well it was some kind of business so I don't blaim them too much. Making those sigs only took like 10 seconds since you only have to replace one number in the end, if you do it well

.

What are those Dynamic Signatures?
Dynamic signatures are images which update automatically. This is mainly done by loading XML data and covert this to a picture using a library or choice (I will use GD library since it is standard installed most of times). An example is thisone:

The Guide

Index
1. Some basic info
2. Check if your server is correctly installed for this
3. The code explained
4. The image trick
5. the complete zip file
6. Goodbye

1. Some basic info
Some basic info before we start. Dynamic signatures can be made in alot of ways, I don't claim mine is best, neither I claim my code is well written. In fact, my code is a 10 minute job so it can be a bit nasty, but it fixes the job. The code is written in PHP5 since it eases the XML reading. You can do it in PHP4, but it will make this guide more difficult to understand. If alot of requests come for a PHP4 version it can be done, but then again, you can ask your provider to update to version 5 for free.

2. Check your server

Q: "How can I check if I have the good configuration?"

A: "read below."

To check if your server is correctly installed for this type of signature it needs to have PHP5 installed, and it needs http://www.libgd.org/Main_Page to be installed. This can be checked in the following way.

-1. In notepad (or something just like it) create two files called gd.php5 and info.php5. Paste the following code inside those two files:

In the info.php5:

Code

<?
phpinfo();
?>

In the GD.php5:

Code

<?php
var_dump(gd_info());
?>

Save & upload those two files to a directory on your webserver. I have uploaded them on mine to show the result you should get:
http://www.bastijn.nl/zooi/info.php5
http://www.bastijn.nl/zooi/gd.php5

Your results should match those two links. You can also scroll down in the info.php5 to find the part where it says:

Code

gd
GD Support enabled
GD Version bundled (2.0.34 compatible)
FreeType Support enabled
FreeType Linkage with freetype
FreeType Version 2.1.9
GIF Read Support enabled
GIF Create Support enabled
JPG Support enabled
PNG Support enabled
WBMP Support enabled
XBM Support enabled

To check if GD is enabled.

Help, it doesn't work!
Try the same thing but this time name your files info.php and gd.php and check again. Maybe your server is still on version 4 of PHP. If this is the case you can ask your server admins to install php5 for free.

3. The code explained
Now we go to the code part, this is actually quite simple and straightforward. I will first show the whole file and after take parts out of it to explain the code.

file: don.png.php5

Code

<?php
Header ('Content-type: image/jpeg');
Header('Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0');
Header('Expires: Thu, 19 Nov 1981 08:52:00 GMT');
Header('Pragma: no-cache');

/******************************************************
* BASICS *
******************************************************/

// set some dimensions for future use
$expbar_width = 100;
$expbar_height = 25;

// create the image from a background jpg
$image = imagecreatefrompng('bg.png');

// set some colours for future use
$cool = imagecolorallocate($image, 81, 86, 96);
$red = imagecolorallocate($image, 255, 0, 0);
$yellow = imagecolorallocate($image, 255, 181, 53);

// set the background colour
// number or is top left pixel x, top left pixel y, bottom right pixel x, bottom right pixel y

// set the font and print text
$font = '/avqest.ttf';

/******************************************************
* LOAD DATA *
******************************************************/

// Create an array for determining the class you play.
// In the XML this is saved as an int number, the conversion is shown below.
$class_name = array( -1 => 'None',
0 => 'Fighter',
1 => 'Barbarian',
2 => 'Rogue',
3 => 'Magician',
4 => 'Guardian',
5 => 'Samurai',
6 => 'Paladin',
7 => 'Monk',
8 => 'Ninja',
9 => 'Warlock',
10 => 'Headhunter',
11=> 'Alchemist');

// load xml data in vars

// This is where you load your own info from the xml d2jsp gives. This is a PHP5 only command!
$data = simplexml_load_file('http://ladderslasher.d2jsp.org/xmlChar.php?i=146106');
$name = $data->name;
$kills = $data->kills;
$class = $class_name[(int)$data->classid];
$exp = $data->exp;
$level = $data->level;
$hpmax = $data->hpmax;
$mqpasses = $data->mqpasses;
$mqattempts = $data->mqattempts;
$exp = (int)$exp;
$percent = calcExpPercent($exp);
$brpixelX = calcBrPixelX($exp,$expbar_width);

// Create an expbar with bg 'cool' color and the cover of your level in red.
imagefilledrectangle($image, 180, 59, 280, 71, $cool);
imagefilledrectangle($image, 180, 59, $brpixelX, 71, $red);

/******************************************************
* TEXT PART *
******************************************************/

//Example; ImageTTFText ($image, textsize, angle, right indent, down indent, color, font, "text");

// EXP bar text
ImageTTFText ($image, 9, 0, 122, 69, $yellow, $font, "To Level: ");
ImageTTFText ($image, 9, 0, 220, 69, $yellow, $font, $percent."%");

//show name
ImageTTFText ($image, 9, 0, 122, 33, $yellow, $font, "HC Name: ");
ImageTTFText ($image, 9, 0, 180, 33, $red, $font, $name);

//show class
ImageTTFText ($image, 9, 0, 280, 33, $yellow, $font, "Class: ");
ImageTTFText ($image, 9, 0, 320, 33, $red, $font, $class);

// show lvl
ImageTTFText ($image, 9, 0, 122, 45, $yellow, $font, "Level: ");
ImageTTFText ($image, 9, 0, 162, 45, $red, $font, $level);

//show experience
ImageTTFText ($image, 9, 0, 180, 45, $yellow, $font, "Experience: ");
ImageTTFText ($image, 9, 0, 250, 45, $red, $font, $exp);

// show kills
ImageTTFText ($image, 9, 0, 312, 45, $yellow, $font, "Kills: ");
ImageTTFText ($image, 9, 0, 352, 45, $red, $font, $kills);

// Show HP max
ImageTTFText ($image, 9, 0, 122, 57, $yellow, $font, "HP: ");
ImageTTFText ($image, 9, 0, 145, 57, $red, $font, $hpmax);

// SHow MQ passen and attempts
ImageTTFText ($image, 9, 0, 242, 57, $yellow, $font, "MQ passes/attempts: ");
ImageTTFText ($image, 9, 0, 357, 57, $red, $font, $mqpasses."/".$mqattempts);

// Show useless shizzle
ImageTTFText ($image, 9, 0, 122, 82, $yellow, $font, "-------------------------------------");
ImageTTFText ($image, 9, 0, 122, 95, $red, $font, "GoT-Guild LadderSlasher Player | Bring ce GPs!");

// output and destroy
imagepng($image);
imagedestroy($image);

/******************************************************
* FUNCTIONS *
******************************************************/

/***
* calculate the exp bar width.
***/
function calcBrPixelX($input,$xpbar_width)
{
$temp1 = fmod($input,1000000);
$temp1 = ($temp1/1000000);
$temp1 = $temp1 * $xpbar_width;
$temp1 = $temp1 + 180;

return (int)$temp1;
}

/***
* Calculate the percentage of level done
***/
function calcExpPercent($input)
{
$temp1 = fmod($input,1000000);
$temp1 = ($temp1/1000000);
$temp1 = $temp1 * 100;

return (int)$temp1;
}

?>

The START

Code

This is just some basic code to tell what kind of file you are dealing with, don't worry about it, just copy.

The BASICS part

Code

/******************************************************
* BASICS *
******************************************************/

// set some dimensions for future use
$expbar_width = 100;
$expbar_height = 25;

// create the image from a background jpg
$image = imagecreatefrompng('bg.png');

// set some colours for future use
$cool = imagecolorallocate($image, 81, 86, 96);
$red = imagecolorallocate($image, 255, 0, 0);
$yellow = imagecolorallocate($image, 255, 181, 53);

// set the background colour
// number or is top left pixel x, top left pixel y, bottom right pixel x, bottom right pixel y

// set the font and print text
$font = '/avqest.ttf';

In the first two lines of code I save two values I want to use later on. I use these values to set the size of my xp bar. This way I can change the values without searching for the actual code.

After comes the actual image creation. This line is creating an image from a background image made in advance of this tutorial. the "bg.jpg" can be any image you like. I used http://www.bastijn.nl/zooi/sigs/php5/bg.png. You can also load jpg's with imagecreatefromjpeg and such on. In the PHP5 version of the GD Library the imagecreatefromgif is not working properly anymore I believe. My advice; don't use it unless really needed.

Next I preset some colors and load the wanted font in a variable for later use (in the TTF text).

The LOAD DATA part

Code

/******************************************************
* LOAD DATA *
******************************************************/

// Create an array for determining the class you play.
// In the XML this is saved as an int number, the conversion is shown below.
$class_name = array( -1 => 'None',
0 => 'Fighter',
1 => 'Barbarian',
2 => 'Rogue',
3 => 'Magician',
4 => 'Guardian',
5 => 'Samurai',
6 => 'Paladin',
7 => 'Monk',
8 => 'Ninja',
9 => 'Warlock',
10 => 'Headhunter',
11=> 'Alchemist');

// load xml data in vars

// This is where you load your own info from the xml d2jsp gives. This is a PHP5 only command!
$data = simplexml_load_file('http://ladderslasher.d2jsp.org/xmlChar.php?i=146106');
$name = $data->name;
$kills = $data->kills;
$class = $class_name[(int)$data->classid];
$exp = $data->exp;
$level = $data->level;
$hpmax = $data->hpmax;
$mqpasses = $data->mqpasses;
$mqattempts = $data->mqattempts;
$exp = (int)$exp;
$percent = calcExpPercent($exp);
$brpixelX = calcBrPixelX($exp,$expbar_width);

// Create an expbar with bg 'cool' color and the cover of your level in red.
imagefilledrectangle($image, 180, 59, 280, 71, $cool);
imagefilledrectangle($image, 180, 59, $brpixelX, 71, $red);

This is where it all happens, here you load the provided XML file into your own variables (which you use in your image). Your XML file can be found at:

Code

http://ladderslasher.d2jsp.org/xmlChar.php?i=xxxxxxx

With instead of the xxxxx on the end you put your own character number. Your character number can be found by browsing to your own character (click on your name in the upper left corner -> ladderslasher part of your user page -> click on the char wanted). The URL should be something like this:

Code

http://forums.d2jsp.org/user.php?c=3&i=335073&p=70284

This is my own URL and can be found by clicking my name etc. The number which should go on the xxxxx's is the number after p=, so mine is 70284. Now my line for the XML would become:

Code

http://ladderslasher.d2jsp.org/xmlChar.php?i=70284

You can try this out by copy/pasting it in your browser window, it will show you some info like here.

Now the first a little prestep is to create an array to hold all the classes. This is done because in the XML, the classes aren't represented as text (strings) but as int numbers. The numbers represent a class and the conversion is shown in the code.

After this step some variables are loaded from the XML. The actual loading of the XML is done by the following code line

Code

$data = simplexml_load_file('http://ladderslasher.d2jsp.org/xmlChar.php?i=146106');

This is a PHP5 function and will not work in PHP4. This is the only thing why I use PHP5 since in PHP4 this loading uses more lines. You can easily google for "load xml php4" and probably find nice guides on how to do this in php4.

The rest of the LOAD DATA part is just saving some of the data in variables for future use.

The TEXT part

Code

/******************************************************
* TEXT PART *
******************************************************/

//Example; ImageTTFText ($image, textsize, angle, right indent, down indent, color, font, "text");

// EXP bar text
ImageTTFText ($image, 9, 0, 122, 69, $yellow, $font, "To Level: ");
ImageTTFText ($image, 9, 0, 220, 69, $yellow, $font, $percent."%");

//show name
ImageTTFText ($image, 9, 0, 122, 33, $yellow, $font, "HC Name: ");
ImageTTFText ($image, 9, 0, 180, 33, $red, $font, $name);

//show class
ImageTTFText ($image, 9, 0, 280, 33, $yellow, $font, "Class: ");
ImageTTFText ($image, 9, 0, 320, 33, $red, $font, $class);

// show lvl
ImageTTFText ($image, 9, 0, 122, 45, $yellow, $font, "Level: ");
ImageTTFText ($image, 9, 0, 162, 45, $red, $font, $level);

//show experience
ImageTTFText ($image, 9, 0, 180, 45, $yellow, $font, "Experience: ");
ImageTTFText ($image, 9, 0, 250, 45, $red, $font, $exp);

// show kills
ImageTTFText ($image, 9, 0, 312, 45, $yellow, $font, "Kills: ");
ImageTTFText ($image, 9, 0, 352, 45, $red, $font, $kills);

// Show HP max
ImageTTFText ($image, 9, 0, 122, 57, $yellow, $font, "HP: ");
ImageTTFText ($image, 9, 0, 145, 57, $red, $font, $hpmax);

// SHow MQ passen and attempts
ImageTTFText ($image, 9, 0, 242, 57, $yellow, $font, "MQ passes/attempts: ");
ImageTTFText ($image, 9, 0, 357, 57, $red, $font, $mqpasses."/".$mqattempts);

// Show useless shizzle
ImageTTFText ($image, 9, 0, 122, 82, $yellow, $font, "-------------------------------------");
ImageTTFText ($image, 9, 0, 122, 95, $red, $font, "GoT-Guild LadderSlasher Player | Bring ce GPs!");

Only one thing to say here actually. ImageTTFText works by giving it an image and a text font (earlier saved in variable font). The font can be any font you want as long as it is a .ttf file. The description of TTF text is:

Code

ImageTTFText ($image, textsize, angle, right indent, down indent, color, font, "text");

The FUNCTIONS part

Code

/******************************************************
* FUNCTIONS *
******************************************************/

/***
* calculate the exp bar width.
***/
function calcBrPixelX($input,$xpbar_width)
{
$temp1 = fmod($input,1000000);
$temp1 = ($temp1/1000000);
$temp1 = $temp1 * $xpbar_width;
$temp1 = $temp1 + 180;

return (int)$temp1;
}

/***
* Calculate the percentage of level done
***/
function calcExpPercent($input)
{
$temp1 = fmod($input,1000000);
$temp1 = ($temp1/1000000);
$temp1 = $temp1 * 100;

return (int)$temp1;
}

I believe you can figure this easy math out

. It is used to calculate the exp bar values. Fmod is a modulo math function. Don't skip math class if you don't understand

.

4. The Image trick
Now for the final part we have to trick the forum to let it accept php files as a signature. You now two files if correct;
1. yoursignature.php5 (or yoursignature.png.php5 if you copied the don.png.php5)
2. your background image (bg.png)

what we need to do is set create a file named: .htaccess (no extension .txt behind it!) and include:

Code

Options MultiViews

in it. What this does is telling that the files in the same directory as this .htaccess file can be read multiple ways. Now be sure to save your signature code as yoursignaturename.png.php5 and upload the following files into one directory:
1. yoursignaturename.png.php5
2. .htaccess
3. bg.png

Now you can reference your image by just calling it using .png extension or (.png.php5 extension if wanted). So it would be on http://www.mywebsapce.com/i-uploaded-it-here/mysignaturename.png.

5. The complete zip file
All files needed can be found http://www.bastijn.nl/zooi/guide.rar.
Just upload these files in one directory and it should work

.

6. Goodbye
Well, that's all I believe. For questions you can post here I will check every now and then to help people out.

Possible updates
I actually made a tiny part of code where the BG is set by checking what class you are. This way you select the bg belonging to your class. Barb gets a barb, pala a pala etc. I didn't implement it here yet because I think it is easy to figure our on your own

This post was edited by flapmo on Aug 27 2008 05:15am