Custom Counter Things!

[emoKid]

'

So I had some scripts lying around and decided to make my own prettier nano stat banner things.

So far they look like this:

and

(the links go to one's that show the progress bar progressing, Ipsum text, not nano stuff).

 

I figured I'll share how to do it with you all ?

 

Prior to beginning, make sure your host has the following:

- PHP with GD

- cURL (for later on when the actual NaNoWriMo wordcount API is working)

 

The first thing to do is to pic a banner for the NanoStat.

To keep it simple, I'll use this:

(it features Goku from Saiyuki)...

 

Then we need to make a progress bar image (I used 3 different image files in total, but if you really wanted to, you can change it to just use 1 image file).

I made for the background and for the foreground.

 

In a simple graphics editor (I used Pixen on Mac, or MS Paint on Windows), drag the cursor to where you want the progress bar to start. Record the x and y positions. Then drag the cursor to where you want the progress bar to end, and record the x position.

 

The width of the progress bar is the end X position minus the start X position. In my case, the start X was 45 and the end X was 112, so the width of the progress bar was 67 px.

 

With all of the files made and the measurements taken, it's time to implement some code.

 

First we start the PHP file and say we want to display an image:

<?php
/*
* NaNoWriMo Progress Bar
*/
header("Content-type: image/png");

I'm outputting a PNG, so that's why it's image/png. Content-type merely tells the browser what type of file it should render the page as. If you want to output a jpeg, use "image/jpeg" and for gif it would be "image/gif"

 

Next we want to count how many words are in the file (I'll switch this to using NaNo's WordCount API when it starts working, alternatively, you can keep updating latest.txt in case the API does go down, just remember to scramble your file if you are worried about people peeking at your work).

$current = strip_tags(file_get_contents("latest.txt"));
$wordCount = count(preg_split("/[\s]+/", $current)) - 1;

This code opens up "latest.txt" and removes any HTML formatting (if I don't get my laptop back in time, I was going to use an editor that only outputs to HTML). It then splits the file in to an array with each element containing one word (you can add PREG_SPLIT_NO_EMPTY if the word count seems greater than your own). There's a -1 there because it kept returning 1 more than the actual word count (I think because I didn't do PREG_SPLIT_NO_EMPTY, but you can remove it if it is off.

 

Then we want to calculate the meter's width and the percent completed.

$percent = $wordCount / 50000;

$meterwidth = (intval($percent * 67)>0)?intval($percent * 67):1;

$percent = round($percent * 1000) / 10;

The percent is calculated by dividing the number of words by the total number of words desired (in this case, 50,000, you can change this to your own goals). The meterwidth is calculated by multiplying the percentage as a decimal and taking the integer value of it (this actually rounds it down). There's an issue with meter widths of 0, so instead of not displaying the progress bar at all, I set the width to 1px. You can make it not try to execute that line in the code, but I wasn't really thinking at the time and yeah... The Percent displayed is found by multiplying by 1000, rounding, and dividing by 10 to have a single decimal place. It's easy to change if desired.

 

Now for the fun part of creating the image

First thing we want to do is open the base image to use as our canvass. The file name I used was sy_small.png

$im = imagecreatefrompng("sy_small.png");

This single line opens up the image assuming it's in the same directory of the script.

 

Looking back to the start x and y locations, we add them to the script for where to place our stuff.

$xLoc = 45;
$yLoc = 14;

 

Then we start to create the progress bar's.

$green = imagecreatefrompng("green_bar_small.png");
$red = imagecreatefrompng("red_bar_small.png");

This was originally stolen from a Server Status Image script (which is why it's called Green and Red, Green for good and red for holy crap). Red is the progress bar, while green is the background of the progress bar to show how much you have left to go.

 

In order to display the progress bar, we have to copy the progress bar images onto the banner

imagecopyresized($im,$green,$xLoc,$yLoc,0,0,67,10,10,10);
imagecopyresized($im,$red,$xLoc,$yLoc,0,0,$meterwidth,10,10,10);

ImageCopyResized copys part of a desired image onto the banner. The reason I use plain gradients with nothing special is because this will stretch out the gradient to the size desired, which would look ugly if I tried to add some slashes or something. You can add slashes and make the bar's prettier quite easily, but I was too lazy to do so.

 

Next we want to add some text to say how far we've come:

$black = imagecolorallocate($im,0,0,0);
imagestring($im,2,$xLoc,$yLoc-2, $percent.'%',$black);

I chose a bad text color for the background bar, but once it start filling up, it should look better. ImageColorAllocate allows us to create a color to use on the image. The three numbers (0,0,0) tells the computer how much of Red, Green, and Blue to use. If you have photoshop, it's quite easy to find colors, but if not, you can use ColorZilla to find out the RGB values on Firefox. Each value can be between 0 - 255.

ImageString writes the text to the image. the 2 in between $im and $xLoc tells the computer what font size to use. The "$percent.'%'" is what is written to the image. You can also use $wordCount to display the word count. PHP uses "." to concatenate 2 strings. So you could do something like 'Words: ' . $wordCount . ", Finished: " . $percent

$black is the color used (changing the variable name itself will not change the color, you must edit the values in imagecolorallocate). For the hosts that support it, you can use imageTTFtext to make prettier text.

 

And finally we output the image!

imagepng($im);
imagedestroy($im);

imagepng says we want to output all of the image data as a png. You can change this to imagejpeg for JPEG's, imagegif for GIF's and etc. The PHP API gives some more information about parameters for compression.

ImageDestroy frees up memory associated with the image. PHP usually does this by default at the end of the scripts execution, but it's safe to do it in the script as well.

 

So the complete script looks something like:

<?php
/*
* NaNoWriMo Progress Bar
*/
header("Content-type: image/png");

$current = strip_tags(file_get_contents("latest.txt"));
$wordCount = count(preg_split("/[\s]+/", $current)) - 1;


$percent = $wordCount / 50000;
$meterwidth = (intval($percent * 67)>0)?intval($percent * 67):1;
$percent = round($percent * 1000) / 10;

/* get and set more image and font details */
$im = imagecreatefrompng("sy_small.png");

$width = imagesx($im);
$height = imagesy($im);

$xLoc = 45;
$yLoc = 14;

$green = imagecreatefrompng("green_bar_small.png");
$red = imagecreatefrompng("red_bar_small.png");
$white = imagecolorallocate($im,0,0,0);

/* do meter bar */
imagecopyresized($im,$green,$xLoc,$yLoc,0,0,67,10,10,10);
imagecopyresized($im,$red,$xLoc,$yLoc,0,0,$meterwidth,10,10,10);

imagestring($im,2,$xLoc,$yLoc-2, $percent.'%',$white);

/* output png image to browser */
imagepng($im);
imagedestroy($im);
?>

Feel free to change it to help make it faster and stuff. If you image doesn't look good at first, try changing the x and y location values. Also, the imageString has -2 on the y location which fixed problems with my banners, but may cause problems for yours.

 

I hope you enjoyed this post?

[Steve E]

...

I hope you enjoyed this post?

Very cool of you to share. But is Goku in the public domain? Is this Fair Use?

 

Litigiously yours,

-Thoth.

[emoKid]

Very cool of you to share. But is Goku in the public domain? Is this Fair Use?

 

Litigiously yours,

-Thoth.

 

Nope, neither is daisuke niwa...

It could fall under the educational thing, depending on interpretation...

I was planning on changing it when I got my laptop back to a doodle of my main character, but my scanner is incompatible with Linux until then.

You can remove the post until the graphics become "safe" to use if you want...

[Steve E]

...You can remove the post until the graphics become "safe" to use if you want...

Fortunately, that's Steve's call. He's our Admin, guru and all-around fearless leader.

And congratulations on graduating from Newbie to participatory Member.

-Thoth.

[emoKid]

And congratulations on graduating from Newbie to participatory Member.

-Thoth.

YAY! Thanks! I didn't even notice.