[SOLVED] Speed 'o' Meter

[mattal999]

i was wondering how i could use:

 

 

to use a $speed variable to make a picture, based on the above, showing this speed with the pointer?

 

thanks

[pocobueno1388]

Well, you could make different pictures of different speeds, then do something like this.

 

<?php

switch ($speed) {
case $speed < 10:
    $img = 'img1.jpg';
    break;
case $speed > 11 && $speed > 25:
    $img = 'img2.jpg';
    break;
case $speed > 26 && $speed > 50:
    $img = 'img3.jpg';
    break;
}

echo "<img src='".$img."'>";

?>

[mattal999]

its a bit of a long winded approach... any other suggestions?

[GingerRobot]

Well, personally id change the picture so that the copy you have saved includes all put the 'pointer'. You could then change the position of the pointer depending on the speed.

 

I think the easiest way to draw the pointer on would be to imagine it as a straight line between two co-ordinates. You take the middle of the speedo as (0,0), and work out the position relative to that for the end of the pointer at speed 0. For example, it might be (-20,30) as a bit of a guess.

 

You could then multiply your co-ordinates by a matrix to produce a rotation. If you multiply your 1x2 co-ordinate matrix by the 2x2 matrix:

cos x    -sin x
sin x    cos x

You'll get a rotation of x degrees anticlockwise.You'll want clockwise rotations, so make x negative. If you've not done the maths before, take a look at:

http://en.wikipedia.org/wiki/Matrix_multiplication &

http://en.wikipedia.org/wiki/Transformation_matrix

 

You'll then need to change the co-ordinates to points on your image.

 

Might sound like a lot of work, but its quite straightforward.

 

 

[Psycho]

If you are talking about an image that changes dynamically in real time then PHP will not work. And, yes you could create an image based upon a speed variable. Just have a base image without the needle and add the needle.

 

You have the start point, in the middle, so you would just need to determine the end point. So you would just need to determine the low and high values, then find where the given speed falls in that area. That would require using some geometry.

[mattal999]

im only in year 9 (13 years of age) and its a bit complex. I might just make multiple images. Its a lot easier.

[GingerRobot]

Well, here's a rough and ready example:

 

<?php
function speedo($speed){//takes a speed from 0-100
$image = imagecreatefromgif('phpfreaks.gif');
$black = ImageColorAllocate($image,0,0,0);
$max_rotation = 300;//the number of degrees to max speed from original
$rotation = $max_rotation/100*$speed;//calc the rotation from 0-300 based on speed from 0-100
$center = 40;//center of picture is 40px in
$start = array(40,40);//start of line
$end = array(-20,30);//end of line
$end = calc_rotate($rotation,$end);//calc co-ordinates after rotation
//add center value to make co-ordinates relative to picture
$end[0] = $end[0] + $center;
$end[1] = $end[1] + $center;

imagesetthickness($image,3);
imageline($image,$start[0],$start[1],$end[0],$end[1],$black);
header('Content-type: image/png');
imagepng($image);
imagedestroy($image);
}
function calc_rotate($angle,$points){//takes an angle and the x,y co-ordinates. Returns new co-ordinates
//[m1 m2] * [$points[0]]
//[m3 m4]   [$points[1]]
$m1 = cos(deg2rad($angle));
$m2 = -sin(deg2rad($angle));
$m3 = sin(deg2rad($angle));
$m4 = cos(deg2rad($angle));
$temp0 = $points[0] * $m1 + $points[1] * $m2;
$temp1 = $points[0] * $m3 + $points[1] * $m4;
$points = array($temp0,$temp1);
return($points);		
}
speedo(50);
?>

Which takes a speed from 0-100 and moves the pointer based on that. I say rough and ready because the image isn't perfect - im not sure the dial is quite centered, so the pointer sometimes stretches too far. Uses the image attached.

 

[attachment deleted by admin]

[mattal999]

thats lush, cheers mate!

[GingerRobot]

No problem. I already had half of it done for something else anyway.