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 oder ppm sein, Editor ist immer gleich, die Angabe hat nur Einfluss auf das Beispielbild (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)
  • umbruch kann auf false gesetzt werden, damit wird die Grafik bei ausreichender Bildschirmgröße neben dem Textfeld angezeigt (Standardwert: true)
  • dateimanager kann auf true gesetzt werden, damit wird über dem Element ein Möglichkeit zum speichern und laden von Bildern 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 aber ohne Kopf, Skala 20

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

Beispiel Standard pgm Bild, mit Eingabe, ohne Umbruch, mit Dateimanager, Skala 30

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

Beispiel Standard ppm Bild, mit Eingabe, Skala 30

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

Fehler melden

X

Suche