RGB-Profil

Javascript Blob

Zielgruppe sind IT-StudentInnen und interessierte Amateure. Zum Verständnis der Details sind solide Kenntnisse der gesamten Web-Technologie und fortgeschrittene Kenntnisse von Javascript empfehlenswert.


Live RGB-Profil

Anwendung


Mit der links unten angezeigten Taste können sie Bild-Dateien vom eigenen PC laden und ihr RGB-Profil studieren. Die Bilder werden auf 450x450 Pixel vergrößert oder verkleinert, restliche Flächen werden mit Grau gefüllt.

Mehr Informationen zur → Anwendung auf einer eigenen AnwenderInnen-Version der gleichen Web-App.

Aufgaben und Lösungs-Möglichkeiten



Die Planung erfordert nicht nur Fachwissen sondern insbesondere auch Einfühlungs-Vermögen (in die praktische Anwendung) und Kreativität.

Bei der Planung ergeben sich oft Fragen, die man am besten mit kleinen Experimenten klärt. Gute EntwicklerInnen formulieren dazu klare Vorgaben und verbrauchen für knappe aber gezielte Experimente nur wenig Zeit.

Viele Entscheidungen haben eine Rückwirkung auf andere, daher muss man zumindest den groben Planungs-Prozess oft mehrmals durchlaufen.


Pixel-Grafik Dateien

Canvas bietet die Möglichkeit, mit der Methode drawImage() die Daten einer PixelGrafik zu importieren und beliebig weiter zu bearbeiten. Das setzt voraus, dass die Grafik vorher in ein HTML <img>-Element geladen wurde.

Für eine einfache Demonstration kann man ein konstantes → Bild in die Webseite einbetten und zur Analyse verwenden.

Mit etwas mehr Aufwand kann man aus mehreren (am Server vorbereiteten) Bildern wählen lassen, z.B. mit HTML <a>-HyperLinks oder <button>-Elementen

Wirklich interessant ist für typische AnwenderInnen allerdings nur die Analyse eigener Bilder. Das Javascript File-API bietet die Möglichkeit dazu. Die Programmierung erfordert Kenntnisse, die normalerweise als 'fortgeschritten' eingestuft werden (DOM-Methoden, Event-handler, ...). Mit dieser Methode sollte man die App allerdings nicht starten, weil die AnwenderInnen ja zuerst ein eigenes Bild laden müssen.

Für die hier vorgestellte Lösung wurde entschieden, beim Start der Web-App ein Zufalls-Bild vom Server zu laden und danach die Möglichkeit zur Analyse eigener Bilder zu bieten.


Seiten-Verhältnis

Für eine einfache Demonstration kann man 1 oder mehrere Bilder in einem konstanten Verhältnis Breite/Höhe am Server vorbereiten.

Wenn man eigene Bilder der AnwenderInnen ermöglicht, dann muss man mit unterschiedlichen, evtl. sogar exotischen Seiten-Verhältnissen rechnen.
Man kann das gesamte Layout der Web-App anpassen, die Bilder abschneiden oder so skalieren, dass sie in ein vorgegebenes Layout passen.

Viele AnwenderInnen wissen nicht, dass die Orientierung im Hochformat meist nur in den Meta-Daten der Bilder festgelegt ist. Dies wird von Canvas nicht berücksichtigt. Daher werden solche 'vermeintlichen' Hochformat-Bilder von Canvas in horizontaler Orientierung geladen.

Für die hier vorgestellte Lösung wurde entschieden, die Original-Bilder so zu skalieren, dass sie in ein vorgegebenes quadratisches Layout von 450x450 Pixeln passen.
Die restliche Fläche in grauer Farbe gefüllt.
Das quadratische Seiten-Verhältnis wird auch deshalb bevorzugt, weil es sich besonders einfach rotieren lässt.


Rotation

Es ist zwar nicht unbedingt notwendig, in der Praxis jedoch sehr wünschenswert, das Bild in Schritten von 90° zu rotieren:

Hochformat-Bilder werden von Canvas ohne Berücksichtigung der Meta-Daten importiert und daher meist 'falsch' im Querformat angezeigt. Mit einer Rotation wird dieses Problem einfach beseitigt.

Es ist wünschenswert, sowohl vertikale als auch horizontale Querschnitte zu analysieren. Man könnte dazu 2 getrennte SchiebeRegler und Bild-Cursor-Paare verwenden, oder SchiebeRegler und Cursor horizontal/vertikal umschalten. Am einfachsten ist es jedoch, die Position von SchiebeRegler und Cursor nicht zu verändern, sondern das Bild zu rotieren.

Man kann jedes HTML-Element rasch und einfach mit CSS rotieren, muss dann jedoch zur RGB-Analyse zwischen 4 verschiedenen Algorithmen umschalten. Alternativ muss man bei jeder Rotation die Canvas-Daten umrechnen.

Für die hier vorgestellte Lösung wurde entschieden, zur Bild-Rotation die Canvas-Daten umzurechnen. Die Algorithmen zur Rechts- bzw. Links-Rotation unterscheiden sich nur wenig und lassen sich in einer einzigen Javascript-Funktion unterbringen.
Die Daten-Rotation variabler Bild-Formate ist relativ aufwändig, daher wurde u.a. zur Vereinfachung der Rotation das quadratische Bild-Format gewählt.


Ereignisse (Events)

Im Gegensatz zu einem sequentiell ablaufenden Programm sind viele Punkte dieser Anwendung nicht streng planbar.

Viele anfallende Arbeiten brauchen Zeit, z.B. das erstmalige Laden der Webseite, das Laden einer Bild-Datei, die Übernahme der Bild-Daten in das Canvas-Objekt, die Analyse und Anzeige des Profils, die Rotation der Daten usw.

Die Abfolge der Arbeiten ist jedoch streng geregelt, denn man kann z.B. die Bild-Daten erst dann analysieren, wenn das Bild fertig geladen wurde usw. Daher spielen Ereignisse (Events) und deren Behandlung durch Event-handler-Funktionen eine wichtige Rolle.
Eine Arbeit, die Zeit braucht, wird typisch durch 2 verschiedene Funktionen gesteuert:  Die erste Funktion ordnet die Arbeit an, die zweite Funktion wird als Event-handler erst dann ausgeführt, wenn die Aufgabe erledigt wurde.

Einige Arbeiten werden zwar angeordnet, ihre Ausführung unterliegt jedoch nicht dem Einfluss der Programme, z.B. das Laden einer Datei. Es kann daher passieren, dass sie fehlerhaft oder gar nicht ausgeführt werden. Vorhersehbare Probleme müssen erkannt und behandelt werden:  Die Reaktion ist typisch eine leicht verständliche Information der/des AnwenderIn, nach Möglichkeit auch ein Hinweis zur Lösung des Problems.



Eine selbstverständliche Vorgabe war die maximale Portablilität der Web-App. Daher sind alle verwendeten Resourcen im Quelltext enthalten. Die einzige externe Resource ist das Start-Bild:
Man muss es vom gleichen Server laden wie die Web-App, weil die Verarbeitung sonst aus Sicherheits-Gründen gesperrt ist.
Dazu muss man das Start-Bild im Quelltext der portierten App (hardcoded) angeben. Notfalls startet die App auch ohne Start-Bild, zeigt dann jedoch einen entsprechenden Hinweis an.
Es wäre möglich, ein Start-Bild als → Inline-Bild einzusetzen und die App damit 100% portabel zu machen. Davon wurde abgesehen, weil das den Quelltext von 22 kiB auf ca. 75 kiB vergrößern würde.

▶  Mit diesem Link wird die ↗ Web-App voll funktionsfähig in einem eigenen Browser-Tab geladen. Man kann den Quelltext in einer Text-Datei *.html am eigenen Arbeits-PC speichern und mit jedem modernen Browser öffnen und verwenden. Zum Laden eines Start-Bildes folgen sie den Hinweisen im ausführlich kommentierten Quelltext.