QR-Code mit Objekt-Grafik

QR-Code mit Objekt-Grafik

Zielgruppe sind StudentInnen und ambitionierte Informatik-Amateure
Grundkenntnisse der Informatik sind vorteilhaft.



QR-Code in variabler Größe

Die Grafik zeigt einen QR-Code, d.h. einen einfachen Text, der in einer 2dimensionalen Grafik codiert wurde. Der Code lässt sich u.a. mit Apps lesen, die es kostenfrei für SmertPhones aller gängigen Betriebssysteme gibt.

Größe eines ■ Grafik-Elements:

10x10 Bildpunkte (Pixel)
Die Grafik wird Live von ihrem Browser mit einem Programm in der Programmiersprache → SVG erzeugt. Darin ist die Größe und Position der zahlreichen schwarzen Rechteck-Elemente festgelegt.

Ein Programm ist flexibel: Hier kann man die Größe der Elemente Live einstellen (skalieren).
Die Elemente einer Objekt-Grafik werden unabhängig von ihrer Größe immer so scharf wie möglich angezeigt. Im Gegensatz dazu wird eine Pixel-Grafik bei Skalierung mehr oder weniger unscharf. Bei winziger Größe kann allerdings auch eine Objekt-Grafik (je nach Browser und Version) unscharf werden.

Die Grafik ist in einer eigenständigen Mini-Webseite (Web-App) enthalten, die man mit diesen Links in einem eigenen Browser-Tab laden kann:  QR-Code mit Elementen der Größe  5x510x1020x20  Pixel. Man kann die → HTTP-GET-Argumente in der Adresszeile des Browsers manuell ändern und damit fast jede beliebige Größe einstellen.

QR-Code



Link zur Wikipedia-Seite QR-Code als Pixel-Grafik

SVG Objekt-Grafik


Die Codierung, d.h. die Umwandlung von Text in ein Bitmuster und die Umsetzung dieses Musters in eine Grafik wird hier nicht vorgestellt, weil das über den Rahmen dieser Webseite hinausgeht.

Für fortgeschrittene EntwicklerInnen ist diese Aufgabe relativ einfach lösbar, weil der Algorithmus gut beschrieben ist und man im Internet zahlreiche Beispiele (allerdings sehr unterschiedlicher Qualität) findet.



Die Grafik ist als eigenständige Mini-Webseite (Web-App) programmiert und enthält alle verwendeten Resourcen. Man kann daher den Quelltext in einer Text-Datei *.html am eigenen Arbeits-PC speichern und mit jedem geeigneten Programm anzeigen oder weiter-verarbeiten, z.B. mit einem Browser, → Grafik-Programm oder → Büro-Programm.



Programmierung einer Marke:
<g id="marke">
<rect x="0" y="0" width="7" height="7" fill="black"/>
<rect x="1" y="1" width="5" height="5" fill="white"/>
<rect x="2" y="2" width="3" height="3" fill="black"/>
</g>
Mehrfache Anwendung der vor-programmierten Marke:
<use xlink:href="#marke" x="1" y="1"/>
<use xlink:href="#marke" x="23" y="1"/>
<use xlink:href="#marke" x="1" y="23"/>


Vor-programmiertes Daten-Element:
<rect id="q" x="0" y="0" width="1" height="1" fill="black"/>
Anwendung:
<use xlink:href="#q" x="10" y="8"/>
<use xlink:href="#q" x="12" y="5"/>
... ... ...



Einfache und flexible Skalierung der gesamten Grafik:
<g transform="scale(10,10)">
<!-- Alle Grafik-Elemente -->
</g>
In diesem Beispiel werden alle Daten-Elemente von der Größe 1x1 auf 10x10 Pixel vergrößert.



Für statische ( gleichbleibende) QR-Codes sind Javascript-Programme allerdings nicht sinnvoll.
Im ↑ Live-Beispiel dieser Seite wird Javascript zur Demonstration der interaktiven Änderung der Größe bei maximaler Qualität verwendet. Man könnte auch die gesamte Grafik damit programmieren und so einen eigenen QR-Generator herstellen.



Die SVG-Beispiele dieses Webs sind mehrheitlich in kompakte Mini-Webseiten eingebettet, die alle Resourcen enthalten und ohne Einschränkung portabel sind.



Eine Objekt-Grafik lässt sich mit Javascript-Programmen sowohl herstellen als auch ergänzen oder fast beliebig verändern. Man kann diese Möglichkeit u.a. zur Animation oder zur interaktiven Steuerung verwenden. (→ Beispiele).
Die Programmierung mit Javascript ist zwar generell ein Vorteil von SVG, nicht jedoch für statische QR-Codes.



Im einfachsten Fall kann ein Pixel-Bild aus 16 Mio verschiedenen Farben bestehen. Durch Einschränkung der Anzahl der dargestellten Farben (→ Index- oder Paletten-Farben) kann man viel Speicherplatz sparen. Ein QR-Code braucht nur 2 Farben und wird daher am besten in den Datei-Formaten GIF oder PNG gespeichert.
PNG bietet bessere Methoden zur Kompression und ist bei QR-Codes nur wenig von der Bildgröße abhängig. Ein (z.B. mit → GIMP) optimal komprimierter QR-Code in brauchbarer Größe kommt schon mit ca. 1kiB aus.
Das Datei-Format JPEG ist für QR-Codes nicht geeignet, weil man damit keine Index-Farben verwenden kann und durch Kompression Qualität verliert. Andere Datei-Formate wie BMP sind für die meisten Anwendungen nicht geeignet.