Analoge meter V2.0
Dit script tekent een analoge meter. De stand van de wijzer, meter id en -caption en de maximale waarde die de meter aankan worden via $_GET verwerkt. Ik kan geen voorbeeld plaatsen (misschien iets voor een of ander mod die deze online wil plaatsen), wel heb ik een screenshot: http://users.telenet.be/tumbler/Gauge/screenshot.jpg (Versie 2) http://users.telenet.be/tumbler/Gauge/screenshot2.jpg Edit Verbeterde versie: - opvullen en uitlijnen van captions - Error boodschappen indien iets fout gaat - Mogelijkheid om met zones te werken: rood, groen en oranje. Zou normaal geen fouten meer mogen weergeven. Script, plaatje en voorbeeld kunnen gedownload worden; alles staat in een zip file http://users.telenet.be/tumbler/Gauge/gauge.zip eventuele bugs zijn nog welkom :)
gauge.php
<?php
// variabelen ophalen
if (isset($_GET['innercaption']) && isset($_GET['outercaption'])){
$innercaption = $_GET['innercaption']; // meter caption
$outercaption = $_GET['outercaption']; // meter id
}
else {
$er="Error 0";
}
if (strlen($innercaption) >7) { // lengte van innercaption groter dan 7
$innercaption = substr ($innercaption, 0, 4)."..."; // afkappen dan!
}
if (strlen($outercaption) >20) { // lengte van outercaption groter dan 20
$outercaption = substr ($outercaption, 0, 17)."..."; // afkappen dan!
}
$strfill=""; //innercaption lengte op 7 tekens zetten
if (strlen($innercaption)<7){
$i = (7-strlen($innercaption))/2;
$strfill = str_repeat (' ', $i);
}
$innercaption = $strfill. $innercaption . $strfill;
$strfill=""; //outercaption lengte op 20 tekens zetten
if (strlen($outercaption)<20){
$i = (20-strlen($outercaption))/2;
$strfill = str_repeat (' ', $i);
}
$outercaption = $strfill. $outercaption . $strfill;
// ophalen en berekenen van analoge en digitale waardes
if (isset($_GET['max']) && is_numeric($_GET['max'])){
$max_value = $_GET['max']; // maximale waarde
}
else {
$er="Error 1";
}
if (isset($_GET['value']) && is_numeric($_GET['value'])){
$dig_value = $_GET['value']; // deze waarde is de digitale waarde
if ($dig_value < 0) {
$er="Error 2";
}
}
else {
$er="Error 3";
}
if ($max_value == 0 && $dig_value== 0) { // als de max waarde gelijk is aan de werkelijke waarde
$er="Error 4";
$dig_value = 1; // dan zetten we ze gelijk aan 1 om errors te voorkomen
$max_value = 1;
}
if ($max_value<$dig_value){ // max waarde kleiner dan werkelijke waarde?
$er = "Error 5";
$dummy = $max_value; // swap deze dan...
$max_value = $dig_value;
$dig_value = $dummy;
}
$max_value = 540/$max_value;
$ana_value = $dig_value * $max_value; // deze waarde is nodig voor de wijzer
$dig_value = round($dig_value,2); // waarde afronden tot op 2 cijfers na de comma
//ophalen van zones
if (isset($_GET['green']) && is_numeric($_GET['green'])){
$zone_green = $_GET['green'];
$total = $zone_green;
$zone_green = 135+((270 * $zone_green)/100);
}
if (isset($_GET['red']) && is_numeric($_GET['red'])){
$zone_red = $_GET['red'];
$total += $zone_red;
$zone_red = 405-((270 * $zone_red)/100);
}
if ($total >100){
$er="Error 6";
}
//Hieronder niets meer veranderen indien je niet
//vertrouwd bent met GD2
header("Content-type: image/jpg");
// meter image ophalen
$bgImg = imageCreateFromJpeg("images/gauge.jpg");
// kleuren aanmaken
$black=imagecolorallocatealpha($bgImg, 20,20,20,0);
$black_alpha=imagecolorallocatealpha($bgImg, 0,0,0,30);
$red = imagecolorallocatealpha($bgImg, 255, 0,0,20);
$white = imagecolorallocatealpha($bgImg, 255, 255,255,0);
$grey = imagecolorallocatealpha($bgImg, 63, 63,63,80);
$green = imagecolorallocatealpha($bgImg, 0, 255,0,0);
$blue = imagecolorallocatealpha($bgImg, 0, 0,255,0);
$light_grey = imagecolorallocatealpha($bgImg, 192, 192,192,50);
$dark_green = imagecolorallocatealpha($bgImg, 0, 100,0,30);
$dark_red = imagecolorallocatealpha($bgImg, 100, 0,0,20);
$dark_orange = imagecolorallocatealpha($bgImg, 100,100,0,20);
$dark_blue = imagecolorallocatealpha($bgImg, 0, 0,200,80);
if ($er){
ImageTTFText($bgImg, 20, 15,30,80,$white,"arial.ttf",$er);
ImageTTFText($bgImg, 20, 15,29,79,$red,"arial.ttf",$er);
}
else{
if($zone_red){
imagefilledarc($bgImg, 70, 62, 90, 90, $zone_red,405, $dark_red, IMG_ARC_PIE); // rode zone
}
if ($zone_red && $zone_green){
imagefilledarc($bgImg, 70, 62, 90, 90, $zone_green, $zone_red, $dark_orange, IMG_ARC_PIE); // oranje zone
}
if($zone_green){
imagefilledarc($bgImg, 70, 62, 90, 90, 135, $zone_green, $dark_green, IMG_ARC_PIE);// groene zone
}
imagefilledarc($bgImg, 70, 62, 82, 82, 135, 405, $black_alpha, IMG_ARC_PIE);
//center plaatsen
imageellipse($bgImg, 69, 61, 20, 20, $light_grey); // highlight
imagefilledellipse($bgImg, 70, 62, 20, 20, $black); //center
//meter captions
ImageTTFText($bgImg, 8, 0,55,108,$white,"tahoma.ttf",$innercaption);
ImageTTFText($bgImg, 9, 0,20,140,$black,"tahoma.ttf",$outercaption); //schaduw voor outercaption
ImageTTFText($bgImg, 9, 0,19,138,$white,"tahoma.ttf",$outercaption); //outercaption
// variabelen voor wijzer berekenen
$p = 270+$ana_value;
$x1 = round((cos(($p-20) * 3.14/360)*15)+70,0); // punt 1 voor polygon
$y1 = round((sin(($p-20) * 3.14/360)*15)+62,0);
$x2 = round((cos(($p+20) * 3.14/360)*15)+70,0); // punt 2 voor polygon
$y2 = round((sin(($p+20) * 3.14/360)*15)+62,0);
$x3 = round((cos($p * 3.14/360)*50)+70,0); // punt 3 voor polygon
$y3 = round((sin($p * 3.14/360)*50)+62,0);
//array maken voor berekende polygon punten
$values = array(
$x1, $y1, // Point 1 (x, y) //wijzer coordinaten
$x2, $y2, // Point 2 (x, y)
$x3, $y3, // Point 3 (x, y)
);
$values_shadow = array(
$x1+1, $y1+1, // Point 1 (x, y) //schaduw voor wijzer
$x2+1, $y2+1, // Point 2 (x, y)
$x3+1, $y3+1, // Point 3 (x, y)
);
// een rode wijzer tekenen
imagefilledpolygon($bgImg, $values_shadow, 3, $black_alpha); // schaduw tekenen
imagefilledpolygon($bgImg, $values, 3, $red); // de wijzer tekenen
// digitale meterstand
ImageTTFText($bgImg, 12, 0,70-(strlen($dig_value)*4),95,$red,"arial.ttf",$dig_value);
ImageTTFText($bgImg, 12, 0,69-(strlen($dig_value)*4),94,$white,"arial.ttf",$dig_value);
}
//laat plaatje zien
ImageJPEG($bgImg,"",100);
//en destroy het weer
imagedestroy($bgImg);
?>
voorbeeld.php
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gauge voorbeeld</title>
<style type="text/css">
<!--
body {
background-color: #666666;
}
body,td,th {
color: #FFFF99;
}
strong {
color:#990000;
}
code {
color:#CCFF66;
background-color: #333333;
}
-->
</style>
</head>
<body>
<h1 align="center">Gauge V2.0</h1>
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td width="200px"><img src="gauge.php?innercaption=out&outercaption=Meter 1&value=3.14&max=10" /></td>
<td valign="top">
<p>
<strong>Innercaption :</strong> out<br />
<strong>Outercaption :</strong> Meter 1 <br />
<strong>Value :</strong> 3.14 <br />
<strong>Max</strong> : 10 <br />
<br /><strong>Link:</strong><br />
<code><img src="gauge.php?innercaption=out&outercaption=Meter 1&value=3.14&max=10" /></code> </p>
</td>
</tr>
<tr>
<td><img src="gauge.php?innercaption=V&outercaption=Meter 2&value=220&max=380&green=60" /></td>
<td valign="top">
<p>
<strong>Innercaption :</strong> V<br />
<strong>Outercaption :</strong> Meter 2 <br />
<strong>Value :</strong> 220<br />
<strong>Max :</strong> 380 <br />
<strong>Green:</strong> 60 (Optional) <br />
<br /><strong>Link:</strong><br />
<code><img src="gauge.php?innercaption=V&outercaption=Meter 2&value=220&max=380&green=60" /></code> </p>
</td>
</tr>
<tr>
<td><img src="gauge.php?innercaption=mV&outercaption=Meter 3&value=0&max=0&green=100" /></td>
<td valign="top">
<p>
<strong>Innercaption :</strong> mV<br />
<strong>Outercaption :</strong> Meter 3 <br />
<strong>Value :</strong> 0 <br />
<strong>Max :</strong> 0 <br />
<strong>Green:</strong> 100 -> (100%) <br />
<br /><strong>Link:</strong><br />
<code><img src="gauge.php?innercaption=mV&outercaption=Meter 3&value=10&max=10&green=100" /></code> </p>
</td>
</tr>
<tr>
<td><img src="gauge.php?innercaption=out&outercaption=Meter 4&value=2&max=4&red=80" /></td>
<td valign="top">
<p>
<strong>Innercaption :</strong> out<br />
<strong>Outercaption :</strong> Meter 4 <br />
<strong>Value :</strong> 2 <br />
<strong>Max :</strong> 4 <br />
<strong>Red :</strong> 80 (Optional)<br />
<br /><strong>Link:</strong><br />
<code><img src="gauge.php?innercaption=out&outercaption=Meter 4&value=2&max=4&red=80" /></code> </p>
</td>
</tr>
<tr>
<td><img src="gauge.php?innercaption=inside&outercaption=Meter 5&value=8&max=10&green=60&red=40" /></td>
<td valign="top">
<p>
<strong>Innercaption :</strong> inside<br />
<strong>Outercaption :</strong> Meter 5 <br />
<strong>Value :</strong> 8 <br />
<strong>Max :</strong> 10 <br />
<strong>Green:</strong> 60 (60%) <br />
<strong>Red :</strong> 40 (40%)<br />
<br /><strong>Link:</strong><br />
<code><img src="gauge.php?innercaption=inside&outercaption=Meter 5&value=8&max=10&green=60&red=40" /></code> </p>
</td>
</tr>
<tr>
<td><img src="gauge.php?innercaption=°F&outercaption=Meter 6&value=20.568&max=30&green=40&red=15" /></td>
<td valign="top"><p>
<strong>Innercaption :</strong> °F<br />
<strong>Outercaption :</strong> Meter 6 <br />
<strong>Value :</strong> 20.568 <br />
<strong>Max :</strong> 30 <br />
<strong>Green:</strong> 40 (40%) <br />
<strong>Red :</strong> 15
(15%) --> 40+15 = 55 => rest will be orange (45%)<br />
<br /><strong>Link:</strong><br />
<code><img src="gauge.php?innercaption=°F&outercaption=Meter 6&value=20.568&max=30&green=40&red=15" /></code>
</p>
</td>
</tr>
<tr>
<td><img src="gauge.php?innercaption=°C&outercaption=Meter 7&value=35&max=30&green=70&red=20" /></td>
<td valign="top">
<p>
<strong>Innercaption :</strong> °C<br />
<strong>Outercaption :</strong> Meter 7 <br />
<strong>Value :</strong> 35 <br />
<strong>Max :</strong> 30 -> watch Value & Max!!! -> Error! <br />
<strong>Green:</strong> 70<br />
<strong>Red :</strong> 20 (rest 10% orange) <br />
<br /><strong>Link:</strong><br />
<code><img src="gauge.php?innercaption=°C&outercaption=Meter 7&value=35&max=30&green=70&red=20" /></code> </p>
</td>
</tr>
<tr>
<td><img src="gauge.php?innercaption=°C&outercaption=Meter 8&value=30&max=35&green=90&red=30" /></td>
<td valign="top">
<p>
<strong>Innercaption :</strong> °C<br />
<strong>Outercaption :</strong> Meter 8 <br />
<strong>Value :</strong> 30 <br />
<strong>Max :</strong> 35 <br />
<strong>Green:</strong> 90<br />
<strong>Red :</strong> 30 (30+90=120%) <br />
<br /><strong>Link:</strong><br />
<code><img src="gauge.php?innercaption=°C&outercaption=Meter 7&value=35&max=30&green=90&red=30" /></code> </p>
</td>
</tr>
<tr>
<td><img src="gauge.php?outercaption=Meter 9&value=30&max=100&green=90&red=10" /></td>
<td valign="top">
<p>
<strong>Innercaption : NONE !!</strong><br />
<strong>Outercaption :</strong> Meter 9 <br />
<strong>Value :</strong> 30 <br />
<strong>Max :</strong> 100 <br />
<strong>Green:</strong> 90<br />
<strong>Red :</strong>10<br />
<br /><strong>Link:</strong><br />
<code><img src="gauge.php?outercaption=Meter 10&value=30&max=100&green=90&red=10" /></code> </p>
</td>
</tr>
<tr>
<td><img src="gauge.php?innercaption=P&outercaption=Meter 10&value=-10&max=6&green=90&red=10" /></td>
<td valign="top">
<p>
<strong>Innercaption :</strong> P<br />
<strong>Outercaption :</strong> Meter 10 <br />
<strong>Value :</strong> -10 <br />
<strong>Max :</strong> 6 <br />
<strong>Green:</strong> 90<br />
<strong>Red :</strong> 10 <br />
<br /><strong>Link:</strong><br />
<code><img src="gauge.php?innercaption=P&outercaption=Meter 10&value=-10&max=6&green=90&red=10" /></code> </p>
</td>
</table>
<p>Errors:</p>
<p> - 0: Caption error <br />
- 1: Max error<br />
- 2: Negative value<br />
- 3: Value error<br />
- 4: Invalid Value and Max parameter <br />
- 5:
Overflow<br />
- 6: Zones overflow </p>
</body>
</html>
[/code]
Reacties
0