[PHP] Dynamic ProgressBar Image

Discussion in 'Code Snippets and Tutorials' started by ricky92, Oct 4, 2007.

  1. ricky92

    ricky92 Administrator
    Staff Member

    Joined:
    Nov 10, 2006
    Messages:
    1,866
    Likes Received:
    67
    I just made a progressbar in php, which dynamically changes the progress if you change the url. The progressbar is this:

    [​IMG]
    http://ricky92.altervista.org/sig/progressbar.php?width=200&height=20&progress=50

    [​IMG]
    http://ricky92.altervista.org/sig/progressbar.php?width=400&height=60&progress=85​

    It's pretty simple to make, here's the PHP source code:
    Code (PHP):
    1. <div class="php" id="{CB}" style="font-family: monospace;"><ol><li style="padding: 0 5px; background-color: #fff; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;"><span style="color: #000000; font-weight: bold;"><?php</span></li><li style="padding: 0 5px; background-color: #f9f9f9; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">function</span> GetUnknown<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$first</span>, <span style="color: #0000ff;">$second</span>, <span style="color: #0000ff;">$third</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span></li><li style="padding: 0 5px; background-color: #fff; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; &nbsp; &nbsp; [url=http://www.php.net/return]<span style="color: #b1b100;">return</span>[/url] <span style="color: #66cc66;">(</span><span style="color: #0000ff;">$second</span> * <span style="color: #0000ff;">$third</span><span style="color: #66cc66;">)</span> / <span style="color: #0000ff;">$first</span>;</li><li style="padding: 0 5px; background-color: #f9f9f9; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; <span style="color: #66cc66;">}</span></li><li style="padding: 0 5px; background-color: #fff; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp;</li><li style="padding: 0 5px; background-color: #f9f9f9; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; <span style="color: #0000ff;">$width</span> = <span style="color: #0000ff;">$_REQUEST</span><span style="color: #66cc66;">[</span><span style="color: #ff0000;">'width'</span><span style="color: #66cc66;">]</span>; &nbsp;<span style="color: #808080; font-style: italic;">//Gets the width and the height of the progressbar</span></li><li style="padding: 0 5px; background-color: #fff; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; <span style="color: #0000ff;">$height</span> = <span style="color: #0000ff;">$_REQUEST</span><span style="color: #66cc66;">[</span><span style="color: #ff0000;">'height'</span><span style="color: #66cc66;">]</span>;</li><li style="padding: 0 5px; background-color: #f9f9f9; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; </li><li style="padding: 0 5px; background-color: #fff; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; <span style="color: #0000ff;">$img</span> = [url=http://www.php.net/imagecreatetruecolor]<span style="color: #000066;">imagecreatetruecolor</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$width</span>, <span style="color: #0000ff;">$height</span><span style="color: #66cc66;">)</span>; &nbsp;<span style="color: #808080; font-style: italic;">//creates the empty image</span></li><li style="padding: 0 5px; background-color: #f9f9f9; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; [url=http://www.php.net/imageantialias]<span style="color: #000066;">imageantialias</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$img</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">)</span>; &nbsp;<span style="color: #808080; font-style: italic;">//it's just to make the text look smoother</span></li><li style="padding: 0 5px; background-color: #fff; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; [url=http://www.php.net/imagefill]<span style="color: #000066;">imagefill</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$img</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">0</span>, [url=http://www.php.net/imagecolorallocate]<span style="color: #000066;">imagecolorallocate</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$img</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>; <span style="color: #808080; font-style: italic;">//black border</span></li><li style="padding: 0 5px; background-color: #f9f9f9; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; [url=http://www.php.net/imagefilledrectangle]<span style="color: #000066;">imagefilledrectangle</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$img</span>, <span style="color: #cc66cc;">1</span>, <span style="color: #cc66cc;">1</span>, <span style="color: #0000ff;">$width</span> - <span style="color: #cc66cc;">2</span>, <span style="color: #0000ff;">$height</span> - <span style="color: #cc66cc;">2</span>, [url=http://www.php.net/imagecolorallocate]<span style="color: #000066;">imagecolorallocate</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$img</span>, <span style="color: #cc66cc;">230</span>, <span style="color: #cc66cc;">230</span>, <span style="color: #cc66cc;">250</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>; &nbsp;<span style="color: #808080; font-style: italic;">//lightblue background</span></li><li style="padding: 0 5px; background-color: #fff; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; [url=http://www.php.net/imagefilledrectangle]<span style="color: #000066;">imagefilledrectangle</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$img</span>, <span style="color: #cc66cc;">1</span>, <span style="color: #cc66cc;">1</span>, GetUnknown<span style="color: #66cc66;">(</span><span style="color: #cc66cc;">100</span>, <span style="color: #0000ff;">$_REQUEST</span><span style="color: #66cc66;">[</span><span style="color: #ff0000;">'progress'</span><span style="color: #66cc66;">]</span>, <span style="color: #0000ff;">$width</span> - <span style="color: #cc66cc;">2</span><span style="color: #66cc66;">)</span>, <span style="color: #0000ff;">$height</span> - <span style="color: #cc66cc;">2</span>, [url=http://www.php.net/imagecolorallocate]<span style="color: #000066;">imagecolorallocate</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$img</span>, <span style="color: #cc66cc;">50</span>, <span style="color: #cc66cc;">200</span>, <span style="color: #cc66cc;">50</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>; &nbsp;<span style="color: #808080; font-style: italic;">//plan progressbar rectangle</span></li><li style="padding: 0 5px; background-color: #f9f9f9; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; [url=http://www.php.net/imagefilledrectangle]<span style="color: #000066;">imagefilledrectangle</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$img</span>, <span style="color: #cc66cc;">1</span>, <span style="color: #cc66cc;">1</span>, GetUnknown<span style="color: #66cc66;">(</span><span style="color: #cc66cc;">100</span>, <span style="color: #0000ff;">$_REQUEST</span><span style="color: #66cc66;">[</span><span style="color: #ff0000;">'progress'</span><span style="color: #66cc66;">]</span>, <span style="color: #0000ff;">$width</span> - <span style="color: #cc66cc;">2</span><span style="color: #66cc66;">)</span>, <span style="color: #66cc66;">(</span><span style="color: #0000ff;">$height</span> - <span style="color: #cc66cc;">2</span><span style="color: #66cc66;">)</span> / <span style="color: #cc66cc;">2</span>, [url=http://www.php.net/imagecolorallocatealpha]<span style="color: #000066;">imagecolorallocatealpha</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$img</span>, <span style="color: #cc66cc;">255</span>, <span style="color: #cc66cc;">255</span>, <span style="color: #cc66cc;">255</span>, <span style="color: #cc66cc;">60</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>; &nbsp;<span style="color: #808080; font-style: italic;">//shiny effect =)</span></li><li style="padding: 0 5px; background-color: #fff; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; [url=http://www.php.net/if]<span style="color: #b1b100;">if</span>[/url] <span style="color: #66cc66;">(</span>[url=http://www.php.net/strlen]<span style="color: #000066;">strlen</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$_REQUEST</span><span style="color: #66cc66;">[</span><span style="color: #ff0000;">'progress'</span><span style="color: #66cc66;">]</span><span style="color: #66cc66;">)</span> == <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span> &nbsp;<span style="color: #808080; font-style: italic;">//to center the text in the image.</span></li><li style="padding: 0 5px; background-color: #f9f9f9; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">$location</span> = <span style="color: #cc66cc;">0.05</span>;</li><li style="padding: 0 5px; background-color: #fff; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; <span style="color: #66cc66;">}</span> [url=http://www.php.net/elseif]<span style="color: #b1b100;">elseif</span>[/url] <span style="color: #66cc66;">(</span>[url=http://www.php.net/strlen]<span style="color: #000066;">strlen</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$_REQUEST</span><span style="color: #66cc66;">[</span><span style="color: #ff0000;">'progress'</span><span style="color: #66cc66;">]</span><span style="color: #66cc66;">)</span> == <span style="color: #cc66cc;">2</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span></li><li style="padding: 0 5px; background-color: #f9f9f9; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">$location</span> = <span style="color: #cc66cc;">0.10</span>;</li><li style="padding: 0 5px; background-color: #fff; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; <span style="color: #66cc66;">}</span> [url=http://www.php.net/else]<span style="color: #b1b100;">else</span>[/url] <span style="color: #66cc66;">{</span></li><li style="padding: 0 5px; background-color: #f9f9f9; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">$location</span> = <span style="color: #cc66cc;">0.15</span>;</li><li style="padding: 0 5px; background-color: #fff; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; <span style="color: #66cc66;">}</span></li><li style="padding: 0 5px; background-color: #f9f9f9; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; [url=http://www.php.net/imagettftext]<span style="color: #000066;">imagettftext</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$img</span>, GetUnknown<span style="color: #66cc66;">(</span><span style="color: #cc66cc;">20</span>, <span style="color: #cc66cc;">15</span>, <span style="color: #0000ff;">$height</span><span style="color: #66cc66;">)</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #66cc66;">(</span><span style="color: #0000ff;">$width</span> / <span style="color: #cc66cc;">2</span><span style="color: #66cc66;">)</span> - <span style="color: #66cc66;">(</span><span style="color: #0000ff;">$width</span> * <span style="color: #0000ff;">$location</span><span style="color: #66cc66;">)</span>, <span style="color: #66cc66;">(</span><span style="color: #0000ff;">$height</span> / <span style="color: #cc66cc;">2</span><span style="color: #66cc66;">)</span> + <span style="color: #66cc66;">(</span><span style="color: #0000ff;">$height</span> * <span style="color: #cc66cc;">0.35</span><span style="color: #66cc66;">)</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #ff0000;">"segoe.ttf"</span>, <span style="color: #0000ff;">$_REQUEST</span><span style="color: #66cc66;">[</span><span style="color: #ff0000;">'progress'</span><span style="color: #66cc66;">]</span> . <span style="color: #ff0000;">"%"</span><span style="color: #66cc66;">)</span>; <span style="color: #808080; font-style: italic;">//I used the Segoe font, you can use any other font!!!</span></li><li style="padding: 0 5px; background-color: #fff; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; </li><li style="padding: 0 5px; background-color: #f9f9f9; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; [url=http://www.php.net/header]<span style="color: #000066;">header</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #ff0000;">"Content-type: image/png"</span><span style="color: #66cc66;">)</span>; &nbsp;<span style="color: #808080; font-style: italic;">//tells the browser that we're viewing an image</span></li><li style="padding: 0 5px; background-color: #fff; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;">&nbsp; &nbsp; [url=http://www.php.net/imagepng]<span style="color: #000066;">imagepng</span>[/url]<span style="color: #66cc66;">(</span><span style="color: #0000ff;">$img</span><span style="color: #66cc66;">)</span>; &nbsp;<span style="color: #808080; font-style: italic;">//shows the image</span></li><li style="padding: 0 5px; background-color: #f9f9f9; line-height: 16px; border-bottom: 1px solid #efefef; border-left: 1px solid #999;"><span style="color: #000000; font-weight: bold;">?></span></li></ol></div>
     
  2. PrincessDracvla

    PrincessDracvla Level I

    Joined:
    Oct 4, 2007
    Messages:
    45
    Likes Received:
    0
    Location:
    France
    Aaahhh I don't speak >____<

    I made a progress bar for getting a pink delfin on neopets but it's just an image and i have different percentage images saved on photobucket. Heh