Pixeleditor

Der Bildbetrachter bietet die Möglichkeit pbm, pgm oder ppm Dateien auf inf-schule einzubinden.

Das Modul einbinden

Um den Bildbetrachter nutzen zu können, muss die Einbindung des Moduls über den Meta-Tag features erfolgen (siehe auch Abschnitt "Javascript"):

Das Modul verwenden

Die Verwendung des Bildbetrachters wird über einen HTML-Tag gesteuert, hier ein Beispiel:

<div class="pixeleditor" data-filename="" data-config='{"format":"pgm" , "eingabe":"true", "kopf":"true", "skala":"20"}'></div>

Konfiguration vornehmen

data-filename - Übergabe einer Datei

• Hier kann eine Datei übergeben werden, aus der das Bild geladen wird: Textdatei mit der Endung pbm pgm oder ppm
• Wird einfach das Wort empty übergeben, so wird ein leeres Textfeld angezeigt, welches durch den Besucher mit Inhalten gefüllt werden kann.
• Wird hier nichts übergeben oder fehlt das Attribut, dann wird ein Beispielbild geladen.

data-config - Übergabe der Konfiguration im JSON Format, Reihenfolge beliebig

• format kann pbm, pgm, ppm, steganographie, steganographie2, pbmbinaer, pgmbinaer oder ppmbinaer sein, bei den ersten drei ist der Editor immer gleich, die Angabe hat nur Einfluss auf das Beispielbild; bei steganographie wird neben dem pgm Bild auch noch ein pbm Bild mit der verschlüsselten Information angezeigt (Pixelwert im pgm Bild ungerade -> schwarz, Pixelwert im pgm Bild gerade -> weiß); bei steganographie2 wie bei steganographie aber zusätzlich werden die Zeilen des pbm Bildes als Binärzahlen interpretiert, in Dezimalzahlen umgerechnet und mit dem zugehörigen Asciizeichen angezeigt (ausgelegt auf eine Bildbreite von 8 Pixeln); bei den binären Varianten werden alle Informationen in Bytes angegeben, auch die entsprechenden Whitespaces sind berücksichtigt (Standardwert: pbm)
• eingabe kann true oder false sein und legt fest, ob das Eingabefeld sichtbar sein soll, damit der User das Bild verändern kann (Standardwert: false)
• kopf kann true oder false sein, wenn eingabe auf true und kopf gleichzeitig auf false gesetzt wurde, dann wird ein Eingabefeld mit vereinfachter Syntax eingeblendet (ohne Kopf mit Typ, Größe, Helligkeitsstufen); nicht möglich für binäre Varianten (Standardwert: true)
• skala ist ein Zahlenwert und gibt die Vergrößerung an (Standardwert: 20)
• dateimanager kann auf true gesetzt werden, damit wird über dem Element ein Möglichkeit zum speichern und laden von Bildern angezeigt; nicht möglich für binäre Varianten (Standardwert: false)
• binaerzahlen kann auf true gesetzt werden, damit werden bei steganographie2 die Zweierpotenzen über der Grafik mit den versteckten Informationen angezeigt sowie die einzelnen Bits (Standardwert: false)
• mausklick kann auf true gesetzt werden, damit können einzelne Pixel mit einem Mausklick verändert werden, bei pbm wird der Pixel invertiert, bei den anderen Formaten wird per prompt abgefragt, welchen Wert der Pixel bekommen soll; für die Steganographie kann dieser Wert auch auf kids gesetzt werden, dann kann man im pgm Bild die Pixel anklicken und sie werden um eins erhöht (falls gerade und das maximum noch nicht erreicht) oder um eins verringert (sonst); nicht möglich für binäre Varianten (Standardwert: false)
• pgmMarkierung kann auf true gesetzt werden, damit wird bei der Steganographie das versteckte Bild in der pgm-Grafik farblich markiert (Standardwert: false)
• buttonzeichnen --> wird nichtmehr benötigt, da die Dimensionen des Canvas bei jeder Eingabe aktualisiert werdern (Standardwert: false)
• buttontextformatieren kann auf true gesetzt werden, damit wird unter dem Element ein Button zum formatieren des Textes angezeigt (die Textformatierung wird aber auch bei jedem Klick außerhalb des Textfeldes ausgeführt) (Standardwert: false)
• speicherbedarf kann auf true gesetzt werden, damit wird bei den binären Varianten der Speicherbedarf in Bit, Byte und KiloByte angezeigt (Standardwert: false)

Beispiel Bilddatei einbinden, ohne Eingabe, Skala 15

<div class="pixeleditor" data-filename="test_bild.pbm" data-config='{"format":"pbm" , "eingabe":"false", "skala":"15"}'></div>

Beispiel Standard pbm Bild, mit Eingabe, mit Mausklick-Funktion aber ohne Kopf, Skala 20

<div class="pixeleditor" data-filename="" data-config='{"format":"pbm" , "eingabe":"true", "mausklick":"true", "kopf":"false", "skala":"20"}'></div>

Beispiel Standard pgm Bild, mit Eingabe, mit Mausklick-Funktion, mit Dateimanager, mit Button "Text formatieren", Skala 30

<div class="pixeleditor" data-filename="" data-config='{"format":"pgm" , "eingabe":"true", "skala":"30", "mausklick":"true", "dateimanager":"true", "buttontextformatieren":"true"}'></div>

Beispiel Standard ppm Bild, mit Eingabe, mit Mausklick-Funktion, Skala 30

<div class="pixeleditor" data-config='{"format":"ppm" , "eingabe":"true", "mausklick":"true", "skala":"30"}'></div>

Beispiel Steganographie mit Mausklick-Funktion

<div class="pixeleditor" data-config='{"format":"steganographie" , "eingabe":"true", "mausklick":"true", "skala":"20"}'></div>

Beispiel Steganographie mit Mausklick-Funktion in der Kids-Version und farblicher Markierung in der pgm-Grafik

<div class="pixeleditor" data-config='{"format":"steganographie" , "eingabe":"true", "mausklick":"true", "pgmMarkierung":"true", "skala":"20"}'></div>

Beispiel Steganographie 2 ohne Binärzahlen mit Mausklick-Funktion

<div class="pixeleditor" data-config='{"format":"steganographie2" , "eingabe":"true", "mausklick":"true", "skala":"30"}'></div>

Beispiel Steganographie 2 mit Binärzahlen mit Mausklick-Funktion in der Kids-Version

<div class="pixeleditor" data-config='{"format":"steganographie2" , "eingabe":"true", "mausklick":"kids", "skala":"30", "binaerzahlen":"true"}'></div>

Beispiel pbmbinaer

 <div class="pixeleditor" data-config='{"format":"pbmbinaer", "speicherbedarf":"true", "skala":"30", "dateimanager":"true"}'></div> 

Beispiel pgmbinaer

 <div class="pixeleditor" data-config='{"format":"pgmbinaer", "speicherbedarf":"true", "skala":"30"}'></div> 

Beispiel ppmbinaer

 <div class="pixeleditor" data-config='{"format":"ppmbinaer", "speicherbedarf":"true", "skala":"30"}'></div>