While working on Mozilla Community Sites project, I encountered an interesting challenge.
This Poll Box may look nice, but there’s a hidden trap for anyone trying to use this on his website. How to make the cute bars look nice and present real value in it? The intuitive response is to create a small PHP script that will be drawing the bar depending on the input value.
It would be easy to do if only the bar itself is a simple green/red dual color rectangle but in this case, it’s something more sophisticated. Because the bar can be used on different backgrounds, I had to extract it from the source and create a translucent PNG file with representation of blends, shadows and smooth edges. The file looks like this:
Great. Now we have the bar, and we can present it on any customized background, but it’s somehow static and cannot be used to present real values, right?
So the next step is to take it into PHP world and here were the trap is hidden. How to take a complex PNG image into PHP file? Unfortunately Google failed to help me here, so I started playing around with GD library (after an hour of searching for how to take alpha value from pixel in Gimp – it’s impossible) and crafted a plan.
I could create two dimension array of pixels (rgba) representing left edge, right edge, green line and red line and bundle it into a bar like this.
Alternative approach would be to cut PNG file and load elements into PHP script on each load, but it will have to cost much more (load file, decode, operations, encode, write) so I sticked to the pixel array map idea.
I was also initially considering trying to create such bar algorithmically (take green, red rectangles, then do the math for shadows, rounded corners, opacity etc.) but even ignoring how much time it would take to write it, the performance of such script would be definitely not satisfying.
So I needed two scripts. First, to take PNG file and build a PHP Array map of pixels. Second, to take such array and paint it on PNG file.
The script with those two functions is my svn repo.
At the top of the script file is an example Array map that will paint the example bar. drawpixelmap() is a function that can take such map as an argument and create PNG image from it.
getpixelmap() is a function that takes PNG image and creates string with PHP Array map.
In result you can take PNG image, save it in PHP, operate on it and draw the final result.
In case of my quest I had to cut the Array map into pieces (left edge, right edge etc.) and do a little bit of math.
The result looks like this:
http://labs.braniecki.net/pollbar.png.php?v=50 
http://labs.braniecki.net/pollbar.png.php?v=30 
http://labs.braniecki.net/pollbar.png.php?v=75 
Of course, any other value from 0-100 range for $v is possible.
So, if you will ever need to dynamically modify PNG file by pixels, those scripts may be useful for you 🙂
btw. I’m writing it from Victoria, where it is snowing for the third day in a row. Not sure how to explain it, but the snow in Canada is different from the one in Europe. Is it possible that its a kind of eggnog influence? 🙂