Before I created the gas log on my site, I was using Green Hybrid to log gas usage/mileage. And since that time, they’ve had a graphic that you could add to your site, or in my case, forum signature that shows your mileage.
But, since I created my own log, I stopped updating Green Hybrid, so the data was out of date. I’ve long wanted to do something like this myself, so I went about creating a basic one last week.
It doesn’t look the best, but it works, and it updates based on the info in my DB. The image code is pretty simple, using the PHP GD functions, and it’s pretty quickly generated. If I ever got a LOT of traffic, I’d probably have the code write the image out to disk and regenerate it every so often, but for now, it’s generated on the fly.
Here’s sanitized code:
header("Content-Type: image/png");
$im = @imagecreatetruecolor(350, 50)
or die("Cannot Initialize new GD image stream");
$background = imagecolorallocate($im, 255, 255, 255);
$im2 = @imagecreatetruecolor(352, 52);
//Image Background
$border = imagecolorallocate($im2, 44, 74, 7);
imagefill($im, 0, 0, $background);
imagefill($im2, 0, 0, $border);
imagecopymerge($im2, $im, 1, 1, 0, 0, 350, 50, 100);
$im = $im2;
imageantialias($im, true);
$src = imagecreatefrompng('gingko.png');
imagecopymerge($im, $src, 1, 1, 0, 0, 48, 48, 100);
//imagecolortransparent($im, $background_color);
//Text Color
$green = imagecolorallocate($im, 88, 138, 21);
$black = imagecolorallocate($im, 0, 0, 0);
$mileage = round($row[1],1);
$miles = round($row[0]) . " Miles Driven";
imagestring($im, 2, 55, 5, "Everybody Staze", $black);
imagestring($im, 2, 55, 25, "http://www.staze.org", $black);
imagestring($im, 4, 225, 5, "I get MPG", $black);
imagestring($im, 5, 271, 5, $mileage, $green);
imagestring($im, 2, 225, 25, $miles, $black);
imagepng($im);
imagedestroy($im);
Obviously the $mileage and $miles variables are populated with a DB query ($row[0] and $row[1]), but I’ve removed that for security reasons. GD is pretty easy to use. I might update the code to use a TTF font, but we’ll see. I don’t think it looks terrible, just a bit… plain. I thought I needed FreeType to do anything real fancy with fonts, but it seems GD MIGHT be able to (if you convert the ttf font to a gdf). We’ll see.
Good luck!
Steve Cochrane says
I have a (Swann) remote security system in Phoenix (which I can view online), and would like to know if my AC is working, and also the outside temperature/humidity etc.
Could you tell me how you display the weather information on your video?
staze says
It’s the weather software I use, which is called WeatherCat (http://trixology.com/), which is Mac only, and requires I always have a computer running. It takes the Webcam image, and overlays the weather info on top of it. You may be able to find something similar if you’re on a PC, but would, again, require a PC to work.
There are no doubt some options out there, but I can’t think of any good ways to do it without keeping a computer running at the location, polling a weather station with interior/exterior temp, and then overlaying that on a captured image from the security system.