Live-Änderung einer Pixel-Grafik

Live-Änderung einer Pixel-Grafik

Zielgruppe sind StudentInnen und ambitionierte Informatik-Amateure

Zur Bedienung der Live-Beispiele sind keine besonderen Kenntnisse erforderlich. Zum Verständnis der Programmierung sind Grundkenntnisse von HTML und der jeweiligen Programmiersprache empfehlenswert.


Live-Demonstration

Ganz links zum Vergleich die Original Grafik-Datei. Sie wird von allen vorgestellten Lösungen als Bild-(Daten)-Quelle verwendet.
Die 3 Lösungs-Beispiele verwenden unterschiedliche Methoden, sind jedoch so ähnlich wie möglich programmiert, damit man gleiche und unterschiedliche Teile besser unterscheiden kann.


Die Lösung mit Canvas 'malt' den Zeit-Text in die Grafik und verändert sie damit. Das Programm arbeitet am eigenen Arbeits-PC so schnell, dass man es zur Animation periodisch wiederholen kann.
Details der ↓ Programmierung

Die ↗ Lösung mit PHP wird am Server-PC berechnet und als fertige (veränderte) Pixel-Grafik an den eigenen Arbeits-PC gesendet. Das Programm belastet den Server erheblich und ist daher nicht mehr zeitgemäß.
Details der ↓ Programmierung

Statische Pixel-Grafik-Datei


So wie dieses statische (unveränderliche) Bild sind fast alle Pixel-Grafik-Bilder in Webseiten eingebettet:
In der Bild-Datei (hier campanula.jpg) ist die → Farbe jedes einzelnen Bild-Punkts (Pixels) festgelegt.
Das Webseiten-Dokument enthält allerdings nicht die Bild-(Farben)-Daten sondern lediglich einen Verweis, welcher angibt, von wo diese Daten anzufordern sind.



Wenn ein Browser-Programm beim 'Lesen' ( Parsen) des HTML-Quelltextes auf einen Verweis trifft, dann wird die Grafik-Datei von der angegebenen Adresse angefordert.
Nach dem Eintreffen der Grafik-Datei werden ihre Bild-Daten gelesen und das fertige Bild wird an Stelle des <img>-Elements eingesetzt.
Alle in einer Webseite enthaltenen Bilder werden daher erst nach der Webseite angefordert.
Details zu → Bildern in Webseiten



Mit den modernen Medien-Methoden kann man flexibel auf die Möglichkeiten der jeweiligen Hardware und Software reagieren. Von einem PC mit großem Bildschirm, ein Notebook, Tablet oder SmartPhone werden z.B. unterschiedliche Bild-Dateien geladen.

Lösung mit SVG-Objekt-Grafik


  Diese Lösung wird bevorzugt:
SVG ist ähnlich einfach zu programmieren wie HTML.
Den Server wird nur sehr wenig belastet.
Das Programm arbeitet am eigenen Arbeits-PC so rasch, dass eine Animation (der angezeigten Zeit) problemlos möglich ist.

Allerdings wird die Aufgabe nicht wörtlich sondern sinngemäß gelöst: Die Pixel-Grafik selbst bleibt hier unverändert, die Zeit wird in einer darüber liegenden Schicht angezeigt.



In der Praxis sollte man zusätzlich die Größe des <iframe>-Elements (width, height) angeben - das wurde hier zur Vereinfachung wegeglassen.


SVG + Javascript Quelltext

◀   Diesen Text hat ihr Browser erhalten und daraus die Mini-Webseite mit dem Bild und dem animierten Text erzeugt.
Mit Klick auf diesen Link wird die ↗ Mini-Webseite in einem eigenen Browser-Tab angezeigt.
Mit Klick auf diesen Link wird der ↗ Quelltext angezeigt.

Diese Lösung ist portabel. Man kann sie herunterladen, mit jedem modernen Browser ansehen oder in eigene Webseiten einbetten. Allerdings muss man dazu 2 Dateien herunterladen:
Die Mini-Webseite enthält nur 3 wesentliche Elemente:
  • Im <style>-Element ist die Formatierung mit → CSS-Regeln festgelegt.
  • Im <script>-Element sind alle verwendeten Javascript-Funktionen enthalten.
  • Im <svg>-Element ist eine Objekt-Grafik enthalten.


Javascript

ist eine Programmiersprache, die für Live-Aufgaben in Webseiten besonders gut geeignet ist.

Mit Javascript → DOM-Methoden kann man auf jedes Element eines Dokuments zugreifen - hier auf alle HTML- und SVG-Elemente. Das wird hier verwendet, um die aktuelle Zeit in das SVG <text>-Element einzutragen.
Dazu muss das betreffende Element bereits existieren:  Das onload-Attribut des <body>-Elements startet die damit angegebene Funktion do_onload() erst nach dem vollständigen Laden aller Elemente.

Die Funktion do_time() trägt den Zeit-Text in das SVG <text>-Element (genauer: in den darin enthaltenen Text-Knoten) ein. Danach wird ein Timeout-Ereignis programmiert, welches nach je 1 Sekunde die gleiche Funktion erneut startet.

Die Funktion isotime() liest die aktuelle Zeit und erzeugt daraus einen String (Text) im → ISO-8601 Standard-Format.

Details zu → Javascript



Manche AnwenderInnen unterbinden in der Browser-Konfiguration die Ausführung von Javascript-Programmen. In diesem Fall zwar das Bild angezeigt, die Zeit wird jedoch weder gelesen noch eingetragen und auch die Animation wird nicht ausgeführt.

Sehr betagte Browser-Programme 'verstehen' noch kein SVG. Wenn sie noch einen solchen Browser haben, dann testen sie die Lösung, wenn nicht: Was könnte passieren ?

Bei extrem hoher Belastung des Prozessors z.B. eines älteren PC) wird die Animation evtl. auf Schritte von 2 Sekunden verzögert. Trotzdem wird jeweils die korrekte PC-Zeit angezeigt.

Wenn die System-Zeit am eigenen Arbeits-PC nicht korrekt eingestellt ist (wenig empfehlenswert), dann wird die falsche Zeit auch von der Mini-Webseite angezeigt.

Schätzen sie den Anteil von EntwicklerInnen, die SVG programmieren können. Fragen sie bekannte Personen, ob sie diese seit 2001 etablierte Technologie beherrschen.

Lösungen mit Canvas-Pixel-Grafik


JS+Canvas
(statisch)
JS+Canvas
(dynamisch)
Hier werden 2 verschiedene Lösungen vorgestellt, die beide mit → Javascript + Canvas programmiert sind:

Links die Minimal-Version: Sie wird zwar dynamisch (Live) erzeugt, bleibt dann jedoch statisch (unverändert).

Rechts die Version mit Animation: In diesem Fall wird die komplette Pixel-Grafik 1mal pro Sekunde neu gemalt.

  Mit → Canvas wird die Aufgabe zu 100% erfüllt. Die Lösungen arbeiten außerordentlich rasch und effizient und belasten den Server nur minimal.



In der Praxis sollte man zusätzlich die Größe der <iframe>-Elemente (width, height) angeben - das wurde hier zur Vereinfachung wegeglassen.


Javascript + Canvas Quelltext (statisch)

◀   Diesen Text hat ihr Browser erhalten und daraus die Mini-Webseite der statischen Lösung erzeugt.
Mit Klick auf diesen Link wird die ↗ Mini-Webseite in einem eigenen Browser-Tab angezeigt.
Mit Klick auf diesen Link wird der ↗ Quelltext angezeigt.

Diese Lösung ist mit einfachen Mitteln nicht portabel:
  • Man kann den ↗ Quelltext (ohne Zeilen-Nummern) in einer einfachen Text-Datei campanula_static.html speichern.
  • Man kann das mit Canvas gemalte Bild canvas.png nur mit Zeit-Text herunterladen.
  • Die ↗ Original Pixel-Grafik-Datei campanula.jpg ist mit einfachen Mitteln nicht zugänglich.

Diese Lösung belastet sowohl den Server als auch den eigenen Arbeits-PC nur minimal.

Die Mini-Webseite enthält nur 3 wesentliche Elemente:
  • Im <style>-Element ist die Formatierung mit → CSS-Regeln festgelegt.
  • Im <script>-Element sind alle verwendeten Javascript-Funktionen enthalten.
  • Im <svg>-Element ist eine Objekt-Grafik enthalten.


Javascript + Canvas Quelltext (dynamisch)

◀   Diesen Text hat ihr Browser erhalten und daraus die Mini-Webseite der statischen Lösung erzeugt.
Mit Klick auf diesen Link wird die ↗ Mini-Webseite in einem eigenen Browser-Tab angezeigt.
Mit Klick auf diesen Link wird der ↗ Quelltext angezeigt.

Diese Lösung ist mit einfachen Mitteln nicht portabel:
  • Man kann den ↗ Quelltext (ohne Zeilen-Nummern) in einer einfachen Text-Datei campanula_dynamic.html speichern.
  • Man kann das mit Canvas gemalte Bild canvas.png nur mit Zeit-Text herunterladen.
  • Die ↗ Original Pixel-Grafik-Datei campanula.jpg ist mit einfachen Mitteln nicht zugänglich.

Diese Lösung belastet den Server minimal und den eigenen Arbeits-PC nur wenig. Der Prozessor wird allerdings merkbar beansprucht, wenn man je nach PC-Leistung 10...1000 Animationen gleichzeitig ausführt.

Die Mini-Webseite enthält nur 3 wesentliche Elemente:
  • Im <style>-Element ist die Formatierung mit → CSS-Regeln festgelegt.
  • Im <script>-Element sind alle verwendeten Javascript-Funktionen enthalten.
  • Das Pixel-Bild wird in das <canvas>-Element gemalt.



Wenn man als 'Muster' eine Pixel-Grafik-Datei verwenden will (so wie für diese Aufgabe verlangt), dann muss man diese in die Webseite einbetten, so wie im Kapitel ↑ Statische Grafik-Datei vorgestellt. Die Pixel-Grafik-Datei muss zur Sicherheit aus der gleichen Domäne (vom gleichen Server) stammen, sonst werden die Canvas-Funktionen evtl. vom Browser blockiert.

Wenn man das Original-Bild nicht für andere Zwecke braucht, dann schaltet man seine Sichtbarkeit mit der → CSS-Eigenschaft display ab. In diesem Fall beansprucht das Bild in der Webseite keinen Platz und man kann es an jeder beliebigen Stelle einsetzen. Ein nicht angezeigtes Bild lässt sich mit einfachen Mitteln auch nicht herunterladen.

Das Original-Bild sollte ein eindeutiges id-Attribut erhalten, damit man es mit Javascript adressieren kann.

<img id="b1" src="bild.png" style="display:none;"/>



Zur Herstellung der Pixel-Grafik braucht man nur 2 Canvas-Anweisungen:
Mit der Methode drawImage() wird das gesamte angegebene (Muster)-Bild in das Canvas-Bild kopiert.
Mit der Methode fillText() wird das Canvas-Bild mit dem Text übermalt.

Die Herstellung des Zeit-Strings ist in die allgemein formulierte (wiederverwendbare) Funktion isotime() ausgelagert.

Die beiden mit Canvas programmierten Lösungen unterscheiden sich nur in einer einzigen Anweisung:
In der animierten Version wird ein Timeout-Ereignis programmiert, mit dem das Bild nach je 1 Sekunde neu gemalt wird.

Details zu → Javascript + Canvas



Manche AnwenderInnen unterbinden in der Browser-Konfiguration die Ausführung von Javascript-Programmen. In diesem Fall wird gar kein Bild angezeigt.
Was kann man tun, um in diesem Fall die statische Original-Pixel-Grafik anzuzeigen, ansonsten jedoch nur das mit Canvas gemalte Bild ?

Veraltete Browser-Programme 'verstehen' noch kein Canvas. Wenn sie noch einen solchen Browser haben, dann testen sie die Lösung, wenn nicht: Was könnte passieren ?

Wie wird die animierte Lösung bei extrem hoher Belastung des Arbeits-PC arbeiten ?  Wird dann die Zeit falsch angezeigt ?

Wie wirkt sich eine falsch eingestellte System-Zeit am eigenen Arbeits-PC aus ?

Schätzen sie den Anteil von EntwicklerInnen, die Canvas programmieren können. Fragen sie bekannte Personen, ob sie diese relativ neue (seit 2006), aber außerordentlich effiziente Technologie beherrschen.

Lösung mit PHP + GD-Bibliothek


→ PHP-Programme werden am Server-PC als Hilfs-Programme für das Webserver-Programm ausgeführt (→ Diagramm).

Das fertige Produkt des Programms sind in diesem Fall binäre Pixel-Dateni, die allerdings nicht als Datei gespeichert, sondern sofort (als 'Datenstrom') an den Browser gesendet werden.

Der Browser erhält bei dieser Lösung binäre Bild-Daten, die sich von denen einer ↑ statischen Pixel-Grafik-Datei nicht unterscheiden.


PHP + GD Quelltext

◀   Dieser Text wurde am Server-PC in ein binäres Programm übersetzt (interpretiert) und sofort ausgeführt.

Das Programm hat einen Strom von binären Pixel-Daten erzeugt, der vom Webserver an ihren Browser gesendet wurde.

Ihr Browser hat die binären Daten erhalten und sie - genauso wie nach Empfang einer ↑ statischen Pixel-Bild-Datei in ein sichtbares Bild umgewandelt (gerendert).

Der PHP-Quelltext enthält nur 8 Anweisungen. Das zeigt, wie mächtig diese bewährte Technologie ist.


Mit Klick auf diesen Link wird der ↗ PHP-Quelltext ausnahmsweise angezeigt. Man kann diesen Text in einer Datei *.php speichern, jedoch auf einem normalen Arbeits-PC nicht ausführen.



Wenn ein Browser-Programm diesen Verweis anfordert, dann wird das PHP-Programm am Server übersetzt und ausgeführt, danach die von ihm erzeugten Pixel-Grafik-Daten an den Browser gesendet (→ Diagramm).

Der Transport der Daten über das Netzwerk (Internet) erfordert typisch um einige Größenordnungen mehr Zeit als die Ausführung des Programms. Daher ist eine Animation mit dieser Technologie ausgeschlossen.



• Mit Funktion strftime() wird die aktuelle Zeit als Text formuliert und an die Variable $s zugewiesen.

• Mit Funktion imagestring() wird der Text $s mit der Farbe $f in die Grafik $img gemalt.

• Mit Funktion imagejpeg() wird die Grafik ausgegeben. Sie als binärer 'Datenstrom' an den Browser gesendet. Es ist weder notwendig noch sinnvoll, die Grafik am Server-PC zu speichern.

Einführung zu den PHP-Grafik-Funktionen, Details zu den PHP-GD-Funktionen.


GD-Bibliothek

PHP ist wie jede andere moderne Programmiersprache modular aufgebaut: Im relativ schlanken Basis-Modul sind alle unbedingt erforderlichen Elemente enthalten. Bei Bedarf kan man zusätzlich spezialisierte Module laden, die man aus einem großen Angebot wählen kann.

Im GD-Modul ist die GD-(Grafik)-Bibliothek enthalten. Sie ist ebenso wie PHP kostenfrei und auf allen halbwegs professionellen Webservern ungefragt geladen (Auskunft darüber beim Webserver-Provider).

Es gibt auch andere Grafik-Module. Das GD-Modul ist jedoch mit Abstand das meist verbreitete. Dieses Web soll auf jedem Standard Webserver laufen, daher wird ausschließlich das GD-Modul verwendet.



Ist es möglich, dass diese PHP-Lösung von einem Browser nicht angezeigt wird ? - Wenn ja, beschreiben sie diese Bedingungen.

Welche System-Zeit wird in das Bild gemalt - jene des Servers oder jene des Arbeits-PC (Client) ?
Was passiert, wenn sich Server und Client in verschiedenen → Zeit-Zonen befinden ?

Schätzen sie den Anteil von EntwicklerInnen, die PHP+GD-PixelGrafik programmieren können. Fragen sie bekannte Personen, ob sie diese etablierte Technologie beherrschen.