Es gibt bestimmt eingige unter euch, die eine eigene Homepage besitzen und die Besucher mit tollen Effekten verblüffen wollen. Ein Effekt ist, wie ich feststellen durfte, eine Uhr die als Grafik realisiert wurde und die Uhrzeit anzeigt.
Es gibt verschiedene Uhren, Digitale mit LCD Display, Analoge mit Zeigern und Projektionsuhren.
Die einfachstem ist sicherlich die mit dem LCD Bildschirm. Dazu schauen wir uns an, wie man eine Grafik erstellen kann, die immer die aktuellste Uhrzeit anzeigt.
Seit längerem habe ich auf meiner Homepage eine Headergrafik, die dem Besucher das Datum, seine IP Adresse und die Uhrzeit verrät und das jeweils in einer Farbgebung, die zur Aktuellen Tageszeit passt.
[Zur Link-Ansicht bitte registrieren.] [Zur Link-Ansicht bitte registrieren.]
Fangen wir mit den Grundzügen an.
1. Welche Funktionen von PHP benötigen wir?
Um eine Übersicht über alle Funktionen von PHP zu bekommen, die in Frage kämen, rufen wir die passende Seite auf.
[Zur Link-Ansicht bitte registrieren.]
Dort finden wir eine Liste mit allen Funktionen, die zu der sog. GD Library
Bibliothek gehören. Um mit PHP Grafiken erstellen zu können, muss auf deinem Webserver diese Bibliothek installiert sein. Dafür erstellen wir einfach eine PHP Datei mit der Funktion
[Zur Link-Ansicht bitte registrieren.] 2. Ist die GD Library überhaupt installiert? Code:
<?php
var_dump(gd_info());
?>
Am wichtigsten ist erst einmal, ob überhaupt eine Ausgabe erfolgt, dann können wir uns den werten widmen. Auf der Seite der Funktion (s.o.) ist der Rückgabewert der Funktion erklärt.
Übersetzung der wichtigsten Elemente
GD Version: Installierte Version
GIF Read Support: Kann ein GIF Bild mit PHP aufgerufen und bearbeitet werden
GIF Create Support: Kann ein GIF Bild mit PHP erstellt werden
JPG Support: Können JPG Bilder erstellt, gelesen und bearbeitet werden
PNG Support: Können PNG Bilder erstellt, gelesen und bearbeitet werden
Gedächtnisstütze: False heißt nein, True ja
Sollte die GD Library nicht installiert sein, frage deinen Hoster, ob diese aktiviert oder installiert werden kann, oder lagere dieses Script auf einen anderen Hoster aus.
Gut, nachdem wir alles getestet haben, suchen wir uns unsere Funktionen für unsere Digital Uhr raus.
3. Die Bildherstellungsbefehle
Zu aller erst, müssen wir PHP (und später dem Browser) sagen, dass wir gerade ein Bild erstellen, also verändern wir die header
Kopfzeilen informationen.
Code:
header("Content-Type: image/jpeg"); Damit erstellen wir ein jpeg Bild und der Webbrowser interpretiert dieses auch als solches und zeigt uns nicht den Quelltest der Datei an.
Anmerkung: Die Funktion header() ist keine GD Funktion und steht auch ohne die Library zur Verfügung.
Werfen wir einen Blick auf die Seite der
[Zur Link-Ansicht bitte registrieren.] . Wir möchten eine Simple Grafik haben, die die Uhrzeit anzeigt. Dazu wählen wir
[Zur Link-Ansicht bitte registrieren.] .
Diese Funktion benötigt zwei Attribute, einmal die Breite des Bildes in Pixeln und die Höhe in Pixeln.
Code:
$img = imagecreate(200,50);
Warum wir den Rückgabewert in einer Funktion speichern, werdet ihr sehr bald merken.
Als nächstes definieren wir unsere Hintergrundfarbe. Wir möchten diese gerne Schwarz haben. Jedes Kind weiß, dass Schwarz alles Licht absorbiert und daher ist der Hexwert für Schwarz auch #000000, weil werden Rot, noch Blau, noch Grün dargestellt wird. Wir arbeiten aber nicht mit Hex Werten, sondern RGB
Rot Grün Blau Werten, die von 0-255 pro Farbe reichen.
Uns steht dafür die Funktion
[Zur Link-Ansicht bitte registrieren.] zur Verfügung, welche die Farbanweisungen von RGB an das Bild sendet.
Code:
$hintergrund = imagecolorallocate($img,0,0,0);
Zurück zu der Funktion imagecreate und dem speichern in einer Variable. seht ihr hier das erste Attribut? Genau, es ist die Variable, die wir zu Beginn definiert haben.
Die folgenden drei Attribute stellen die numerischen Farbwerte von Schwarz nach RGB dar. (Erklärung: s.o.)
Da wir unsere Uhr gerne Einheitlich haben wollen und wir der Gattung Mensch angehören, die sehr Bequem ist, speichern wir die Farbe unseren Ziffernblattes auch gleich in einer Variable, namens $col für Color
Farbe.
Code:
$col = imagecolorallocate($img,255,0,0);
255 ~100% = Rot
0 ~ 0% = Grün
0 ~ 0% = Blau
Also machen wir das Ziffernblatt Rot. Wenn wir es Grün haben wollen einfach den zweiten wert, der für Grün steht auf 255 ändern und alle anderen auf 0. Bei Blau mit dem dritten Wert ebenso und Mischen macht auch Spaß!
Wir möchten ja eine LCD Uhr bauen, also sollte die Zeitanzeige auch dementsprechend aussehen. Dazu laden wir uns eine LCD Schriftart runter.
[Zur Link-Ansicht bitte registrieren.]
Die packen wir auf unseren FTP Server (Der Übersichthalber in einen Unterordner) und geben den Pfad zu unserer LCD Schriftart in eine Variable ein, denn wir sind ja Bequem und wollen die Schriftart mit nur einer Änderung ändern, nicht wahr?
Code:
$font = "/design/LCD.ttf";
Nun haben wir alles gründlichst vorbereitet und können damit beginnen, unser Bild zu "beschriften".
4. Das malen
Was haben wir hochgeladen? Richtig! eine TTF
True Type Font Datei. Da wir eine Schrift Datei haben, nehmen wir auch eine Imagefunktion, die Schriftarten unterstützt.
[Zur Link-Ansicht bitte registrieren.]
Diese Funktion hat ein paar mehr Attribute, die ich genauer erklären will, da sie das Aussehen besonders beeinflussen.
Code:
imagettftext($img,35,0,425,100,$col,$font,"Herzlich");
Die Attribute und ihre Werte
1. Ressource: Unsere Bildvariable ($img)
2. Size: die Schriftgröße
3. Angle: Winkel in Grad, um die der Test gedreht werden soll
4. X: der x. Pixel, an dem die obere linke ecke des Textes hängen soll
5. Y: der y. Pixel, an dem die obere linke ecke des Textes hängen soll
6. Col: Die Farbe, die wir in der Variable $col gespeichert haben, an dieser Stelle kann auch die Funktion imagecolorallocate() aufgerufen werden
7. Fontfile: Die Schriftart $font, hier kann auch ein String statt einer Variable stehen
8. Text: Das, was letztendlich auf das Bild geschrieben wird
Bei diesen Attributen ist es egal, ob die Funktion sie direkt statisch aus dem Quellcode bekommt oder z.B. aus einer Datenbank. (Wie bei allen PHP Funktionen). Es erhöht nur die Übersichtlichkeit, wenn nicht alle Attribute direkt in der Funktion festgelegt werden.
Code:
imagettftext($img,20,0,10,10,$col,$font,date(H).":".date(i));
Jetzt müssen wir unseren Text nur noch richtig positionieren, indem wir die x und y Werte anpassen. Aber dazu später mehr.
Unser Bild ist jetzt so gut wie Fertig, wir müssen es nur noch "drucken", also an den Browser übermitteln. Wer das Tutorial ganz gelesen hat, weis, dass wir ein JPEG Bild erstellt haben, also geben wir auch ein JPEG Bild aus, und das erledigt die Funktion
[Zur Link-Ansicht bitte registrieren.] für uns. Als Attribut geben wir unsere Bild Variable an ($img) und setzen lediglich ein ?> unten an unser PHP Dokument.
Wenn wir es jetzt aufrufen, erhalten wir eine Schwarze Grafik mit den Maßen 100 * 50 Pixeln, schwarzem Hintergrund und roter Schrift.
Das Bild zeigt die aktuelle Uhrzeit mit führender 0, wenn die z.B. Minuten unter 10 liegen, dann haben wir 09 da stehen, ist besser fürs Layout.
Jetzt werdet ihr sicher gemerkt haben, dass die Zeit noch etwas verrutscht aussieht, also passen wir die Werte der Funktion imagettftext() noch etwas an und kontrollieren unser Ergebnis immer wieder im Browser, und haben bald unsere eigene LCD Uhr mit PHP erstellt.
5. Der komplette Quellcode Code:
header("Content-Type: image/jpeg");
$img = imagecreate(200,50);
$hintergrund = imagecolorallocate($img,0,0,0);
$col = imagecolorallocate($img,255,0,0);
$font = "/design/LCD.ttf";
imagettftext($img,20,0,10,10,$col,$font,date(H).":".date(i));
imagejpeg($img); Diese Uhr könnt ihr ganz einfach über HTML in eure Webseite einbauen:
Wer die Uhr gerne auf einem nicht einheitlichen Hintergrund haben möchte, kann das Bild auch als PNG erstellen und die Funktion
[Zur Link-Ansicht bitte registrieren.] verwenden.
6. AJAX und der Reload Code:
<s*cript language="javascript" type="text/javascript">
function reloadImage() {
var now = new Date();
if (document.images) {
document.images.uhr.src = 'uhr.php';
}
setTimeout('reloadImage()',1000);
}
setTimeout('reloadImage()',1000);
</script> document.images.uhr.src = 'uhr.php';
sorgt dafür, dass das Objekt mit dem Namen "uhr" jede Sekunde neu geladen wird.
Dazu bearbeiten wir noch den HTML Code des Bildes:
Und bauen das alles in eine HTML Datei. Wenn ihr keine Sekunden Anzeige habt, sollte die Reloadtime auf 10 Sekunden erhöht werden, da der Traffic verbrauch nicht so groß ist. Also die 1000 im Script durch eine 0 ergänzen auf 10000.
7. Schlusswort
Dieses Tutorial habe ich einfach mal geschrieben, damit jeder sich eine Uhr bauen kann, und mich nicht immer fragt, ob ich das für ihn/sie mache
Ich bin nicht perfekt und das Tutorial habe ich in einer halben Stunde geschrieben, also können sich Rechtschreib, Syntax und Grammatikfehler eingeschlichen haben.
Dieses Tutorial ist für PHP Benutzer gedacht, die sich schon etwas auskennen und sich bisher nicht an die Image Befehle getraut haben, weil es doch schon einige sind.
Mit freundlichen und Erfolg wünschenden Grüßen
ICEfox
