Een digitaal demonstratie-bord voor schaken. Het kan gebruikt worden om schaakstellingen te laten zien, en ook om `aantekeningen' (pijlen, velden) op het schaakbord te maken. Ook kunnen stellingen en series zetten van te voren worden ingevoerd en opgeslagen, om later geladen en gebruikt te worden.
Pak het zip-bestand uit, en zie hieronder voor het starten van het DigiDemoBord.
Het DigiDemoBord werkt via een internet browser. Het is met name ontwikkeld met Firefox en Chrome, en ook enigzins getest met Edge (Internet Explorer werkt niet goed). Volg de volgende stappen (voor Windows, Linux / MacOS is analoog) om het te gebruiken:
Het digidemobord gebruikt Javascript, de internet browser zou toestemming kunnen vragen om Javascript te gebruiken. Sta dit toe voor dit bestand.
Na opstarten ziet het DigiDemoBord er als volgt uit.
Een schaakbord in het midden, en knoppen en wat tekst rechtsonder. Het DigiDemoBord kan nu gebruikt worden. Hierna wordt uitgelegd hoe het schaakbord gebruikt kan worden, maar eerst wordt nog iets gezegd over de knoppen en tekst die te zien zijn na het opstarten:
Verder is de bovenste rij knoppen is voor het schaakbord:
En de onderste rij knoppen is voor het aanpassen van het interface:
Stukken kunnen van de stukken boven of onder het bord op het bord gesleept worden om een opstelling te maken. (Slepen gebeurt door de linkermuisknop ingedrukt te houden, terwijl de muis beweegt, of op een touch-screen door te vegen over het bord.) Stukken kunnen ook van het bord af gesleept worden om ze van het bord te verwijderen. Verder kunnen stukken verplaatst worden om een stelling aan te passen, of om zetten uit te voeren. Als een stuk gesleept wordt naar een veld waar al een stuk staat, zal het stuk wat er al staat van het bord verdwijnen (alsof het geslagen is).
En verder is het goed om het volgende over stellingen en zetten te weten:
Er kan ook 'getekend' worden op het schaakbord. Velden kunnen gemarkeerd worden met een cirkel, en er kunnen pijlen van een veld naar een ander veld getekend worden. Een voorbeeld hiervan is hieronder afgebeeld:
Tekenen op het scherm kan op twee manieren: de eerste (de 'standaard' manier), die alleen werkt met de muis, en de tweede is ook geschikt voor touch-screens.
Via de 'Schoon' knop kunnen in een keer alle cirkels en pijlen van het bord verwijderd worden.
De rechtermuisknop kan gebruikt worden om te tekenen. Klikken met de rechtermuisknop resulteert in een cirkel op het geklikte veld. Slepen met de rechtermuisknop geeft een pijl van het start- naar het eindveld. Voor deze cirkels en pijlen zijn er vier (mogelijke) kleuren, afhankelijk van de toetscombinaties die gebruikt worden op het moment van loslaten van de muis:
Het verwijderen van een cirkel of pijl kan gedaan worden door deze opnieuw te tekenen (dus: klikken op een veld met een cirkel zal de cirkel verwijderen, en analoog voor een pijl).
Op een touch-screen zit geen rechtermuisknop, daarom is er een andere manier om te tekenen op een touch-screen. Normaal gesproken kan je klikken en slepen op het touch-screen om stukken te verplaatsen. Als je pijlen en cirkels wil tekenen, moet je in 'annotatie-modus' zijn. Dit kan je doen door te klikken op de '[ ]' voor de bestandsnaam (of '[geen bestand]'). Als je er op klikt, komt er een 'A' tevoorschijn, dus '[A]'. En teruggaan naar de standaard interactie (stukken verplaatsen) gaat door op de '[A]' te klikken, dan verdwijnt de 'A' weer.
In annotatie-modus werkt de linkermuisknop net zoals de rechtermuisknop (dus om cirkels en pijlen te tekenen, je kan dan geen stukken verplaatsen). En verder kan je via het touch-screen cirkels en pijlen tekenen. Pijlen teken je door te slepen over het touch-screen (van start- naar eindveld), en cirkels teken je door te klikken op een veld.
De kleur van de cirkel of pijl kan aangepast worden door (van te voren, en tijdens de annotatie) een of meer vingers op het scherm te houden. De kleuren gaan via het volgende schema:
De extra vingers hoeven niet in de buurt van de annotatie te zijn, maar ze moeten wel tijdens de hele annotatie op het scherm blijven.
Het is mogelijk om via het DigiDemoBord ook van te voren stellingen en zetten in te voeren en op te slaan, en deze later weer te gebruiken. Dit gaat op de volgende manier:
En herhaal bovenstaande voor alle stellingen. Daarna kan de stellinglijst worden opgeslagen in een bestand, wat later weer geladen kan worden.
Hieronder wordt gedetailleerd weergegeven hoe elk van de stappen kan worden uitgevoerd, nadat eerst het interface hiervoor beschreven wordt.
Voor het invoeren van stellingen, en het werken met de stellingenlijst, is een uitgebreider interface nodig. Dit krijg je te zien door te klikken op de 'Panels' knop. Als je hierop klikt, verschijnen links en rechts van het schaakbord extra knoppen en andere elementen, zoals hieronder:
Links van het schaakbord zijn de onderdelen die nodig zijn om nieuwe stellingen toe te voegen (of eerder toegevoegde stellingen aan te passen), en rechts van het schaakbord zijn de huidige lijst met stellingen, en ook de zetten die bij de huidige stelling horen. Verder zijn daar de knoppen om de stellingen en zetten op te slaan, of om ze te laden.
De eerste stap in het invoeren van een stelling is het maken van de juiste stelling op het bord. Dat kan via het slepen van stukken, of een van de opties in het deel 'Maak stellingen' (linksboven). Daarna moet een naam voor de stelling worden ingetypt achter 'Stelling:' (linksmidden). Als dit wordt afgesloten met een 'Enter', dan wordt de stelling toegevoegd aan de lijst met stellingen, en wordt ook het registreren van zetten aangezet (zwarte/rode knop rechts naast de regel met 'Zetten:').
Na toevoegen van een stelling met naam verschijnt de naam in de stellingenlijst (rechts van het schaakbord), de zojuist toegevoegde stelling wordt automatisch geselecteerd.
Nadat een stelling is toegevoegd (en is geselecteerd), kan een zettenreeks worden toegevoegd aan een stelling (er kan maar een zettenreeks worden toegevoegd aan een stelling, alternatieve zetten kunnen niet ingevoerd worden). Het meest eenvoudig is om de zetten op het bord uit te voeren, en zorgen dat deze automatisch geregistreerd worden. Dat laatste gebeurt als de 'record' button aan staat. De 'record' button is de stip rechts van 'Zetten:'; als deze rood is worden zetten geregistreerd. Als de knop zwart is zorgt klikken op deze stip ervoor dat zetregistratie aangezet wordt (stip wordt rood).
Als zetregistratie aan staat, kunnen alle zetten gewoon op het bord gespeeld worden, en de zetten worden dan toegevoegd aan 'Zetten: ' (nog niet aan de zettenlijst!). Er is geen enkele check of de zet al dan niet legaal is (of zelfs of wit en zwart afwisselen), het enige wat gecontroleerd wordt is of het een speciale zet zou kunenn zijn (zie ook boven): rokade, en-passent slaan of een promotie; deze speciale zetten worden dan 'afgemaakt' (toren verplaatst, geslagen pion verwijdert, of het pion vervangen door een dame). Een promotie is automatisch een promotie naar dame, een minor promotie kan aangegeven worden door direct na de promotie-zet het juiste stuk te slepen naar het veld waar de pion gepromoveerd is (en waar nu de dame staat).
Als alle zetten uitgevoerd zijn, kunnen de zetten worden toegevoegd aan de zettenlijst via de knop 'Voeg toe'. De zetten verschijnen dan in de zettenlijst, de zetten van zwart verschijnen aan de rechterkant en de zetten van wit wat meer naar links. De zettenlijst die rechts staat is de zettenlijst van de huidige (geselecteerde) stelling, zettenlijsten van andere stellingen zijn niet direct zichtbaar (maar ze worden wel bewaard in de stellingenlijst). Als een zettenlijst wordt toegevoegd, wordt de registratie-mode automatisch uitgezet.
Als er iets mis gaat tijdens het uitvoeren van de zetten (bijv. een verkeerde zet, of een verkeerde volgorde) kan je het best overnieuw beginnen. Het is ook mogelijk direct de tekst na 'Zetten: ' aan te passen, of een eerste serie zetten op te slaan, en daarna (vanaf de juiste stelling aan het eind van de zetten) de rest van de zetten toe te voegen. Zie hiervoor de extra informatie aan het eind van dit document over de betekenis van alle knoppen. Vanwege de manier waarop de zettenlijst wordt afgebeeld, gaat het handmatig wijzigen van de zettenlijst soms lastig (cursor verspringt).
Als stellingen en bijbehorende zetten aan de stellingenlijst toegevoegd zijn, kunnen ze naar een bestand worden geschreven. Dit gaat met de knop 'Maak bestand' (rechts, onder de zettenlijst). Vervolgens wordt een bestand met de naam 'stellingen.txt' (of een vergelijkbare name) op de computer opgeslagen. Het is verstandig om dit bestand een goede naam te geven (bijv. S3H4.txt voor Stap 3, Hoofdstuk 3). Het is goed om hierbij de extensie (.txt) van de bestandsnaam niet aan te passen.
Stellingen en zetten die opgeslagen zijn in een bestand, kunnen weer geladen worden via de knop 'Laad bestand' (rechts, onder de stellingenlijst). Na klikken op deze knop wordt (bij Windows) een Verkenner geopend. Blader naar het juiste bestand (wat eerder opgeslagen is), en selecteer/open dat bestand.
Bij het laden wordt nu nog niet veel gecontroleerd (bijvoorbeeld of het bestand echt stellingen heeft). Het laden van een verkeerd bestand kan ervoor zorgen dat het DigiDemoBord niet meer werkt. Opnieuw opstarten van het DigiDemoBord (bijv. met F5) is dan de oplossing.
Als de 'Laad bestand' knop niet zichtbaar is (zoals in het interface als het DigiDemoBord net opgestart is) kan je ook een bestand laden door op de huidige bestandsnaam (of '[geen bestand]') te klikken. Dat heeft zelfde effect.
Als je de geladen stellingen weer wilt verwijderen, kan je klikken op de knop 'Verwijder bestand'. Dit verwijdert de stellingen geladen uit het bestand (maar het bestand zelf blijft gewoon bestaan). De knop 'Herlaad bestand' kan je gebruiken om hetzelfde bestand opnieuw te laden (als je de stellingenlijst bijvoorbeeld gewijzigd hebt, en deze wijzigingen toch niet in de stellingenlijst wilt hebben).
Als de stellingenlijst niet leeg is, verschijnen er rechtsonder ook knoppen om door de stellingen en zetten heen te lopen. Deze knoppen blijven ook zichtbaar als de andere onderdelen voor het invoeren van stellingen en zetten weer verborgen worden.
Als stellingen zijn ingevoerd (of uit een bestand geladen), dan is dat zichtbaar in de stellinglijst. Normaal gesproken is na het laden de eerste stelling geselecteerd, en die stelling is dan zichtbaar op het bord. Als een stelling geselecteerd wordt, worden ook alle tekstvelden aan de linkerkant van het bord ingevuld (met de waarden die horen bij de huidige stelling); de FEN, de posities van de witte en zwarte stukken, de naam van de stelling en de zetten die horen bij de stelling worden dan allemaal ingevuld.
Zoals hierboven gemeld zijn er extra knoppen zichtbaar rechtsonder als de stellingenlijst niet leeg is. Een rijtje met knoppen met in het midden 'stelling', en eronder een rijtje met knoppen met in het midden 'zet'.
Met de knoppen '<<', '<', '>', '>>' die rondom de knop 'stelling' staan (rechts onderaan) kunnen gebruikt worden om een andere stelling te selecteren:
Als een andere stelling geselecteerd wordt, worden automatisch alle cirkels en pijlen die getekend waren verwijderd.
De knop 'zet' in het midden kan gebruikt worden om de stelling (voor de eerste zet) terug te zetten. Die kan gebruikt worden als bijv. stukken verplaatst zijn. Als er al zetten uit de zettenlijst gespeeld waren, worden die ook teruggezet.
Net zoals stellingen kan je ook zetten selecteren (zetten spelen). Als je op een zet klikt in de zettenlijst, wordt de stelling na het spelen van die zet op het bord gezet. Verder kan je met de knoppen '<<', '<', '>' en '>>' respectievelijk de stelling voor de eerste zet, de stelling na de vorige zet, de stelling na de volgende zet, en de stelling na de laatste zet op het bord krijgen. Als je op de knop 'zet' klikt, dan wordt de stelling (terug)gezet naar de stelling na de huidige zet. Dit kan handig zijn als je allerlei stukken hebt verplaatst. Als op deze manier een zet gespeeld wordt, worden cirkels en pijlen niet gewist.
Als je een zet uitvoert op het bord (door een stuk te verplaatsen) die 'toevallig' overkomt met de volgende zet in de zettenlijst, dan zal het DigiDemoBord aannemen dat je de volgende zet wilde spelen.
De stellingnaam (met de informatie over de zet) is normaal in het zwart weergegeven. Als handmatig stukken verplaatst worden op het bord (of toegevoegd, of verwijderd), dan klopt de stelling op het bord niet meer met de informatie op de statusregel. In dat geval zal de stellingnaam en de zetinformatie in het blauw worden weergegeven. Als je klikt op de 'stelling' knop, zal de juiste stelling weer op het bord gezet worden.
Let op: als de handmatige verplaatsing van het stuk overeenkomt met de volgende zet uit de zettenlijst, wordt aangenomen dat deze zet gespeeld is. De zetinformatie wordt dan aangepast, en de statusregel blijft zwart.
Stellingen kunnen rechtstreeks geselecteerd worden (in het uitgebreide interface) door te klikken op de stellingnaam in de stellingenlijst. En ook de stelling na een zet kan rechtstreeks geselecteerd worden door op een zet te klikken in de zettenlijst.
Klikken in de stellingnaam in de statusregel geeft de mogelijkheid om snel een bepaalde stelling te selecteren. Je kan dan tekst typen op die plek, en alle stellingnamen die matchen met de tekst komen in de lijst die rechts van de tekst staat.
Hieronder volgt een complete beschrijving van alle elementen van het (uitgebreide) interface.
Het deel links bovenin (Maak Stellingen) is bedoeld als hulp voor het maken van stellinge. Naast het slepen met stukken, zijn hier nog meer opties om de stelling te maken:
Hieronder staat het deel voor het wijzigen van de stellingenlijst:
Daaronder staat het deel voor het toevoegen / wijzigen van zetten:
In normale mode (geen 'A') op de statusregel: je kan stukken slepen op het bord, van het bord, of op het bord. Met de rechtermuisknop kan je cirkels en pijlen toevoegen.
In annotatie mode ('A' aan het begin van de statusregel): je kan pijlen (van start- naar eindveld) of cirkels (klikken op een veld) tekenen met de linkermuisknop, en op het touch-screen. De kleur van de annotaties wordt bij de muis bepaald door overige toetsen die ingedrukt worden (niets: blauw, Alt: geel, Shift: groen, Ctrl: rood), en bij het touch-screen door extra vingers op het scherm (0: blauw, 1: geel, 2: groen, 3: rood).
Bovenaan het rechterdeel staan de stellingenlijst (links) en de zettenlijst (rechts). De stellingenlijst laat alle nu geladen (of ingevoerde) stellingen zien. De zettenlijst laat de zetten bij de huidige stelling zien.
De volgende knoppen onder deze lijsten zijn voor het laden / maken van bestanden:
Hieronder volgt een statusregel, met achtereenvolgens informatie over de annotatie-mode, de bestandsnaam, de stellingnaam en de laatst gespeelde zet (of wie aan zet is).
Daaronder zijn twee rijen met knoppen die ook in het eenvoudige interface zitten. De bovenste rij is om het bord aan te passen, en de rij eronder om het interface aan te passen.
Helemaal onderaan zijn, als er stellingen in de stellinglijst zitten, twee rijen met knoppen, een om een nieuwe stelling te spelen, en een om een zet te spelen (of terug te zetten).
Het interface heeft ook sneltoetsen, waarmee het DigiDemoBord bediend kan worden:
Mocht een van de tekstinvoer regels 'actief' zijn (omdat je er op geklikt hebt), dan werken bovenstaande sneltoetsen niet; ze komen dan gewoon in de tekstinvoer terecht.
Verder heeft de 'Enter' toets bij de meeste tekstinvoer regels ook direct gevolg. Bij de FEN invoer wordt dan de FEN direct op het bord gezet, bij de stellingnaam wordt de stelling gelijk toegevoegd (als de naam nog niet bestaat), en bij de zettenlijst worden de zetten vervangen.
Het bestandsformaat is een tekstbestand met een eenvoudige structuur. De eerste regel bevat een versie-aanduiding (zodat nieuwere versies meer ingewikkelde bestanden kunnen opslaan). Alle volgende regels hebben achtereenvolgens de stellingnaam, de stelling (in FEN formaat) en eventueel de zetten. De stellingnaam en de FEN van de stelling worden gescheiden door een '|', en de stelling en de zetten worden gescheiden door een '#'. Zetten worden aangegeven met start- en eindveld, gescheiden door een streepje (-), of x bij een slagzet, en worden voorafgegaan door de letter van het stuk (in het Nederlands!), behalve voor de pion. Rokade is O-O (kort) of O-O-O (lang), hoofdletters voor wit, kleine letters voor zwart. Bij minorpromotie volgt de letter van het nieuwe stuk direct op de zet.
Als je zelf zetten wil toevoegen of wijzigen in dit bestand, volstaat het begin en eindveld met een streepje, bijv. e2-e4 e7-e5 f1-f3.
Een voorbeeldregel uit het bestand is:
Start | rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR
En hetzelfde met zetten:
Start | rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR # e2-e4 e7-e5 Pg1-f3 Pb8-c6
Vanwege deze manier van opslaan mag de stellingnaam allerlei letters hebben (zelfs spaties en leestekens), maar geen '|'. Dit wordt niet gecontroleerd!
Lege regels in het bestand, of regels die beginnen met een '#', worden niet gebruikt. Met een gewone teksteditor kan het bestand eventueel aangepast worden.
De rokade wordt aangegeven met o-o (kort) of o-o-o (lang), in hoofdletters voor wit, en kleine letters voor zwart. En-passent zetten hebben 'ep' na de zet (bijv. e5xd6,ep). Bij een promotie wordt de letter van het nieuwe stuk na de zet gezet (bijv. e2-e1T voor een zwarte minor promotie).
Het DigiDemoBord gebruikt intern de Engelse notatie voor stukken (K = King, Q = Queen, R = Rook, B = Bishop, K = Knight and P = pawn). Het interface en de zetnotatie (in het interface, en ook in het bestand) gebruikt de Nederlandse letters (K = Koning, D = Dame, T = Toren, L = Loper, P = Paard, en niets voor de pion).
Bekende problemen:
En op de to-do lijst staat:
Het DigiDemoBord is gebaseerd op de javascript chessboard module van Chris Oakman (chessboard-1.0.0.js van chessboardjs.com). Aan deze module is de annotatie-code toegevoegd (initieel gebaseerd op een fork van chessboard-0.3.0 door Raneku). Verder wordt jQuery gebruikt (jQuery-1-12.4.js). De jQuery code, en de aangepaste chessboard code worden meegeleverd met het DigiDemoBord.