d2jsp
d2jsp Forums > d2jsp > Ladder Slasher > Guide: How-to Make A Dynamic Ladder-slasher Sig > In A Few Easy Steps With Pics
12360Next
Add Reply New Topic New Poll
flapmo
Group: Member
Posts: 952
Joined: May 8 2007
Gold: 278.53
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 smile.gif.

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
ohmy.gif Q: "How can I check if I have the good configuration?"
thumbsup.gif 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
<?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');

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 tongue.gif. 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 smile.gif.

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 smile.gif.

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 smile.gif

This post was edited by flapmo on Aug 27 2008 05:15am
FloRin
Group: Member
Posts: 10,840
Joined: Jun 20 2007
Gold: 1.39
Aug 27 2008 05:14am
ohmy.gif
I will try now . Thanks hail.gif
beni
Group: Member
Posts: 71,152
Joined: Aug 14 2006
Gold: 6,440.13
Aug 27 2008 05:20am
Awesome smile.gif Thanks dude

I will try it later
markov
Group: Member
Posts: 41,017
Joined: Jul 4 2005
Gold: 871.28
Aug 27 2008 05:22am
Thanks Sir! I'll try to remake mine now smile.gif
Juggalo_Mole
Group: Member
Posts: 13,621
Joined: May 5 2006
Gold: 1,635.00
Aug 27 2008 05:23am
How do we get a server ohmy.gif

I suck with hosting things
flapmo
Group: Member
Posts: 952
Joined: May 8 2007
Gold: 278.53
Aug 27 2008 05:26am
Quote (Juggalo_Mole @ Wed, 27 Aug 2008, 13:23)
How do we get a server ohmy.gif

I suck with hosting things


I just got a paid server, my www.bastijn.nl costs me like 25 euros a year. 10 euro for bastijn.nl and 15 for the 500mb webspace and ftp.

How to get one you ask, I can't help you with this, just google for some hosting sites and check their offers.

http://www.freewebspace.net/forums/showthread.php?t=2168531

maybe this helps a bit if you want it for free.

This post was edited by flapmo on Aug 27 2008 05:28am
FyreStorm
Group: Member
Posts: 2,215
Joined: Dec 23 2007
Gold: 12,546.10
Aug 27 2008 06:06am
God I am just too lazy to read all of that let alone do it. Big big gratz on making it and i'm sure you'll be getting lots of thanks to all of those people who were curious and actually were willing to do more than just copy + paste something in their sig, lol.
psychoclownkyozu
Group: Member
Posts: 11,810
Joined: Feb 7 2008
Gold: 16,138.37
Aug 27 2008 06:10am
Cool flapmo, not really into LS but very nice job!

Definately deserves to be a Sticky imo! smile.gif
Amaury
Group: Member
Posts: 23,515
Joined: Nov 22 2006
Gold: 0.00
Trader: Trusted
Aug 27 2008 06:28am
congratz for the guide wink.gif
AlPi
Group: Member
Posts: 16,271
Joined: Sep 19 2005
Gold: 4,420.32
Aug 27 2008 06:32am
Very very nice guide, finally something pro!
Is there a way to read the inventory as well?
Go Back To Ladder Slasher Topic List
12360Next
Add Reply New Topic New Poll