Publiceren van applets op uw website kan met de oerterp applet als volgt:

  1. Op je pagina moet je een aantal includes (de link en script tags) eenmalig in de <head> tag van je pagina opnemen.

  2. 
			<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>

  3. 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>
    [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
























  4. 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

  5. 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>
    http://dcoerterp.nl/nieuwbord/nkv2011/ronde1/1.PDN.gz
























  6. u kunt nog een aantal aanpassingen doen in hoe de applet wordt weergegeven. Dit betreft de grootte, de fotootjes, en de rand om het bord. Dit kunt u doen door in de <div class='applet'> tag een aantal extra attributen mee te geven. applet_playerimages (true of false), applet_full_border (true of false) en applet_square_size (getal)

    Voorbeeld: 
    	<div class="applet" applet_playerimages="true" applet_full_border="true" applet_square_size="30">PLAATS HIER DE PDN</div>
  7. Verder heeft de applet 2 standaard thema's. U bent natuurlijk vrij om zelf een thema te maken, maar de volgende thema's zijn al beschikbaar: 1) Dambo-look 2) Wood-look In bovenstaand voorbeeld wordt de Dambo-look getoond. Mocht u de wood-look mooier vinden dan kunt u dit simpel regelen door de volgende regel 
    <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
    een andere optie is om de aanroep     
    divs2applet();
    te vervangen door 
    divs2applet(true);
    hierdoor zullen ook alle applets op de pagina een rand om het gehele bord krijgen.
  8. Het maken van PDN kan vaak simpel met een damprogramma als bijvoorbeeld Dam2.2 (gratis), Turbodambase of Kingsrow. Daarbij kun je na het invoeren van een stand of partij deze opslaan als een PDN bestand. Je kunt ook handmatig een PDN maken door in bijvoorbeeld een tekstbestandje het volgende neer te zetten [Event "IETS"] 1. 32-28 {rest van de notatie van de partij}.  

Extra optie:

U kunt voor het dollerteken een extra optiesfunctie toevoegen, waarin u zelf een aantal zaken kunt aanpassen in hoe de applet wordt weergegeven.: 

		<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>