Afficher des bases de données de parties d’Échecs (PGN) dans SPIP

Permet d’intégrer des parties d’échecs rejouables en ligne dynamiquement dans des articles SPIP, au format PNG

I. Introduction :

Pour illustrer les articles des échecs, l’auteur a besoin d’intégrer des parties rejouables en ligne dynamiquement. Dans cette contribution, j’ai essayé de donner une méthode facile pour exploiter un Applet (logiciel en java empaqueté) gratuit MyChess dans des squelettes SPIP.

Copie d’écran de My Chess

II. Méthode à suivre :

Installation du script

1. Télécharger le packet MyChess disponible sur mychess.com.

2. Décompressez le packet et transférez-le vers un répertoire de votre choix sur votre espace d’hébergement, par exemple : /racinedusite/squelettes/mychess [1].

Installation dans un article

3. Dans l’article où vous voulez intégrer MyChess, téléchargez le fichier PGN des parties d’échecs comme document joint en format ZIP afin de connaitre son emplacement après, par exemple : http://www.amadeus-echecs.org /IMG/zip/coupe.zip [2].

4. Dans l’article où vous voulez intégrer MyChess, ajoutez ce code :

<applet codebase="/squelettes/mychess/" code="ChessBoard.class" align="baseline" width="630" height="560">
<param name=pgngamefile value="http://amadeus-echecs.org/IMG/zip/coupefinale.zip">
</applet>

Paramétrage

5. Vous pouvez changer la taille et la couleur d’affichage dans le code en haut selon le CSS et la mise en page que vous utilisez.

Final

6. Enregistrer votre article.

III. Exemples d’affichage dynamique


-  Finale de la coupe du monde 2007 .
-  Base des parties de 607 Miniatures !!

IV. Étape prochaine

Transformer l’idée en un plugin « MyChess », intégrable à partir d’une simple balise.

Ressources sur le standard PGN

Le standard PGN

Le standard PGN (et non png l’image) est l’abréviation de Portable Game Notation. C’est une base de données qui peut contenir plusieurs parties d’échecs, voir des milliers ! C’est de l’Open Source au contraire aux autres bases commerciales sur le marché (CBV de Chessbase par exemple) .

Un lien intéressant sur ce standard est Portable Game Notation Specification and Implementation Guide.

SPIP reconnait ce type de fichier depuis la version 1.8.

Une partie d’échecs

Une partie d’échecs sous cette base peut avoir cette forme :

[Event "World Cup"]
[Site "Khanty-Mansiysk RUS"]
[Date "2007.12.13"]
[Round "7.1"]
[White "Shirov,A"]
[Black "Kamsky,G"]
[Result "1/2-1/2"]
[WhiteElo "2739"]
[BlackElo "2714"]
[EventDate "2007.11.24"]
[ECO "C95"]
1. e4 e5 2. Nf3 Nc6 3. Bb5 a6 4. Ba4 Nf6 5. O-O Be7 6. Re1 b5 7. Bb3 d6 8.
c3 O-O 9. h3 Nb8 10. d4 Nbd7 11. Nbd2 Bb7 12. Bc2 Re8 13. Nf1 Bf8 14. Ng3
g6 15. b3 a5 16. a4 b4 17. cxb4 axb4 18. Bb2 Bh6 19. dxe5 dxe5 20. Bd3 Nc5
21. Bb5 Qxd1 22. Raxd1 c6 23. Bc4 Nfd7 24. Re2 Bf4 25. Rc2 Re7 26. Ne2 Bh6
27. Ng3 Bf4 28. Bc1 Ba6 29. Bxf4 exf4 30. Ne2 Bxc4 31. Rxc4 Nxb3 32. Rxb4
Nbc5 33. Nc3 Ree8 34. Rd6 Re6 35. Rbd4 Rxd6 36. Rxd6 Ra6 37. e5 Rb6 38. Rd1
Rb3 39. Ne2 Ra3 40. Ned4 Rxa4 41. Nxc6 Nf8 42. Ne7+ 1/2-1/2 

Des exemples de parties peuvent se trouver facilement à travers les moteurs de recherche. Sinon, ci-joint un échantillon contenant les parties dz la dernière coupe du monde d’échecs en décembre 2007.

Notes

[1Notez bien : Changez /squelettes/mychess/ par votre propre arborescence pour placer le packet MyChess.

[2Notez bien : Changez http://www.amadeus-echecs.org/IMG/zip/coupe.zip par votre propre URL et nom du fichier zippé (Après téléchargement du fichier zip un clic droit permet de connaitre ce lien).

Discussion

4 discussions

  • 1

    Quelqu"un serait-il comment ajouter des ID cards sur chessbase avec les photos et les Elo afin que j’ai les photos de mes ami(e)s ? Les champions c’est bien mais mes amies c’est mieux !

    • guy Lacourse

      J’ai posé la question au groupe de chessbase et ils m’ont répondu que c’est impossible.

    Répondre à ce message

  • 1

    Bonjour j’utilise l’applet ChessViewerDeluxe dérivée de l’ancien MyChess
    pour afficher des parties d’échecs dans spip.

    en insérant le code ci dessous l’applet s’affiche directement

    <script src='http://chesstuff.googlecode.com/svn/deployChessViewer.js' type='text/javascript'></script>
    <script id="oChessViewer" type="text/javascript">
    /*
    [Event "Le mat du berger"]
    [Site "CPE95"]
    [Date "?"]
    [Round "1"]
    [White "Blancs"]
    [Black "Noirs"]
    [Result "1-0"]
    [WhiteElo "1500"]
    [BlackElo "1499"]
    
    1.e4 e5 2.Qh5 Nc6 3.Bc4 Nf6 4.Qxf7#
    1-0
    
    */
    makeChessApplet ( null, {LightSquares: "F3DCC2",DarkSquares: "DDA37B",Background: "CCCCCC",PuzzleMode: "off" } );
    </script>

    la (ou les) partie étant dans le texte, elle est beaucoup plus simple à modifier
    et il est possible d’ajouter un commentaire dans la partie en utilisant le bouton italique
    (la syntaxe entre accolades et commentaire PGN est commune)

    Si quelqu’un sait ajouter un bouton au couteau suisse pour qu’il insère directement le code suivant dans un article (comme pour les bloc dépliable) cela serait parfait

    <script src='http://chesstuff.googlecode.com/svn/deployChessViewer.js' type='text/javascript'></script>
    <script id="oChessViewer" type="text/javascript">
    /*
    TEXTE DU FICHIER PGN
    */
    makeChessApplet ( null, {LightSquares: "F3DCC2",DarkSquares: "DDA37B",Background: "CCCCCC",PuzzleMode: "off" } );
    </script>

    pour des fichier PGN important (plusieurs centaines de parties) il faut utiliser un fichier joint à l’article
    et un modèle ChessXXX comme je l’explique dans cet article http://www.cpe95.org/spip.php?article35

    • salut

      je pense qu’il est plus direct d’utiliser le fichier PGN même pour une partie pour éviter de copier/coller les coups

    Répondre à ce message

  • 23

    L’intégration de cette appliquette dans SPIP est une très bonne idée. En revanche, la méthode proposée ne tire pas profit de toutes les possibilités de SPIP. Il va être en effet pénible pour les utilisateurs de devoir copier et adapter pour chaque article la palanquée de balises applet etc. Il faut absolument définir un modèle, afin qu’on puisse écrire simplement quelque chose <chessNNN> quand NNN est le numéro du document.

    Par ailleurs, si je ne m’abuse, le téléchargement en Zip vient du fait que PGN est un type MIME du groupe ’application’, et par défaut SPIP considère que les documents de ce groupe sont non sécurisés. Mais s’il est avéré qu’il s’agit d’un type qui aurait dû relever du groupe ’text’ ne pouvant contenir aucun code exécutable à distance, alors il faut changer sa déclaration dans base/typedoc.php pour permettre l’inclusion directe. Si de plus il existe une bibliothèque PHP effectuant un travail équivalent à cette appliquette, alors il est possible d’obtenir la présentation souhaitée automatiquement, en laissant le corps de l’article vide. Voir comment en lisant un article consacré au type CSV et son commentaire, c’est assez proche.

    • Committo, Ergo Sum

      En fait je m’abusais : PGN est considéré comme incrustable depuis longtemps, il n’y a pas de problème mais le résultat n’était pas très différent de ce que donne le mode non incrusté . Je viens de faire une petite modif (SVN 11021) qui permet déjà d’écrire <textNNN> lorsque NNN est un document textuel même non déclaré ainsi par MIME (comme c’est le cas pour de type PGN) et d’avoir le texte brut incrusté. Mais je répète que l’idéal serait d’écrire un modèle spécifique.

    • Merci infiniment pour les remarques et les suggestions ..

      En fait je travaille actuellement sur le modèle corespondant .. Vraiment t’as raison concernant les fichiers PGN .. ils sont de type Text normalement ..

      a plus tard ..

    • Je vais bientôt me faire un petit site sur les échecs (cela me servira d’aide-mémoire) et suis impatient de voir ce plugin se finaliser.

      j’imagine que vous connaissez cet article , n’y aurait pas pour vous la possibilité de faire quelque chose ensemble ?

    • Je ne connaissais pas pour ma part. Il repose sur un bibliothèque en AJAX, c’est encore mieux qu’une en PHP comme je le suggérais car ça permet l’interactivité, et ça évite de générer des vignettes à tire-larigot côté serveur. Ce serait effectivement bien de converger entre les deux, car il a lui aussi le problème de saisie du nom du fichier PGN, vous devriez mutualiser la solution.

    • Peut être utilisé ici ?

    • Merci philip ..

      Je connais bien cet article .. Mais honnêtement, j’ai pas réussi à l’intégrer .. J’ai contacté deux fois le propriétaire .. Mais, j’ai pas bien compris ces recommendations .. Je vais sûrement faire une autre tentative prochainement ..

      Pour le travail ensemble .. c’est avec plaisir .. L’important c’est de créer une communauté SPIP-Échecs bien outiée ..

    • Merci .. C’est noté ..

    • Bonjour à tous et bonne année !

      Le plugin Chess est encore à ses début et peut-être amélioré ! A l’origine, il a été crée afin de mettre en ligne facilement sur SPIP les bases de parties jouées au sein de la LMPE et cela a été possible avec l’aide de la communauté SPIP Toulouse.

      La mise en place n’est pas très compliqué :

      -  Télécharger et activerles plugins chess et CFG.
      -  Créer un article (supposons que c’est le numéro 13), mettre en pièce jointe vos fichiers PGN.
      -  Dans l’article insérez la balise < chess13 >

      C’est tout !

      L’avantage tient également au fait que l’on peut intégrer plusieurs fichiers PGN dans le même applet (cliquer sur « Liste Matchs »).

    • Salut Fredo ;

      Je vais l’essayer une autre fois .. Car mes premières tentatives ont échoué .. Je vais voir pourquoi ..
      C’est vrai que son avantage et d’intégrer plusieurs bases en même temps ..Bonne chance à nous tous ..

    • Autant vous dire que je vais m’empresser de tester sur mon nouveau site Chessnaute en construction pour l’instant.

    • Comment doit on procéder pour modifier les couleurs et les tailles ?
      La largeur max pour moi est de 550px, exemple pour Bobby Fischer

    • J’ai posé la question au développeur Mike, et voici sa réponse :
      The java viewer’s size is fixed. You can’t modify it without getting into the java source, making the fixes and recompiling.
      Sorry about this. I’ll have a flash version at some point that will adjust to any size.

    • youness FAREH

      Salut Philipe ;

      Mike a raison .. Il existe des solutions Java sous trois tailles ou plus .. Mais il faut des images pour les pièces en différents formats .. Celui-là est fixe .. Malheureusement il a tombé sur ton CSS qui ne le permet pas ..

      Mais c’est facile d’élargir un peu ta feuille de style .. c’est mieux à mon avis ..

      De mon côté je vais chercher plus pour trouver une idée sur le sujet.

    • Certes oui, mais pour l’instant cela va rester comme cela, je vais tranquillement attendre la version Flash.
      Il n’y a pas le feu.

      Tiens je vais publier un article vers ton site... à suivre

    • Youness FAREH

      no problem !

    • Voilà c’est ici

    • Philippe

      Finalement j’ai élargi le site,
      exemple : les parties de Bobby Fischer

    • youness

      Salut

      Maintenant c’est plus joli avec cette version CSS ..

      Je vais terminer un travail académique .. et je vais revenir avec la version Plug-In ..

      bonne chance philipe

    • Bonsoir

      Les couleurs peuvent être personnalisé selon vos choix, je l’ai déjà fait :

      http://www.azweb.org/pgn_viewer/index.php?sid=&action=screen&nsc=4

      En cette adresse vous trouverez 8 styles différents (couleurs)
      Aussi la personnalisation des couleurs est possible pour les membres.

      Sur ce site j’utilise aussi MyChessViewer, mais j’ai du faire quelques modifications pour l’adapter à l’usage sur mon site.

      Un éxemple d’usage sur autre site est situé sur Echecs 2 Maroc

    • Philippe

      Le style 3 irait très bien chez moi :-)

    • Bonjour.

      Vous pouvez l’utiliser soit directement à partir de PGN_VIEWER, soit sur votre site en ajoutant les paramétres des couleurs :

      <applet codebase=« /mychessviewer/ » code=« ChessBoard.class » align=« bottom » height=« 560 » width=« 630 »>
      <param name=« pgngamefile » value=« /fichiers/pgn/parties.pgn »>

      <param name=« lightSquares » value=« FFFFFF »> // La couleur des cases blanches (ex:Blanc).
      <param name=« darkSquares » value=« 008800 »> // La couleur des cases noires (ex:Vert).
      <param name=« background » value=« FFFFFF »> // La couleur de l’arrière plan (ex:Blanc.

      Le copyright a la même couleur que les cases blances.

      En la copie modifié que j’utilise sur PGN_VIEWER, le copyright a une couleur différente

    • Chessnaute

      Super c’est modifié sur le site.
      Merci beaucoup

    • youness

      merci Azerty ;

      j’ai utilisé ton ajout ici :

      http://www.maroc-echecs.com/spip.php?breve173

      un cuoleur bordeau sur le jaune ..

      thx freind !

      Youness

    Répondre à ce message

  • Bravo c’est un travail intélligent et colossal. Il n’ y a certainement pas de limites à l’imigination et à la créativité, disait Samuel Clemens.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom