i

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"):

Beispielquelltext für die Einbindung des Pixeleditors über das Meta-Tag features

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 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 und steganographie2 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) (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) (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 (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) (Standardwert: false)
  • pgmMarkierung kann auf true gesetzt werden, damit wird bei der Steganographie das versteckte Bild in der pgm-Grafik farblich markiert (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, Skala 30

<div class="pixeleditor" data-filename="" data-config='{"format":"pgm" , "eingabe":"true", "skala":"30", "mausklick":"true", "dateimanager":"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>

Suche

v
13.5.3.3.3
www.inf-schule.de/infschule/dokumentation/kapitel-erstellen/interaktive-elemente/pixeleditor
www.inf-schule.de/13.5.3.3.3

Rückmeldung geben