Grafische Buttons mit Texten

Wieso dynamisch generierte Grafiken und Button

Der Klassiker: grafisches Navigationsmenü

An erster Stelle der Anwendungfälle dynamisch generierter Grafiken, d.h. Grafiken, welche bei der Anzeige oder Erstellung der Website mit variablen Inhalten erzeugt werden, steht das grafische Navigationsmenü. Die Navigationspunkte werden dabei nicht als Text sondern als Bild kodiert, weil bspw. notwendige Textdrehungen, Ausstanzungen, Ränder oder ähnliches mit normalen CSS-Mitteln nicht oder nur browserabhängig realisiert werden können. Ein Beispiel sind die Hauptnavigationspunkte des Webauftritts der Wohnungsbaugesellschaft Lutherstadt Eisleben, deren schwarze Umrandung mit CSS nicht in allen Browsern funktionieren würde.

Plakative Preisauszeichnung - dynamisch generiert

Genauso gern werden dynamisch generierte Bilder für Preisauszeichnungen genutzt. So lässt sich der jeweils aktuelle Preis eines Produktes um wenige Grad gedreht inkl. orangen Preisaufkleber auf ein Produktbild rendern, d.h. in das Produktbild einbetten. An dieser Stelle wird besonders deutlich, wieso diese Grafiken dynamisch generiert werden müssen: Eine Preisänderung im WWS oder dem dazu genutzen CMS mit E-Commerce-Funktionalität wie VIO.Matrix muss sofort nach Aktualisierung der Website online bereit stehen.

Fast immer ausschlaggebend: weiche Übergänge oder Buttonanimation

Grundsätzlich gibt es fast immer einen der folgenden Gründe, welche für dynamisch generierte Grafiken oder Bilder sprechen:

harte Übergänge zwischen Text und Hintergrund sollen vermieden bzw. weich gezeichnet werden
das Erscheinungsbild eines Textes lässt sich mit CSS nicht abbilden
Texte müssen um wenige Grad gedreht, verdreht oder gestaucht werden
Text soll aus einer Grafik ausgestanzt werden
enthaltener Text soll von Robots nicht erkannt werden (siehe Captcha-Schutz)

Die Herausforderung: Wieso Bildbearbeitung nicht weiterhilft

Natürlich könnten alle diese Grafiken von einem Grafiker im Bildbearbeitungsprogramm erstellt und auf einer Website platziert werden. Allerdings müsste bei jeder Änderung eines Textes, einer Zahl, eines Preises oder eines Hintergrundes welcher auf dem anzuzeigenden Bild enthalten ist, die Grafik bzw. das Bild von Hand neu erstellt werden. Zusätzlich muss dies dem betreffenden Redakteur bewusst sein, da inhaltliche Änderungen einer Website dann nicht zwangsläufig zu einer Änderung des betreffendes Bildes führen. Die Herausforderung besteht also darin, einen letztlich variablen Text bei einer Änderung in ein neues Bild zu generieren und dieses an Stelle das "alten" Bildes zu verlinken. Diese "Bilderzeugung" soll letzlich nur dann stattfinden, wenn sich der Text bzw. die variablen Teile des Bildes tatsächlich verändern und nicht bei jedem Seitenaufruf.

Dynamische Grafiken mit VIO.Matrix erzeugen

Zur Erzeugung dynamischer Grafiken mit VIO.Matrix exisitieren grundsätzlich zwei Möglichkeiten:

Generierung auf Grundlage einer SVG-Grafik (Link zum W3C): Die Grafik wird auf Grundlage eines dynamisch generierten SVG-Codes erzeugt und mit Hilfe eines Serialisieres (bspw. Apache Batik) als Bitmapgrafik generiert.
Erzeugung mit Hilfe von ImageMagick: Die statischen und variablen Teile des zu erzeugenden Bildes werden einem ImageMagick-Skript übergeben, welches die gewünschte Bitmap erzeugt.

Beispiel: Dynamischer Menüpunkt aus SVG-Grafik

Bildreferenzierung im Quellcode

Soll das betreffende Bild bei jedem neuen Seitenaufruf generiert werden, genügt die Referenzierung eines entsprechenden VIO.Matrix Unterlayouts:

Unterlayout zur dynamischen Bildgenerierung

Das Unterlayout buttonpic enthält bspw. folgenden SVG-Code (Darstellung des Ordnernamen als roten Welle):

Angabe eines Serialisieres zur dynamischen Bildgenerierung

Damit VIO.Matrix nicht den generierten SVG-Code sondern eine Bitmapgrafik zurückgibt, muss der dazu notwendige Serialisierer, welcher aus dem SVG-Code eine Bitmap-Grafik erzeugt, definiert und angegeben werden. VIO.Matrix liefert von Haus aus keinen passenden Serialisierer mit, da an zu diesem Zweck ein beliebiger SVG-zu-Bitmap-Konvertierer eingebunden werden kann. Im folgenden Beispiel wird davon ausgegangen, dass Apache Batik als Serialisierer genutzt werden soll. Unter dem Menüpunkt Bearbeiten / Pipeline-Definition ... des Quellcodeeditor des Unterlayouts buttonpic kann bspw. der - noch zu definierende - Serialisierer "batik" angegeben werden:

Definition eines Serialisierers zur Erzeugung einer Bitmapgrafik

Nach der Angabe des noch nicht exisitierenden Serialisierers "batik", muss dieser nun definiert werden. Wird bspw. Apache Batik genutzt, kann die Definition wie folgt aussehen (VIO.Matrix Administrator / Hauptlayout / Komponentendefinition ...):

Das Skript batik.sh, welches sich im VIO.Matrix CIS Installationsverzeichnis befinden muss, enthält den folgenden Code und dienst lediglich dazu, den etwas umständlichen Aufruf von Batik aus der Linux-Kommandozeilenumgebung zu vereinfachen :

#! /bin/sh
#
# Shell script to run BATIK, adapted from the Jakarta-Ant project.
#
export JAVA_HOME=/usr/src/j2sdk1.4.2_07/jre/
#
if [ -f $HOME/.batikprc ] ; then
. $HOME/.batikrc
fi
#
# OS specific support. $var _must_ be set to either true or false.
cygwin=false;
darwin=false;
case "`uname`" in
CYGWIN*) cygwin=true ;;
Darwin*) darwin=true ;;
esac
#
if [ -z "$BATIK_HOME" ] ; then
# try to find batik
if [ -d /opt/batik ] ; then
BATIK_HOME=/opt/batik
fi
#
if [ -d ${HOME}/opt/batik ] ; then
BATIK_HOME=${HOME}/opt/batik
fi
#
## resolve links - $0 may be a link to batik's home
PRG=$0
progname=`basename $0`
#
while [ -h "$PRG" ] ; do
ls=`ls -ld "$PRG"`
link=`expr "$ls" : '.*-> $.*$$'`
if expr "$link" : '.*/.*' > /dev/null; then
PRG="$link"
else
PRG="`dirname $PRG`/$link"
fi
done
#
BATIK_HOME=`dirname "$PRG"`
#
fi
#
# For Cygwin, ensure paths are in UNIX format before anything is touched
if $cygwin ; then
[ -n "$BATIK_HOME" ] &&
BATIK_HOME=`cygpath --unix "$BATIK_HOME"`
[ -n "$JAVA_HOME" ] &&
JAVA_HOME=`cygpath --unix "$JAVA_HOME"`
[ -n "$CLASSPATH" ] &&
CLASSPATH=`cygpath --path --unix "$CLASSPATH"`
fi
#
if [ -z "$JAVACMD" ] ; then
if [ -n "$JAVA_HOME" ] ; then
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
# IBM's JDK on AIX uses strange locations for the executables
JAVACMD=$JAVA_HOME/jre/sh/java
else
JAVACMD=$JAVA_HOME/bin/java
fi
else
JAVACMD=java
fi
fi
#
if [ ! -x "$JAVACMD" ] ; then
echo "Error: JAVA_HOME is not defined correctly."
echo " We cannot execute $JAVACMD"
exit
fi
#
if [ -n "$CLASSPATH" ] ; then
LOCALCLASSPATH=$CLASSPATH
fi
#
# add batik.jar, which resides in $BATIK_HOME/build
LOCALCLASSPATH=${BATIK_HOME}/build/batik-rasterizer.jar:$LOCALCLASSPATH
#
# add in the dependency .jar files, which reside in $BATIK_HOME/lib
DIRLIBS=${BATIK_HOME}/lib/*.jar
for i in ${DIRLIBS}
do
# if the directory is empty, then it will return the input string
# this is stupid, so case for it
if [ "$i" != "${DIRLIBS}" ] ; then
if [ -z "$LOCALCLASSPATH" ] ; then
LOCALCLASSPATH=$i
else
LOCALCLASSPATH="$i":$LOCALCLASSPATH
fi
fi
done
#
# For Cygwin, switch paths to Windows format before running java
if $cygwin; then
BATIK_HOME=`cygpath --path --windows "$BATIK_HOME"`
JAVA_HOME=`cygpath --path --windows "$JAVA_HOME"`
LOCALCLASSPATH=`cygpath --path --windows "$LOCALCLASSPATH"`
fi
#
cp $1 $1.svg
$JAVACMD -classpath "$LOCALCLASSPATH" $BATIK_OPTS -Djava.awt.headless=true -jar batik-1.6/batik-rasterizer.jar -m image/png -d $2.png $1.svg
cp $2.png $2
rm $1.svg
rm $2.png

Beispiel: Dynamischer Menüpunkt mit ImageMagick erzeugen

Analog zur Erzeugung dynamischer Grafiken aus SVG-Code, können Bitmapgrafiken mit Hilfe des ImageMagick-Paketes, welches auf den meisten Linuxservern bereits installiert ist, dynamisch erzeugt werden. Die Grundidee ist folgend beschrieben:

Im Unterschied zur oben beschriebenen "SVG-Variante" wird das betreffende Bild einfach direkt verlinkt.
Eine .htaccess-Rule auf dem Webserver prüft, ob das entsprechend referenzierte Bild bereits existiert. Wenn nicht, wird das Bild unter dem angeforderten Dateinamen erzeugt.
Die Erzeugung des dynamischen Bildes erfolgt mit Hilfe eines kleinen Shellskrips, welches - bspw. mit Hilfe des ImageMagick "convert"-Befehles - die Bitmapgrafik erzeugt.

Bildreferenzierung im Quellcode

Das gewünschte Bild wird direkt als Bilddatei referenziert, zur Erzeugung notwendige Informationen werden - hier in einer base64-Kodierung - im Dateinamen übergeben. Als Präfix wird hier das Kürzel "dynpic" verwendet, damit die folgend zu erzeugende .htaccess-Rule das dynamisch zu generierende Bild erkennt und nicht fälschlicherweise beginnt, alle ggf. nicht korrekt referenzierten Bilder dynamisch zu erzeugen.

Prüfung, ob ein referenziertes Bild dynamisch zu erzeugen ist

Lautet der Ordnername bspw. "Test Ordner", wird das folgende Bild referenziert: "dynpicClRlc3QgT3JkbmVy.gif". Eine hier zu schaffende .htaccess-Rule hat nun zu prüfen, ob dieses Bild bereits existiert (dann kann es vom Webserver problemlos ausgegeben werden) oder ob dieses erst erzeugt werden muss.

Findet der Webserver das gewünschte Bild "dynpicClRlc3QgT3JkbmVy.gif" nicht, wird das Shellskript getimg.sh über das CGI mit dem Parameter "ClRlc3QgT3JkbmVy" aufgerufen.

Skript zur Bildgenerierung

Das Skript zur Bildgenerierung muss nun letztlich nur den base64-kodierten Übergabeparameter dekodieren und dann - bspw. mit Hilfe des ImageMagick "convert"-Befehles - die Bitmapgrafik dynamisch generieren. Diese Bitmapgrafik wird unter dem gewünschten Dateinamen im Bildverzeichnis gespeichert und muss damit nicht erneut dynamisch generiert werden. In gewissen Abständen können problemlos alle dynamisch generierten Grafiken dieses Verzeichnisses gelöscht werden, damit nicht mehr benötigte Bitmapdateien keinen unnötigen Speicherplatz verbrauchen.