AccueilEnglishFrançais

Documentation pour maxiGos v7

Copyright 1998-2021 - François Mizessyn

Cliquez ici pour aller à la page de téléchargement

Qu'est-ce que maxiGos ?

MaxiGos est un ensemble de lecteurs sgf permettant d'afficher des diagrammes, parties ou problèmes de go dans une page web.

Vous pouvez utiliser maxiGos gratuitement pour votre site (licence de type BSD).

Quels sont les prérequis ?

Le navigateur de l'utilisateur final doit pouvoir interpréter du HTML5, et doit avoir javascript activé.

Si on utilise uniquement les lecteurs autonomes de maxiGos (qui sont en javascript), il n'y a aucun prérequis en ce qui concerne le serveur sur lequel ils sont installés.

Si on utilise la version complète de maxiGos (qui utilise javascript, css et php), le serveur sur lequel il est installé doit disposer de php.

Comment commencer simplement avec maxiGos ?

Un exemple

Allez à la page des téléchargements et téléchargez l'un des lecteurs maxiGos, par exemple maxigos-neo-classic-game.js.

Copiez-le n'importe où sur votre site.

En supposant que vous voulez afficher le contenu d'un fichier sgf nommé blood-vomit-fr.sgf, insérez dans la partie <body> d'une page html (à l'endroit où vous voulez que le lecteur s'affiche) un code du genre :

<script src="ppp/maxigos-neo-classic-game.js">
qqq/blood-vomit-fr.sgf
</script>

Remplacez "ppp/" par un chemin relatif entre la page html concernée et le script maxiGos maxigos-neo-classic-game.js.

Remplacez "qqq/" par un chemin relatif entre la page html concernée et le fichier sgf blood-vomit-fr.sgf.

On doit alors obtenir le résultat ci-dessous :

Quels sont les lecteurs disponibles et pour quel usage ?

Il existe plusieurs configurations différentes de maxiGos, déclinées en plusieurs thèmes.

Configurations principales :

Thèmes principaux :

Dans de nombreux cas, ces lecteurs suffiront.

Par ailleurs, il existe d'autres configurations secondaires qui ne sont pas disponibles pour tous les thèmes, et aussi d'autres thèmes élaborés pour des besoins spécifiques :

Quelques configurations secondaires (thème Minimalist) :

Quelques thèmes secondaires :

On peut aussi créer ses propres configurations et ses propres thèmes.

On peut ajouter autant de lecteurs maxiGos que l'on veut dans une page. On n'est limité que par les possibilités du serveur web et celles de la machine de l'utilisateur.

Comment installer la version complète de maxiGos ?

Rendez-vous à la page de téléchargement, téléchargez l'archive contenant maxiGos, décompressez-la et copiez l'ensemble des dossiers et fichiers n'importe où sur votre site. Aucune base de données n'est nécessaire.

Pour vérifier que cela fonctionne, consultez cette page.

L'utilisateur final n'a rien à installer sur sa machine. Il lui suffit d'un navigateur avec javascript activé.

Comment utiliser maxiGos ?

La méthode principale pour insérer un lecteur maxiGos dans une page web consiste à utiliser :

Mais on peut aussi éventuellement utiliser :

Méthode utilisant un lecteur autonome en javascript

On utilisera un lecteur autonome dans les cas où on souhaite faire simple.

Un lecteur autonome est un lecteur maxiGos dont tout le code est dans un fichier javascript unique.

Ces lecteurs sont stockés dans le dossier "_alone" de chaque exemple fourni avec maxiGos. Ces exemples sont dans le dossier "_sample".

Le code à insérer dans vos pages

On insère un couple de balises <script> et </script> dans la page à l'endroit où doit s'afficher le lecteur sgf, avec comme valeur de l'attribut src le script de l'un des lecteurs autonomes fournis avec maxiGos.

Pour le sgf, on peut insérer un nom de fichier sgf ou un texte représentant du sgf ou éventuellement une url générant du sgf (par exemple dans le cas d'un forum phpBB) soit entre les balises <script> et </script> ou soit comme valeur de l'attribut data-maxigos-sgf.

Si on insère un nom de fichier sgf entre les balises <script> et </script>, cela donne par exemple :

<script src="xxx/maxigos-neo-classic-problem.js">
yyy/p3-fr.sgf
</script>

On obtient :

Si on insère un nom de fichier sgf comme valeur de l'attribut data-maxigos-sgf, cela donne par exemple :

<script src="xxx/maxigos-neo-classic-problem.js"
	data-maxigos-sgf="yyy/p2-fr.sgf">
</script>

On obtient :

Il faut évidemment adapter le chemin (ici "xxx") préfixant le script maxigos-problem.js, en fonction de l'endroit où vous l'avez copié sur votre site, et de l'endroit où se trouve votre page. Il s'agit du chemin relatif entre votre page et le script javascript du lecteur autonome.

Il faut aussi adapter le chemin (ici "yyy") préfixant le fichier sgf, en fonction de l'endroit où vous l'avez copié sur votre site, et de l'endroit où se trouve votre page. Il s'agit du chemin relatif entre votre page et le fichier sgf.

Si on insère un texte représentant du sgf entre les balises <script> et </script>, cela donne par exemple :

<script src="xxx/maxigos-neo-classic-problem.js">
(;FF[4]GM[1]SZ[19]VW[aa:ii]FG[1]AW[ee]AB[de][fe][ed];B[ef]C[Correct !])
</script>

On obtient :

Si on insère un texte représentant du sgf comme valeur de l'attribut data-maxigos-sgf, cela donne par exemple :

<script src="xxx/maxigos-neo-classic-problem.js"
	data-maxigos-sgf="(;FF[4]GM[1]SZ[19]VW[aa:ii]FG[1]AW[ee]AB[de][fe][ed];B[ef]C[Correct !])">
</script>

Note : lorsqu'on insère directement un texte représentant du sgf dans la page comme dans les deux exemples ci-dessus, la propriété sgf CA est inutile et ignorée même si elle est présente car l'encodage du texte inséré est forcément le même que celui de la page (voir le chapitre Encodage pour plus de détails).

Si on insère une url générant du sgf, il est nécessaire d'ajouter l'attribut data-maxigos-source-filter avec comme valeur une expression régulière qui vérifie si l'url est valide. Par exemple :

<script src="xxx/maxigos-problem.js"
	data-maxigos-source-filter="/download/file\.php\?id=[0-9]+$">
/download/file.php?id=23
</script>

Si on insère une url générant du sgf comme valeur de l'attribut data-maxigos-sgf, cela donne par exemple :

<script src="xxx/maxigos-problem.js"
	data-maxigos-sgf="/download/file.php?id=23"
	data-maxigos-source-filter="/download/file\.php\?id=[0-9]+$">
</script>

L'url doit respecter le principe de "même origine" que la page dans laquelle on l'insère (même protocole, même domaine, même port). Elle ne peut donc pas être une url d'un autre site.

Note 1 : pour faire fonctionner les lecteurs autonomes, on n'a pas besoin d'installer l'ensemble de maxiGos sur le serveur. Il suffit d'y copier le script du lecteur choisi tant qu'on n'utilise que le français ou l'anglais. Si on utilise une langue autre que le français ou l'anglais, on aura aussi besoin d'inclure dans la page le script d'internationalisation de cette langue (l'un de ceux qui sont dans le dossier "_i18n"). Voir le chapitre Internationalisation pour plus de détails.

Note 2 : en théorie, un lecteur autonome n'utilise pas de ressources externes. Ces ressources (principalement des images) sont intégrées dans le code du lecteur, via des "urls de données" (data base64).

Personnalisation des lecteurs autonomes

La personnalisation de ces lecteurs peut être faite en utilisant des attributs de la balise <script>.

Le nom de ces attributs est de la forme data-maxigos-xxx avec "xxx" le nom d'un paramètre de maxiGos (voir le chapitre Paramétrage pour en savoir plus sur ces paramètres).

Du fait que seuls les lettres en minuscule sont permises dans le nom des attributs, on remplace les majuscules des noms des paramètres maxiGos par leurs équivalents en minuscule précédés d'un "-". Par exemple, l'attribut correspondant au paramètre maxiGos in3dOn sera data-maxigos-in3d-on.

Beaucoup de choses peuvent être modifiées en utilisant les attributs. Par exemple, pour afficher un diagramme sans effet 3D avec un lecteur NeoClassic qui est à l'origine avec effet 3d, on peut utiliser :

<script src="xxx/maxigos-neo-classic-diagram.js" data-maxigos-in3d-on="0">
(;FF[4]GM[1]SZ[19]VW[aa:ii]FG[1]AW[ee]AB[de][fe][ed]LB[ef:a][gg:素晴らしい]TR[ee])
</script>

On obtient :

Il est aussi possible de modifier l'aspect du lecteur via des feuilles de style, comme par exemple la couleur du fond du goban, mais aussi beaucoup d'autres caractéristiques (voir le chapitre Balises et classes css utilisées par maxiGos pour plus de détails).

Par exemple, on peut modifier la taille du lecteur, le fond du goban, la couleur des lignes, etc. avec :

div.mxGlobalBoxDiv.mxDiagramConfig.mxNeoClassicTheme
{
	--gobanMaxWidth:60em;
}
div.mxGlobalBoxDiv.mxDiagramConfig.mxNeoClassicTheme svg
{
	background-image:none;
	background:#a72926;
}
div.mxGlobalBoxDiv.mxDiagramConfig.mxNeoClassicTheme .mxGobanLine,
div.mxGlobalBoxDiv.mxDiagramConfig.mxNeoClassicTheme .mxMark.mxOnEmpty:not(.mxPointBackground)
{
	stroke:#fff;
}
div.mxGlobalBoxDiv.mxDiagramConfig.mxNeoClassicTheme .mxStar,
div.mxGlobalBoxDiv.mxDiagramConfig.mxNeoClassicTheme .mxIndice,
div.mxGlobalBoxDiv.mxDiagramConfig.mxNeoClassicTheme .mxLabel.mxOnEmpty:not(.mxPointBackground)
{
	fill:#fff;
	stroke:#fff;
}
div.mxGlobalBoxDiv.mxDiagramConfig.mxNeoClassicTheme .mxPointBackground.mxOnEmpty
{
	fill:#0003;
	stroke:none;
}

Méthode utilisant un plugin

Voir les pages des plugins (pour Joomla et pour Wordpress) pour plus de détails.

Méthode utilisant un BBCode

Voir la page des BBCodes pour plus de détails.

Méthode utilisant un "générateur" en php

Il s'agit d'une méthode plus sophistiquée que celle utilisant les lecteurs autonomes, permettant une personnalisation plus lourde.

Un générateur est un script php qui va fabriquer "à la volée" le code javascript du lecteur en fonction d'informations de configuration qu'il contient.

Chaque lecteur autonome qui est dans le dossier "_alone" des exemples fournis avec maxiGos possède son générateur qui lui est dans le dossier "_maker" des exemples.

La ligne à insérer dans vos pages web

On inclut à l'endroit où doit s'afficher maxiGos dans la page web une ligne du genre :

<script src="xxx/classic/_maker/basic.php">
yyy/myFirstSgf.sgf
</script>

Il faut évidemment adapter le chemin (ici "xxx/") préfixant le script classic/_maker/basic.php qui est le générateur, en fonction de l'endroit où vous avez installé maxiGos sur votre site, et de l'endroit où se trouve votre page. Il s'agit du chemin relatif entre votre page et le script php du générateur.

En fait, on peut utiliser le même genre de ligne que pour les lecteurs autonomes, la seule différence étant qu'on remplace le nom du script autonome (par exemple classic/_alone/maxigos-classic-basic.js) par le nom de son générateur (par exemple classic/_maker/basic.php).

Personnalisation des lecteurs insérés par un générateur

Comme pour les lecteurs autonomes, on peut personnaliser un lecteur inséré par un générateur en utilisant des attributs de la forme data-maxigos-xxx dans la balise où s'affiche ce lecteur, et modifier l'aspect du lecteur via des feuilles de style (voir le chapitre Personnalisation des lecteurs autonomes pour plus de détails).

Mais on peut en plus modifier le code du générateur, ce qui donne encore plus de possibilités de personnalisation.

Méthode utilisant un "chargeur" en javascript

Cette méthode permet de ne pas avoir à insérer le code de maxiGos à chaque endroit de la page où doit s'afficher un lecteur, mais seulement le code du chargeur une fois en fin de page. Elle est par contre sensiblement plus lente que les précédentes. Il est conseillé de ne l'utiliser que si aucune des méthodes précédentes n'est possible.

Un chargeur est un script javascript qui recherche dans la page toutes les balises où un lecteur doit être affiché et qui charge à la volée pour chacune de ces balises le script javascript d'un lecteur maxiGos.

Les lignes à insérer dans vos pages web

En pratique, on insère dans la page web aux endroits où l'on souhaite afficher un lecteur des balises comme <div> et </div> dont l'un des attributs est data-maxigos. La valeur de cet attribut est le nom de la configuration de maxiGos à employer, suivi d'une virgule, suivi du thème maxiGos à employer.

On insère ensuite le nom d'un fichier sgf ou un texte représentant du sgf ou une url pouvant générer du sgf entre ces balises.

On insère enfin le script mgosLoader.js (qui est le chargeur fourni avec maxiGos) après toutes les balises de la page dont l'un des attributs est data-maxigos.

Par exemple :

<div data-maxigos="Problem,Classic">
(;FF[4]GM[1]SZ[19]VW[aa:lh]
EV[N° 1 .|. Niveau 1]
FG[1]ST[2]
AW[ab][bb][cb][db][da]
AB[bc][cc][dc][ec][eb][gb][be]
C[À Noir de jouer]
;B[ba]C[Correct !])
</div>

<div data-maxigos="Problem,Classic">
(;FF[4]GM[1]SZ[19]VW[aa:lh]
EV[N° 2 .|. Niveau : 1]
AW[da][ea][fb][dc][ec][fc][ad][bd][cd]
AB[ba][cb][db][eb][ac][bc][cc]
C[À Noir de jouer]
;B[ab]C[Correct !])
</div>

<script src="ppp/_js/mgosLoader.js"></script>

Il faut évidemment adapter le chemin (ici "ppp") préfixant le script mgosLoader.js, en fonction de l'endroit où vous avez installé maxiGos sur votre site, et de l'endroit où se trouve votre page.

Personnalisation des lecteurs insérés par un chargeur

Comme pour les lecteurs autonomes, on peut personnaliser un lecteur inséré par un chargeur en utilisant des attributs de la forme data-maxigos-xxx dans la balise où s'affiche ce lecteur, et modifier l'aspect du lecteur via des feuilles de style (voir le chapitre Personnalisation des lecteurs autonomes pour plus de détails).

Internationalisation

Il est possible d'indiquer à MaxiGos dans quelle langue il doit afficher ses textes.

Quels sont les parties de maxiGos concernés ?

Il s'agit principalement des messages, des boutons, des menus, et éventuellement des textes générés par maxiGos à partir des informations contenues dans les sgf (titre, date, résultat, etc.).

Par contre, les commentaires contenus dans les sgf ne sont pas traduits.

Quelles sont les langues disponibles ?

Cinq langues sont pour l'instant disponibles (entre parenthèse les codes langues correspondants) : l'anglais ("en"), le français ("fr"), le japonais ("ja"), le chinois simplifié ("zh-hans") et le chinois traditionel ("zh-hant").

Comment maxiGos détermine la langue à employer ?

Pour déterminer quelle langue doit être utilisée, maxiGos recherche le code langue correspondant selon la procédure suivante :

Que faire en pratique ?

En pratique, le plus simple est de spécifier l'attribut lang de la balise <html> de la page, ou, si la langue de la page est différente de l'une des langues disponibles pour maxiGos, de spécifier l'attribut lang de la balise de maxiGos (ou de la balise dans laquelle doit s'afficher le lecteur ou l'une de ses balises parentes en cas d'utilisation d'un chargeur).

Par exemple :

<script src="ppp/maxigos-neo-classic-game.js"
	lang="en">
qqq/blood-vomit-en.sgf
</script>

Pour une autre langue que le français et l'anglais, il faut en plus inclure avant tout appel à maxiGos un script d'internationalisation pour cette autre langue. Par exemple, pour le japonais, il faut inclure le script maxigos-i18n-ja.js qui se trouve dans le dossier "_i18n/" :

<script src="rrr/maxigos-i18n-ja.js"></script>
<script src="ppp/maxigos-neo-classic-game.js"
	lang="ja">
qqq/blood-vomit-ja.sgf
</script>

Il faut bien sûr remplacer "rrr" par un chemin relatif entre la page web et le dossier où se trouve le script d'internationalisation.

Si vous ne pouvez pas ou ne souhaitez pas à avoir à insérer cette ligne dans chacune de vos pages, vous pouvez simplement ajouter le code contenu dans le script d'internationalisation correspondant à la langue choisie au début du code des lecteurs maxiGos que vous utilisez.

Tous les scripts d'internationalisation fournis avec maxiGos sont dans le dossier "_i18n". Si le script d'internationalisation dont vous avez besoin n'existe pas encore, vous pouvez essayer de le créer (inspirez-vous de celui du japonais).

Note : si vous créez un script d'internationalisation, c'est une bonne pratique de choisir un code langue qui soit ISO 639 (par exemple "ja" pour japonais et non pas "jp").

Internationalisation et encodage

L'internationalisation et l'encodage sont deux notions différentes.

De préférence, il vaut mieux avoir des pages et des fichiers sgf encodés en "UTF-8". Mais maxiGos peut fonctionner avec des pages qui ne sont pas en "UTF-8", et lire des sgf qui de même ne sont pas en "UTF-8" (voir le chapitre Encodage pour plus de détails).

Encodage

Encodage de la page dans laquelle on souhaite insérer un lecteur maxiGos

MaxiGos fait tout en UTF-8, mais la page dans laquelle est inséré un lecteur maxiGos peut être dans n'importe quel encodage.

Si la page dans laquelle est inséré un script maxiGos n'est pas en UTF-8, il suffit d'ajouter dans sa balise <script> l'attribut charset avec la valeur "UTF-8". Ainsi, le navigateur pourra transformer de manière appropriée le contenu de ces scripts dans l'encodage de la page.

Il est à noter que lorsqu'on insère directement du sgf dans la page (sans utiliser de fichier sgf donc), maxigos ignore la propriété CA de ce sgf puisque de facto, ce sgf a le même encodage que la page et non l'encodage indiqué dans sa propriété CA. A priori, on n'a rien de spécial faire dans ce cas, car quand on copie du sgf à l'aide d'un logiciel de traitement de texte dans le code d'une page html/php, c'est le logiciel de traitement de texte qui fait la conversion appropriée.

Il faut tout de même que l'encodage réel de la page corresponde à l'encodage spécifié pour cette page d'une manière ou d'une autre.

Par exemple, si la page a été enregistrée en Shift_JIS, il est souhaitable qu'elle contienne dans sa partie <head> la ligne :

<meta charset="Shift_JIS">

Et le code dans la partie <body> appelant un script maxiGos pourrait être dans ce cas :

<script src="rrr/maxigos-i18n-ja.js"
	charset="UTF-8">
</script>
<script src="ppp/maxigos-neo-classic-game.js"
	lang="ja"
	charset="UTF-8">
qqq/blood-vomit-ja.sgf
</script>

Il existe d'autres manières de spécifier l'encodage d'une page (par exemple via php ou via la configuration du serveur). L'important est que la spécification corresponde bien à l'encodage réel de la page.

Encodage des fichiers sgf

L'encodage d'un fichier sgf doit être indiqué dans sa propriété CA. Et par défaut, quand un fichier sgf n'a pas de propriété "CA", cela signifie qu'il doit être encodé en ISO-8859-1. Si la propriété CA est présente dans le fichier sgf, l'encodage réel du fichier doit correspondre à la valeur de la propriété CA.

MaxiGos utilise cette propriété CA pour déterminer l'encodage du fichier sgf, et transforme tout en UTF-8 (il sera donc toujours un peu plus rapide d'utiliser des fichiers sgf en UTF-8). Il est de ce fait possible d'utiliser des fichiers sgf d'encodages variés au sein d'une même page.

Quand l'affichage n'est pas celui attendu, c'est le plus souvent dû au fait que le fichier a un encodage réel différent de celui qui a été spécifié dans sa propriété CA (faute malheureusement extrêmement courante dans les fichiers sgf d'origine asiatique). Pour corriger ce problème, il faut soit modifier la propriété CA du fichier sgf pour que sa valeur corresponde à son encodage réel, soit ré-enregistrer le fichier dans l'encodage spécifié dans sa propriété CA (on peut faire tout ça avec la plupart des éditeurs de texte, le plus difficile étant de déterminer quel est l'encodage réel du fichier).

Ceci étant, bien qu'en théorie maxiGos peut fonctionner dans une page qui n'est pas en "UTF-8", et lire des fichiers qui ne sont pas en "UTF-8", il vaut mieux quand on le peut tout faire en UTF-8.

Encodage et internationalisation

Encodage et internationalisation sont deux choses différentes. "UTF-8" est adapté pour toute(?) langue, aussi c'est le meilleur choix quand on peut l'utiliser. Quand cela n'est pas possible, attention, car certains encodages peuvent ne pas afficher certains caractères de certaines langues. Par exemple, les mots en japonais d'un fichier sgf en Shift-JIS ne pourront pas être transformés automatiquement et s'afficher correctement dans une page en "ISO-8859-1". Par contre, ils pourront être transformés automatiquement et s'afficher correctement dans une page en 'UTF-8".

N'utilisez pas des noms d'encodage tels que "UTF-8", "ISO-8859-1", "Shift-JIS", "Big5", "GB18030" comme valeur des attributs lang et data-maxigos-l. Utilisez un code langue comme "en", "fr", "ja", zh-hans" ou "zh-hant".

Diagnostic à effectuer en cas de mauvais affichage (caractères illisibles ou douteux)

Vérifier l'encodage du fichier sgf

Le fichier sgf n'a pas de propriété CA

Si le fichier sgf n'a pas de propriété CA, et si en ouvrant le fichier avec un éditeur de texte, celui-ci détecte un autre encodage que "ISO-8859-1", et si l'affichage du contenu dans l'éditeur semble bon (pas de caractère illisble ou douteux), il devrait suffire d'ajouter dans le fichier sgf après le premier ";" la propriété CA avec comme valeur le nom de l'encodage détecté par l'éditeur (par exemple CA[UTF-8]).

Si le fichier sgf n'a pas de propriété CA, et si l'encodage détecté par l'éditeur est "ISO-8859-1", et si l'affichage dans l'éditeur semble mauvais (caractères illisibles ou douteux), alors le problème vient bien du fichier sgf. Le fichier a probablement mal été enregistré par son auteur et retrouver le bon encodage sera plus ou moins facile : si l'on arrive à retrouver le bon encodage il faudra transformer (la méthode dépend de ce que l'auteur a fait) le fichier et l'enregistrer dans cet encodage, en n'oubliant pas de donner aussi à la propriété CA du fichier sgf le nom de cet encodage.

Si le fichier sgf n'a pas de propriété CA, et si l'encodage détecté par l'éditeur est "ISO-8859-1", et si l'affichage dans l'éditeur semble bon, alors le problème ne vient probablement pas du fichier sgf.

Le fichier sgf a une propriété CA

Si le fichier sgf a une propriété CA, et si en ouvrant le fichier avec un éditeur de texte, celui-ci détecte un autre encodage que celui indiqué par la propriété CA, et si l'affichage du contenu dans l'éditeur semble bon (pas de caractère illisible ou douteux) il devrait suffire de remplacer la valeur de la propriété CA par le nom de l'encodage détecté par l'éditeur.

Si le fichier sgf a une propriété CA, et si l'encodage détecté par l'éditeur correspond à celui indiqué dans la propriété CA du fichier sgf, et si l'affichage dans l'éditeur semble mauvais (caractères illisibles ou douteux), alors le problème vient bien du fichier sgf. Le fichier a probablement mal été enregistré par son auteur et retrouver le bon encodage sera plus ou moins facile : si l'on arrive à retrouver le bon encodage il faudra transformer (la méthode dépend de ce que l'auteur a fait) le fichier et l'enregistrer dans cet encodage, en n'oubliant pas de donner aussi à la propriété CA du fichier sgf le nom de cet encodage.

Si le fichier sgf a une propriété CA, et si l'encodage détecté par l'éditeur correspond à celui indiqué dans la propriété CA du fichier sgf, et si l'affichage dans l'éditeur semble bon, alors le problème ne vient probablement pas du fichier sgf.

Vérifier l'encodage de la page

Si la page n'est pas encodée en "UTF-8", vérifiez que l'encodage employé dans le fichier sgf peut effectivement être transformé et affichée avec l'encodage de la page.

Si la page n'est pas encodée en "UTF-8", vérifiez que vous avez bien un charset="UTF-8" dans la balise <script> du lecteur, et éventuellement dans la balise <script> d'un script d'internationalisation de maxiGos.

Si vous avez créé un composant, ou modifié un composant de maxiGos, vérifiez que vous l'avez bien enregistré en "UTF-8" (attention au copier-coller d'un code source affiché par un navigateur : les caractères non latin peuvent y être mal codés).

Sinon, le problème vient probablement d'ailleurs.

Paramétrage

Un lecteur maxiGos est constitué d'un ensemble de composants, comme par exemple le goban, la barre de navigation, la boite à commentaires, etc.

Le comportement du lecteur et de chacun de ses composants peut être modifié par des paramètres.

À chaque paramètre correspond un attribut qui peut être ajouté à la balise du lecteur maxiGos concerné (ou de la balise dans laquelle doit s'afficher le lecteur en cas d'utilisation d'un chargeur).

Des exemples sont donnés dans le chapitre Personnalisation des lecteurs autonomes.

Les paramètres de maxiGos sont regroupés par composant.

Liste des composants prédéfinies

Les composants prédéfinis sont :

Paramètres généraux

Paramètre Attribut Description Valeurs possibles Valeur par défaut
allowFileAsSource data-maxigos-allow-file-as-source S'il vaut 1, maxiGos, maxiGos accepte les fichiers sgf comme source de données. (0,1) 1
allowStringAsSource data-maxigos-allow-string-as-source S'il vaut 1, maxiGos, maxiGos accepte les chaines de caractères contenant du sgf comme source de données. (0,1) 1
htmlParenthesis data-maxigos-html-parenthesis S'il vaut 1, maxiGos remplace les éventuelles "&#40;" et "&#41;" par "(" et ")" dans le source sgf lorsque celui-ci est un enregistrement sgf inséré entre les balises de l'élément html où doit s'afficher le lecteur sgf. Ce paramètre est utile par exemple en cas d'utilisation de maxiGos dans les forums fonctionnant avec phpBB3 dont l'éditeur remplace les "(" et ")" par "&#40;" et "&#41;". (0,1) 0
initMethod data-maxigos-init-method Action initiale de maxiGos : aller au début du Sgf ("first"), aller à la fin de la variante principale du Sgf ("last"), parcourir en boucle le Sgf ("loop") ou avancer de n noeuds dans l'arbre des coups. On ne peut utiliser "loop" que si le composant Loop est aussi utilisé par le lecteur. ("first","loop","last") "first"
sgfLoadCoreOnly data-maxigos-sgf-load-core-only S'il vaut 1, on ne garde que les informations essentielles sur la partie (EV, RO, DT, PC, PB, PW, BR, BW, BT, BW, RU, TM, OT, HA, KM, RE) lors du décodage du sgf. (0,1) 0
sgfLoadMainOnly data-maxigos-sgf-load-main-only S'il vaut 1, on ne garde que la variante principale lors du décodage du sgf. (0,1) 0
sgfSaveCoreOnly data-maxigos-sgf-save-core-only S'il vaut 1, on ne garde que les informations essentielles sur la partie (EV, RO, DT, PC, PB, PW, BR, BW, BT, BW, RU, TM, OT, HA, KM, RE) lors de l'encodage du sgf. (0,1) 0
sgfSaveMainOnly data-maxigos-sgf-load-main-only S'il vaut 1, on ne garde que la variante principale lors de l'encodage du sgf. (0,1) 0
sourceFilter data-maxigos-source-filter Une expression régulière que doit respecter le nom de la source sgf. ce paramètre est utile par exemple pour rejeter une source indésirable insérée par un utilisateur dans un forum. Une regex ^[^?]+\\.sgf$

Composant About

Ce composant affiche un bouton permettant d'afficher une boite "À propos", qui contient des informations sur le lecteur (un lien vers le code source, le thème, la configuration, la licence utilisée, le copyright).

Paramètre Attribut Description Valeurs possibles Valeur par défaut
aboutAlias data-maxigos-about-alias Indique dans quel élément du tableau de traduction il faut rechercher ce qui sera affiché sur le bouton "About".

S'il vaut null, maxiGos affiche par défaut "À propos" sur le bouton "About".

Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide.
Une chaine null
aboutBtnOn data-maxigos-about-btn-on S'il vaut 1, maxiGos affiche le bouton "About". (0,1) 0

Composant AnimatedStone

Ce composant déplace les pierres depuis les coins du goban vers les intersections où elles sont jouées.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
animatedStoneOn data-maxigos-animated-stone-on S'il vaut 1, maxiGos déplace les pierres depuis les coins du goban vers les intersections où elles sont jouées. (0,1) 0
animatedStoneTime data-maxigos-animated-stone-time Temps de réference (en milliseconde) utilisé pour calculer le temps que mettra une pierre pour aller du bol de pierres à son emplacement sur le goban. Le temps réel dépend de la distance entre le point de début et le point de fin de la translation.

Sa valeur par défaut est celle du paramètre loopTime si le composant Loop est utilisé, 1000 ms sinon.
Un nombre réel positif 1000

Composant BackToGame

Ce composant affiche un bouton permettant à un utilisateur ayant essayé quelques variantes de revenir au coup le plus proche dans la variation principale du sgf de départ.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
backToGameAlias data-maxigos-back-to-game-alias Indique dans quel élément du tableau de traduction il faut rechercher ce qui sera affiché sur le bouton "BackToGame".

S'il vaut null, maxiGos affiche par défaut "Revenir au sgf" sur le bouton "BackToGame".

Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide.
Une chaine null
backToGameBtnOn data-maxigos-back-to-game-btn-on S'il vaut 1, maxiGos affiche le bouton "BackToGame". (0,1) 0

Composant Cartouche

Ce composant affiche un cartouche pour chaque joueur pouvant contenir selon son paramétrage une pierre indiquant la couleur du joueur, son nom, son niveau, le nombre de ses prisonniers et son bol de pierres.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
bowlOn data-maxigos-bowl-on S'il vaut 1, maxiGos affiche dans le cartouche les bols de pierres. (0,1) 1
cartoucheBoxOn data-maxigos-cartouche-box-on S'il vaut 1, maxiGos affiche un cartouche pour chaque joueur. (0,1) 0
prisonerOn data-maxigos-prisoner-on S'il vaut 1, maxiGos affiche dans le cartouche le nombre de prisonniers de chaque joueur. (0,1) 1
shortHeaderOn data-maxigos-short-header-on S'il vaut 1, maxiGos affiche dans le cartouche une courte entête contenant pour chaque joueur une pierre indiquant sa couleur, son nom et son niveau. (0,1) 1

Composant Comment

Ce composant affiche une boite contenant les commentaires se trouvant dans le sgf.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
allInComment data-maxigos-all-in-comment S'il vaut 1, la boite à commentaires contient tous les commentaires depuis le début du sgf jusqu'au noeud courant, au lieu de ne contenir que le commentaire pour le noeud courant. (0,1) 0
canCommentFocus data-maxigos-can-comment-focus S'il vaut 1, la boite à commentaire peut prendre le focus en navigation clavier (utile quand le commentaire courant ne peut pas être affiché en totalité dans la boite à commentaires sans barre de défilement).

Par contre, si l'on est certain que le commentaire pourra être affiché en totalité, il faut laisser ce paramètre à 0.
(0,1) 0
commentLabelOn data-maxigos-comment-label-on S'il vaut 1, maxiGos affiche un titre à la boite à commentaire. (0,1) 0
headerInComment data-maxigos-header-in-comment S'il vaut 1, maxiGos ajoute au commentaire une entête contenant les informations du sgf (propriétés EV, DT, PC, PB, PW, BR, WR, etc.)

Pour que ce paramètre ait un effet, il faut que le composant Header soit lui aussi présent.
(0,1) 0

Composant Cut

Ce composant affiche un bouton permettant de couper l'arbre sgf à partir du noeud courant.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
cutAlias data-maxigos-cut-alias Indique dans quel élément du tableau de traduction il faut rechercher ce qui sera affiché sur le bouton "Cut".

S'il vaut null, maxiGos affiche par défaut "Couper" sur le bouton "Cut".

Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide.
Une chaine null
cutBtnOn data-maxigos-cut-btn-on S'il vaut 1, maxiGos affiche le bouton "Cut". (0,1) 0

Note : le bouton s'appelle "SimpleCut" et non pas "Cut" pour éviter une éventuelle confusion avec l'outil "Cut" du composant Edit.

Composant Edit

Ce composant affiche une barre d'outils aidant à modifier un sgf.

Il n'a pas de paramètre.

Composant File

Ce composant affiche un menu de gestion de fichier ("Nouveau", "Ouvrir", "Enregistrer", etc.)

Il s'utilise avec le composant Menu.

Il n'a pas de paramètre.

Composant Goban

Ce composant affiche le goban. C'est le seul composant qui doit être obligatoirement présent.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
asInBookOn data-maxigos-as-in-book-on S'il vaut 1, maxiGos affiche les pierres comme dans les livres (c'est à dire qu'il laisse les prisonniers en place sur le goban). S'il vaut 0, maxiGos retire les prisonniers du goban. S'il vaut null, maxiGos recherche dans les propriétés FG du sgf s'il faut ou non retirer les prisonniers.

Cette propriété est essentielle quand on veut afficher des diagrammes ou des kifus.
(0,1,null) null
eraseGridUnder data-maxigos-erase-grid-under S'il vaut 1, maxiGos efface les lignes de la grille sous les marques et étiquettes. (0,1) 0
gBoxParent data-maxigos-g-box-parent Indique un nom de boite par dessus laquelle viendront s'afficher les dialogues générés via une action de l'utilisateur (pour changer les options, afficher l'aide, etc.)

En pratique, cela sert essentiellement à spécifier un ancètre de "Goban" lorsque "Goban" est trop petit.
chaine "Goban"
gridMargin data-maxigos-grid-margin Nombre de pixels à ajouter entre le bord de la grille et son contenu. Un nombre réel 0
gridPadding data-maxigos-grid-padding Nombre de pixels à ajouter à l'extérieur de la grille. Un nombre réel 0
gobanMargin data-maxigos-goban-margin Nombre de pixels à ajouter entre le bord du goban et son conteneur. Un nombre réel 0
gobanPadding data-maxigos-goban-padding Nombre de pixels à ajouter entre la grille du goban et son conteneur. Un nombre réel 0
in3dOn data-maxigos-in3d-on S'il vaut 1, maxiGos affiche les pierres et éventuellement le goban avec un effet 3d.

Bien que ce paramètre soit principalement utilisé dans le composant Goban, il est aussi utilisé par d'autres composants comme Cartouche, MoveInfo et NotSeen.
(0,1) 1
indicesOn data-maxigos-indices-on S'il vaut 1, maxiGos affiche les indices autour du goban. S'il vaut 0, maxiGos cache les indices autour du goban. S'il vaut null, maxiGos recherche dans les propriétés FG du sgf s'il faut ou non afficher les indices. (0,1,null) null
japaneseIndicesOn data-maxigos-japanese-indices-on S'il vaut 1, maxiGos affiche les indices autour du goban façon japonaise (système dit "iroha").

Pour que ce paramètre ait un effet, il faut que indicesOn valle 1.
(0,1) 0
magicParentNum data-maxigos-magic-parent-num Ce paramètre n'a d'effet que si pointsNumMax n'est pas nul. Il indique pour quelle boite parente contenant le goban on doit appliquer une réduction en cas de goban ou de vues partielles de goban plus petits que le goban de référence. Ce paramètre est rarement nécessaire. Un entier positif 0
marksAndLabelsOn data-maxigos-marks-and-labels-on S'il vaut 1, maxiGos affiche les marques et étiquettes sur le goban. (0,1) 0
markOnLastOn data-maxigos-mark-on-last-on S'il vaut 1, maxiGos affiche une marque sur le dernier coup placé sur le goban. (0,1) 0
numAsMarkOnLastOn data-maxigos-num-as-mark-on-last-on S'il vaut 1, maxiGos affiche un numéro comme marque sur le dernier coup placé sur le goban.

Pour que ce paramètre ait un effet, il faut que markOnLastOn valle 1.
(0,1) 0
numberingOn data-maxigos-numbering-on S'il vaut 2, maxiGos affiche la numérotation des pierres modulo 100. S'il vaut 1, maxiGos affiche la numérotation des pierres. S'il vaut 0, maxiGos cache la numérotation des pierres. S'il vaut null, maxiGos recherche dans les propriétés FG, MN et PM du sgf comment il faut afficher la numérotation des pierres. (0,1,2,null) null
oldJapaneseIndicesOn data-maxigos-old-japanese-indices-on S'il vaut 1, maxiGos affiche les indices autour du goban façon japonaise ancienne (avec des kanjis).

Pour que ce paramètre ait un effet, il faut que indicesOn valle 1.
(0,1) 0
oldJapaneseNumberingOn data-maxigos-old-japanese-numbering-on S'il vaut 1, maxiGos affiche la numérotation des pierres de façon japonaise ancienne (avec des kanjis).

Pour que ce paramètre ait un effet, il faut que numberingOn valle 1.
(0,1) 0
pointsNumMax data-maxigos-points-num-max Ce paramètre est utile lorsque l'on veut afficher dans une même page des gobans de différentes tailles ou des vues partielles de goban en conservant le même espacement entre les lignes. S'il vaut 0, maxiGos se contente d'agrandir le lecteur autant qu'il le peut quelque soit son nombre d'intersections. Sinon, maxiGos calcule la taille qu'occuperait un goban de référence ayant pointsNumMax intersections dans sa largeur. Il affiche ensuite les gobans plus petits ou les vues partielles de goban avec le même espacement entre les intersections que pour le goban de référence. Les gobans ou vues partielles de goban ayant plus de pointsNumMax intersections dans leur largeur ne sont pas concernés. Un entier positif 0
specialStoneOn data-maxigos-special-stone-on S'il vaut 1, maxiGos affiche des lignes grises courbes sur les pierres blanches (imitant les pierres en coquillage) et un reflet différent sur les pierres noires (imitant les pierres en ardoise).

Cet affichage est plus lent que l'affichage normal.

Pour que ce paramètre ait un effet, il faut que in3dOn valle 1.
(0,1) 0
stoneShadowOn data-maxigos-stone-shadow-on S'il vaut 1, maxiGos affiche une ombre pour les pierres du goban. (0,1) 0
stretching data-maxigos-stretching Indique combien de pixels on doit ajouter autour des pierres.

1er nombre : pixels (en coordonnées svg) à ajouter horizontalement pour un goban en 3d.
2e nombre : pixels (en coordonnées svg) à ajouter verticalement pour un goban en 3d.
3e nombre : pixels (en coordonnées svg) à ajouter horizontalement pour un goban en 2d.
4e nombre : pixels (en coordonnées svg) à ajouter verticalement pour un goban en 2d.
liste de 4 nombres réels "0,0,1,1"
territoryMark data-maxigos-territory-mark Indique quel type de marque on on emploie pour marquer les territoires (ces marques sont spécifiées par les propriétés sgf TB et TW).

"MA" : croix
"MS" : pierres miniatures
("MA","MS") "MS"

Composant Goto

Ce composant affiche d'une part une barre coulissante permettant de se déplacer rapidement dans l'arbre des coups et d'autre part un champ de saisie d'un numéro de coup où l'on souhaite se rendre.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
gotoBoxOn data-maxigos-goto-box-on S'il vaut 1, maxiGos affiche une barre coulissante permettant une avance ou un recul rapide dans l'arbre des coups. (0,1) 0
gotoInputOn data-maxigos-goto-input-on S'il vaut 1, maxiGos affiche un champ de saisie dans lequel on peut saisir le numéro d'un coup que l'on veut afficher. (0,1) 0
gotoInputBefore data-maxigos-goto-input-before S'il vaut un nom de bouton présent dans la barre de navigation, maxiGos insère le champ de saisie du numéro du coup courant devant ce bouton. Sinon, il l'insère en dernier dans la barre de navigation. Une chaine ""

Composant Guess

Paramètre Attribut Description Valeurs possibles Valeur par défaut
guessBoxOn data-maxigos-guess-box-on S'il vaut 1, maxiGos affiche une barre indiquant si l'utilisateur est proche ou pas de deviner l'un des coups suivants. (0,1) 0
canPlaceGuess data-maxigos-can-place-guess S'il vaut 1, maxiGos place un coup sur une intersection où l'utilisateur vient de cliquer uniquement s'il est dans le sgf. S'il vaut 0 et que le paramètre canPlaceVariation vaut 1, il place un coup sur une intersection où l'utilisateur vient de cliquer que ce coup soit ou non dans le sgf. Si ces deux paramètres vallent 0, maxiGos ne place rien sur le goban suite à un clic de l'utilisateur.

Ce paramètre est ignoré si canPlaceVariation vaut 1.
(0,1) 0

Composant Header

Ce composant affiche un bouton, et la boite d'entête où s'affiche le contenu des propriétés sgf EV, RO, PB, PW, BR, WR, DT, PC, RU, TM, KM, HA, RE, GC, etc.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
canHeaderFocus data-maxigos-can-header-focus S'il vaut 1, la boite à entête peut prendre le focus en navigation clavier (utile quand l'entête ne peut pas être affichée en totalité dans sa boite sans barre de défilement).

Par contre, si l'on est certain que l'entête pourra être affiché en totalité, il faut laisser ce paramètre à 0.
(0,1) 0
concatDateToTitle data-maxigos-concat-date-to-title S'il vaut 1, maxiGos affiche la date après le titre. (0,1) 0
concatTeamToPlayer data-maxigos-concat-team-to-player S'il vaut 1, maxiGos affiche le nom de l'équipe après le nom des joueurs. (0,1) 0
concatKomiToResult data-maxigos-concat-komi-to-result S'il vaut 1, maxiGos affiche le komi après le résultat. (0,1) 0
concatHandicapToResult data-maxigos-concat-handicap-to-result S'il vaut 1, maxiGos affiche le handicap après le résultat. (0,1) 0
concatNumOfMovesToResult data-maxigos-concat-num-of-moves-to-result S'il vaut 1, maxiGos affiche le nombre de coups après le résultat. (0,1) 0
headerAlias data-maxigos-header-alias Indique dans quel élément du tableau de traduction il faut rechercher ce qui sera affiché sur le bouton "Header".

S'il vaut null, maxiGos affiche par défaut "Entête" sur le bouton "Header".

Il est souhaitable que la valeur contienne un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide.
Une chaine null
headerBoxOn data-maxigos-header-box-on S'il vaut 1, maxiGos affiche l'entête du sgf dans la boite du composant (contenu des propriétés sgf EV, RO, etc.)

S'il vaut 0, l'entête peut quand même être affichée soit à la place du goban via un click sur le bouton "Informations" qui s'affiche dans la boite du composant si headerBtnOn vaut 1, soit dans la boite à commentaire si headerInComment vaut 1, soit les deux.
(0,1) 0
headerBtnOn data-maxigos-header-btn-on S'il vaut 1, maxiGos affiche un bouton "Informations" dans la boite du composant au lieu d'y afficher l'entête elle-même. Un click sur ce bouton affiche l'entête à la place du goban. Ce paramètre est sans effet si headerBoxOn vaut 1. (0,1) 0
hideBlack data-maxigos-hide-black S'il vaut 1, maxiGos n'affiche pas le nom et le niveau de Noir. (0,1) 0
hideDate data-maxigos-hide-date S'il vaut 1, maxiGos n'affiche pas la date. (0,1) 0
hideGeneralComment data-maxigos-hide-general-comment S'il vaut 1, maxiGos n'affiche pas le commentaire général. (0,1) 0
hideHandicap data-maxigos-hide-handicap S'il vaut 1, maxiGos n'affiche pas le handicap. (0,1) 0
hideKomi data-maxigos-hide-komi S'il vaut 1, maxiGos n'affiche pas le komi. (0,1) 0
hideNumOfMoves data-maxigos-hide-num-of-moves S'il vaut 1, maxiGos n'affiche pas le nombre de coups. (0,1) 0
hideNumOfMovesLabel data-maxigos-hide-num-of-moves-label S'il vaut 1, maxiGos n'affiche pas "Nombre de coups :" devant le nombre de coups. (0,1) 0
hidePlace data-maxigos-hide-place S'il vaut 1, maxiGos n'affiche pas le lieu. (0,1) 0
hideResult data-maxigos-hide-result S'il vaut 1, maxiGos n'affiche pas le résultat. (0,1) 0
hideResultLabel data-maxigos-hide-result-label S'il vaut 1, maxiGos n'affiche pas "Résultat :" devant le résultat. (0,1) 0
hideRules data-maxigos-hide-rules S'il vaut 1, maxiGos n'affiche pas le type de règle. (0,1) 0
hideTimeLimits data-maxigos-hide-time-limits S'il vaut 1, maxiGos n'affiche pas la durée de la partie. (0,1) 0
hideTitle data-maxigos-hide-title S'il vaut 1, maxiGos n'affiche pas le titre. (0,1) 0
hideWhite data-maxigos-hide-white S'il vaut 1, maxiGos n'affiche pas le nom et le niveau de Blanc. (0,1) 0

Note 1 : si headerBoxOn et headerBtnOn vallent tous les deux 0, maxiGos n'affiche pas du tout la boite du composant Header. Mais il pourra toujours afficher le contenu du composant ailleurs comme par exemple dans la boite du composant Comment si headerInComment vaut 1.

Note 2 : la différence entre le composant Header et le composant Info est que le composant Header ne fait qu'afficher les informations tandis que le composant Info permet de les modifier.

Composant Help

Ce composant affiche un bouton permettant d'afficher l'aide de l'éditeur sgf.

Il a été conçu pour s'utiliser avec le composant Edit.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
helpBtnOn data-maxigos-help-btn-on S'il vaut 1, maxiGos affiche le bouton "Help". (0,1) 0
helpAlias data-maxigos-help-alias Indique dans quel élément du tableau de traduction il faut rechercher ce qui sera affiché sur le bouton "Help".

S'il vaut null, maxiGos affiche par défaut "Aide" sur le bouton "Help".

Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide.
Une chaine null

Composant Image

Ce composant contient deux sous-composants, qui affichent chacun un bouton permettant de fabriquer une image de la position courante du goban au format PNG pour l'un et SVG pour l'autre.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
pngAlias data-maxigos-png-alias Indique dans quel élément du tableau de traduction il faut rechercher ce qui sera affiché sur le bouton "Png".

S'il vaut null, maxiGos affiche par défaut "PNG" sur le bouton "Png".

Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide.
Une chaine null
pngBtnOn data-maxigos-png-btn-on S'il vaut 1, maxiGos affiche le bouton "Png". (0,1) 0
svgAlias data-maxigos-svg-alias Indique dans quel élément du tableau de traduction il faut rechercher ce qui sera affiché sur le bouton "Svg".

S'il vaut null, maxiGos affiche par défaut "SVG" sur le bouton "Svg".

Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide.
Une chaine null
svgBtnOn data-maxigos-svg-btn-on S'il vaut 1, maxiGos affiche le bouton "Svg". (0,1) 0

Composant Info

Ce composant affiche une boite d'édition des propriétés d'information du sgf comme EV, RO, DT, PC, PB, PW, etc.

Il a été conçu pour s'utiliser avec le composant Edit.

Il n'a pas de paramètre.

Composant Lesson

Ce composant affiche un "assistant" qui affiche les commentaires dans une bulle.

Il n'a pas de paramètre.

Composant Loop

Affiche les boutons "Auto" et "Pause" démarrant ou arrêtant un affichage en boucle.

Ces boutons sont affichés dans la barre de navigation. Pour cela il faut les ajouter à la liste des boutons spécifiés par le paramètre navigations du composant Navigation.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
loopTime data-maxigos-loop-time Temps de référence en milliseconde servant à calculer le temps d'attente entre deux coups lors d'un affichage en boucle. Le temps d'attente T est allongé en cas d'affichage d'un éventuel commentaire de longueur L et se calcule selon la formule suivante : T=L*loopTime/20+loopTime. Un entier positif 1000
initialLoopTime data-maxigos-loop-time Temps servant à calculer la durée d'affichage de la position initiale. La durée d'affichage de cette position se calcule par la formule suivante : T=initialLoopTime*loopTime/1000.

Si ce paramètre est indéfini, on calcule la durée d'affichage de la position initiale comme pour n'importe quelle autre position.
Un entier positif 0
finalLoopTime data-maxigos-loop-time Temps servant à calculer la durée d'affichage de la position finale. La durée d'affichage de cette position se calcule par la formule suivante : T=finalLoopTime*loopTime/1000.

Si ce paramètre est indéfini, on calcule la durée d'affichage de la position initiale comme pour n'importe quelle autre position.
Un entier positif 0
mainVariationOnlyLoop data-maxigos-main-variation-only-loop S'il vaut 1, maxiGos n'affiche que la variante principale. (0,1) 0

Composant Menu

Ce composant affiche une liste de menus.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
menus data-maxigos-menus Liste des menus affichés par le composant Menu.

Les menus disponibles sont "File" (requiert la présence du composant File), "Edit" (requiert la présence du composant Edit), "View" (requiert la présence du composant View) et "Windows".
Une liste de chaines ""
menuTimeout data-maxigos-menu-timeout Durée en millisecondes pendant laquelle les sous-menus restent visibles. Un entier positif 10000

Composant MoveInfo

Ce composant affiche dans sa boite le numéro du coup courant et ses coordonnées.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
onlyMoveNumber data-maxigos-only-move-number S'il vaut 1, seul le numéro de coup est affiché. (0,1) 0

Composant Navigation

Ce composant affiche une barre de navigation.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
navigations data-maxigos-navigations Liste des boutons affichés par le composant Navigation.

Les boutons possibles sont "First", "TenPred", "Pred", "Next, "TenNext", "Last", "Auto" et "Pause".

"Auto" et "Pause" requiert la présence du composant Loop.
Une liste de chaines "First,TenPred,Pred,Next,TenNext,Last"

Composant NotSeen

Ce composant affiche la liste des coups joués non visibles sur le goban.

Il est utile quand le paramètre asInBookOn vaut 1.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
notSeenTwinStonesOn data-maxigos-not-seen-twin-stones-on S'il vaut 1, maxiGos affiche sur quelle pierre un coup est joué autant que possible. S'il vaut 0, il affiche les coordonnées du coup. (0,1) 1

Composant Option

Ce composant affiche un dialogue permettant de changer des options.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
hideAnimatedStoneOn data-maxigos-hide-animated-stone-on S'il vaut 1, maxiGos cache la case permettant de changer le paramètre animatedStoneOn. (0,1) 0
hideAnimatedStoneTime data-maxigos-hide-animated-stone-time S'il vaut 1, maxiGos cache le champ permettant de changer le paramètre animatedStoneTime. (0,1) 0
hideAsInBookOn data-maxigos-as-in-book-on S'il vaut 1, maxiGos cache la case permettant de changer le paramètre asInBookOn. (0,1) 0
hideCanGuess data-maxigos-can-guess S'il vaut 1, maxiGos cache le bouton permettant de changer le paramètre canGuess. (0,1) 0
hideCanScore data-maxigos-can-score S'il vaut 1, maxiGos cache le bouton permettant de changer le paramètre canScore. (0,1) 0
hideCanVariation data-maxigos-can-variation S'il vaut 1, maxiGos cache le bouton permettant de changer le paramètre canVariation. (0,1) 0
hideIn3dOn data-maxigos-hide-in3d-on S'il vaut 1, maxiGos cache la case permettant de changer le paramètre in3dOn. (0,1) 0
hideIndicesOn data-maxigos-hide-indices-on S'il vaut 1, maxiGos cache la case permettant de changer le paramètre indicesOn. (0,1) 0
hideLoopTime data-maxigos-hide-loop-time S'il vaut 1, maxiGos cache le champ permettant de changer le paramètre loopTime. (0,1) 0
hideMarksAndLabelsOn data-maxigos-hide-marks-and-labels-on S'il vaut 1, maxiGos cache la case permettant de changer le paramètre marksAndLabelsOn. (0,1) 0
hideMarkOnLastOn data-maxigos-hide-mark-on-last-on S'il vaut 1, maxiGos cache la case permettant de changer le paramètre markOnLastOn. (0,1) 0
hideNumberingOn data-maxigos-hide-numbering-on S'il vaut 1, maxiGos cache la case permettant de changer le paramètre numberingOn. (0,1) 0
hideSiblingsOn data-maxigos-hide-siblings-on S'il vaut 1, maxiGos cache la case permettant de changer le paramètre siblingsOn. (0,1) 0
hideVariationMarksOn data-maxigos-hide-variation-marks-on S'il vaut 1, maxiGos cache la case permettant de changer le paramètre variationMarksOn. (0,1) 0
optionAlias data-maxigos-option-alias Indique dans quel élément du tableau de traduction il faut rechercher ce qui sera affiché sur le bouton "Option".

S'il vaut null, maxiGos affiche par défaut "Options" sur le bouton "Option".

Il est souhaitable que la valeur contienne un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide.
Une chaine null
optionBoxOn data-maxigos-option-box-on S'il vaut 1, maxiGos affiche le dialogue des options dans la boite du composant.

S'il vaut 0, le dialogue des options peut quand même être affiché à la place du goban via un click sur le bouton "Option" qui s'affiche dans la boite du composant si optionBtnOn vaut 1.
(0,1) 0
optionBtnOn data-maxigos-option-btn-on S'il vaut 1, maxiGos affiche un bouton "Option" dans la boite du composant au lieu d'y afficher le dialogue des options. Un click sur ce bouton affiche le dialogue des options à la place du goban. Ce paramètre est sans effet si optionBoxOn vaut 1. (0,1) 0

Composant Pass

Ce composant affiche le bouton "Pass".

Paramètre Attribut Description Valeurs possibles Valeur par défaut
canPassOnlyIfPassInSgf data-maxigos-can-pass-only-if-in-sgf S'il vaut 1, maxiGos n'active le bouton "Pass" que si l'un des coups suivants dans le sgf est un passe. (0,1) 0
passAlias data-maxigos-pass-alias Indique dans quel élément du tableau de traduction il faut rechercher ce qui sera affiché sur le bouton "Pass".

S'il vaut null, maxiGos affiche par défaut "Passe" sur le bouton "Pass".

Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide.
Une chaine null
passBtnOn data-maxigos-pass-btn-on S'il vaut 1, maxiGos affiche le bouton "Pass". (0,1) 0

Composant Score

Ce composant affiche un bouton "Score".

Paramètre Attribut Description Valeurs possibles Valeur par défaut
scoreAlias data-maxigos-score-alias Indique dans quel élément du tableau de traduction il faut rechercher ce qui sera affiché sur le bouton "Score".

S'il vaut null, maxiGos affiche par défaut "Score" sur le bouton "Score".

Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide.
Une chaine null
scoreBtnOn data-maxigos-score-btn-on S'il vaut 1, maxiGos affiche le bouton "Score". (0,1) 0

Composant Sgf

Paramètre Attribut Description Valeurs possibles Valeur par défaut
sgfAction data-maxigos-sgf-action Action à effectuer lorsque l'on clique sur le bouton "Sgf". S'il vaut "Show", le sgf est affiché dans une boite par dessus le goban. S'il vaut "Download", il est téléchargé (si toutefois c'est possible avec la machine utilisée). "Show" ou "Download" "Show"
sgfAlias data-maxigos-sgf-alias Indique dans quel élément du tableau de traduction il faut rechercher ce qui sera affiché sur le bouton "Sgf".

S'il vaut null, maxiGos affiche par défaut "SGF" sur le bouton "Sgf".

Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide.
Une chaine null
sgfBtnOn data-maxigos-sgf-btn-on S'il vaut 1, maxiGos affiche le bouton "Sgf". (0,1) 0
toCharset data-maxigos-to-charset Ce paramètre a comme valeur le code d'un encodage ("UTF-8", "Big5", "GB18030", "Shift_JIS" ...). Il sert uniquement à indiquer dans quel encodage les fichiers sgf seront enregistrés par maxiGos (sa valeur remplaçant la valeur de la propriété CA initiale du sgf). Il ne sert pas lors de la lecture ou l'affichage d'un sgf et peut être différent de l'encodage de la page. En pratique, il est conseillé que sa valeur soit "UTF-8" ou éventuellement identique à l'encodage de la page. Une chaine "UTF-8"

Composant Solve

Paramètre Attribut Description Valeurs possibles Valeur par défaut
canPlaceSolve data-maxigos-can-place-solve S'il vaut 1, maxiGos place le coup de l'utilisateur s'il est dans le sgf et répond à ce coup. (0,1) 1
oldSolveBtnOn data-maxigos-old-solve-btn-on S'il vaut 1, maxiGos affiche le bouton "Retry" comme le bouton "First", le bouton "Undo" comme le bouton "Pred", et le bouton "Hint" comme le bouton "Next". (0,1) 0
solves data-maxigos-solves Liste des boutons à afficher pour ce composant.

4 boutons sont possibles : "Retry", "Undo", "Pass" et "Hint".
Liste de chaines "Retry,Undo"
specialMoveMatch data-maxigos-special-move-match En théorie, pour représenter un coup joué "ailleurs" (c.a.d. un "tenuki"), on insère deux coups consécutifs de la couleur opposée dans le sgf. Cependant, pour des raisons historiques, certains fichiers sgf utilisent d'autres méthodes pour faire cela, comme insérer un passe, un coup joué dans la partie invisble du goban, ou un coup joué en dehors du goban. Ce paramètre a pour but de gérer cela.

S'il vaut 0, maxiGos place un coup de l'utilisateur s'il correspond à une continuation du sgf ou si deux coups consécutifs de la couleur opposée sont trouvés dans le sgf.
S'il vaut 1, maxiGos place un coup de l'utilisateur s'il correspond à une continuation du sgf ou si deux coups consécutifs de la couleur opposée sont trouvés dans le sgf ou si les coordonnées d'une continuation correspond à un coup à l'extérieur du goban (comme B[zz] ou W[zz] pour un 19x19 par exemple).
S'il vaut 2, maxiGos place un coup de l'utilisateur s'il correspond à une continuation du sgf ou si deux coups consécutifs de la couleur opposée sont trouvés dans le sgf ou si les coordonnées d'une continuation correspond à un coup à l'extérieur du goban (comme B[zz] ou W[zz] pour un 19x19 par exemple) ou à un coup dans la partie invisible du goban (quand une propriété VW est présente).
S'il vaut 3, maxiGos place un coup de l'utilisateur s'il correspond à une continuation du sgf ou si deux coups consécutifs de la couleur opposée sont trouvés dans le sgf ou si les coordonnées d'une continuation correspond à un coup à l'extérieur du goban (comme B[zz] ou W[zz] pour un 19x19 par exemple) ou à un coup dans la partie invisible du goban (quand une propriété VW est présente) ou à un passe.
(0,1,2,3) 0

Composant Speed

Ce composant affiche une barre de réglage pour modifier la vitesse de placement des coups lors d'un affichage en boucle.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
loopTimeMax data-maxigos-loop-time-max Temps d'affichage (en milliseconde) le plus lent entre deux coups. Un nombre réel positif 10000

Composant Title

Ce composant affiche un titre fabriqué à partir des propriétés sgf EV et RO. Ce titre peut être affiché soit dans la boite du composant (si le paramètre titleBoxOn vaut 1), soit dans la boite du composant Header (si ce composant est présent, et qu'il est paramétré pour afficher le titre), soit dans la boite du composant Comment (si ce composant est présent, et qu'il est paramétré pour afficher le titre).

Paramètre Attribut Description Valeurs possibles Valeur par défaut
titleBoxOn data-maxigos-title-box-on S'il vaut 1, le titre est affiché dans la boite du composant. (0,1) 0
translateTitleOn data-maxigos-translate-title-on S'il vaut 1, maxiGos essaie de traduire le titre, en utilisant les fonctions se trouvant dans des scripts d'internationalisation du dossier "_i18n".

Le titre est déduit des propriétés sgf EV et RO. Pour que la traduction soit efficace, EV doit être de la forme "x t" avec x de la forme "1st" ou "2nd" ou "3rd" ou "nth", n étant un nombre, et t le nom d'un titre comme "Honinbo", "Meijin", "Ing Cup", ... RO doit être de la forme "n" ou "n (s)", n étant un nombre, et s une chaine parmi "final", "semi-final", "quarter-final", "playoff", "round" ou "game".
(0,1) 0

Composant Tree

Ce composant affiche l'arbre des coups dans sa boite.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
canTreeFocus data-maxigos-can-tree-focus S'il vaut 1, la boite de l'arbre des coups peut prendre le focus en navigation clavier (utile quand cet arbre ne peut pas être affiché en totalité dans sa boite sans barres de défilement).

Par contre, si l'on est certain que l'arbre des coups pourra être affiché en totalité, il faut laisser ce paramètre à 0.
(0,1) 0
hideTreeNumbering data-maxigos-hide-tree-numbering S'il vaut 1, maxiGos cache les numéros des coups dans l'arbre des coups. (0,1) 1
markCommentOnTree data-maxigos-mark-comment-on-tree S'il vaut 1, maxiGos remplace le numéro des coups commentés par un "?" dans l'arbre des coups. (0,1) 1
treeLabelOn data-maxigos-tree-label-on S'il vaut 1, maxiGos affiche un titre à la boite de l'arbre des coups. (0,1) 0

Composant Variation

Ce composant permet d'afficher les variations.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
canPlaceVariation data-maxigos-can-place-variation S'il vaut 1, maxiGos place un coup sur l'intersection où vient de clicker l'utilisateur, que ce coup soit ou non dans le sgf. S'il vaut 0 et que le paramètre canPlaceGuess vaut 1, il place un coup sur l'intersection où vient de clicker l'utilisateur uniquement s'il est dans le sgf. Si ces deux paramètres vallent 0, maxiGos ne place rien sur le goban suite à un clic de l'utilisateur. (0,1) 0
hideSingleVariationMarkOn data-maxigos-hide-single-variation-marks-on S'il vaut 1, maxiGos n'affiche les marques de variation que s'il y en a au moins deux.

Les marques de variation permettent à l'utilisateur de pouvoir choisir la variation qu'il veut suivre en cliquant sur l'intersection où elle se trouve. S'il n'y a qu'une seule variation, la marque est moins nécessaire, car on est sûr de pouvoir aller au coup suivant à l'aide des boutons de navigation.
(0,1) 0
siblingsOn data-maxigos-siblings-on S'il vaut 1, maxiGos affiche les alternatives au coup courant. S'il vaut 0, il affiche les variations du coup suivant. S'il vaut null, il utilise la valeur ST du sgf pour déterminer ce qu'il doit afficher. (0,1,null) null
variationBoxOn data-maxigos-variation-box-on S'il vaut 1, maxiGos affiche une boite avec une liste de boutons permettant de sélectionner une variation. (0,1) 0
variationMarkSeed data-maxigos-variation-mark-seed Par défaut, maxiGos génère automatiquement une marque sur les variations en commençant par "1". L'utilisation de nombres permet d'éviter de confondre ces marques avec les marques explicitement placés par les commentateurs qui sont en général des lettres. Pour remplacer ces marques par autre chose, on peut donner une liste de chaines comme valeur de ce paramètre.

Par exemple, pour utiliser des hiraganas comme marques, on peut donner à ce paramètre la valeur "あ,い,う,え,お,か,き,く,け,こ,た,ち,つ,て,と,さ,し,す,せ,そ".

Quelque soit la valeur de ce paramètre, si le commentateur a explicitement placé une marque sur l'intersection concernée, c'est cette marque qui sera affichée et non pas la marque générée automatiquement par maxiGos.

Enfin, pour que ces marques soient effectivement affichées, il faut bien évidemment que la valeur de la propriété ST dans les fichiers sgf ou la valeur des paramètres variationMarksOn et hideSingleVariationMarkOn le permettent.
Une liste de caractères quelconques "1"
variationMarksOn data-maxigos-variation-marks-on S'il vaut 1, maxiGos affiche une marque (par défaut un numéro de variante) sur les intersections où une variation est présente dans le sgf. S'il vaut 0, il n'en n'affiche pas. Et s'il vaut null, il utilise la valeur de la propriété sgf ST pour déterminer s'il doit ou pas afficher ces marques. (0,1,null) null

Composant Version

Ce composant affiche la version de maxiGos dans sa boite.

Paramètre Attribut Description Valeurs possibles Valeur par défaut
versionBoxOn data-maxigos-version-box-on S'il vaut 1, la version de maxiGos est affichée dans la boite du composant. (0,1) 0

Composant View

Ce composant affiche un menu de modification de l'affichage ("2d/3d", "Étirement", "Ombre", "Couleurs", "Agrandir", "Normal", "Réduire").

Il s'utilise avec le composant Menu.

Il n'a pas de paramètre.

Balises et classes css utilisées par maxiGos

Généralités

Chaque thème a sa feuille de style qui se trouve dans le dossier "_css" des exemples.

Cette feuille de style est inclue automatiquement dans la page par maxiGos.

Dans le cas des lecteurs autonomes, elle est déjà incluse dans le code des lecteurs (on n'a donc pas besoin de la télécharger puis de la téléverser dans le site en ligne), tandis que dans le cas des générateurs, elle est incluse dans le code des lecteurs à la volée (on a donc besoin de l'avoir téléchargée puis de la téléverser dans le site en ligne).

Dans tous les cas, on n'a pas besoin de la déclarer explicitement dans la partie <head> de la page (puisque c'est maxiGos qui s'en charge). Par contre, on peut si on le souhaite faire des modifications de style en rajoutant dans les feuilles de style de la page les instructions css appropriées.

La plupart des balises html de maxiGos ont été définies avec une classe et un id. Cela permet de facilement modifier leur style.

On a comme balises :

Chaque lecteur a un identifiant qui commence par "d" suivi d'un nombre (1 pour le 1er lecteur maxiGos apparaissant dans une page, 2 pour le 2e, etc.)

Chaque identifiant de balise encapsulant un composant est préfixé par l'identifiant de son lecteur, suivi du nom du composant, et suffixé par le nom de la balise. Par exemple, l'identifiant pour le <div> encapsulant le composant Goban du troisième lecteur maxiGos apparaissant dans une page est "d3GobanDiv".

Chaque classe est préfixée par "mx" au lieu de l'identifiant du lecteur. Par exemple, la classe du <div> encapsulant le composant Goban est "mxGobanDiv".

Le <div> global a pour nom "GlobalBox". Son identifiant est donc l'identifiant du lecteur suivi de "GlobalBox" suivi de "Div". Sa classe est "mxGlobalBoxDiv". Pour le 3e lecteur maxiGos apparaissant dans une page, le lecteur produira donc comme html :

<div class="mxGlobalBoxDiv" id="d3GlobalBoxDiv">...</div>

Le lecteur ajoute éventuellement d'autres classes selon les besoins.

Le lecteur ajoute au <div> global la classe "mx" + nom du thème + "Theme" (par exemple "mxClassicTheme" pour le thème Classic).

Le lecteur ajoute au <div> global la classe "mx" + nom de la configuration + "Config" (par exemple "mxProblemConfig" pour la configuration Problem).

Si on a un affichage en 3d (c'est à dire que le paramètre In3dOn vaut 1), le lecteur ajoute au <div> global la classe "mxIn3d", sinon le lecteur ajoute la classe "mxIn2d".

Les <div> des boites de regroupement n'ont pas d'identifiant. Par contre, elles ont plusieurs classes de la forme "mx" + nom d'un composant + ("Parent" ou "GrandParent" ou "GreatGrandParent" ou "GreatGreatGrandParent" etc.)+"Div" (autant de classes qu'elles contiennent de composants).

À l'intérieur de certains composants, on a d'autres balises dont beaucoup ont aussi des classes ou des ids, mais c'est moins systématique

Liste de balises et classes css utilisées par maxiGos

Voici à titre indicatif une liste de balises que l'on peut styler et le nom des classes associées :

Boite globale

div.mxGlobalBoxDiv,
div.mx + nom de theme + Theme,
div.mx + nom de configuration + Config,
div.mxIn3d ou div.mxIn2d selon la valeur du paramètre in3dOn.

Boites de regroupement

div.mx + nom de composant + ParentDiv
div.mx + nom de composant + GrandParentDiv
div.mx + nom de composant + GreatGrandParentDiv
div.mx + nom de composant + GreatGreatGrandParentDiv
...

Boites des composants et éléments internes (liste non exhaustive)

div.mxAboutDiv
button.mxBtn span (si aboutBtnOn vaut 1)
div.mxBackToMainDiv
button.mxBtn span (si backToMainBtnOn vaut 1)
div.mxCommentDiv
div.mxCommentContentDiv
span.mxMoveNumberSpan (si allInComment vaut 1)
Balises du composant Header (si headerInComment vaut 1)
div.mxCommentLabelDiv (si commentLabelOn vaut 1)
div.mxCutDiv
button.mxBtn span (si cutBtnOn vaut 1)
div.mxEditDiv
div.mxEditToolBarDiv
button svg, et input + (.mxUnselectedEditTool ou .mxSelectedEditTool)
div.mxEditCommentToolDiv textarea
div.mxGobanDiv
div.mxInnerGobanDiv
svg (pour dessiner le goban)
Balises internes au svg
div.mxGotoDiv svg
div.mxGuessDiv svg
div.mxHeaderDiv
button.mxBtn span (si headerBtnOn vaut 1)
div.mxShowContentDiv h1 (si headerBoxOn vaut 1)
div.mxShowContentDiv div.mxP span.mxHeaderSpan (si headerBoxOn vaut 1)
div.mxHelpDiv
button.mxBtn span (si helpBtnOn vaut 1)
div.mxLessonDiv+(.mxBM, .mxDO, .mxIT, .mxTE ou rien)
div.mxBalloonDiv div.mxBalloonContentDiv
img.mxAssistantImg
div.mxMenuDiv
div.mxOneMenuDiv
button span
div.mxSubMenuDiv
button span
div.mxMoveInfoDiv svg
div.mxNavigationDiv
button.mxBtn span svg
input (type=text), inséré par le composant Goto pour afficher ou saisir un numéro de coup
div.mxNotSeenDiv
div.mxInnerNotSeenDiv svg
div.mxOptionsDiv
button span (si optionBtnOn vaut 1)
h1 (si optionBoxOn vaut 1)
div.mxP input (si optionBoxOn vaut 1)
div.mxP label (si optionBoxOn vaut 1)
div.mxPassDiv
button.mxPassBtn span (si passBtnOn vaut 1)
button.mxJustPlayedPassBtn span
button.mxOnVariationPassBtn span
button.mxOnFocusPassBtn span
div.mxPngDiv (dans le composant Image)
button.mxBtn span (si pngBtnOn vaut 1)
div.mxScoreDiv
button.mxBtn span (si scoreBtnOn vaut 1)
div.mxSgfDiv
button.mxBtn span (si sgfBtnOn vaut 1)
div.mxSolveDiv
button.mxBtn span svg
div.mxSpeedDiv
button.mxSpeedPlusBtn, le "+"
div.mxSpeedBarDiv svg, la barre de réglage et le curseur
button.mxSpeedMinusBtn, le "-"
div.mxSvgDiv (dans le composant Image)
button span (si svgBtnOn vaut 1)
h1.mxTitleH1
div.mxTreeDiv
div.mxTreeContentDiv
svg
div.mxTreeLabelDiv (si treeLabelOn vaut 1)
div.mxVersionDiv span

Attention : certains composants (AnimatedStone, File, Info, Loop, View, etc.) n'ont pas de boite.

Boites popup éventuellement affichées par dessus une autre boite

Par défaut, ces boites s'affichent par dessus la boite div.mxGobanDiv. Il est possible de modifier ce comportement en utilisant le paramètre gBoxParent.

div.mxGBoxDiv.mxColorsDiv
div.mxShowContentDiv
h1
div.mxP
label
input
div.mxOKDiv button span
div.mxGBoxDiv.mxNewDiv
div.mxShowContentDiv
h1
div.mxP
label
input
div.mxOKDiv button span
div.mxGBoxDiv.mxNumberingDiv
div.mxShowContentDiv
h1
div.mxP
label
input
div.mxOKDiv button span
div.mxGBoxDiv.mxOpenDiv
div.mxShowContentDiv
h1
div.mxP
label
input
div.mxOKDiv button span
div.mxGBoxDiv.mxSaveDiv
div.mxShowContentDiv
h1
div.mxP
label
input
div.mxOKDiv button span
div.mxGBoxDiv.mxSendDiv
div.mxShowContentDiv
h1
div.mxP
label
input
div.mxOKDiv button span
div.mxShowHeaderDiv
div.mxShowContentDiv
h1
div.mxP span.mxHeaderSpan
div.mxOKDiv button span
div.mxShowHelpDiv
div.mxShowContentDiv
h1,h2,h3
div.mxP
div.mxOKDiv button span
div.mxShowInfoDiv
div.mxShowContentDiv
div.mxInfoPageMenuDiv button.mxInfoPageBtn
div.mxInfoPageMenuDiv button.mxInfoSelectedPageBtn
div.mxInfoPageDiv
label
input
textarea
div.mxOKDiv button span
div.mxShowOptionDiv
div.mxShowContentDiv
h1
div.mxP
label
input
div.mxOKDiv button span
div.mxShowSgfDiv
div.mxShowContentDiv
div.mxP (si allowEditSgf vaut 0)
textarea (si allowEditSgf vaut 1)
div.mxOKDiv button span

Quelques précisions sur le fonctionnement des composants

Certains composants ont des fonctionnements particuliers qui nécessitent de prendre quelques précautions d'emploi.

Le composant Edit

Sa boite principale div.mxEditDiv contient une boite div.mxEditToolBarDiv (boite de la barre d'outils), et une boite div.mxCommentToolDiv (boite de saisie des commentaires).

La boite div.mxEditToolBarDiv contient des balises internes de différents types (button canvas, button img, button span et input). Suivant qu'ils sont ou pas sélectionnés par l'utilisateur, maxiGos donne à ces tags la classe .mxSelectedEditTool ou .mxUnselectedEditTool.

La boite div.mxEditCommentToolDiv contient un textarea. On peut les styler tous les deux comme on voudra.

Lors de l'affichage d'une fenêtre d'aide ou autre à la place du goban, maxiGos modifie l'opacité (propriétés css "opacity") de tous les outils sauf celui qui a éventuellement permis l'affichage de cette fenêtre.

Le composant Goban

Sa boite principale div.mxGobanDiv contient une boite interne div.mxInnerGobanDiv qui contient un svg dans lequel est dessiné le goban.

Comme une valeur d'attribut modifiée via css sur un élément svg a la priorité sur les valeurs des attributs des balises des éléments svg, on peut modifier beaucoup de ces valeurs dans le css.

Si l'on veut qu'une boite popup comme .mxNumberingDiv, .mxNewDiv, .mxOpenDiv, ... vienne s'afficher à la place du goban, maxiGos donne à div.mxGobanDiv (ou la boite définie par le paramètre gBoxParent) la propriété css "position:relative;".

Le composant Info

Il affiche la boite div.mxInfoContentDiv qui contient elle-même trois boites : une boite div.mxInfoPageMenuDiv et des boites div.mxInfoPageDiv.

La boite div.mxInfoPageMenuDiv contient deux boutons. Quand l'utilisateur clique sur l'un de ces deux boutons pour sélectionner une page, maxiGos change la classe des boutons du menu en .mxInfoSelectedPageBtn ou .mxInfoPageBtn selon que la page correspondante est affichée ou pas.

Chaque page div.mxInfoPageDiv contient une série de label+champ. Chaque label a une classe ayant pour nom ".m" suivi du nom de la propriété sgf à laquelle ils correspondent (par exemple, .mxEV pour la propriété sgf EV). Chaque champ dans le cas général est un input text qui a une classe ayant pour nom ".m" suivi du nom de la propriété sgf à laquelle ils correspondent (par exemple, .mxEV pour la propriété sgf EV). Pour la propriété RE (le résultat de la partie), on a trois champs au lieu d'un seul qui ont pour classe .mxWN (champ de type select pour choisir le gagnant), .mxHW (champ de type select pour choisir le type de victoire) et .mxSC (input text pour le score). Pour la propriété GC, le champ est un textarea.

Si maxiGos juge que la saisie dans l'un des champs d'une page div.mxInfoPageDiv est incorrecte, il ajoute à ce champ la classe .mxBadInput (attention : les vérifications faites par maxiGos sont très approximatives).

Le composant Pass

Il ne contient qu'une balise interne : button.

Ce bouton a pour classes .mxBtn et .mxPassBtn, mais on lui ajoute d'autres classes en fonction des circonstances :

Gràce à ce mécanisme, on peut définir dans un fichier css quel aspect devra avoir le bouton en fonction de la situation.

Le composant Lesson

Sa boite principale est div.mxLessonDiv et contient une boite div.mxBalloonDiv (bulle à commentaire), et une image img.mxAssistantImg qui représente l'assistant.

Le composant Menu

Sa boite principale contient une série de couples de boites (div.mxOneMenuDiv, div.mxSubMenuDiv) correpondant chacun à un menu. La boite div.mxOneMenuDiv, toujours visible, contient un seul bouton qui est le titre du menu. La boite div.mxSubMenuDiv, initialement cachée (via un "display:none"), contient une série de boutons, chaque bouton correspondant à un choix possible du menu.

Quand l'utilisateur clique sur le bouton d'un div.mxOneMenuDiv, le div.mxSubMenuDiv correspondant devient visible (via un "display:block").

La boite div.mxSubMenuDiv sera à nouveau cachée par maxiGos (via un "display:none") si l'utilisateur a fait un choix en cliquant sur l'un des boutons que cette boite contient, ou si l'utilisateur clique sur le bouton de la boite div.mxOneMenuDiv associée, ou si l'utilisateur clique ailleurs, ou si aucun choix n'est effectué au bout de quelques secondes.

Le composant Navigation

Les boutons de navigation sont de type button (<button><span><svg>...</svg></span></button>).

Le composant Solve

Lorsque ce composant est utilisé avec le composant Comment, il peut générer automatiquement des messages en fonction de la situation :

Pour connaitre les libellés de ces messages pour l'anglais et le français, voir le début du script "mgosSolve.js".

Pour les autres langues, voir les scripts d'internationalisation dans le dossier "_i18n".

Le composant Tree

Lors de l'affichage d'une fenêtre d'aide ou autre à la place du goban, maxiGos modifie l'opacité (propriété css "opacity") de div.mxTreeDiv.

Styles et classes modifiés par maxiGos

Voici en résumé la liste des styles et classes que maxiGos modifie ou impose via des instructions javascript.

Styles modifés dans le code javascript (liste non limitative)

Classes particulières modifiées dans le code javascript

Lecteur sur mesure

On peut se fabriquer son propre lecteur autonome. Ce n'est pas très difficile si on connait un peu le php et le javascript.

Générateur d'un lecteur sur mesure

Un générateur est un script php qui permet de fabriquer le code javascript d'un lecteur autonome maxiGos. En utilisant un autre script php, on peut enregistrer le code généré dans un fichier javascript. On obtient ainsi un lecteur autonome. C'est ce que fait par exemple le script makeAllAlone.php qui se trouve dans le dossier "_php" des exemples de maxiGos.

Un générateur peut aussi servir à afficher un lecteur maxiGos dans une page : il suffit d'insérer une balise <script> dans la page à afficher, et d'y mettre comme valeur de l'attribut "src" le nom du script php du générateur au lieu du nom du script javascript d'un lecteur autonome maxiGos.

Un certain nombre de générateurs sont disponibles dans les exemples maxiGos. Ils sont dans le dossier "_maker" de ces exemples. Ce sont ces générateurs qui ont servi à fabriquer les lecteurs autonomes de maxiGos.

Le suite du code d'un générateur contient plusieurs parties :

Ligne indiquant que l'on fabrique un script javascript

Tout d'abord, le script php du générateur ayant pour but de fabriquer un script javascript, on l'indique en ajoutant au tout début du code du générateur la ligne :

header("content-type:application/x-javascript;charset=UTF-8");

Inclusion des composants dans un lecteur sur mesure

Un lecteur maxiGos est un assemblage de composants, chaque composant correspondant à une fonctionnalité ou une partie du lecteur. Par exemple le goban, la boite à commentaire, ou la barre de navigation sont des composants.

Les scripts javascript de ces composants se trouvent dans le dossier "_js" du dossier "_maxigos".

On n'est pas obligé d'utiliser tous les composants. Seuls sont obligatoires les scripts "mgos_lib.js" (fonctions utilitaires diverses), "mgos_rls.js" (gestion de la règle du go), "mgos_prs.js" (analyseur de sgf), "mgos_scr.js" (fabrication de svg), "mgos.js" (corps principal du lecteur) et "mgosGoban.js" (composant Goban).

En utilisant uniquement les composants dont on a vraiment besoin, on diminue parfois considérablement la taille et la complexité du code qui sera téléchargé sur la machine de l'utilisateur, et donc le temps que mettra maxiGos à démarrer.

Pour inclure un composant dans le code d'un générateur, il suffit d'une ligne de php utilisant la fonction "include". Par exemple, pour inclure le composant Goban qui a pour script "mgosGoban.js", on utilise la ligne suivante :

include "../../../_js/mgosGoban.js";

On peut aussi créer ses propres composants qu'il faut alors définir dans un fichier javascript du même genre que pour les composants prédéfinis.

Dans ce fichier il suffira de définir les fonctions "createNomDuComposant()", appelée par maxiGos lors du chargement de la page, "initNomDuComposant()" appelée par maxiGos juste après le chargement de la page, et "updateNomDuComposant()" appelée par maxiGos après chaque action de l'utilisateur. Il faut déclarer ces fonctions en tant que prototype pour la classe "mxG.G" (qui est définie par ailleurs dans "mgos.js"). Par exemple, si l'on souhaite créer un composant appelé "Cute" dont l'unique action est d'afficher lors du chargement de la page la phrase "Je suis là !", le code correspondant sera :

mxG.G.prototype.createCute=function()
{
	return "<div>Je suis là !</div>";
};

La définition de "createNomDuComposant()" est obligatoire, mais la définition des autres fonctions est facultative.

Le nom du fichier contenant le composant peut être n'importe quel nom. Il n'a pas besoin d'être préfixé par "mgos" ni même de contenir le nom du composant.

Les fichiers javascript des composants prédéfinis sont dans le dossier "_js". Mais un fichier javascript définissant un composant peut être n'importe où dans l'arborescence du site. Il suffira de le préfixer par un chemin relatif approprié pour pouvoir l'inclure.

Un fichier javascript peut éventuellement contenir la définition de plusieurs composants.

Important : ne pas oublier d'ajouter dans tous les cas les fichiers "mgos_lib.js", "mgos_rls.js", "mgos_prs.js", "mgos_scr.js" et "mgos.js".

Javascript de création d'un lecteur dans une page

Le code javascript de création d'un lecteur dans une page doit incrémenter le compteur de lecteurs maxiGos présents dans la page, lister les boites à utiliser, créer une instance de lecteur, lui donner un nom de thème et un nom de configuration.

Par exemple :

mxG.K++;
mxG.B=[["Goban"],"Navigation","Variation"];
mxG.D[mxG.K]=new mxG.G(mxG.K,mxG.B);
mxG.D[mxG.K].theme="Ephemeral";
mxG.D[mxG.K].config="Simple";

Le nom des boites à utiliser est tout simplement le nom du composant auquel elles correspondent. On affecte à mxG.B la liste de ces boites sous forme d'un tableau. On peut regrouper certaines boites dans un sous-tableau si on le souhaite. Chaque regroupement donnera lieu à la création par le lecteur (lors de son exécution dans la page) d'une boite de regroupement (c'est à dire une balise <div> qui englobe les composants contenus dans ce regroupement). Eventuellement, on peut n'avoir qu'un seul composant dans une boite de regroupement, et on peut aussi faire des regroupements de regroupements. Cela donne plus de possibilités pour composer et styler le lecteur.

Le thème et la configuration sont utilisées par les lecteurs maxiGos (lors de leur exécution dans la page) pour donner à la boite globale des lecteurs la classe "mx"+nom du thème+"Theme" et la classe "mx"+nom de la configuration+"Config". Ainsi, on pourra styler les lecteurs en fonction du nom du thème et du nom de la configuration en utilisant ces classes.

Le nom du thème et le nom de la configuration doivent être de préférence une chaine alphanumérique (sans espace) commençant par une majuscule.

Inclusion de la feuille de style

Cette inclusion est effectuée dans le code php du générateur par l'instruction php suivante :

include "../../_php/insertCss.php";

Le fichier css à insérer est supposé s'appeler "_common.css", et être dans un dossier s'appelant "_css", frère du dossier "_maker" où se trouve le générateur.

Le script insertCss.php fabrique une instruction javascript qui permettra ensuite au lecteur maxiGos (lors de son exécution dans la page) d'insérer la feuille de style dans la page où devra s'afficher le lecteur.

Paramétrage des composants

Pour donner une valeur à un paramètre, la ligne de code javascript à placer dans un générateur php est de la forme "mxG.D[mxG.K].a."+"NomDuParametre"="ValeurDuParametre"; Par exemple, pour donner la valeur 1 au paramètre in3dOn, on écrira :

mxG.D[mxG.K].a.in3dOn=1;

Il faut bien faire attention aux majuscules et minuscules, et ne pas oublier les guillemets quand la valeur du paramètre est une chaine.

Voir le chapitre Paramétrage pour plus d'informations sur les paramètres que l'on peut utiliser.

Le code de démarrage du lecteur

Le code d'un générateur finit par une ligne de javascript démarrant le lecteur après son chargement dans une page. Cette ligne est :

mxG.D[mxG.K].start();

Exemple complet

On commence par créer un sous-dossier dans le dossier "_sample" de maxiGos, et on l'appelle par exemple "Ephemeral".

On crée dans le dossier "ephemeral" les sous-dossiers "_css", et "_maker".

On crée un fichier "ephemeral.php" (que l'on enregistrera dans le dossier _maker") et qui contient :

<?php
header("content-type:application/x-javascript;charset=UTF-8");
include "../../../_js/mgos_lib.js";
include "../../../_js/mgos_prs.js";
include "../../../_js/mgos_rls.js";
include "../../../_js/mgos_scr.js";
include "../../../_js/mgos.js";
include "../../../_js/mgosGoban.js";
include "../../../_js/mgosNavigation.js";
include "../../../_js/mgosVariation.js";
?>
mxG.K++;
mxG.B=[["Goban"],"Navigation","Variation"];
mxG.D[mxG.K]=new mxG.G(mxG.K,mxG.B);
mxG.D[mxG.K].theme="Ephemeral";
mxG.D[mxG.K].config="Simple";
<?php
include "../../_php/insertCss.php";
?>
mxG.D[mxG.K].a.eraseGridUnder=1;
mxG.D[mxG.K].a.in3dOn=1;
mxG.D[mxG.K].a.hideSingleVariationMarkOn=1;
mxG.D[mxG.K].a.canPlaceVariation=1;
mxG.D[mxG.K].start();

On crée un fichier "_common.css" (que l'on enregistrera dans le dossier _css") et qui contient :

.mxEphemeralTheme.mxSimpleConfig
{
	max-width:30em;
}
.mxEphemeralTheme.mxSimpleConfig .mxGobanDiv svg
{
	background:#9cf;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv
{
	display:flex;
	justify-content:space-between;
	margin-top:0.5em;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv button
{
	border:0;
	background:none;
	padding:0;
	margin:0 5%;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv button svg
{
	width:100%;
	height:auto;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv button[disabled] svg
{
	fill:#0007;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv button:focus:not([disabled]) svg,
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv button:hover:not([disabled]) svg
{
	fill:red;
}
.mxEphemeralTheme.mxSimpleConfig button::-moz-focus-inner
{
	padding:0;border:0;
}
.mxEphemeralTheme.mxSimpleConfig .mxInnerGobanDiv,
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv,
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv button
{
	outline:none;
}

On a notre générateur prêt à l'emploi. Pour le tester, on crée la page index.html suivante (que l'on enregistre directement dans le dossier "Ephemeral") :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Ephemeral</title>
</head>
<body>
<h1>Ephemeral</h1>
<script src="_maker/ephemeral.php">
(;
GM[1]
FF[4]
CA[UTF-8]
SZ[19]
EV[吐血の一局]
DT[1835-07-27]
PW[本因坊丈和]
PB[赤星因徹]
PC[日本]
RU[Japanese]
KM[0]
RE[W+R]
;B[cp];W[pq];B[qd];W[ed];B[oc];W[eq];B[qo];W[qk]
;B[qi];W[op];B[iq];W[dn];B[ep];W[dp];B[do];W[dq]
;B[co];W[eo];B[fp];W[cq];B[bq];W[br];B[cm];W[gr]
;B[hp];W[en];B[bp];W[ck];B[dl];W[dk];B[el];W[gn]
;B[cr];W[dr];B[bs];W[fq];B[go];W[ar];B[hn];W[gm]
;B[hm];W[gl];B[ek];W[hl];B[di];W[io];B[ho];W[fo]
;B[ch];W[cd];B[lq];W[pn];B[gc];W[qn];B[dc];W[cc]
;B[ec];W[cf];B[il];W[gp];B[nq];W[ic];B[fd];W[lc]
;B[bg];W[bf];B[af];W[bi];B[dj];W[eh];B[fj];W[qg]
;B[oi];W[qe];B[pd];W[nf];B[ok];W[pk];B[ol];W[pj]
;B[rn];W[rm];B[qq];W[qr];B[rr];W[qp];B[rq];W[pr]
;B[rp];W[po];B[pp];W[mp];B[qm];W[pm];B[np];W[mq]
;B[mo];W[lp];B[lo];W[kp];B[no];W[nr];B[or];W[qp]
;B[mr];W[ro];B[pi];W[lr];B[ns];W[ip];B[jr];W[hq]
;B[jn];W[ko];B[kq];W[kn];B[jm];W[km];B[ik];W[mk]
;B[mm];W[ir];B[jq];W[kk];B[mi];W[nm];B[ml];W[ki]
;B[lj];W[lk];B[kj];W[jj];B[kl];W[ll];B[lm];W[oj]
;B[mg];W[jl];B[jk];W[nj];B[ni];W[im];B[in];W[jo]
;B[kl];W[js];B[ks];W[jl];B[im];W[is];B[kl];W[ei]
;B[ej];W[jl];B[hr];W[hs];B[kl];W[cn];B[bn];W[jl]
;B[gs];W[fs];B[kl];W[hi];B[ij];W[jl];B[ls];W[ji]
;B[hj];W[oe];B[kg];W[jg];B[gi];W[nc];B[jf];W[nb]
;B[re];W[if];B[je];W[hd];B[fe];W[gf];B[ff];W[fg]
;B[gg];W[gh];B[hg];W[fi];B[gj];W[ig];B[hh];W[hf]
;B[ii];W[rf];B[pe];W[pf];B[le];W[kd];B[ad];W[kh]
;B[qf];W[ef];B[de];W[qe];B[ld];W[lg];B[kc];W[jd]
;B[qf];W[db];B[eb];W[qe];B[jb];W[od];B[ib];W[mf]
;B[qf];W[jp];B[kr];W[qe];B[lf];W[kf];B[qf];W[hc]
;B[qe];W[hb];B[pg];W[og];B[of];W[cg];B[bh];W[pf]
;B[ph];W[bb];B[da];W[cb];B[fh];W[ac];B[eg];W[bd]
;B[ob];W[oa];B[of];W[mh];B[rj];W[kl])
</script>
</body>
</html>

Il suffit ensuite d'afficher cette page dans un navigateur.

Et voilà !

Annexes

Les dossiers et fichiers de maxiGos

Questions et réponses

Question : en partant de rien, que dois-je faire au minimum pour insérer un lecteur autonome maxiGos dans l'une de mes pages ?

  1. Affichez dans un navigateur la page de téléchargement.
  2. Téléchargez le lecteur autonome "maxigos-neo-classic-basic.js".
  3. Créez à la racine de votre site un dossier "maxiGos" et copiez "maxigos-neo-classic-basic.js dedans.
  4. Insérez dans la page où vous voulez que maxiGos affiche quelquechose les balises <script> et </script> avec "/maxiGos/maxigos-neo-classic-basic.js" comme valeur de l'attribut "src", et insérez entre ces balises un enregistrement sgf. Par exemple :
    <script src="/maxiGos/maxigos-basic.js">(;FF[4]CA[UTF-8]GM[1]SZ[19];B[pd];W[dc];B[pp];W[fp];B[de];W[ee];B[ef];W[ed];B[dg];W[co])</script>
  5. Et voilà!

Question : avec quels navigateurs maxiGos fonctionne-t-il ?

Bien que maxiGos ait plus de 20 ans, il a beaucoup évolué. Il fonctionne bien avec les navigateurs soucieux de respecter les standards (la plupart des navigateurs dont Chrome, Firefox, Safari et Edge), mais pas avec des navigateurs comme Internet Explorer. Parfois, seules certaines fonctionnalités peuvent ne pas être disponibles (en particulier quand on utilise l'éditeur qui a besoin de pouvoir lire et enregistrer des fichiers).

Question : maxiGos n'affiche rien. Comment faire le diagnostic ?

Vérifiez que vous avez bien copié le dossier "_maxigos" ou le ou les lecteurs que vous envisagez d'utiliser à l'endroit approprié sur le serveur.

Suspectez les chemins préfixant les scripts d'appel à maxiGos dans les lignes qui appellent maxiGos dans votre page.

Affichez le code source de la page, et si votre navigateur sait faire ça, cliquez sur une ligne qui appelle maxiGos dans votre page. Si vous avez un message du genre "The requested URL ... was not found on this server" le chemin devant le lecteur maxiGos n'est pas bon. Si par contre il n'y a pas de message d'erreur, cliquez dans le code source sur la ligne qui appelle maxiGos. Cela affiche en général le code javascript correspondant à cette ligne. Si une page blanche apparait, c'est probablement que l'un des scripts de maxiGos a été modifié et contient une erreur de syntaxe. Sinon, si du code javascript apparait, il s'agit probablement d'un bug dans le code de maxiGos.

Question : maxiGos affiche le goban mais pas le contenu du fichier sgf. Comment faire le diagnostic ?

Vérifiez si le fichier sgf est bien à l'endroit approprié sur le serveur.

Si c'est bien le cas, suspectez alors le chemin préfixant le nom du fichier sgf ou le nom du fichier dans la ligne qui insère maxiGos dans votre page.

Il est aussi possible que maxiGos n'ait pas eu le droit d'ouvrir le fichier sgf. Il faut dans ce cas placer vos fichiers sgf dans un autre endroit, ou changer les droits d'accès à ces fichiers (le droit en écriture dans ces fichiers sgf n'est cependant jamais nécessaire, seul le droit en lecture l'est).

Question: comment changer la taille du goban ?

Il y a plusieurs méthodes pour faire cela. Avec les lecteurs maxiGos fournis avec les exemples de maxiGos, le goban est aussi large que possible à l'intérieur de son conteneur. Le plus simple est donc en général de le mettre dans un conteneur plus petit ou plus grand.

Cependant on notera que les gobans des lecteurs maxiGos fournis avec maxiGos ont en général une largeur maximale spécifiée dans leur feuille de style via la variable css "--gobanMaxWidth". On peut donc aussi essayer de modifier la valeur de cette variable css "--gobanMaxWidth".

Par exemple, si l'on veut que tous les gobans ne fassent pas plus de 20em de large, on peut ajouter dans la feuille de style de la page :

div.mxGlobalBoxDiv
{
	--gobanMaxWidth:20em;
}

Question: comment changer le fond du goban ?

Ceci peut se faire de différentes manières en ajoutant un style dans votre feuille de style.

Par exemple, pour donner au goban d'un lecteur du thème Minimalist une couleur bleue clair, on peut ajouter dans la feuille de style de la page un background au svg qui dessine le goban :

div.mxMinimalistTheme .mxGobanDiv svg
{
	background-color:#9cf;
}

On peut aussi utiliser d'autres balises, comme par exemple le rectangle svg de classe .mxWholeRect, et dans ce cas, on modifie la propriété css fill au lieu de background-color :

div.mxMinimalistTheme .mxWholeRect
{
	fill:#9cf;
}

Il faut évidemment vérifier qu'il n'y a pas dans le css existant d'autres règles css qui empêcheraient ces modifications de fonctionner.

Question : comment afficher maxiGos dans une page s'adaptant aux mobiles ("responsive design") ?

Normalement, maxiGos s'occupe de tout ! Il s'adapte à la taille de son conteneur, tout en essayant de conserver au mieux la lisibilité des textes qu'il affiche.

Mais afin de forcer la page à s'ajuster à la taille de l'écran d'un mobile, n'oubliez pas d'ajouter dans la partie <head> de la page une ligne du genre :

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Question : j'utilise un lecteur autonome maxiGos mais il s'affiche en français, et je souhaite qu'il s'affiche en une autre langue. Que puis-je faire ?

Relisez le chapitre Internationalisation.

Si la langue que vous souhaitez utiliser n'a pas encore de script d'internationalisation dans "_maxigos/_i18n/", voir la question suivante.

Question : je voudrais traduire maxiGos en une autre langue. Comment procéder ?

Dupliquez "_maxigos/_i18n/maxigos-i18n-ja.js" et renommez le fichier en remplaçant les deux dernières lettres par le code de cette nouvelle langue (de préférence un code ISO 639). Remplacez les "ja" par le code de la nouvelle langue. Remplacez tous les textes qui sont en japonais par leur traduction dans la nouvelle langue (ils sont précédés par leurs équivalents en anglais) et supprimez ou éventuellement ré-écrivez ou créez si nécessaire les fonctions dont le nom commence par "build" ou "transalte" (ces fonctions sont "buildDate", "buildRank", "buildMove", "buildNumOfMoves", "buildRules", "buildTimeLimits", "buildKomi", "buildResult" et "transalteTitle"). Si l'une de ces fonctions est absente, maxiGos utilise des fonctions par défaut pour produire un résultat acceptable. Aussi, vous pouvez laisser de côté la réécriture de ces fonctions si cela vous semble trop compliqué. Enfin, enregistrez le fichier en UTF-8.

Question : j'utilise maxiGos dans une page qui n'est pas en UTF-8. Comment faire cela ?

Si vous utilisez un lecteur autonome, ajoutez charset="UTF-8" à vos balises contenant le code de maxiGos. Par exemple :

<script charset="UTF-8" src="_alone/maxigos-minimal-basic.js">
../_sgf/game/blood-vomit.sgf
</script>
Remerciements à Adachi K., Alfredo Pernin, Chantal Gajdos, Julien Payrat, Lao Lilin, Mickaël Simon, Motoki Noguchi, Olivier Besson, Olivier Dulac, Patrice Fontaine, Tony Yamanaka et beaucoup d'autres pour leurs conseils ou contributions à ce projet !

EnglishFrançais