No reboot required

This technical article demonstrates how to use PHP to create dynamic images, i.e. images that are parametrically controlled.  Ideal for dashboards or where there is a requirement to display values that change in a graphical way.

Background principles

 

 In this example, the position of the slider, the value in the readout and the text to the left of the slider are all controlled by parameters passed into a PHP file.

This file is used in the src tag of an image in an HTML file and the resultant output displayed in the browser.

The image is created by taking a background image and then placing another image within the background and then by displaying text  at suitable locations to give the digital readout and the title.

One question you may be asking yourself is: why bother?  Why not just use Flash or some other tool more easily suited to the task in hand?

One reason would be that you may have users accessing your site via iPhone and you want them to be able to see your spiffy graphics – something that they can’t do if you use Flash.

OK – on with how to create your dynamic image.

Stage 1 – creating the component graphics

I created this “slider” graphic using two image files, one for the background and one for the slider:

 I used free vector files to gain my components and then manipulated them in Adobe Illustrator to give me the two parts.  I then copied them into files in Adobe Photoshop to create the final images of the “control panel” and the “slider”.

The background image is a jpeg and the slider is a PNG with a transparent background and a drop shadow.

You now have your components and are ready to get stuck into some PHP…

Stage 2 – creating the PHP files

GD functions used

The PHP for this gizmo is actually quite simple and relies upon the following GD functions (generally a part of most up-to-date PHP installations):

• imagecreatefromjpeg
  Creates an in-memory image from a specified filename
• imagecopy
  Copies portions of one in-memory image into another
• imageftbbox
  Calculates the size of a string of text of a given font
• imagefttext
  Renders a string of text in a given font onto an in-memory image
• imagejpeg
  Saves an in memory image OR displays it
• imagedestroy
  Reclaims the memory used by an in-memory image

Positioning the slider

In this implementation we know that there are 133 pixels of slider travel and that the value passed in can only be in the range 0 to 100 with 100 being at the top of the slider and 0 at the bottom.

Assuming that $realValue contains the value we want to represent, the following code fragment places the slider in the right place on the control panel background (we know that the vertical offset for the slider is 135 pixels and that the horizontal one is 142):

$realValue = ($value * -1.33) + 135;
$bckImg = imagecreatefromjpeg("slider-backgrnd.jpg");
$pntImg = imagecreatefrompng("slider2.png");
imagecopy($bckImg, $pntImg, 142, $realValue, 0, 0, 32, 57);

The key part here is the imagecopy function which places our slider (32 pixels wide by 57 high) on top of the background.  Because the slider is a PNG file it doesn’t obscure the background and any alpha settings will be honoured.

NOTE:
imagecopymerge may make a mess of the alpha settings, which is why I used imagecopy instead

Positioning the LED text

$font_file = './DS-DIGIB.TTF';
$odo = imageftbbox ( 40 , 0 , $font_file ,
  str_pad($angle, 3, "000", STR_PAD_LEFT) );
$odoWid = $odo[2] - $odo[0];
$odoX = 95 - $odoWid;
imagefttext($bckImg, 40, 0, $odoX, 179, 0x0ef2ff, $font_file,
str_pad($value, 3, "000", STR_PAD_LEFT));

In this code snippet we use imageftbbox to work out how wide our numeric value (padded out to 3 numerals) is in our chosen font.  We can then position it on our in-memory image (we know that the edge of the LED display is 95 pixels to the right)

The title text is positioned in a similar fashion

Displaying the  dynamic image

The image is displayed using the following simple call:

imagejpeg($bckImg, NULL, 90);

The NULL parameter means that the output is to the screen rather than a named file, the 90 is the jpeg quality.

The complete script

The following is the complete script for displaying the dynamic image (excluding displaying the title):

$value = $_GET["value"];
if ($value < 0)
{
    $value = 0;
}
if ($value > 100)
{
    $value = 100;
}      

$realValue = ($value * -1.33) + 135;
$bckImg = imagecreatefromjpeg("slider-backgrnd.jpg");
$pntImg = imagecreatefrompng("slider2.png");

imagecopy($bckImg, $pntImg, 142, $realValue, 0, 0, 32, 57);

$font_file = './DS-DIGIB.TTF';
$odo = imageftbbox ( 40 , 0 , $font_file ,
  str_pad($angle, 3, "000", STR_PAD_LEFT) );
$odoWid = $odo[2] - $odo[0];

$odoX = 95 - $odoWid;

imagefttext($bckImg, 40, 0, $odoX, 179, 0x0ef2ff, $font_file,
  str_pad($value, 3, "000", STR_PAD_LEFT));

imagejpeg($bckImg, NULL, 90);

// Now that we've finished, we can destroy all of the memory based
// images that we've created.

imagedestroy($bckImg);
imagedestroy($pntImg);

Stage 3 – using the script

To use the script (assuming it’s called slider.php) is simple, simply use the following HTML (which could, of course, be created dynamically in PHP):

<img src="slider.php?value=63 " />

NOTE: this code example expects the font file DS-DIGIB.TTF and the 2 image files to be in the same directory as the script slider.php