Op je pagina moet je een aantal includes (de link en script tags) eenmalig in de <head> tag van je pagina opnemen.
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" href="https://toernooibase.kndb.nl/applet/oerterpapplet2.0/themes/jquery.contextMenu.css" type="text/css" />
<link rel="stylesheet" href="https://toernooibase.kndb.nl/applet/oerterpapplet2.0/themes/hv.jquery.view.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/ui/jquery.easing.1.3_min.js"></script>
<script type="text/javascript" src="https://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/ui/jquery.contextMenu_min_2.3.1.js"></script>
<script type="text/javascript" src="https://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/dcoerterp_view-3.7.1.js"></script>
<script type="text/javascript" src="https://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/jquery.ui.touch-punch.min.js"></script>
<script src='https://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/dambord.js' type='text/javascript'> </script>
<script type='text/javascript'>
$(function() {
divs2applet();
});
</script>
</head>
Vervolgens kun je willekeurig op je pagina een <div> tag opnemen met class = 'applet' waartussen je de PDN plaatst. Deze pdn zal dan automatisch worden omgezet naar een afspeelbare Oerterp applet.
<body>
<div class='applet'>
[Event "Nationale Clubcompetitie KNDB 2013/2014"]
[Site ""]
[White "Dieter van Gortel"]
[Black "Henk Kleinrensink"]
[Result "0-2"]
[GameType "20"]
[Round "8"]
[Date "2014.01.11"]
[WhiteTime ""]
[BlackTime ""]
[WhiteUrl "https://toernooibase.kndb.nl/opvraag/liddetailp.php?SpId=1069"]
[BlackUrl "https://toernooibase.kndb.nl/opvraag/liddetailp.php?SpId=3073"]
[WhitePhotoUrl "https://toernooibase.kndb.nl/Afbeeldingen/Spelers/1069.jpg"]
[BlackPhotoUrl "https://toernooibase.kndb.nl/Afbeeldingen/Spelers/3073.jpg"]
[WhiteFlagUrl "https://toernooibase.kndb.nl/Clublogos/CEMA - De Vaste Zet Geleen.gif"]
[BlackFlagUrl "https://toernooibase.kndb.nl/Clublogos/WSDV Wageningen.gif"]
[WhiteRating "1026"]
[BlackRating "1202"]
1. 34-30 20-25 2. 31-27 25x34 3. 39x30 17-21 4. 44-39 21-26 5. 50-44 11-17 6. 30-25 19-24 7. 27-21 16x27 8. 32x21 14-20 9. 25x14 10x19 10. 21-16 5-10 11. 37-31 26x37 12. 41x32 6-11 13. 40-34 10-14 14. 44-40 18-23 15. 34-29 23x34 16. 40x20 15x24 17. 49-44 12-18 18. 47-41 8-12 19. 41-37 4-10 20. 46-41 10-15 21. 44-40 18-23 22. 32-28 23x32 23. 37x28 12-18 24. 39-34 7-12 25. 16x7 2x11 26. 41-37 14-20 27. 37-32 1-7 28. 42-37 9-14 29. 37-31 3-9 30. 34-29 20-25 31. 29x20 15x24 32. 43-39 11-16 33. 31-26 18-22 34. 32-27 22x31 35. 36x27 24-29 36. 33x24 19x30 37. 35x24 16-21 38. 27x16 7-11 39. 16x18 13x35 40. 24-20 25-30 41. 20-15 30-34 42. 38-33 9-13 43. 48-42 13-19 44. 42-37 19-24 45. 33-28 35-40 46. 26-21 17x26 47. 28-22 40-44
</div>
</body>
Op deze manier kun je meerdere applets op 1
pagina plaatsen (door het toevoegen van meerdere
<div class='applet'>[JOUW PDN]</div> tags)
. Let wel op dat je er niet teveel applets in
opneemt, omdat het laden van de pagina dan erg traag zal worden
In plaats van PDN in de <div class="applet"> tag, kun je ook een URL zetten, welke verwijst naar een PDN bestand. Bijv:
<body>
<div class='applet'>http://dcoerterp.nl/nieuwbord/nkv2011/ronde1/1.PDN.gz</div>
</body>
<div class="applet" applet_playerimages="true" applet_full_border="true" applet_square_size="30">PLAATS HIER DE PDN</div>
<link rel="stylesheet" href="https://toernooibase.kndb.nl/applet/oerterpapplet2.0/themes/hv.jquery.view.css" type="text/css" />
te vervangen door:
<link rel="stylesheet" href="https://toernooibase.kndb.nl/applet/oerterpapplet2.0/themes/hv.jquery.view_wooden-3.6.8.css" type="text/css" />
Het is dan ook aan te raden om bij de div het volgende attribuut te gebruiken: applet_full_border="true" (zie ook vorige punt), aangezien de wood-look er mooier uitziet met een rand om het hele bord
divs2applet();
te vervangen door
divs2applet(true);
hierdoor zullen ook alle applets op de pagina een rand om het gehele bord krijgen.
<script type='text/javascript'>
$(function() {
divs2applet();
});
</script>
Het script ziet er dan zo uit:
<script type='text/javascript'>
function getOptions(appletID)
{
var opties = {
showPlayerPhotos:true, //fotootjes van de spelers tonen
showNotation:true, //de zetnotatie naast het bord tonen
showGameList:true, //als meerdere partijen in PDN, een selectiebox tonen boven het bord
showSlider:true, //een slider tonen, waarmee door de partij geschoven kan worden onder het bord
showContextMenu:true, //rechtermuisknop op het bord toont wel of niet een opties menu
showLastMove:false, //laast gespeelde zet tonen onder het bord
closable:false, //kan de applet gesloten worden met kruisje in rechterbovenhoek
squareSize: 38, //grootte van 1 speelveld (indirect bepaald dit de grootte van de totale applet
themeURL: 'https://toernooibase.kndb.nl/applet/oerterpapplet2.0/themes/pieceimages/', //waar staan de plaatjes van de schijven en achtergrond
liveMode:false, //betreft het weergave van partijen die worden ingevoerd via electronische borden of ipads.
liveRefreshSec: 20, //als liveMode, dan om de zoveel seconden een automatisch refresh van server
playMode:true, //default afspeelmode
analyseMode:true, //in analysemode kun je zelf zetten spelen
isTB:false, //wordt de applet via toernooibase getoond
borderSize: 15, //dikte van de bordrand
borderAllAround:true, //bordrand aan alle zijden van het bord, of alleen boven en links
gotoPly:0, //open de stand na zet x, ply 1 is bijv de eerste zet, ply 2 is de eerste witte en zwarte zet.
m_showNotation : true, //menuopties tonen in menu: kan gebruiker zetnotatie aan- of uitzetten
m_showNotationPDN : true, //menuopties tonen in menu: kan gebruiker PDN notatiescherm aan- of uitzetten
m_showSourcePDN: true, //menuopties tonen in menu: kan gebruiker "geladen PDN in applet" scherm aan- of uitzetten
m_showPhotos : true, //menuopties tonen in menu: kan gebruiker de spelerfotos aan- of uitzetten
m_showLastMove : true, //menuopties tonen in menu: kan gebruiker de laatse zet tonen, aan- of uitzetten
m_showSlider : true, //menuopties tonen in menu: kan gebruiker de partijslider aan- of uitzetten
m_showFieldNumbers:true, //menuopties tonen in menu: kan gebruiker de veldnummer op de velden aan- of uitzetten
m_showTurnBoard : true, //menuopties tonen in menu: kan gebruiker het bord draaien via het menu
m_takeScreenshot : true, //menuopties tonen in menu: kan gebruiker een screenshot maken van de stand
m_enableMoveAnimation : true, //menuopties tonen in menu: kan gebruiker kiezen voor simpele vorm van schuiven van de schijven (wel of geen animatie)
m_playVariations : false, //menuopties tonen in menu: kan gebruiker kiezen om alle varianten in de PDN af te spelen of over te slaan
m_startAnalyzeMode : true, //menuopties tonen in menu: kan gebruiker een analyse bord openen vanuit de applet
m_restoreBoardLocation : true, //menuopties tonen in menu: kan gebruiker de applet weer op zijn orginele plek en grootte zetten na verslepen
m_showFEN : true, //menuopties tonen in menu: kan gebruiker de FEN van de actuele bordstand opvragen
m_loadPDN : true, //menuopties tonen in menu: kan gebruiker PDN inladen in de applet
m_help : true //menuopties tonen in menu: kan de gebruiker de help raadplegen
}
var appletDiv = $("#" + appletID);
if (appletDiv.attr("applet_playerimages") && appletDiv.attr("applet_playerimages") == "true") opties.showPlayerPhotos = true;
if (appletDiv.attr("applet_full_border") && appletDiv.attr("applet_full_border") == "true") opties.borderAllAround = true;
if (appletDiv.attr("applet_square_size")) opties.squareSize = parseInt(appletDiv.attr("applet_square_size"), 10);
if (appletDiv.attr("applet_goto_ply")) opties.gotoPly = parseInt(appletDiv.attr("applet_goto_ply"), 10);
return opties;
}
$(function() {
divs2applet();
});
</script>