Results 1 to 1 of 1
-
05-30-2007, 01:30 PM #1Newbie
- Join Date
- Jan 2006
- Posts
- 25
Replace HTML Spacing for Poll Result Bar with PHP GD Image Generation (Intermediate)
Creating Automatic Poll Bar Generator
In this article we will learn how to create Poll Bar Image through PHP GD Functions.I tried to replace the conventional poll result bar with PHP GD
In which I use Gradient Spacers and Image Icon, and Combine into One Image.
Example
http://www.zaheema.com/votebar/images/7.gif
Usage:
I have created this Poll Bar Generator Class, to show rating for My Client Testimonial page. You can achieve this by HTML Spacing as well, but I think single GIF file is more efficient solution for it.
DEMO:
http://www.zaheema.com/votebar/images/5.gif
http://www.zaheema.com/votebar/images/1.gif
DOWNLOAD Source + DOCX Format Tutorial
(Not Sure to put Clickable Link thats why hiding it in CODE)
IDEA:
The Process of Creating the bar is exactly, same like HTML Display Poll bar; first we will spread the main spacer, and then calculate the Voting Result, and spread the Vote Bar spacer accordingly. And at the end we will add User Icon at the End of Bar (Client Testimonial Icon)
What We Will Achieve
In this article, we will learn how to use GD Function to
- create Image Platte
- How to Resize the Image
- How to copy Image on the Platte
- Apache Mod_Rewrite and SEO, Short URL
- PHP 4.1.x (TESTED WITH PHP 5)
- GD 2.0
Apache with Mod_Rewrite Engine (If you use Apache Part as well)
PHP Functions used in this Article, Their Usage and Explanation
array getimagesize ( string $filename [, array &$imageinfo] )
It is GD Function, which return the array, filled with Image Information like Dimension, Mime
etc
Example
PHP Code:$array =getimagesize(“polls/icon1.gif”);
Array[0] = Width
Array[1] = Height
Array[2] = Image Type Flag
Array[3] = width="xxx" height="xxx"
Array[bits] = bits
Array[channels] = channels
Array[mime] = mime-type
We will use this function to get the Height the our Main Canvas, and Mime Type (gif/jpeg) for Our Output to browser
resource imagecreatefromgif ( string $filename )
Another Useful GD function, You can create Image from Path or URL by this function and load image into memory (resource), We need to load our image into resource before applying any function like resizing or overlaying. So we load all our Images to create Bar, into Resource First through This Function.
If Our Mime Type of Image is JPEG then we use imagecreatefromjpeg
resource imagecreatetruecolor ( int $width, int $height )
Use this function to create Image (For Ouput), Do not get confuse, by imagecreatefromgif we will load our images and paste into Canvas draw by this function
bool imagecopyresized ( resource $dst_image, resource $src_image, int $dst_x, int $dst_y, int $src_x, int $src_y, int $dst_w, int $dst_h, int $src_w, int $src_h )
It is the Key PHP Function, to implement our Idea, as the name reveal that it is use for resizing image.
You will see later it in action, then you will understand how it works.
bool imagecopy ( resource $dst_im, resource $src_im, int $dst_x, int $dst_y, int $src_x, int $src_y, int $src_w, int $src_h
The Last PHP Builtin Function Used in this Class to achieve our IDEA, is use to copy the Image into another Image, like when we resize the image and then place it into main Stage. We will use this function then.
int Imagesx(resource $img)
Calculate the Width of Image loaded into resource
Integer Imagesy(resource $img)
Calculate the Height of Image loaded into resource
Thinking Programmatically
As I have told you earlier in IDEA Section, that we actually resize and overlay image, so obviously we need either three variables or arrays to hold the location of our images plus we need two more to control output, one will decide the overall size of Poll Bar, and other will decide the Fill Bar for Vote, like above Green in Image. So, our Class has following Main
Variables.
PHP Code:Class barGenerator
{
var $image_location; //Array, Images Location
var $height; //Integer, Height of Bar
var $width; //Integer, Total Width of Bar
var $x_icon; //Distance of X Coordinate of Icon Image in Main Canvas
var $ratio; //Ratio to Multiply the Given Width, (Will be Clear in Context) var $vote; //Number of Votes
// Now Creating the Main Constructor Function for our Class, and fill the above Variables with // values, The Main Function will accept, two variables, Bar Size, and Vote/Rating (1 to 10)
function barGenerator($size,$vote)
{
$this->width=$size;
$this->vote=$vote;
// As you can see the Vote is in between 1 to 10, so we will multiply the ratio with vote value to
// get the exact size for Vote Green Bar
$this->ratio=$this->width/10;
$this->image_location=array();
$this->image_location[‘spacer_background’]=$this->getCurrentDir().”/polls/fill_spacer.gif”;
$this->image_location[‘spacer_vote’]=$this->getCurrentDir().”/polls/fill_fill.gif”;
$this->image_location[‘icon’]=$this->getCurrentDir().”/polls/fill_icon.gif”;
}
// Child Function of Class to Draw and Output The Bar
Function drawbar()
{
// First we load the Image Locations into Resource so we can Resize them
/*
You can see that first I get the information of image through getimagesize function
then apply the condition and run GD Function accordingly to create image (Resource)
*/
$info_spacer = getimagesize($this->image_location[‘spacer_background’]);
if ($info_spacer['mime']=="image/gif")
$convas_spacer=imagecreatefromgif($this->image_location['spacer_background']);
else if ($info['mime']=="image/pjpeg" || $info['mime']=="image/jpeg") $convas_spacer=imagecreatefromjpeg($this->image_location['spacer_background']);
$info_image = getimagesize($this->image_location[‘spacer_vote’]);
if ($info_image['mime']=="image/gif")
$vote_spacer=imagecreatefromgif($this->image_location[‘spacer_vote’]);
else if ($info_image['mime']=="image/pjpeg" || $info['mime']=="image/jpeg")
$vote_spacer=imagecreatefromjpeg($this->image_location[‘spacer_vote’]);
$info_icon = getimagesize($this->image_location['icon']);
if ($info_icon['mime']=="image/gif")
$iconimg=imagecreatefromgif($this->image_location['icon']);
else if ($info_icon['mime']=="image/pjpeg" || $info['mime']=="image/jpeg")
$iconimg=imagecreatefromjpeg($this->image_location['icon']);
// Storing the Dimension of Image into Variables
$this->x_icon=$this->width;
$this->width=$this->width+$info_icon[0];
$this->height=$info_icon[1];
// verify that we have successfully loaded the image into memory
if(!is_resource($convas_spacer) || !is_resource($vote_spacer) || !is_resource($iconimg))
{
echo "Cannot Load Image Files, Script Halt";
exit;
}
// creating a Full Background Spacer, according to Size Specified
// Height is automatically Calculated from Spacer Image
$background=imagecreatetruecolor($this->width,$info_spacer[1]);
// imagesy function used to calculate the Height of Image in Memory, and imagex for Width
$height=imagesy($convas_spacer);
// Fill it with Spacer
/*
Usuage: imagecopyresized
$background is destination Image
$convas_spacer is Spacer for Background (First Image)
0,0 are the Destination X and Y Cordinates (for to start from)
0,0 are the Source X and Y Cordinates (for to start from)
this->total_size*$this->total_size is percent of width to spread, as it is main spacer so i spread
it all
imagesy() function return the Height of the Loaded Resource Image as you can see we have
loaded $convas_spacer in memory earlier
$this->Width width of Resource Image
$height Height of Resource Image
Next Parameter is Resource Image Width,
and Height is calculated through imagesy() of loaded image, earlier
*/
imagecopyresized($background,$convas_spacer,0,0,0,0,
$this->width*$this->width,$height,$this->width,imagesy($convas_spacer));
//Calculating the Width of Vote Background
$vote_bg_length=$this->vote * $this->ratio+10;
//$vote_bg_length=$vote_bg_length-10;
$vote_bg=imagecreatetruecolor($vote_bg_length,$height);
imagecopyresized($vote_bg,$vote_spacer,0,0,0,0
,imagesx($vote_bg)*$this->ratio*100,imagesy($vote_bg),$this->width,$height);
//Copy the Vote_bg spacer (spread) and Icon Image into the Main $background
/*
ImageCopy
$background main Convas or Destinatino Image
$vote_bg The Resource Image to be copy, ( as we have created above)
0,0,0,0 Cordinates (No Explanation Needed)
$vote_bg_length is length of Vote Convas (already Declared)
$vote
*/
imagecopy($background,$vote_bg,0,0,0,0,imagesx($vote_bg),imagesy($vote_bg));
imagecopy($background,$iconimg,
$this->x_icon,0,0,0,imagesx($iconimg),imagesy($iconimg));
//SENDING OUTPUT TO BROWSER
if ($info_spacer['mime']=="image/gif")
{
header("Content-type: image/gif");
imagegif($background);
}
else if ($info_spacer['mime']=="image/pjpeg" || $info_spacer['mime']=="image/jpeg")
{
header("Content-type: image/jpeg");
imagejpeg($background);
}
//Free the Memory (Resource)
imagedestroy($background);
imagedestroy($vote_bg);
imagedestroy($iconimg);
}
// Extra Functions
// Return The Current Directory
function getCurrentDir()
{
return getcwd();
}
}
You can execute the Class by Including and Executing the Class file Like Below
PHP Code:<?php
include_once "bargenerate.php";
$image=new barGenerator(200,$_GET['width']);
$image->drawbar();
?>
http://yourdomain.com/classpath/index.php?width=7
USER AND SEO FRIENDLY URL
Though you can insert and show image by above URL but it is not User and Seo Friendly, if you want to create seo friendly urls, you just need to add .htaccess in class path directory, and you must sure that your Server Supports Mod_Rewrite Module.
.htaccess
Code:<IfModule mod_rewrite.c> RewriteEngine on RewriteRule images/(.*).gif index.php?width=$1 </IfModule>
Now you can access
http://yourdomain.com/classpath/images/7.gifLast edited by mxdn; 05-30-2007 at 01:34 PM. Reason: Change The Clickable Url