Meta-Tags

Innerhalb des <head>-Tags liefern <meta>-Tags Informationen zu Titel und Herausgeber und ermöglichen den Empfang von Benutzereingaben. Es gibt sechs anpassbare Steuerelemente: Zahlenregler, Farbton-Regler, Boolean-Schalter, Farbwähler, Textfelder und Kombinationsfelder. Jedes Steuerelement erfordert vier Kernattribute sowie steuerspezifische Attribute.

	Kernattribut	Beschreibung
	property	Definiert den Variablennamen, der im Code verwendet werden soll
	label	Die Textbeschriftung, die Benutzern für das Steuerelement angezeigt wird
	type	Gibt den Datentyp an: number, hue, boolean oder color
	default	Legt den Anfangswert des Steuerelements fest
	tooltip*	(*Optional) Zeigt eine kurze Beschreibung an, wenn der Benutzer mit der Maus über das Steuerelement fährt

Zahlenregler

Ein Zahlenregler ermöglicht es dem Benutzer, eine ganze Zahl innerhalb eines bestimmten Bereichs auszuwählen. Er wird häufig verwendet, um Parameter wie die Animationsgeschwindigkeit, die Anzahl der angezeigten Formen oder die Häufigkeit, mit der ein Effekt ausgelöst wird, anzupassen.

<meta property="myNum" label="Number Control" type="number" default="5" min="0" max="10">

In der Praxis sieht es so aus:

Der Zahlenregler benötigt zwei zusätzliche Attribute, um korrekt zu funktionieren:

Attribut	Beschreibung
min	Legt den niedrigsten Wert fest, den der Benutzer wählen kann.
max	Legt den höchsten Wert fest, den der Benutzer wählen kann.

Farbton-Regler

Ein Farbton-Regler ermöglicht es dem Benutzer, einen Farbton mithilfe des HSL-Farbmodells (Hue, Saturation, Lightness) auszuwählen. Er wird typischerweise für einfache Farbanpassungen oder die Auswahl einer Grundfarbe für Effekte und Elemente verwendet.

<meta property="myHuePicker" label="Hue Picker Control" type="hue" default="120" min="0" max="360">

Visuell sieht es so aus:

Damit der Farbton-Regler korrekt funktioniert, sind zwei zusätzliche Attribute erforderlich:

Attribut	Beschreibung
min	Definiert den niedrigsten Farbtonwert, den der Benutzer auswählen kann. Der kleinstmögliche Wert ist 0
max	Definiert den höchsten verfügbaren Farbtonwert. Der größtmögliche Wert ist 360

Boolean

Ein Boolean-Schalter ermöglicht es dem Benutzer, zwischen zwei Zuständen zu wechseln: “an” und “aus”. Seine Werte sind auf entweder 0 (aus) oder 1 (an) beschränkt. Im Gegensatz zu anderen Steuerelementen sind Booleans ausschließlich auf das default-Attribut angewiesen und erfordern keine zusätzliche Konfiguration.

<meta property="myBool" label="Boolean Control" type="boolean" default="0"/>

Sie werden häufig verwendet, um bestimmte Funktionen zu aktivieren oder zu deaktivieren, zwischen Modi zu wechseln (z. B. vertikal und horizontal), Sichtbarkeit und Verhaltensschalter in einer Oberfläche zu steuern oder die Wiedergabe von Effekten auszulösen.

So sieht es in der Anzeige aus:

Farbwähler

Ein Farbwähler ermöglicht es dem Benutzer, eine Farbe auszuwählen, indem er die Farbton-, Sättigungs- und Helligkeitskomponenten innerhalb des Standard-HSL-Farbmodells anpasst. Er ist das gebräuchlichste und standardmäßige Werkzeug zur Farbauswahl, sei es für Hintergründe oder Bildschirmelemente.

<meta property="myColorpicker1" label="Colorpicker Control" type="color" default="#009bde" min="0" max="360"/>

Visuell sieht es so aus:

Der Standardwert für den Farbwähler muss im Hexadezimalformat angegeben werden. Zudem sind zwei zusätzliche Attribute erforderlich:

Attribut	Beschreibung
min	Der minimal auswählbare Wert; der kleinstmögliche Wert ist 0.
max	Der maximal auswählbare Wert; der größtmögliche Wert ist 360.

Textfeld

Ein Textfeld bzw. eine Texteingabe ermöglicht es dem Benutzer, eine Zeichenfolge einzugeben. Die Eingabe wird jedes Mal aktualisiert, wenn ein Zeichen im Feld hinzugefügt oder entfernt wird.

<meta property="myText" label="Text Field" type="textfield" default="yourText">

So sieht es aus:

Attribut	Beschreibung
default	kann keine Zeichen enthalten

Liste

Eine Liste ermöglicht es dem Benutzer, eine Option aus einer vordefinierten Liste von Werten auszuwählen. Der Benutzer kann beispielsweise zwischen verschiedenen Charakteroptionen oder Effekten wählen, um die bevorzugte Option auszuwählen.

<meta property="effectChoice" label="Effect Choice" type="list" values="Low Health,Option1,Option2,Option3"
    default="Low Health"/>

In der Praxis sieht es so aus:

Das values-Attribut definiert alle verfügbaren Optionen, während das default-Attribut angibt, welche Option initial ausgewählt ist.

Attribut	Beschreibung
values	Eine kommagetrennte Liste möglicher Zeichenfolgenoptionen
default	Legt die standardmäßig ausgewählte Option fest. Wenn dieser Wert nicht in der Werteliste enthalten ist, zeigt das Kombinationsfeld keine Standardauswahl an und kann zu Problemen führen.

Weitere Informationen zum Erfassen von Rohdaten aus der Anwendung findest du auf unserer Smart Tags-Seite!