PHP-Grafik

Dynamische Erstellung von Grafiken

Mit PHP kann man dynamisch (Live, nach Bedarf) Grafiken erstellen. Dazu wird meist das PHP-Modul mit der GD-Library erwendet. Es ist (meist als Modul gd2) in jeder aktuellen PHP-Version enthalten. Als Beispiel für eine 'unbedingt' dynamische Grafik dient eine Analog-Uhr.
PHP Hypertext Processor PHP PHP Hypertext Processor, Herstellung von Grafik mit PHP
Live-Grafik Demo-Beispiel einer Analog-Uhr
Programmierung PHP Quelltext der Demo-Grafik
Alternativen Pixel-Grafik mit anderen Programmiersprachen, Objekt-Grafik

Live-Grafik einer Analog-Uhr
Diese Grafik wurde Live mit PHP hergestellt, genauer mit jenen Funktionen, die von der GD-Library (PHP-Modul gd2) bereitgestellt werden.
Mit PHP kann man nicht nur Text (z.B. HTML) herstellen sondern auch binäre Daten wie diese Grafik.
Sie können das Bild mit Rechtsklick als Datei am eigenen PC speichern: In diesem Fall bleibt die Grafik jedoch statisch, d.h. sie ändert sich nicht mit der aktuellen Uhrzeit.

Programmierung

HTML

Eine mit PHP hergestellte Grafik wird genauso eingebettet wie jedes andere Bild.
An Stelle des Pfades zur Grafik-Datei wird der Pfad zum PHP-Programm eingesetzt.
HTML-Quelltext zur Einbettung einer dynamischen Grafik:
<img src="uhr.php" />

PHP-Programm

Mit einer include-Anweisung wird die Bibliothek uhrlib.php eingebunden. Details dazu im nächsten Absatz.

Die header()-Funktionen bewirken die notwendige Änderung des HTTP-Headers.
Mit Content-type wird dem Browser die MIME-Type der nachfolgenden (binären) Daten angekündigt.
Mit Cache-Control wird der Browser angewiesen, die Datei nicht zu speichern, sondern jedesmal neu zu laden.

Als einzige Vorgabe wird mit der Variablen $mr (Radius in Pixeln) die Größe der gesamten Grafik gesteuert.

Mit der GD-Funktion imagecreate() wird das Bild-Objekt $img erzeugt. Dieses Objekt wird in allen folgenden Grafik-Funktionen verwendet.

Alle in der Grafik verwendeten Farben werden mit imagecolorallocate() erzeugt und an Variable $col_* zugewiesen.

Die Grafik wird von hinten nach vorne gemalt: Rahmen und Uhr-Hintergrund sind 2 Kreise, die mit imagefilledellipse() gemalt werden. Der Hintergrund-Radius ist etwas kleiner, daraus ergibt sich eine (dicke) Rand-Linie.

Ein Stunden-Strich wird als Polygon definiert. Dazu werden seine Punkt-Koordinaten in ein Array eingetragen und mit imagefilledpolygon() gemalt. In einer while-Schleife werden die im Array enthaltenen Koordinaten um jeweils 30° gedreht und damit alle 12 Stunden-Striche gemalt.

Mit Funktion getdate() wird die Zeit (vom Server-PC) gelesen. Die Stunden $htim und Minuten $mtim werden später in Zeiger-Winkel umgerechnet.

Die Zeiger werden als Polygone definiert. Ihre Punkt-Koordinaten werden in die jeweiligen Arrays eingetragen, mit der Funktion uhr_rotarr() gedreht und mit imagefilledpolygon() gemalt.
Die Funktion zur Koordinaten-Drehung ist in der Bibliothek uhrlib.php enthalten.

Der Mittelpunkt ist ein kleiner Kreis, der mit imagefilledellipse() gemalt wird.

Der Hintergrund der gesamten Grafik wird mit imageColorTransparent() durchsichtig gemacht. Der Hintergrund wird automatisch mit der ersten definierten Farbe gefüllt (hier $col_body). Diese Farbe wird zuletzt als transparent definiert.

Ausgabe: Mit Funktion imagepng() wird die erzeugte Grafik als Strom (String) binärer Daten an den Webserver gesendet, der sie an den Browser weiterleitet. 		Text-Datei uhr.php
<?php
include_once('uhrlib.php');
header('Content-type: image/png');
header('Cache-Control: no-cache');
$mr=75; // Vorgabe des Radius

// Bild-Objekt
$img=imagecreate(2*$mr+1,2*$mr+1);

// Farben
$col_body=imagecolorallocate($img,255,216,216);
$col_b=imagecolorallocate($img,240,240,255); // Hintergrund
$col_f=imagecolorallocate($img,0,0,0); // Rahmen
$col_h=imagecolorallocate($img,0,0,0); // h-Striche
$col_hpb=imagecolorallocate($img,0,0,255); // h-Zeiger-b
$col_hpf=imagecolorallocate($img,0,0,0); // h-Zeiger-f
$col_mp=imagecolorallocate($img,0,0,255); // m-Zeiger
$col_m=imagecolorallocate($img,255,0,0); // Mittelpunkt

// Rahmen und Hintergrund
imagefilledellipse($img,$mr,$mr,2*$mr,2*$mr,$col_f);
imagefilledellipse($img,$mr,$mr,2*$mr-5,2*$mr-5,$col_b);

// Stundenstriche
$strich=array($mr-1,10,$mr+1,10,$mr+1,0,$mr-1,0,$mr-1,10);
$w=0;
while($w<360) {
$strot=$strich; // neuer Strich
$z=uhr_rotarr($mr,$mr,$strot,$w); // Strich drehen
imagefilledpolygon($img,$strot,$z,$col_h);
$w+=30; // 30 grad weiter
}

// Server-Zeit
$datim=getdate(time());
$ih=$datim['hours'];
$im=$datim['minutes'];
$is=$datim['seconds'];
$htim=$ih+$im/60+$is/3600;
while($htim>12) {$htim-=12;}
$mtim=$im+$is/60;

// Minutenzeiger
$w=$mtim*360/60; // Zeiger-Winkel
$mzeiger = array($mr,0, $mr-2,$mr, $mr,$mr+2, $mr+2,$mr, $mr,0);
$z=uhr_rotarr($mr,$mr,$mzeiger,$w); // Zeiger drehen
imagefilledpolygon($img,$mzeiger,$z,$col_mp);

// Stundenzeiger
$w=$htim*360/12; // Zeiger-Winkel
$hzeiger=array($mr,$mr*0.4, $mr-3,$mr,$mr, $mr+3,$mr+3, $mr,$mr,$mr*0.4);
$z=uhr_rotarr($mr,$mr,$hzeiger,$w); // Zeiger drehen
imagefilledpolygon($img,$hzeiger,$z,$col_hpb);
imagepolygon($img,$hzeiger,$z,$col_hpf);

// Mittelpunkt
imagefilledellipse($img,$mr,$mr,4,4,$col_m);

// Hintergrund transparent
imageColorTransparent($img,$col_body);

// Ausgabe
imagepng($img); // Bild-Datei senden
imagedestroy($img);
?>

PHP-Bibliothek uhrlib.php

Nur die erste Funktion uhr_rotarr() wird vom Uhren-Programm verwendet. Sie rotiert ein → Array von Koordinaten ($a) mit den Winkel $grad um einen Mittelpunkt ($mx,$my). Die Funktion gibt die Anzahl der im Array enthaltenen Punkte $ac zurück.

Alle weiteren Funktionen werden intern von uhr_rotarr() verwendet. Sie stammen aus einer trigonometrischen Bibliothek und wurden für diese spezielle Anwendung leicht modifiziert.

• Funktion uhr_rotx() berechnet eine gedrehte X-Koordinate aus Mittelpunkt, Original-Koordinate und Drehwinkel in Grad.

• Funktion uhr_roty() berechnet eine gedrehte Y-Koordinate aus Mittelpunkt, Original-Koordinate und Drehwinkel in Grad.

• Funktion uhr_x() berechnet eine X-Koordinate aus Mittelpunkt, Radius und Winkel in Grad.

• Funktion uhr_y() berechnet eine Y-Koordinate aus Mittelpunkt, Radius und Winkel in Grad.

• Funktion uhr_radius() berechnet den Abstand eines Punktes ($x,$y) vom Mittelpunkt($mx,$my).

• Funktion uhr_uhrgrad() berechnet eine Richtung in 'Uhr-Grad' aus Mittelpunkt und Punkt.

• Funktion grad_pos() wandelt $grad in einen Wert 0...360 um.

• Funktion uhr_grad() berechnet die Richtung vom Mittelpunkt($mx,$my) zu einem Punkt ($x,$y) in 'mathematischen' Grad.

• Funktion uhr_uhrgrad2grad() berechnet Grad (0..360) aus 'Uhr-Grad'

• Funktion trig_grad2bog() berechnet das Bogenmaß aus dem Gradmaß.

• Funktion trig_bog2grad() berechnet das Gradmaß aus dem Bogenmaß.
Text-Datei uhrlib.php
<?php
function uhr_rotarr($mx,$my,&$a,$grad) {
$ac=floor(count($a)/2); // Anzahl Punkte
for($i=0;$i<count($a);$i+=2) {
$x0=$a[$i];
$y0=$a[$i+1];
$x1=round(uhr_rotx($mx,$my,$x0,$y0,$grad),0);
$y1=round(uhr_roty($mx,$my,$x0,$y0,$grad),0);
$a[$i]=$x1;
$a[$i+1]=$y1;
}
return $ac;
}

// ########## Interne Funktionen ##########

function uhr_rotx($mx,$my,$x,$y,$grad) {
$r=uhr_radius($mx,$my,$x,$y);
$wg=uhr_uhrgrad($mx,$my,$x,$y);
$wg=grad_pos($wg+$grad);
$xd=uhr_x($mx,$my,$r,$wg);
return $xd;
}
function uhr_roty($mx,$my,$x,$y,$grad) {
$r=uhr_radius($mx,$my,$x,$y);
$wg=uhr_uhrgrad($mx,$my,$x,$y);
$wg=grad_pos($wg+$grad);
$yd=uhr_y($mx,$my,$r,$wg);
return $yd;
}
function uhr_x($mx,$my,$r,$uhrgrad) {
$wg = uhr_uhrgrad2grad($uhrgrad);
$wb = trig_grad2bog($wg);
$dx = $r * cos($wb);
return $mx+$dx;
}
function uhr_y($mx,$my,$r,$uhrgrad) {
$wg = uhr_uhrgrad2grad($uhrgrad);
$wb = trig_grad2bog($wg);
$dy = $r * sin($wb);
return $mx-$dy;
}
function uhr_radius($mx,$my,$x,$y) {
$dx=$mx-$x;
$dy=$my-$y;
$r=sqrt($dx*$dx+$dy*$dy);
return $r;
}
function uhr_uhrgrad($mx,$my,$x,$y) {
return grad_pos(90 - uhr_grad($mx,$my,$x,$y));
}
function grad_pos($grad) {
$gp=$grad;
while($gp<0) {$gp+=360;}
while($gp>360) {$gp-=360;}
return $gp;
}
function uhr_grad($mx,$my,$x,$y) {
$dx=$my-$x;
$dy=$my-$y;
if($dx==0) {
if($dy>0) {$wg=90;}
else {$wg=-90;}
}
else {
$k=$dy/$dx;
$wb=atan($k);
$wg=-trig_bog2grad($wb);
}
if($dx>0) {$wg=$wg-180;}
return $wg;
}
function uhr_uhrgrad2grad($uhrgrad) {
return grad_pos(90 - $uhrgrad);
}
function trig_grad2bog($grad) {
return $grad/180*pi();
}
function trig_bog2grad($bog) {
return $bog*180/pi();
}
?>

Alternativen

Pixel-Grafik

Die Analog-Uhr wurde als Demo-Beispiel gewählt, weil sie ohne weitere Erklärungen als dynamisch - zeitlich veränderlich - bekannt ist. Man kann daran leicht erkennen, dass die Grafik nicht aus einer 'statischen' Datei stammt, sondern von einem Programm Live erzeugt wurde.

Wenn man eine Analog-Uhr darstellen will, dann ist Pixel-Grafik allerdings keine optimale Lösung:
Der Aufwand zur Herstellung ist relativ hoch und muss zur Gänze am Server-PC erbracht werden.
Pixel-Grafik ist eine gute Wahl, wenn das Bild kompliziert ist und jedes einzelne Pixel berechnet werden muss, wie z.B. für eine Grafik der → Mandelbrot-Menge.

Wenn eine Grafik allerdings einen wirklich hohe Aufwand zur Berechnung erfordert, dann sind Programmiersprachen wie → Perl oder → PHP zu langsam: In diesem Fall arbeitet man besser mit der Programmiersprache → C/C++, jedoch mit der gleichen Grafik-Bibliothek in ihrer C/C++ Version.

Objekt-Grafik

Dieses Bild einer Analog-Uhr ist in Objekt-Grafik ausgeführt: Dabei werden keine Pixel gemalt, sondern Objekte definiert, wie z.B. Linien, Kreise , Rechtecke, ...
Außerdem ist es möglich, diese Objekte mit Programmen zu bewegen: Das JavaScript-Programm wird in dieser Datei mitgeliefert und vom Browser des Clients (an ihrem PC) ausgeführt.
Der Quelltext von Objekt-Grafik (→ SVG) und → Javascript-Programm zur Animation wird mit Rechtklick in die Grafik angezeigt.
Objekt-Grafik ist eine gute Wahl, wenn das Bild durch Kombination einfacher geometrischer Objekte darstellbar ist.

● Der Aufwand für den Server-PC ist in diesem Fall wesentlich geringer, das Ergebnis am Client-PC deutlich besser.
Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   PHP   >   Grafik   >   Uhr
Letzte Änderung dieser Seite: 2012-02-24 22:19:18