hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Hosting Talk Tutorials : Web Design and Content Tutorials : Replace HTML Spacing for Poll Result Bar with PHP GD Image Generation (Intermediate)
Reply

Forum Jump

Replace HTML Spacing for Poll Result Bar with PHP GD Image Generation (Intermediate)

Reply Post New Thread In Web Design and Content Tutorials Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old
Newbie
 
Join Date: Jan 2006
Posts: 21
Lightbulb

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
Requirements
  • PHP 4.1.x (TESTED WITH PHP 5)
  • GD 2.0
Optional
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”); 
Output (Format)
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();
    }

Usage of Class
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();
?>
Now you can see the Bar Code by
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>
The Third Line actually define the rule, to redirect classpath/images/ requests to index.php.
Now you can access
http://yourdomain.com/classpath/images/7.gif


Last edited by mxdn; 05-30-2007 at 01:34 PM. Reason: Change The Clickable Url


Sponsored Links
Reply

Related posts from TheWhir.com
Title Type Date Posted
Google Blocks Fake SSL Certificates Issued by Indian Government Agency Web Hosting News 2014-07-09 10:11:34
US Data Storage Companies Struggle to Gain Complete Trust of IT Professionals: Study Web Hosting News 2014-04-30 11:05:37
Lead Generation Part 4 – Go it Alone Blog 2014-08-14 15:20:55
Web Host Hostway Replaces Legacy Webmail with Open-Xchange Web Hosting News 2013-02-01 11:17:40
Browsers Block Unauthorized Digital Certificate Issued by Turkish CA TURKTRUST Web Hosting News 2013-01-04 12:55:27


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
WHT Host Brief Email:

We respect your privacy. We will never sell, rent, or give away your address to any outside party, ever.

Advertisement:
Web Hosting News:
WHT Membership
WHT Membership



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?