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 Format jpg 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 Format jpg 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 Format jpg 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>