Meta-tags
Inden i <head>-tagget leverer <meta>-tags information om titel og udgiver samt muliggør modtagelse af brugerinput. Der er seks konfigurerbare kontroller: talregulering, farvetone-regulering, boolean-kontakt, farvevælger, tekstfelter og kombobokse. Hver kontrol kræver fire kerneatributter samt kontrolspecifikke attributter.
| Kerneatribut | Beskrivelse | |
|---|---|---|
| property | Definerer variabelnavnet der bruges i koden | |
| label | Tekstetiketten der vises for brugere til kontrollen | |
| type | Angiver datatypen: number, hue, boolean eller color | |
| default | Sætter kontrollingens startværdi | |
| tooltip* | (*Valgfri) Viser en kort beskrivelse, når brugeren holder musen over kontrollen |
Talregulering
Sektion kaldt “Talregulering”En talregulering giver brugeren mulighed for at vælge et heltal inden for et bestemt område. Den bruges ofte til at justere parametre som animationshastighed, antal viste former eller hyppighed af effektaktiveringer.
<meta property="myNum" label="Number Control" type="number" default="5" min="0" max="10">I praksis ser det sådan ud:
Talreguleringen kræver to yderligere attributter for at fungere korrekt:
| Attribut | Beskrivelse |
|---|---|
| min | Sætter den laveste værdi brugeren kan vælge. |
| max | Sætter den højeste værdi brugeren kan vælge. |
Farvetone-regulering
Sektion kaldt “Farvetone-regulering”En farvetone-regulering giver brugeren mulighed for at vælge en farvetone ved hjælp af HSL-farvemodellen (Hue, Saturation, Lightness). Den bruges typisk til enkle farvejusteringer eller valg af en grundfarve til effekter og elementer.
<meta property="myHuePicker" label="Hue Picker Control" type="hue" default="120" min="0" max="360">Visuelt ser det sådan ud:
For at farvetone-reguleringen fungerer korrekt kræves to yderligere attributter:
| Attribut | Beskrivelse |
|---|---|
| min | Definerer den laveste farvetoneværdi brugeren kan vælge. Den mindst mulige værdi er 0 |
| max | Definerer den højeste tilgængelige farvetoneværdi. Den største mulige værdi er 360 |
Boolean
Sektion kaldt “Boolean”En boolean-kontakt giver brugeren mulighed for at skifte mellem to tilstande: “til” og “fra”. Dens værdier er begrænset til enten 0 (fra) eller 1 (til). I modsætning til andre kontroller er booleans udelukkende afhængige af default-attributten og kræver ingen yderligere konfiguration.
<meta property="myBool" label="Boolean Control" type="boolean" default="0"/>De bruges ofte til at aktivere eller deaktivere bestemte funktioner, skifte mellem tilstande (f.eks. lodret og vandret), styre synlighed og adfærdskontakter i en brugerflade eller udløse effektafspilning.
Sådan ser det ud i visningen:
Farvevælger
Sektion kaldt “Farvevælger”En farvevælger giver brugeren mulighed for at vælge en farve ved at justere farvetone-, mætnings- og lyshedskomponenterne inden for standard HSL-farvemodellen. Det er det mest almindelige og standardmæssige værktøj til farvevalg, hvad enten det drejer sig om baggrunde eller skærmelementer.
<meta property="myColorpicker1" label="Colorpicker Control" type="color" default="#009bde" min="0" max="360"/>Visuelt ser det sådan ud:
Standardværdien for farvevælgeren skal angives i hexadecimalt format. Derudover kræves to yderligere attributter:
| Attribut | Beskrivelse |
|---|---|
| min | Den mindst valgbare værdi; den mindst mulige værdi er 0. |
| max | Den højest valgbare værdi; den største mulige værdi er 360. |
Tekstfelt
Sektion kaldt “Tekstfelt”Et tekstfelt giver brugeren mulighed for at indtaste en tegnstreng. Inputtet opdateres, hver gang et tegn tilføjes eller fjernes i feltet.
<meta property="myText" label="Text Field" type="textfield" default="yourText">Sådan ser det ud:
| Attribut | Beskrivelse |
|---|---|
| default | kan ikke indeholde tegn |
En liste giver brugeren mulighed for at vælge en mulighed fra en foruddefineret liste af værdier. Brugeren kan f.eks. vælge mellem forskellige karaktermuligheder eller effekter for at vælge den foretrukne.
<meta property="effectChoice" label="Effect Choice" type="list" values="Low Health,Option1,Option2,Option3" default="Low Health"/>I praksis ser det sådan ud:
values-attributten definerer alle tilgængelige muligheder, mens default-attributten angiver hvilken mulighed der er valgt fra starten.
| Attribut | Beskrivelse |
|---|---|
| values | En kommasepareret liste over mulige strengmuligheder |
| default | Sætter den standardvalgte mulighed. Hvis denne værdi ikke er inkluderet i værdilisten, viser komboboksen ingen standardvalg og kan medføre problemer. |
Yderligere information om hentning af rådata fra applikationen findes på vores Smart Tags-side!