Elemente zum Projekt Alle meine Farben
Dieses Paket beinhaltet mehrere Tools zur Lernstrecke "Alle meine Farben".
Das Modul einbinden
Um die Tools nutzen zu können, muss die Einbindung des Moduls über den Meta-Tag features
erfolgen (siehe auch Abschnitt "Javascript"):
Bildfilter
Das Tool wird über folgenden HTML Tag eingebunden:
<bild-filter dataconfig='{ "bild": "rhino", "Expertenmodus" : false, "buttonUmschalten" : true , "showUploadDownload" : true}'></bild-filter>
Konfiguration kann über das Attribut dataconfig
vorgenommen werden, dabei wird die Konfiguration als JSON übergeben, Reihenfolge ist beliebig:
-
bild
gibt den Dateinamen des Bildes an, welches im Formatjpg
im Projektordner vorliegen und die Größe 300x227 Pixel haben muss (Standardwert: rhino) -
Expertenmodus
legt fest, ob direkt der Expertenmodus mit 9 Schiebereglern angezeigt wird (Standardwert: false) -
buttonUmschalten
legt fest, ob der Button zum Umschalten zwischen einfachem Modus und Expertenmodus angezeigt wird (Standardwert: true) -
showUploadDownload
legt fest, ob Upload- und Downloadmöglichkeiten angezeigt werden (Standardwert: false)
Bildgrößen
Das Tool wird über folgenden HTML Tag eingebunden:
<bild-groessen></bild-groessen>
Konfiguration kann über das Attribut dataconfig
vorgenommen werden, dabei wird die Konfiguration als JSON übergeben, Reihenfolge ist beliebig:
-
bild
gibt den Dateinamen eines optionalen Bildes an, welches im Formatjpg
im Projektordner vorliegen und die Größe 300x227 Pixel haben muss
Beispieleinbindung mit dem Bild rhino
Zugehöriger Quellcode:
<bild-groessen dataconfig='{ "bild" : "rhino"}'></bild-groessen>
Bildqualität
Für dieses Tool müssen zuerst die Bilder mit einem Python-Skript aus einem Vorlagenbild erstellt werden.
Im Kapitelordner muss ein Unterordner img
erstellt werden. Dort werden alle Bilder in einem weiteren Unterordner (z.B. gnu
) gespeichert.
Das Tool wird über folgenden HTML Tag eingebunden:
<bild-qualitaet dataconfig='{ "bild" : "gnu"}'></bild-qualitaet>
Konfiguration kann über das Attribut dataconfig
vorgenommen werden, dabei wird die Konfiguration als JSON übergeben, Reihenfolge ist beliebig:
-
bild
gibt den Unterordner der Bilder an (Standardwert: gnu) -
showAufloesung
legt fest, ob die Zeile für die Auflösung angezeigt wird (Standardwert: true) -
showFarbtiefe
legt fest, ob die Zeile für die Farbtiefe angezeigt wird (Standardwert: true) -
indexAufloesung
legt den Index der Startauflösung fest (Wertebereich von 0 bis 17, Standardwert: 13) -
indexFarbtiefe
legt den Index der Startauflösung fest (Wertebereich von 0 bis 5, Standardwert: 4)
Hinweis: Ist die Auflösung oder die Farbtiefe ausgeblendet, so wird der Index 0 automatisch als Standard festgelegt, außer in der Konfiguration werden andere Werte zugewiesen.
Beispieleinbindung mit dem Bild gnu, fehlender Zeile für die Auflösung und gesetzter Auflösungsstufe 3
Zugehöriger Quellcode:
<bild-qualitaet dataconfig='{ "bild" : "gnu", "showAufloesung" : false, "indexAufloesung" : 3}'></bild-qualitaet>
Beispieleinbindung mit dem Bild lok, fehlender Zeile für die Farbtiefe und gesetzter Farbtiefe 5
Zugehöriger Quellcode:
<bild-qualitaet dataconfig='{ "bild" : "lok", "showFarbtiefe" : false, "indexFarbtiefe" : 5}'></bild-qualitaet>
Bildqualität Spiel
Mit diesem Tool können eigene Bilder hochgeladen werden, anschließend werden sie verpixelt und mit einem Regler kann die Auflösung angepasst werden.
Das Tool wird über folgenden HTML Tag eingebunden:
<bild-qualitaet-spiel></bild-qualitaet-spiel>
Farbmischer
Das Tool wird über folgenden HTML Tag eingebunden:
<farb-mischer dataconfig='{ "showHex" : true}'></farb-mischer>
Konfiguration kann über das Attribut dataconfig
vorgenommen werden, dabei wird die Konfiguration als JSON übergeben, Reihenfolge ist beliebig:
-
showHex
kann auf true gesetzt werden, dann werden zusätzlich die Hex-Werte angezeigt (Standardwert: false)
Farbmischer Spiel
Das Tool wird über folgenden HTML Tag eingebunden:
<farbmischer-spiel></farbmischer-spiel>
Konfiguration kann über das Attribut dataconfig
vorgenommen werden, dabei wird die Konfiguration als JSON übergeben, Reihenfolge ist beliebig:
-
profimodus
kann auf true gesetzt werden, dann wird das rechte Farbfeld erst nach einem Klick auf Prüfen aktualisiert (Standardwert: false)
Beispieleinbindung Profimodus
Zugehöriger Quellcode:
<farbmischer-spiel dataconfig='{ "profimodus" : true }'></farbmischer-spiel>
Malen nach Zahlen
Das Tool wird über folgenden HTML Tag eingebunden:
<malen-nach-zahlen dataconfig='{ "farbmischer" : true, "showDownload" : true }'></malen-nach-zahlen>
Konfiguration kann über das Attribut dataconfig
vorgenommen werden, dabei wird die Konfiguration als JSON übergeben, Reihenfolge ist beliebig:
-
farbmischer
legt fest, ob eine weitere, selbst mischbare Farbe in der Farbpalette angezeigt wird (Standardwert: false) -
showDownload
legt fest, ob eine Downloadmöglichkeit angezeigt wird (Standardwert: false)
RGB Viewer
Das Tool wird über folgenden HTML Tag eingebunden:
<rgb-viewer dataconfig='{ "bild" : "rhino"}'></rgb-viewer>
Konfiguration kann über das Attribut dataconfig
vorgenommen werden, dabei wird die Konfiguration als JSON übergeben, Reihenfolge ist beliebig:
-
bild
gibt den Dateinamen des Bildes an, welches im Formatjpg
im Projektordner vorliegen und die Größe 300x227 Pixel haben muss (Standardwert: rhino)
RGB Viewer Theorie
Das Tool wird über folgenden HTML Tag eingebunden:
<rgb-viewer-theorie></rgb-viewer-theorie>