1-Pixel-Grafik

Farbe 
Rot*
Grün*
Blau*
Größe 
Breite*
Höhe*

Die Grafik besteht nur aus einem einzigen Bildpunkt (Pixel). Die angezeigte Bild-Größe wird mit den → CSS-Eigenschaften (width, height) eingestellt.



Kommentar zum Live-Beispiel


Die Programme, mit denen der Bildpunkt in der angegebenen Farbe gemalt und in der gewünschten Größe angezeigt wird, sind in der Programmiersprache → Javascript erstellt.

Die dynamische Grafik ist zusammen mit den Javascript-Programmen in einer Mini-Webseite enthalten, die in diese Seite eingebettet ist, ähnlich wie jedes andere auf einer Webseite angezeigte Bild. Mit diesem Link kann man die ↗ Mini‑Webseite mit der Grafik in einem eigenen Browser-Tab anzeigen. Die 1-Pixel-Grafik wird dabei in der Größe 100x100 angezeigt.


Entwicklung

Es werden 2 verschiedene Technologien vorgestellt, um eine Pixel-Grafik nach variablen Vorgaben zu malen. Die beiden Programm-Beispiele (Javascript + Canvas, PHP + GD) malen das einfachste mögliche Bild aus einem einzigen Pixel.

Es wird gezeigt, wie man eine dynamische Grafik in eine HTML Webseite einbetten kann.

Es wird gezeigt, wie man mit HTML Formular-Elementen ein Programm steuern kann. Dazu werden SchiebeRegler verwendet, weil sie ideal zur Eingabe von Zahlen-Werten geeignet sind.

Javascript + Canvas

HTML + Javascript + Canvas Quelltext

◀   Das Beispiel zeigt den Inhalt der Text-Datei pixel1.html
Sie enthält die minimal erforderlichen HTML-Elemente einer Webseite. Darin ist allerdings nur 1 <canvas>-Element als einziges sichtbares Element enthalten.
Außerdem enthält die Datei den → Javascript-Quelltext mit allen Programmen zum Malen der Grafik und zur Änderung ihrer angezeigten Größe.

Aus diesem Text hat ihr Browser Live eine Mini-Webseite mit Bild hergestellt und angezeigt.

Das Formular mit den zur Steuerung verwendeten SchiebeReglern ist nicht in der Mini-Webseite enthalten. Sie wird durch die übergeordnete (parent)-Webseite ferngesteuert.

Die Mini-Webseite ist auf jedes Betriebssystem portabel und wird mit jedem modernen Browser angezeigt:
▶ Mit diesem Link wird die ↗ Mini-Webseite in einem eigenen Browser-Tab in sichtbarer Größe von 100x100 Pixel angezeigt.
▶ Mit diesem Link wird der zur Herstellung verwendete ↗ Quelltext angezeigt: Mit Klick auf die Zeilen-Nummern werden diese gelöscht. Man kann dann den Text in einer Text-Datei *.html am eigenen Arbeits-PC speichern und verwenden.



Mit RechtsKlick in das ↗ Bild kann man alternativ auch den Quelltext anzeigen, so wie für jede andere Webseite. Alle guten Browser bieten diese Möglichkeit.
Die Kombination dieser beiden Möglichkeiten (Download als binäre Grafik-Datei und Quelltext) ist nur bei einer mit Javascript + Canvas erstellten Grafik möglich.


Child-HTML

In der einzubettenden Datei (= in der Mini-Webseite pixel1.html) ist nur 1 HTML <canvas>-Element enthalten:
<body>
<canvas id="cv1" width="1" height="1">
</canvas>
</body>
Ein eindeutiges id-Attribut dient zur Identifikation des <canvas>-Elements. Zusätzlich wird die gewünschte Breite und Höhe des Elements angeben (hier je 1 Pixel).


Child Javascript

Sie finden alle vorgestellten Funktionen im ↗ Quelltext der eingebetteten Mini-Webseite.
Das HTML <body>-Element enthält ein onload-Attribut. Damit wird jene Funktion angegeben, die nach dem vollständigen Laden des Dokuments auszuführen ist. Diese Methode ist immer empfehlenswert, um einen definierten Anfangs-Zustand herzustellen.
In diesem Fall werden Anfangs-Werte an einige globalen Variablen zugewiesen. Danach wird eine zufällige Farbe berechnet und zuletzt mit Funktion paint() das Canvas-Bild gemalt.

Die Funktion paint() führt die wenigen notwendigen Anweisungen dieser Aufgabe aus:
Mit createImageData() wird ein Bild der angegebenen Größe erzeugt, dessen Pixel-Daten im Array imga.data verwaltet werden. Jedes Pixel wird durch 4 Ganze Zahlen im Bereich 0..255 mit der Bedeutung Rot, Grün, Blau, α angegeben. Zuletzt wird das Bild mit der Methode putImageData() gemalt.
Anschließend wird die angezeigte Größe geändert. Dazu dient das style-Objekt, welches als Sub-Objekt jedes HTML-Elements die Formatierung mit CSS-Eigenschaften erlaubt:
obj.style.width=123+'px';
Dieses Beispiel ändert die angezeigte (!) Breite des adressierten Objekts auf 123 Pixel.



Wenn man durch Klick in die Grafik deren Farbe ändert, dann werden die SchiebeRegler automatisch angepasst, obwohl sie sich in einem anderen (im parent)-Dokument befinden. Wie könnte man das programmieren ?

PHP + GD

PHP-Quelltext

◀   Das Beispiel zeigt den Inhalt der Text-Datei pixel1.php
Mit dem darin enthaltenen PHP-Programm könnte man die Aufgabe dieser Seite alternativ lösen. Aus Sicht der AnwenderInnen wäre kein Unterschied erkennbar.
Ein PHP-Programm wird allerdings am Server-PC ausgeführt. Das Programm erzeugt dort eine binäre Grafik-Datei und sendet sie an den Arbeits-(Clkient)-PC. (→ Diagramm)

• Das Programm beginnt mit der Funktion header() . Damit wird im → HTTP-Response-Header die MIME-Type der nachfolgenden (Grafik)-Daten angekündigt - in diesem Fall GIF, d.h. die Grafik kann eine 'Palette' von 1..256 verschiedenen → Index-Farben verwenden.

• Mit Funktion imagecreate() wird ein Grafik-Objekt (hier: mit der Größe 1x1 Pixel) erzeugt.

• Die Werte der 3 Grundfarben → Rot, Grün, Blau werden entweder mit =0 festgelegt oder nach den mit der HTTP GET-Methode erhaltenen Argumenten. Das Programm verzichtet zur Vereinfachung auf eine Kontrolle (Validierung) der erhaltenen GET-Daten.

• Mit Funktion imagecolorallocate() wird die Hintergrund-Farbe definiert.

• Mit Funktion imagepng() wird die Grafik sofortr an den HTTP-Client (Browser) gesendet (nicht als Datei gespeichert).



Die Einstellung der angezeigten Größe kann nicht durch das PHP-Programm erfolgen, weil es nach Definition dieser Aufgabe ein 1-Pixel-Bild erzeugen soll.
Die angezeigte Größe kann daher nur auf jener Webseite erfolgen, in welche die Grafik eingebettet ist.

Eine fixe Größe kann man mit → CSS-Eigenschaften festlegen, z.B.
<img "src=pixel1.php" style="height:12px; width:89px;"/>
So kann man eine 1-Pixel-Grafik in jeder gewünschten Größe anzeigen.

Alternativ kann man die angezeigte Größe mit einem Javascript-Programm ändern, so wie im Beispiel ↑ Javascript+Canvas gezeigt.



Ein PHP-Programm arbeitet normalerweise als Webserver-Hilfsprogramm. Es belastet den Server-PC und das Netzwerk erheblich mehr als das Absenden einer statischen Datei. Die Javascript+Canvas Technologie verteilt die Aufgaben wesentlich besser und entlastet den Server. Dieses Argument wiegt im Internet schwerer als im eigenen Intranet und ist bei oftmals geänderten Anforderungen wichtiger als bei Bildern, die typisch nur 1mal geladen werden.

Die Zeit zwischen Anforderung der Grafik mit geänderten Anforderungen ist um Größenordnungen länger als mit Javascript+Canvas. Die Ausführungs-Zeit zumindest von so einfachen Programmen ist gegen die Transport-Zeit im Netzwerk vernachlässigbar.

Ein PHP-Programm läuft nur auf dem Server-PC und ist auf einem üblichen Arbeits-PC nicht ausführbar.



Das GD-Modul für PHP ist an jedem professionellen Standard-Server installiert.
Es gibt auch andere (Pixel)-Grafik Bibliotheken, die GD-Library ist allerdings die meist verwendete und eine Art de-facto-Standard.