De lelievlet op je eigen site

Zet de viewer op de site van je groep, met jullie boot en de quiz op jullie niveau. Het kan op twee manieren: als script in je pagina, of in een iframe.

Als script in je pagina

Het 3D-model is een kleine bibliotheek. Je zet een element op je pagina, geeft het een hoogte, en laat de bibliotheek er een viewer in bouwen. De viewer staat in een eigen shadow DOM: jouw stijlen raken hem niet en zijn stijlen raken jouw pagina niet.

<div id="vlet" style="height:600px"></div>
<script type="module">
  import Lelievlet from 'https://scoutvaardig.nl/lelievlet/lelievlet.js';
  Lelievlet.create(document.getElementById('vlet'), {
    aanpassen: { zeilnummer: '442', naam: 'Fluessen', plaats: 'Zwolle' },
    quiz: { niveau: 2 },
  });
</script>

Het element moet een hoogte hebben (height, aspect-ratio, of een grid- of flexcel met een hoogte): een <div> zonder hoogte blijft 0 pixels hoog. Werk je zonder modules, dan zet lelievlet.iife.js een global Lelievlet.

Of in een iframe

Heeft je site ingelogde gebruikers, zet de viewer dan in een iframe: hij draait dan op deze site en kan niets van jouw pagina zien of aanraken. De configuratie komt na de #, als JSON.

<iframe src='https://scoutvaardig.nl/lelievlet/embed.html#{"aanpassen":{"zeilnummer":"442"},"quiz":{"niveau":2}}'
        style="width:100%; height:600px; border:0"
        sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-downloads"
        allow="fullscreen" title="3D-model van de lelievlet"></iframe>

De belangrijkste instellingen

Alles is optioneel; wat je weglaat, blijft zoals de viewer het zelf heeft. De volledige lijst staat in de README.

Instelling	Wat
`aanpassen.zeilnummer`, `naam`, `plaats`	Het zeilnummer op het grootzeil, de naam en de thuishaven op het boeisel.
`aanpassen.kleuren`, `bakskleur`	De kleuren per verfzone (romp, berghout, boeisel, dolboord, voordek, achterdek, kuip, zwaardkast) en de accentkleur.
`aanpassen.zeilkleur`	De zeilen: `0` helder wit, `10` het gebroken wit van het model, tot `100` heel donker bruin.
`aanpassen.opslaan`	`false`: de viewer onthoudt niets in de browser van de bezoeker.
`quiz.niveau`, `quiz.weg`, `quiz.erbij`	Op welk niveau de quiz opent, en welke vragen eruit of erbij moeten.
`toestand`	Waar de viewer begint: modus, koers, tuig, riemen, aanzicht, een geselecteerd onderdeel of een precies camerastandpunt.
`volledigScherm`, `installeren`	De knoppen voor volledig scherm en installeren als app; `false` haalt ze weg.
`feedback`	Waar een melding naartoe gaat (`{ url }`); `false` haalt Melden uit het i-menu, en de knop om de kleuren van een groep te melden uit Aanpassen.

Twee viewers op één pagina

Ze weten niets van elkaar: een keuze in de ene verandert niets in de andere. De linker is de standaardviewer; de rechter heeft andere kleuren, een ander zeilnummer, de quiz op CWO I, en begint van boven gezien in Roeien met vier riemen.

Wat de viewer teruggeeft

const vlet = Lelievlet.create(element, { … });
await vlet.ready;     // het model is geladen en het eerste beeld staat er
vlet.config;          // de configuratie zoals hij geldt, met alle standaardwaarden ingevuld
vlet.destroy();       // stopt de viewer, geeft het WebGL-geheugen terug en maakt het element leeg
vlet.fullscreen();    // volledig scherm aan/uit (alleen vanuit een klik of toets van de gebruiker)
vlet.get();           // de toestand waarin de viewer nu staat
vlet.set({ modus: 'roeien', commando: 'slag' });   // naar een andere toestand, geanimeerd

Waar de viewer begint, geef je mee als toestand, met dezelfde sleutels:

Lelievlet.create(element, {
  toestand: { modus: 'zeilen', koers: -135, reven: 1, aanzicht: 'zij', selectie: 'hommerring' },
});

Als app

De viewer is ook een app die je kunt installeren: app.html. Vanuit een ingesloten viewer neemt het icoon Installeer als app rechtsonder de boot van jouw pagina mee. Zie de handleiding.

Licentie

Op de site van je groep, vereniging of school mag dat, zolang het niet commercieel is: alles valt onder CC BY-NC-SA 4.0, de code, het model en de beelden. Zet je de bestanden zelf op je site, geef dan de licentie mee; pas je de code aan, dan deel je die aanpassing onder dezelfde licentie. Wat van Scouting Nederland is, staat in de README.