Live data koppelen aan pagina's

Heb je een databron ingesteld? Dan is de volgende stap de waarden ervan op een pagina tonen. In de pagina-editor kan dat op twee manieren:

• Tekstlagen: typ / in een tekstlaag om een of meer live velden, de tijd, het weer of contextwaarden in te voegen.
• Groepen: koppel een groep lagen aan een lijst (een array), zodat de opmaak zich voor elk item herhaalt (bijvoorbeeld vijf komende evenementen, elk op een eigen rij).

Het idee in één minuut

Een databron bevat gestructureerde data, meestal een JSON-object met velden en arrays. Met koppelen wijs je een laag op je pagina naar een specifiek stukje van die data.

• Een tekstlaag kan vaste tekst combineren met een of meer koppelchips. Bijvoorbeeld: Welkom, {firstName}!, waarbij {firstName} een chip is die live wordt ingevuld.
• Een groepslaag is een container die zijn onderliggende lagen herhaalt voor elk item in een array. Bijvoorbeeld: een rij voor elke trein in een vertrekoverzicht.

Je typt nooit zelf -syntax. Druk in een tekstlaag op / om het slash-menu te openen, klik door de data heen en kies het veld dat je wilt. Lumicast regelt de rest.

Een tekstlaag koppelen

Je opent het slash-menu in een tekstlaag op twee manieren:

1. Typ / ergens in de tekst. Het menu opent bij de cursor.
2. Klik op Dynamische data toevoegen in het onderdeel Dynamische data van het rechterpaneel. Lumicast gaat dan voor je de tekstlaag in en opent het menu aan het einde van de bestaande tekst.

Het menu toont alles wat je in de tekst kunt invoegen, in deze volgorde:

Categorie	Wat erin zit
Databronveld	Klik door naar elke databron in deze werkomgeving en vervolgens door de JSON-structuur. Bovenaan een databron kun je ook Laatst bijgewerkt kiezen: het moment waarop die voor het laatst is opgehaald.
Groepveld	Alleen zichtbaar als de laag in een gekoppelde groep staat. Klik door naar de velden van de huidige rij.
Tijd / datum	Tijd, tijd (12 uur), tijd met seconden, datum, datum + tijd, dag, korte dag, maand, korte maand, jaar. Het voorbeeld toont de live waarde.
Begroeting / Aftellen	Een begroeting die met het tijdstip meegaat (goedemorgen / goedemiddag / goedenavond) en een teller die aftelt naar (of optelt vanaf) een datum.
Weer	Temperatuur, gevoelstemperatuur, weersomstandigheden, windsnelheid, luchtvochtigheid, zonsopkomst, zonsondergang, uv-index. Bepaald op basis van de locatie van het scherm.
Groepscontext	Rijnummer, huidige pagina, totaal aantal pagina's. Alleen binnen een gekoppelde groep.
Context	Schermnaam, naam van de werkomgeving, organisatienaam.

Kies een onderdeel en Lumicast voegt op de cursorpositie een chip in. De chip toont de live waarde, zowel op het canvas als op het scherm. Vaste tekst rond de chip blijft gewone tekst. Je kunt voor, na of tussen chips typen, en je kunt zoveel chips in één tekstlaag zetten als je wilt.

Filteren en navigeren met het toetsenbord

Terwijl het menu open is, filter je de zichtbare items door te typen. Met ↑ / ↓ verplaats je de selectie, met Enter kies je, met Backspace (bij een leeg filter) ga je een stap terug en met Esc sluit je het menu zonder je getypte tekst aan te passen.

Een chip bewerken of verwijderen

Klik op een chip om het bubbelmenu te openen:

Wat je in het bubbelmenu ziet, hangt af van de chip:

• Databronchips: tonen de naam van de databron en het veldpad, met een knop Bewerken die het slash-menu opnieuw opent vanaf het bovenliggende pad van de chip. Kies een veld op hetzelfde niveau om te wisselen, klik dieper door of ga met Terug naar het begin om een heel andere databron te kiezen.
• Datum- en tijdchips: kies een standaardnotatie (HH:mm, DD-MM-YYYY, relatief, …) of kies Aangepast en typ je eigen Day.js-notatie.
• Temperatuur / gevoelstemperatuur: wissel tussen °C, °F en K.
• Rijnummer: wissel tussen nummering vanaf 0 en vanaf 1.
• Laatst bijgewerkt: kies een notatie voor het moment waarop de databron voor het laatst is opgehaald.
• Aftellen: kies de doeldatum, een lange of korte stijl, welke eenheden je toont en of de teller na de doeldatum doortelt.
• Schermnaam / naam werkomgeving / organisatienaam, huidige pagina, totaal aantal pagina's: alleen een label, niets in te stellen.

Wil je een chip verwijderen? Selecteer hem (klik erop) en druk op Delete of Backspace. Chips zijn ondeelbaar: je kunt er niet in typen.

Chips opmaken

Een chip neemt het lettertype, de grootte, het gewicht, de kleur en eventuele andere transformaties over van het tekstdeel waarin je hem hebt ingevoegd. Je kunt een chip ook later anders opmaken: selecteer hem en pas in het rechterpaneel lettertype, kleur, vet of cursief toe, net als bij gewone tekst.

Een array van tekstwaarden koppelen

De meeste databronvelden bevatten één waarde, maar sommige zijn arrays van tekstwaarden (bijvoorbeeld een lijst met tags). Kies je zo'n veld, dan voegt de chip de items standaard samen met , .

Gebruik voor arrays van objecten (bijvoorbeeld een lijst met evenementen) een groep. Eén chip kan geen meerdere rijen met objectdata tonen.

De waarde opmaken

In het onderdeel Tekst van het rechterpaneel vind je Teksttransformaties. Transformaties gelden voor het tekstdeel waarop ze staan (dus voor gewone tekst én voor chips daarin). Zie Transformaties voor het volledige overzicht.

Datum- en temperatuurchips hebben in het bubbelmenu hun eigen instellingen voor notatie en eenheid. Een extra transformatie is daar meestal niet nodig.

Een groep aan een lijst koppelen

Gebruik een groep als je een lijst wilt tonen: komende vergaderingen, treinvertrekken, de rijen van een ranglijst of items op een menukaart.

Een groep voeg je niet als element toe. Je maakt hem door bestaande lagen te selecteren en te groeperen. De werkwijze: ontwerp één rij, groepeer die, koppel de groep aan een array en wijs dan elke laag naar het juiste veld van het huidige item.

1. Bouw één rij

Voeg de lagen toe die samen één rij van je lijst vormen. Voor een vertrekbord is dat meestal een tekstlaag voor de tijd, een voor de bestemming en eventueel een voor het spoor. Geef ze de grootte en opmaak die één rij moet krijgen.

2. Groepeer de lagen

Selecteer alle lagen van die rij (shift-klik ze op het canvas of in het lagenpaneel) en groepeer ze. De groep verschijnt als nieuwe bovenliggende laag in het lagenpaneel.

3. Koppel de groep aan een array

1. Selecteer de groep zelf (klik erop in het lagenpaneel, of op de rand ervan op het canvas).
2. Klik in het rechterpaneel, in het onderdeel Databron verbinden, op Databron verbinden.
3. Kies een databron en selecteer een array in de JSON-structuur, bijvoorbeeld departures in een NS-databron. Hier kun je alleen arrays en objecten selecteren; een groep kun je niet aan één losse waarde koppelen.
4. Klik op Wijzigingen toepassen.

Lumicast herhaalt nu alles in de groep, één keer voor elk item in die array.

4. Wijs elke laag naar het juiste veld

Nu de groep gekoppeld is, moet elke laag erin weten welk veld van het huidige item hij toont: de tijd van deze rij, de bestemming van deze rij, enzovoort.

1. Klik in een tekstlaag binnen de groep.
2. Typ / om het slash-menu te openen.
3. Kies Groepveld. De kiezer opent met de structuur van één item uit de array van de groep.
4. Kies het veld dat je wilt (bijvoorbeeld time, destination, platform).

Elke herhaalde rij krijgt automatisch zijn eigen data. Je hoeft geen rijen te nummeren of indexen te schrijven. Is de groep gekoppeld aan departures en leest een laag destination, dan toont elke rij de bestemming van die rij.

Databronveld of groepveld

• Databronveld: kiest uit een hele databron. Op elke rij dezelfde waarde. Gebruik het voor kopteksten, totalen of labels buiten de groep.
• Groepveld: kiest uit het item van de huidige rij. Gebruik het voor alles wat per rij moet verschillen. Alleen zichtbaar als de laag in een gekoppelde groep staat.

Bepalen hoe de groep herhaalt

Zodra de groep gekoppeld is, toont hetzelfde onderdeel Databron verbinden de instellingen die bepalen hoe de lijst wordt opgemaakt:

Instelling	Wat het doet
Richting	Rijen onder elkaar of naast elkaar plaatsen
Tussenruimte (px)	Ruimte tussen de items, in pixels
Items	Hoeveel items er tegelijk te zien zijn. Leeg toont ze allemaal
Stap	Hoeveel items de groep per keer doorschuift. Leeg schuift een hele pagina door (de waarde bij Items)
Overslaan	De eerste N items overslaan
Cyclusinterval (s)	Aantal seconden voordat de groep doorschuift naar de volgende items. Leeg of 0 schuift niet door
Rondom herhalen	Alleen zichtbaar als er een cyclusinterval is ingesteld. Vult de laatste pagina aan met items van het begin van de lijst, in plaats van hem half leeg te laten

Cyclusinterval (s) is handig als je meer items hebt dan er op het scherm passen. Is er in een groep ruimte voor 5 rijen maar bevat de data 30 items, zet Items dan op 5 en het cyclusinterval op (bijvoorbeeld) 8 seconden. De groep toont dan items 1–5, daarna 6–10, daarna 11–15, enzovoort, en begint na de laatste pagina weer opnieuw.

Variabelen voor groepscontext

Staat een laag in een gekoppelde groep, dan verschijnen er drie extra onderdelen in het slash-menu:

Chip	Wat het toont
Rijnummer	Het nummer van de huidige rij (in het bubbelmenu te wisselen tussen nummering vanaf 0 en vanaf 1)
Huidige pagina	Het nummer van de huidige pagina als er een Cyclusinterval (s) is ingesteld (1, 2, 3…)
Totaal aantal pagina's	Het totale aantal pagina's als er een Cyclusinterval (s) is ingesteld

Typisch gebruik van deze cyclusvariabelen: een klein label met Pagina 2 van 6. Een tekstlaag met een van deze chips verschijnt één keer en wordt niet op elke rij herhaald.

Praktijkvoorbeelden

Weerkop

Een tekstlaag met: Het is <weersomstandigheden> en <temperatuur> in <stad>.

• <weersomstandigheden>: slash-menu → Weersomstandigheden.
• <temperatuur>: slash-menu → Temperatuur (wissel de eenheid in het bubbelmenu van de chip).
• <stad>: slash-menu → Databronveld → je weerdatabron → name.

Vertrekbord voor treinen

Een groep gekoppeld aan departures (de array met de volgende treinen). In de groep staan drie tekstlagen:

• Tijd: slash-menu → Groepveld → plannedDateTime. Klik op de chip → notatie HH:mm.
• Bestemming: slash-menu → Groepveld → direction.
• Spoor: slash-menu → Groepveld → plannedTrack.

Herhaalinstellingen van de groep: Richting verticaal, Items 6, Cyclusinterval (s) 10.

Overzicht van vergaderruimtes met paginateller

Een groep gekoppeld aan rooms, met een cyclusinterval zodat alle ruimtes in pagina's voorbijkomen.

• In de groep: een tekstlaag met een chip Groepveld → name.
• Ook in de groep: een kleine tekstlaag met twee chips, Huidige pagina en Totaal aantal pagina's, met de vaste tekst Pagina / van eromheen. Die verschijnt één keer, niet op elke rij.

Controleren of het werkt

Pagina's zijn altijd live: zodra je een chip invoegt, toont het canvas de echte waarde. Klopt er iets niet?

• Klik op de chip om het bubbelmenu te openen en controleer of hij naar de juiste plek wijst.
• Controleer of je Groepveld (en niet Databronveld) hebt gebruikt voor alles wat per rij moet verschillen.
• Open Data koppelingen en bekijk de status van de laatste update van de databron. Mislukt het ophalen, dan blijft de chip leeg.