[PI]PlayersOnline to an Image (Play Now Button)!

**TORONTO** · 01-30-2011, 04:25 AM

Difficulty: 2/10
Knowledge needed: Photoshop, Copy & Paste & Replace, Very Basic MySQL knowledge
Requirements: MySQL Server, Webhost, Mysql Class
Tested base: Project Insanity.

Spoiler for What we are Making!:

Step One (Making Directory & Files):
Go make a directory in the URL that you want your server status page image to be.
example: [Only registered and activated users can see links. ]

[Only registered and activated users can see links. ] and download the Archive of files needed and extract the files into that web folder you just made!

Now make your own images and replace the ONLINE PNG and OFFLINE PNG images!

There is a complication to this, i will explain later **

Step 2 PHP Sided (Scripts):
Make a new PHP file Called serverStatus.php and paste this in there

Code:

<?
 /* Ramie A.K.A SomeBrownKid ([email protected])
  * Extra copy of the image fetcher and converter.
  * This is a php script designed to display the amount of players online in an image.
  * ICS3U1 - 02 (Richmond Green Secondary School)
  * Credits to Allen for helping with some of this
  * November 30th 2010
 */


#Game Server
$ghost = " "; // Server IP / Host name
#Game Port
$gport = " "; //Server Port

// Make a MySQL Connection
mysql_connect("--", "--", "--") or die(mysql_error()); //Add your own information here HOST/User/Password
mysql_select_db("--") or die(mysql_error()); //Database Name


//Query
$online = mysql_query("SELECT * FROM online WHERE id = 1");

//put the query result into a var
$totalonline = mysql_fetch_array($online);


function ping($host, $port){
$s = @fsockopen($host, $port, $ERROR_NO, $ERROR_STR,(float)0.5);
if($s) {
@fclose($s);
return true;
} else { 
return false;
}
}

/***********************************IMPORTANT****************************************/
//////Dear Leechers, please make sure you change play.silentx.info to your own URL! (Wherever this is hosted)!

if (ping($ghost, $gport)) {
    echo ('<img src="http://play.silentx.info/Status/serverDetails.php?font=neuropol.ttf&shadow=1&y=28&x=40&text='.$totalonline['currentlyonline'].'" />');
}else{
    echo ('<img src="http://play.silentx.info/Status/BountyScapePkzOffline.png" />'); //LINK TO OFFLINE IMAGE!!!
}

if(isset($conn)){
	mysql_close($conn); //Close connection again :D
?>

Now in that file replace this piece of code with your own info
Hostname/ Port/ Database Information / Etc..

Code:

#Game Server
$ghost = " "; // Server IP / Host name
#Game Port
$gport = " "; //Server Port

// Make a MySQL Connection
mysql_connect("--", "--", "--") or die(mysql_error()); //Add your own information here HOST/User/Password
mysql_select_db("--") or die(mysql_error()); //Database Name

Also replace this with your own information or else your image will not work! It will look for the image and wont find it and will give you an error when you try to output it!

Code:

if (ping($ghost, $gport)) {
    echo ('<img src="http://play.silentx.info/Status/serverDetails.php?font=neuropol.ttf&shadow=1&y=28&x=40&text='.$totalonline['currentlyonline'].'" />');
}else{
    echo ('<img src="http://play.silentx.info/Status/BountyScapePkzOffline.png" />'); //LINK TO OFFLINE IMAGE!!!
}

------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------

!Spacer!

------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
Make a new file called serverDetails.php and put the following code in it and save it.

Code:

<?php

 /* Ramie A.K.A SomeBrownKid ([email protected])
  * THIS IS NOT 100% MINE, Allen helped me with the image functions. 
  * ICS3U1 - 02 (Richmond Green Secondary School)
  * November 30th 2010
 */
// Set the content-type
header('Content-type: image/png');


//**************IMAGE VARIABLE CHANGE*********************/
//setImages
$online_img = (isset($_GET['onimg'])) ? $_GET['onimg'] : 'OnlineImageName'; //Online Image Name (Make sure its in same directory)
$online = ping($ghost, $gport); 
/////////////////////////ALLEN'S WORK!////////////////////////////////////////////

	// Get variables
	$text = (isset($_GET['text'])) ? $_GET['text'] : '32';
	$boxText = "T"; //use a sample size to calculate the base height and width of this imagetext
	$angle = (isset($_GET['angle'])) ? $_GET['angle'] : 0;
	$align = (isset($_GET['align'])) ? $_GET['align'] : 'center';
	$font_size = (isset($_GET['font_size'])) ? $_GET['font_size'] : 24;
	$font = (isset($_GET['font'])) ? "./".$_GET['font'] : './arial.ttf';
	
	$r = (isset($_GET['r'])) ? $_GET['r'] : 255;
	$g = (isset($_GET['g'])) ? $_GET['g'] : 255;
	$b = (isset($_GET['b'])) ? $_GET['b'] : 255;
	$rs = (isset($_GET['rs'])) ? $_GET['rs'] : 0;
	$gs = (isset($_GET['gs'])) ? $_GET['gs'] : 0;
	$bs = (isset($_GET['bs'])) ? $_GET['bs'] : 0;
	$shadow = (isset($_GET['shadow'])) ? $_GET['shadow'] : 0;
	$shadow_dist = (isset($_GET['shadow_dist'])) ? $_GET['shadow_dist'] : 1;
	$shadow_size = (isset($_GET['shadow_size'])) ? $_GET['shadow_size'] : $font_size;
	$x = (isset($_GET['x'])) ? $_GET['x'] : 0;
	$y = (isset($_GET['y'])) ? $_GET['y'] : 0;
	$border = (isset($_GET['border'])) ? $_GET['border'] : 0;
	
/////////////////////////ALLEN'S WORK!////////////////////////////////////////////	
	//create image file, with provided path
	$im = @imagecreatefrompng($online_img);
	$text_colour = imagecolorallocate($im, $r, $g, $b);
	
	//find out the bounding box of the text (lowerLeft, lowerRight, upperRight, upperLeft
	$bbox = imagettfbbox($font_size, $angle, $font, $text);
	$width = abs($bbox[2] - $bbox[0]);
	$bbox = imagettfbbox($font_size, $angle, $font, $boxText);
	$height = abs($bbox[7] - $bbox[1]);
	// This is our cordinates for X and Y
	if ($align == "left") {
		$x += 0;
		$y += height;
	} else if ($align == "right") {
		$x += imagesx($im) - $width;
		$y += $height;
	} else if ($align == "center") {
		$x += round((imagesx($im) - $width)/2);
		$y += round((imagesy($im) + $height)/2);
	}
	
	// Add some shadow to the text
	if ($shadow) {
		imagettftext($im, $font_size, $angle, $x+$shadow_dist, $y+$shadow_dist, $shadow_colour, $font, $text);
	}
	if ($border) {
		imagettfborder($im, $font_size, $angle, $x, $y, $text_colour, $font, $text, $border);
	}
	// Add the text
	
	imagettftext($im, $font_size, $angle, $x, $y, $text_colour, $font, $text);
	

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);

//function for server status
function ping($host, $port){
	$s = @fsockopen($host, $port, $ERROR_NO, $ERROR_STR,(float)0.5);
	if($s) {
		@fclose($s);
		return true;
	} else { 
		return false;
	}
}

function imagettfborder($im, $size, $angle, $x, $y, $color, $font, $text, $width) {
	// top
	imagettftext($im, $size, $angle, $x-$width, $y-$width, $color, $font, $text);
	imagettftext($im, $size, $angle, $x, $y-$width, $color, $font, $text);
	imagettftext($im, $size, $angle, $x+$width, $y-$width, $color, $font, $text);
	// bottom
	imagettftext($im, $size, $angle, $x-$width, $y+$width, $color, $font, $text);
	imagettftext($im, $size, $angle, $x, $y+$width, $color, $font, $text);
	imagettftext($im, $size, $angle, $x-$width, $y+$width, $color, $font, $text);
	// left
	imagettftext($im, $size, $angle, $x-$width, $y, $color, $font, $text);
	// right
	imagettftext($im, $size, $angle, $x+$width, $y, $color, $font, $text);
	for ($i = 1; $i < $width; $i++) {
		// top line
		imagettftext($im, $size, $angle, $x-$i, $y-$width, $color, $font, $text);
		imagettftext($im, $size, $angle, $x+$i, $y-$width, $color, $font, $text);
		// bottom line
		imagettftext($im, $size, $angle, $x-$i, $y+$width, $color, $font, $text);
		imagettftext($im, $size, $angle, $x+$i, $y+$width, $color, $font, $text);
		// left line
		imagettftext($im, $size, $angle, $x-$width, $y-$i, $color, $font, $text);
		imagettftext($im, $size, $angle, $x-$width, $y+$i, $color, $font, $text);
		// right line
		imagettftext($im, $size, $angle, $x+$width, $y-$i, $color, $font, $text);
		imagettftext($im, $size, $angle, $x+$width, $y+$i, $color, $font, $text);
	}
}
?>

Make sure you replace this code with your own information, replace OnlineImageName with your own PNG image!

Code:

$online_img = (isset($_GET['onimg'])) ? $_GET['onimg'] : 'OnlineImageName'; //Online Image Name (Make sure its in same directory)

--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
Make a new php File called serverImg.php and paste the following
Replace it with your own information, it is commented there so i am not going to spoonfeed you!

Code:

<?

/* Ramie A.K.A SomeBrownKid ([email protected])
 * This is a php script designed to display the amount of players online in an image.
 * ICS3U1 - 02 (Richmond Green Secondary School)
 * November 30th 2010
 */
// Set the content-type
header('Content-type: image/png');

#Game Server
$ghost = " "; // Server IP / Host name
#Game Port
$gport = " "; //Server Port

// Make a MySQL Connection
mysql_connect("--", "--", "--") or die(mysql_error()); //Add your own information here HOST/User/Password
mysql_select_db("--") or die(mysql_error()); //Database Name

//Query
$online = mysql_query("SELECT * FROM online  WHERE id = 1");

//put the query result into a var
$totalonline = mysql_fetch_array($online);
//set up img sources
$online_img = 'OnlineImageName.png'; //Replace with your own
$offline_img = 'OfflineImageName.png';


function ping($host, $port){ //We are sending packets to the designated computer to see if there is a response
$s = @fsockopen($host, $port, $ERROR_NO, $ERROR_STR,(float)0.5);
if($s) {
@fclose($s);
return true;
} else { 
return false;
}
}

if (ping($ghost, $gport)) { //Pinging function takes place
   $online = $totalonline['currentlyonline'];   
    
	// Get variables
	$text = $online;
	$boxText = "T"; //use a sample size to calculate the base height and width of this imagetext
	$angle = (isset($_GET['angle'])) ? $_GET['angle'] : 0;
	$align = (isset($_GET['align'])) ? $_GET['align'] : 'center';
	$font_size = (isset($_GET['font_size'])) ? $_GET['font_size'] : 24;
	$font = "./neuropol.ttf";
	
	$r = (isset($_GET['r'])) ? $_GET['r'] : 255;
	$g = (isset($_GET['g'])) ? $_GET['g'] : 255;
	$b = (isset($_GET['b'])) ? $_GET['b'] : 255;
	$rs = (isset($_GET['rs'])) ? $_GET['rs'] : 0;
	$gs = (isset($_GET['gs'])) ? $_GET['gs'] : 0;
	$bs = (isset($_GET['bs'])) ? $_GET['bs'] : 0;
	$shadow = (isset($_GET['shadow'])) ? $_GET['shadow'] : 0;
	$shadow_dist = (isset($_GET['shadow_dist'])) ? $_GET['shadow_dist'] : 1;
	$shadow_size = (isset($_GET['shadow_size'])) ? $_GET['shadow_size'] : $font_size;
	$x = 40;
	$y = 28;
	$border = (isset($_GET['border'])) ? $_GET['border'] : 0;
	
	//create image file, with provided path
	$im = @imagecreatefrompng($online_img);
	$text_colour = imagecolorallocate($im, $r, $g, $b);
	
	//find out the bounding box of the text (lowerLeft, lowerRight, upperRight, upperLeft
	$bbox = imagettfbbox($font_size, $angle, $font, $text);
	$width = abs($bbox[2] - $bbox[0]);
	$bbox = imagettfbbox($font_size, $angle, $font, $boxText);
	$height = abs($bbox[7] - $bbox[1]);
	// This is our cordinates for X and Y
	if ($align == "left") {
		$x += 0;
		$y += height;
	} else if ($align == "right") {
		$x += imagesx($im) - $width;
		$y += $height;
	} else if ($align == "center") {
		$x += round((imagesx($im) - $width)/2);
		$y += round((imagesy($im) + $height)/2);
	}
	
	// Add some shadow to the text
	if ($shadow) {
		imagettftext($im, $font_size, $angle, $x+$shadow_dist, $y+$shadow_dist, $shadow_colour, $font, $text);
	}
	if ($border) {
		imagettfborder($im, $font_size, $angle, $x, $y, $text_colour, $font, $text, $border);
	}
	// Add the text
	
	imagettftext($im, $font_size, $angle, $x, $y, $text_colour, $font, $text);
	

   // Using imagepng() results in clearer text compared with imagejpeg()
   imagepng($im);
   imagedestroy($im);
    
}else{
   $im = @imagecreatefrompng($offline_img); //Create the image
   // Using imagepng() results in clearer text compared with imagejpeg()
   imagepng($im);
   imagedestroy($im);
}

if(isset($conn)){
	mysql_close($conn); //Close the connection Thank you whoever pointed it out in my last tutorial ;)
}
?>

Finished the PHP Scripts!

Step Three (Server Sided):

Go to your MysqlManager class and add this method to it.

Spoiler for Don't know what i'm talking about? Click Here!:

Code:

    public static boolean online(int someBrownKid) {
        try {
        query("DELETE FROM `online` WHERE id = 1;");
        query("INSERT INTO `online` (id, currentlyonline) VALUES('1','"+someBrownKid+"');");
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }

^ What this does is it gets the playercount from server and saves it in mySQL table.

In your logout method add this

Code:

		MysqlManager.createConnection();
		MysqlManager.online(PlayerHandler.getPlayerCount());
		MysqlManager.destroyConnection();

**Important**:
You can also add this in process, but it caused lagg for my server because i have a lot of players, so i put it in the logout method

Step Four (Creating the SQL Table):
Run this query to create the table for this

Table Structure:

Code:

CREATE TABLE IF NOT EXISTS `online` (
  `id` varchar(1) NOT NULL DEFAULT '',
  `currentlyonline` int(4) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Extra:

If you want the source image to edit in Photoshop click below

Spoiler for Source Image (Including Layers (Editable)):

Spoiler for The bad stuff about this:

You can now link your image directly, if sites permit by going to

Code:

http://yoursite.com/Status/serverImg.php

**The Ricky** · 01-30-2011, 04:29 AM

Take it off!!!

**~~Chocothunda~~** · 01-30-2011, 04:30 AM

Your image is broken.

**The Ricky** · 01-30-2011, 04:35 AM

Originally Posted by Chocothunda

Your image is broken.

orly?:jelly:

Just look in his siggy

**TORONTO** · 01-30-2011, 04:47 AM

Yes guys leech! 9 Members and 6 guests! Leech guys Leech!

**theonlyinsane** · 01-30-2011, 04:50 AM

not bad but not gonna try takes to long.

**Joshua F** · 01-30-2011, 05:16 AM

Look's good. Not that hard to do if you know PHP and some java. :trollface:

**~~Tyluur~~** · 01-30-2011, 05:20 AM

Looks good, I got one that runs off Events and much shorter. But yours updates every time someone logs out/in.

**Underoath** · 01-30-2011, 05:42 AM

Nice job

**Zro.** · 01-30-2011, 06:13 AM

Nothing to release imo just more random shit for a shit base like PI

Thread: [PI]PlayersOnline to an Image (Play Now Button)!

Thread Tools

Thankful user:

Users Browsing this Thread

User Tag List

Similar Threads

Simply Button v2: Super Cool-Sexy Button for Your Website

[Any] Prayer Button Click Image Changing Thingyz

Hover On Image - Changes Image & Website Link

Playersonline list on my forums

Adding a Icon to a Button (Jbutton) [Screenshot Button] =)