HomeEnglishFrançais

Documentation for maxiGos v6.67

Copyright 1998-2019 - François Mizessyn - francois.mizessyn@orange.fr

Click here to go to download page

What is maxiGos?

MaxiGos is a tool to insert sgf go games, problems or diagrams in a web page.

You can use maxiGos free of charge on your website (BSD type license).

What are the pre-requisites?

The end user browser must be HTML5 compliant, with javascript enabled.

If one uses only maxiGos stand-alone players (that are in javascript), there are no pre-requisites for the server where maxiGos is installed.

If one uses the full version of maxiGos (which uses javascript, css and php), it must be installed on a web server with php available.

How to quick start?

Download one of the maxiGos players below:

Move or copy it somewhere on your website.

Assuming you choose the "maxigos-neo-classic-game.js" player and assuming the sgf file you want to display is called "myFirstSgf.sgf", insert in the <body> part of a html page (where you want the player displays) a code such as:

<script
data-maxigos-l="en"
src="ppp/maxigos-neo-classic-game.js">
qqq/myFirstSgf.sgf
</script>

"ppp/" is a relative path between the html page and the "maxigos-neo-classic-game.js" maxiGos script.

"qqq/" is a relative path between the html page and the "myFirstSgf.sgf" sgf file.

The attribute data-maxigos-l="en" indicates that maxiGos displays its labels, messages, … in english.

To see a sample with the six above players, click here!

Most of the time, the above players will do what you need. But MaxiGos can do many others things. See below to learn more about that.

How to install the full version of maxiGos?

To install the full version of maxiGos, download maxiGos archive, unzip and copy it anywhere in your web site. No database required.

If you don't want to installed the full version of maxiGos, you can just download one stand-alone player. See "Using a stand-alone player" chapter for more details.

Browse your web site to find "_maxigos/en/documentation.php" page (same as this page, but stored on your web site) then look at the samples below to verify that all is OK:

  1. Neo-classic style
  2. Classic style
  3. Japanese style
  4. Chinese style
  5. Minimalist style
  6. Chameleon
  7. Sgf editor
  8. Sgf editor 2
  9. Kifu
  10. Texture
  11. Tactigo style
  12. Eidogo like player
  13. WGo.js like player
  14. Rfg.jeudego.org style
  15. Forum.jeudego.org style
  16. Jeudego.org style
  17. Fm style
  18. Tsumego.org style
  19. In black and white style 1
  20. In black and white style 2
  21. Goproblems.com style
  22. Anime version
  23. Tiger version
  24. Troyes style
  25. Iroha, old kifu style
  26. Kifu, manuscript style
  27. Valentine's day
  28. Playing card colors
  29. Samples with mgosLoader.js
  30. Various ways to include sgf
  31. Multiple language
  32. Various customizations
  33. BBCode
  34. Charset tests
  35. Rules of go
  36. Fancy go

The end user has nothing to do on his device. He has just to let javascript enable in his browser.

How to use maxiGos?

There are five ways to insert maxiGos in a web page:

Using a stand-alone player

Use a stand-alone player if you want to keep things simple.

A stand-alone player is a maxiGos player where all the code and ressources are in a single javascript file.

These files are stored in "_alone" folders of the samples provided with maxiGos. These samples can be found in the "_sample" folder.

The code to insert in your web page

Include in your web page, where you want the player displays something, <script> and </script> tags with the javascript file name of a stand-alone player as value of the "src" attribute, and put between the tags a sgf file name or a sgf record or an url that generates a sgf record.

If one uses a sgf file name, the code is for instance:

<script src="xxx/maxigos-neo-classic-problem.js">
data-maxigos-l="en"
yyy/myFirstSgf.sgf
</script>

Another way is to use the "data-maxigos-sgf" attribute which value is the sgf file name. For instance:

<script src="xxx/maxigos-neo-classic-problem.js"
data-maxigos-l="en"
data-maxigos-sgf="yyy/myFirstSgf.sgf">
</script>

Of course, you have to adapt the path (here "xxx") before "maxigos-problem.js" script which contains the code of a stand-alone player, taking into account where you stored it, and where your web page is. It's a relative path between your web page and the folder that contains the script file.

You have to adapt the path (here "yyy") before the sgf file name, taking into account where you stored it, and where your web page is. It's a relative path between your web page and the folder that contains the file.

If one uses a sgf record, the code is for instance:

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

Note: when one inserts directly a sgf record in a page as in above samples, the CA property is useless and ignored if present, since the sgf record charset is necessary the same as the charset of the page.

If one uses the "data-maxigos-sgf" attribute, the code is for instance:

<script src="xxx/maxigos-neo-classic-problem.js"
data-maxigos-l="en"
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>

If one uses an url that generates a sgf record, one must add the "data-maxigos-source-filter" attribute which value is a regular expression that matches the url. The code is for instance:

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

If one uses the "data-maxigos-sgf" attribute, the code is for instance:

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

The url must respect the "same origin" policy (i.e. same protocol, same domain, same port as the calling page).

Note 1: an advanced user can make his own stand-alone player using the "makeAlone()" function defined in "_php/aloneLib.php" script. See also "_php/aloneMaker.php" script which uses this function.

Note 2: one doesn't need to install all maxiGos files on the server to use a stand-alone player. One just has to copy (anywhere) on the web server the player script file. If the language is not english or french, one also has to include the internationalization file of this language (one of those stored in "_i18n" folder).

Note 3: in theory, a stand-alone player should not use external resources (images, ...). If an external resource is required, maxiGos looks for it at the place where this ressource is in the full version.

Customization

Customization can be done by using "data-maxigos-xxx" attributes, where "xxx" is a maxiGos parameter (see "Component parameters" chapter to learn more about maxiGos parameters). Because only lower case letters are allowed in attribute names, replace any upper case letter by its lower case form prefixed by "-". For instance the attribute name for "in3dOn" maxiGos parameter is "data-maxigos-in3d-on".

Many things can be changed using attributes. For instance, below is a way to display a diagram without 3D effects and with a transparent goban using a neo-classic player that initially displays with 3D effects and with a non-transparent goban:

<script src="xxx/maxigos-neo-classic-diagram.js"
data-maxigos-l="en"
data-maxigos-in3d-on="0"
data-maxigos-goban-bk="transparent">
(;FF[4]GM[1]SZ[19]VW[aa:ii]FG[1]AW[ee]AB[de][fe][ed])
</script>

It is also possible to make some changes in the css file (as for goban background in the above sample).

Using a "launcher" in php

Use a launcher when you need to heavily customize the player.

The launcher is a php script that generates "on the fly" the javascript code of a maxiGos player, using data found in a configuration file.

The line to insert in your web page

Include in your web page where you want the player displays something a line such as:

<script src="ppp/sgfplayer.php?sgf=<?php print urlencode("qqq/xxx.sgf");?>&cfg=<?php print urlencode("rrr/yyy.cfg");?>&mxL=en"></script>

Of course, you have to adapt the path (here "ppp") before the php script (here "sgfplayer.php") which is called a launcher, taking into account where you installed maxiGos, and where your web page is. It's a relative path between the folder where your web page is and the folder where the launcher script file is.

A default launcher is provided with maxiGos and can be found in "_mgos" folder. In most cases, you don't need to use another launcher.

The url of this launcher can have four parameters: "sgf", "cfg", "mxL" and "plc" (see below). All are optional.

It's a good idea to apply the "urlencode()" php function to the parameter values, espcially when they contain a file name prefixed by a path or when they contain a sgf record.

You can add as maxiGos instances as you want in a web page. The only limits are those of the web server and of the user device.

The "sgf" parameter

The value of the "sgf" parameter in the url of the launcher can be a sgf file name or a sgf record or an url that generates a sgf record.

Note: instead of using the "sgf" parameter, one can insert a sgf file name or a sgf record or an url that generates a sgf record between <script> and </script> tags, or one can specify a sgf file name or a sgf record or an url that generates a sgf record as the value of the <script> tag attribute "data-maxigos-sgf".

If no sgf is specified, maxiGos displays an empty 19x19 goban.

If the sgf file is used as the "sgf" parameter value, the code is for instance:

sgf=<?php print urlencode("qqq/xxx.sgf");?>

"qqq/" is the relative path between the launcher and the sgf file. Sgf files can be stored anywhere on the web site.

If a sgf record is used as the "sgf" parameter value, the code is for instance:

sgf=<?php print urlencode("(;FF[4]GM[1]SZ[19];B[qd])");?>

Any valid sgf record can be used. Remember that the CA property is useless here since the sgf record has already the same charset as the page. Note that this method works only for short sgf records because in practice an url cannot be infinitely long (the maximum length depends of web server settings and web browsers).

If an url is used as the "sgf" parameter value, the code is for instance:

sgf=<?php print urlencode("/download/file.php?id=23");?>

In this case, one must set in the configuration file the maxiGos parameter "sourceFilter" to a regular expression that matches the url (here, something like "/download/file\.php\?id=[0-9]+$") or add to the <script> tag the "data-maxigos-source-filter" attribute which value is this regular expression.

The url must respect the "same origin" policy (i.e. same protocol, same domain, same port as the calling page).

The "cfg" parameter

The "cfg" parameter in the url of the launcher specifies a configuration file.

For instance:

cfg=<?php print urlencode("rrr/yyy.cfg");?>

"rrr/" is a relative pass between the launcher and the configuration file. Configuration files can be stored anywhere on the web site.

MaxiGos is provided with various configuration files. They are stored in sub-folders of the "_sample" folder. It is not very difficult to modify them or to make new ones.

The default value is "../_sample/neo-classic/_cfg/basic.cfg".

The "mxL" parameter

The "mxL" parameter in the url of the launcher specifies the language used by maxiGos ("en" for english, "fr" for french...).

For instance:

mxL=en

The default language is french.

The "plc" parameter

The "plc" parameter in the url of the launcher specifies the id of a tag whose content is a sgf record or a sgf file name. The content is replaced by a maxiGos player that displays this content.

For instance:

<div id="dia1"></div>
<script src="ppp/sgfplayer.php?sgf=<?php print urlencode("qqq/xxx.sgf");?>&cfg=<?php print urlencode("rrr/yyy.cfg");?>&mxL=en&plc=dia1"></script>

This parameter is merely used.

Customization

As for stand-alone players, customization can be done by adding "data-maxigos-xxx" attributes to the tag where the player displays, and where "xxx" is a maxiGos parameter (see "Customization" in "Using a stand-alone player" above chapter).

Using a "loader" in javascript

Use a loader when you need to insert sgf data between other html tag such as <div> and </div>. This method is notably slower than others.

The code to insert in your web page

Insert for instance in your web page several <div> and </div> tags with one attribute named "data-maxigos" which value is a maxiGos configuration name (the corresponding configuration file name is the concatenantion of the configuration name and ".cfg").

Insert a sgf file name or a sgf record or an url that can generate a sgf record between each of these tags.

Insert "mgosLoader.js" script in the web page after all these tags. This script will replace each <div> and </div> tags contents by a maxiGos player that displays those contents.

For instance:

<div
data-maxigos-l="en"
data-maxigos="problem">
(;FF[4]GM[1]SZ[19]VW[aa:lh]FG[1]AW[ee]AB[de][fe][ed];B[ef]C[Correct!])
</div>
<div
data-maxigos-l="en"
data-maxigos="basic">
(;FF[4]GM[1]SZ[19];B[qd])
</div>
<script src="ppp/_mgos/mgosLoader.js"></script>

Of course, you have to adapt the path (here "ppp/") before "_mgos/mgosLoader.js", taking into account where you installed maxiGos, and where your web page is. It's a relative path between your web page and the launcher script file.

You can use a configuration file which is not in the default configuration folder "_cfg" (which means that configuration files are supposed to be in "_sample/neo-classic/_cfg" folder). To do that, prefix the configuration name by a relative path between the default configuration folder and the folder where your configuration file is. For instance, if your configuration file is "comment.cfg" in "_sample/minimalist/_cfg" folder, use:

<div data-maxigos="../../minimalist/_cfg/comment">

If you use a language which is not english or french, you have to insert before "mgosLoader.js" an internationalization script. For instance, if you want to use japanese, insert the "mgos-i18n-ja.js" script which is in the "_i18n" folder (replace "ppp" by a relative path between your page and the "_i18n" folder):

<script src="ppp/_i18n/mgos-i18n-ja.js"></script>

Customization

As for stand-alone players, customization can be done by adding "data-maxigos-xxx" attributes to the tag where the player displays, and where "xxx" is a maxiGos parameter (see "Customization" in the "Using a stand-alone player" above chapter).

Using a plugin

See the plugin pages (for joomla or for wordpress) for more details.

Using a BBCode

See the BBCode page for more details.

Internationalization

The default language for maxiGos is french.

You can change it very easily to english by adding data-maxigos-l="en" to each tag where a maxiGos player will display (or by using the mxL parameter when using a launcher such as sgfplayer.php).

For instance:

<script
data-maxigos-l="en"
src="ppp/maxigos-neo-classic-basic.js">
qqq/myFirstSgf.sgf
</script>

Note that maxiGos doesn't translate sgf content. It can just change the language of its own messages, button labels, …

To set another language, insert before the first call to maxiGos scripts an internationalization script for this other language. For instance, for japanese, you can insert the "mgos-i18n-ja.js" script found in "_i18n" folder using something like (replace "ppp" by a relative path between your web page and "_i18n" folder):

<script src="ppp/_i18n/mgos-i18n-ja.js"></script>

If you can't or don't want to insert this ligne each time in your web page, you can simply add the code which is inside the internationalization script of the desired language at the beginning of the "_js/mgos_lib.js" script file (if you use the full version of maxiGos) or at the beginning of javascript script files stored in "_alone" folders (if you use them instead of the full version of maxiGos).

Then add data-maxigos-l="ja" to each tag where a maxiGos player will display such as:

<script data-maxigos-l="ja" src="ppp/maxigos-neo-classic-basic.js">qqq/myFirstSgf.sgf</script>

All internationalization scripts delivered with maxiGos are in "_i18n" folder. If the internationalization script for a language doesn't exist, you can try to create it (try to do it from the japanese one). See also "Questions and answers" to learn more about that.

Note 1: if you create an internationalization file, it is a good pratice to choose a ISO 639 language code (for instance "ja" for japanese, not "jp").

Note 2: when using a launcher (see the corresponding chapter) the easiest way is to use the "mxL" parameter of the launcher to change the language. In this case, you don't need to insert explicitly in the page an internationalization file: the launcher does it automatically for you.

Advanced usage

This chapter is for advanced users only.

Components

MaxiGos javascript code is split in several file scripts. Four of them, mgos_lib.js, mgos_rls.js, mgos_prs.js and mgos.js, share common functions. Other javascript scripts contain component codes (one component per file script). For instance, the goban, the navigation bar or the comment box are components.

The name of a component file starts with "mgos" followed by the component name and the ".js" extension.

Component list

The component list is:

How to add a component

To add a component, just put two lines of code in a configuration file.

The first one is:

$gosParam["Script"][]="_js/mgosComponentName.js";

The second one is:

$gosParam["xxxBox"][]="ComponentName";

"xxxBox" can be any string terminated by "Box". It is used to group components inside a <div> html tag (see "Style" chapter below).

Component parameters

You can modify component parameters in configuration files (those files are written in php).

To set a parameter, the php line is such as:

$gosParam["ParameterName"]="ParameterValue";

Take care of upper and lower case.

For instance, to remove the mark on the last move, use:

$gosParam["markOnLastOn"]=0;

If the parameter value is a string, don't forget the double quotes. For instance:

$gosParam["initMethod"]="last";

Global parameters

ParameterUseDescriptionValuesDefault value
globalBoxAlwaysName of the maxiGos global box. If this parameter value is not "GlobalBox", maxiGos adds to the global box a class named "mx"+(globalBox value)+"Div", and its id will be (id of the maxiGos object)+(globalBox value)+"Div". It's useful when mixing maxiGos objects of different kinds in the same page.

Note: the id of a maxiGos object is "d" followed by a number incremented by 1 between each maxiGos object when there are several maxigos objects in the same page. The first object number is 1. If for instance globalBox is "MyGlobalBox", the global box classes will be .mxGlobalBoxDiv and .mxMyGlobalBoxDiv, the id of the first maxiGos object of the page will be "d1MyGlobalBoxDiv".
A string followed by "Box""GlobalBox"
initMethodOftenInitial action: display the goban as it was before the "first" move, or after the "last" move, or "loop" (in this case, "Loop" component is required), or advance of n nodes in the game tree."first", "last", "loop" or an integer"first"
customStoneMerelyIf defined, maxiGos uses png images png to draw stones. These images must be in the folder which is "customStone" value (relative path between "_maxigos" folder and the folder where these images are stored). If 0, maxiGos draws stones using javascript canvas functions (this is the default).

These images files must be named "black" or "white" followed by "3d" or "2d" followed by their diameter in pixel and by ".png". For instance, a black stone in 3d of 23 pixels diameter must be stored in a file named "black3d23.png". Diameters must be between 9 and 31 pixels (for other diameters, maxiGos does a zoom).
A path to stone image folder"undefined"
sgfLoadCoreOnlySometimesIf 1, one keeps core information only on the game (EV, RO, DT, PC, PB, PW, BR, BW, BT, BW, RU, TM, OT, HA, KM, RE) when decoding sgf.0 or 10
sgfSaveCoreOnlySometimesIf 1, one keeps core information only on the game (EV, RO, DT, PC, PB, PW, BR, BW, BT, BW, RU, TM, OT, HA, KM, RE) when encoding sgf.0 or 10
sgfLoadMainOnlySometimesIf 1, one keeps main variation only when decoding sgf.0 or 10
sgfSaveMainOnlySometimesIf 1, one keeps main variation only when encoding sgf.0 or 10
fitParentOftenIf 1, maxiGos reduces the goban size to fit its width to the player html parent width (use it in conjonction with fitMax if the goban is not a 19x19 one and if maximizeGobanWidth is not 1).
If 2, maxiGos adapts navigation buttons size to fit navigation width to the goban width (assume that the goban is a 19x19 one or that maximizeGobanWidth is 1).
If 3, do both.

MaxiGos doesn't know how to compute margins of "GobanDiv", "GobanDiv" parent and "GlobalBoxDiv" (browsers don't give the same result), and assumes they have not or they have the value "auto". If these boxes have margin, try to use the "fitDelta" parameter with "fitParent".
0 , 1, 2 or 30
fitMaxSometimesIf "fitParent" is 1, maxiGos supposes that the goban has never no more than "fitMax" lines in its width (coordinates arround the goban if any count for 1 line) to check if its width has to be reduced. A number21 if coordinates are drawn arround the goban, otherwise 19
fitDeltaSometimesIf "fitParent" is 1, maxiGos substracts fitDelta pixels to the width of the html element that contains maxiGos to check if its width has to be reduced. A number0
htmlParenthesisSometimesIf 1, maxiGos replace "&#40;" and "&#41;" by "(" and ")" in sgf source when it is inserted between html tags where the player displays (useful for instance when using maxiGos in a forum powered by phpBB3 which has an editor that replaces "(" and ")" by "&#40;" and "&#41;"). 0 or 10
sourceFilterSometimesA regular expression that the sgf source has to match when it is inserted between html tags where the sgf player displays (useful for instance to discard unwanted sgf source inserted by a user in a forum). Regular expressionEmpty string
htmlBrMerelyIf 1, any <br> found in the Sgf is displayed as a line break (instead of displaying a "<br>" string).

Note: when a sgf record (but not a file name or an url) is inserted between html tags where the sgf player displays, by default maxiGos replaces any <br> by a line break (because framework editors may add some <br> when a user inserts a line break in his text). To prevent this behavior, set "htmlBr" explicitly to 0.
0 or 1"undefined"
htmlSpanMerelyIf 1, any <span> or </span> found in the Sgf are displayed as html tags (instead of displaying "<span>" or "</span>" strings). The tags can have only a "class" attribute which name contains letters, numbers, "_" and "-". 0 or 1"undefined"
htmlDivMerelyIf 1, any <div> or </div> found in the Sgf are displayed as html tags (instead of displaying "<div>" or "</div>" strings). The tags can have only a "class" attribute which name contains letters, numbers, "_" and "-". 0 or 1"undefined"
htmlPMerelyIf 1, any <p> or </p> found in the Sgf are displayed as html tags (instead of displaying "<p>" or "</p>" strings). The tags can have only a "class" attribute which name contains letters, numbers, "_" and "-".

Note: when a sgf record (but not a file name or an url) is inserted between html tags where the sgf player displays, by default maxiGos suppresses any <p> and replaces any </p> by a double line break (because framework editors may add some </p><p> when a user inserts line breaks in his text). To prevent this behavior, set "htmlP" explicitly to 0 or 1.
0 or 1"undefined"
swapOnSometimesIf 1, maxiGos swaps from a vertical design to an horizontal design if the available space is large enough.

The principe is the following: if there is enough space, grouping boxes referenced by "swapMain" and "swapBeside" parameters are displayed horizontally. Otherwise, they are displayed vertically. One swaps if "swapMain" width multiplied by "swapRatio" + 1 is inferior to the available space.

If it is the case (horizontal design), one gives to "swapBeside" the width of "swapMain" multiplied by "swapRatio". And one adjusts the height of the component referenced by "swapExtend" to give to "swapMain" and "swapBeside" the same height. One also add to the global box the"mxHorizontal" class .

If it is not the case (vertical design), one gives to "swapBeside" the width of "swapMain". One also add to the global box the "mxVertical" class.
0 or 1"undefined"
swapMainSometimesName of the main box in case of swap (see "swapOn"). A box name (finishing by "Box")"undefined"
swapBesideSometimesName of the box beside to the main box in case of swap (see "swapOn"). A box name (finishing by "Box")"undefined"
swapRatioSometimesRatio used to determine if one swaps or not (see "swapOn"). A number"undefined"
swapExtendSometimesName of a component inside "swapBeside" (see "swapOn"). 0 or 1"undefined"
adjustXxxBoxWidthSometimes If 1, maxiGos adjusts the "XxxBox" grouping box width to goban width. If equal to another box name, maxiGos adjusts the "XxxBox" grouping box width to this other box width. 0, 1 or box name0
adjustXxxBoxHeightSometimes If 1, maxiGos adjusts the "XxxBox" grouping box height to goban height. If equal to another box name, maxiGos adjusts the "XxxBox" grouping box height to this other box height. 0, 1 or box name0

"About" component

ParameterUseDescriptionValuesDefault value
aboutBtnOnSometimesIf 1, display a "About" button in its own component box.0 or 10

"AnimatedStone" component

By default, there is only one animation available: a translation from the corner of the goban to the point where the stone has to be placed.

ParameterUseDescriptionValuesDefault value
animatedStoneTimeSometimesReference time used to compute duration of stone translation when placing it on the goban. The actual translation time depends of the distance between the starting point and the ending point of the translation.

Its default value is the value of the "loopTime" parameter if "Loop" component is in use, otherwise 1000 ms.
Number1000

"BackToMain" component

ParameterUseDescriptionValuesDefault value
backToMainBtnOnSometimesIf 1, display a "Back to main" button in its own component box.0 or 10

"Buttons" component

ParameterUseDescriptionValuesDefault value
buttonsAlwaysButtons list to include in the container ("Header", "Option", "Sgf"...). Comma-separated stringEmpty string

Composant "Buttons"

ParamètreUtilisationNatureValeurs possiblesValeur par défaut
buttonsToujoursListe des boutons à inclure dans le conteneur ("Header", "Option", "Sgf"...). Une chaine de caractères listant les boutons séparés par une virguleChaine vide
adjustButtonsWidthOften If 1, maxiGos adjusts the component box width to goban width. If equal to another box name, maxiGos adjusts the component box width to this other box width. 0, 1 or box name0
adjustButtonsHeightOften If 1, maxiGos adjusts the component box height to goban height. If equal to another box name, maxiGos adjusts the component box height to this other box height. 0, 1 or box name0

"Cartouche" component

ParameterUseDescriptionValuesDefault value
adjustCartoucheWidthOften If 1, maxiGos adjusts the component box width to goban width. If equal to another box name, maxiGos adjusts the component box width to this other box width. 0, 1 or box name0
adjustCartoucheHeightMerely If 1, maxiGos adjusts the component box height to goban height. If equal to another box name, maxiGos adjusts the component box height to this other box height. 0, 1 or box name0
playerAndRankInSameElementOnSometimes If 1, maxiGos concats the rank with the player name. Otherwise, it puts it in a separate html element prefixed by "Rank". 0 or 10
smallStoneAsPrisonerLabelOnSometimes If 1, maxiGos appends a small stone to the prisoners number. Otherwise, it prefixes it by "Caps". 0 or 10

"Comment" component

ParameterUseDescriptionValuesDefault value
adjustCommentWidthOften If 1, maxiGos adjusts the component box width to goban width. If equal to another box name, maxiGos adjusts the component box width to this other box width. 0, 1 or box name0
adjustCommentHeightOften If 1, maxiGos adjusts the component box height to goban height. If equal to another box name, maxiGos adjusts the component box height to this other box height. 0, 1 or box name0
headerInCommentOftenIf 1, maxiGos displays header information in comment box.

The "Header" component has to be in use too, otherwise this parameter has no effect.
0 or 10
allInCommentMerelyIf 1, maxiGos concats all comment from game root to current move and displays it in comment box.0 or 10

"Cut" component

ParameterUseDescriptionValuesDefault value
cutBtnOnSometimesIf 1, display a "Cut" button in its own component box.0 or 10

Note: the name of the button is "SimpleCut" and not "Cut", to avoid confusion with the "Cut" tool of the "Edit" component.

"Diagram" component

ParameterUseDescriptionValuesDefault value
numberingOnOftenIf 1, maxiGos displays numbering. If 2, maxiGos displays numbering modulo 100. If undefined, maxiGos gets its value from the sgf PM property0, 1 or 2"undefined"
indicesOnOftenIf 1, maxiGos displays indices arround the goban. If undefined, maxiGos gets its value from the sgf FG property0, or 1"undefined"
asInBookOnOftenIf 1, maxiGos displays stones as in book (i.e. it doesn't remove stones captured by numbered stones). If undefined, maxiGos gets its value from the sgf FG property0 or 1"undefined"
marksAndLabelsOnOftenIf 1, maxiGos displays marks and labels0 or 10
numAsMarkOnLastOnMerelyIf 1, maxiGos the move number as mark on last move.0 or 10

"Edit" component

ParameterUseDescriptionValuesDefault value
checkRulesOnOften If 2, maxiGos verifies if the move is legal (not on an occupied point, not a suicide, and not japanese ko).

If 1, maxiGos verifies if the move is placed on an empty point.

If not 1 nor 2, maxiGos allows the user to play anywhere.

The check is applied to user move only. If the move is in the sgf, maxiGos always places it on the goban.
0, 1, 2 or undefined"undefined"

"File" component

ParameterUseDescriptionValuesDefault value
openOnlySometimesIf 1, maxiGos displays only the "Open" button.0 or 10
hideNewMerelyIf 1, maxiGos hides "new" button.0 or 10
hideOpenMerelyIf 1, maxiGos hides "open" button.0 or 10
hideSaveMerelyIf 1, maxiGos hides "Save" button.0 or 10
hideSendMerelyIf 1, maxiGos hides "Send" button.0 or 10

"Goban" component

ParameterUseDescriptionValuesDefault value
maximizeGobanWidthOftenIf 1, maxiGos gives to goban box (div.mxGobanDiv) the width of a 19x19 goban even if the displayed one is smaller or partially visible. 0 or 10
maximizeGobanHeightOftenIf 1, maxiGos gives to goban box (div.mxGobanDiv) the height of a 19x19 goban even if the displayed one is smaller or partially visible. 0 or 10
markOnLastOnOftenIf 1, maxiGos displays a mark on the last move0 or 10
markOnLastColorOftenColor of the mark on the last move.Css color"#000" on white stone or "fff" on black stone
in3dOnAlwaysIf 1, maxiGos displays the stones with a 3d effect0 or 10
stretchOnAlwaysIf 1, the goban height is 10% more than its width0 or 10
stoneShadowOnSometimesIf 1, maxiGos displays a shadow on stone bottom right0 or 10
gobanFsMerelyGoban font size. This parameter is merely used. In practice, it's better to set the css "font-size" property of the goban canvas tag (for instance in a css file). Css font sizeNone
gobanBkMerelyGoban background color. This parameter is merely used. In practice, it's better to let this color set to transparent, and to set the css 'background' property of the goban canvas tag (for instance in a css file). Css color"transparent"
lineColorMerelyLine color. This parameter is merely used. In practice, it is better to set the css 'color' property of the goban canvas tag (for instance in a css file). Css colorValue of the css color property of the goban canvas tag
starColorMerelyColor of hoshi. Css colorColor of goban line
outsideColorMerelyColor of indice character. Css colorColor of goban line
outsideBkMerelyColor of indice background. Css color"transparent"
outsideFontWeightMerelyFont weight of indice character. "normal" or "bold""normal"
focusColorSometimesColor of token drawn on goban that shows point on focus when user navigates using a keyboard. Css color"#f00"
markAndLabelColorMerelyColor of marks and labels. Css colorColor of goban line
markLineWidthMerelyWidth of lines used to draw marks. a numbergoban line width
territoryMarkMerelyTerritory mark shape. "MA" (cross mark) or "MS" (miniaturised stone)"MS" (miniaturised stone)
whiteTerritoryMarkColorMerelyColor of white territory marks if they are not a miniaturised stone. Css color"#fff"
blackTerritoryMarkColorMerelyColor of black territory marks if they are not a miniaturised stone. Css color"#000"
lineWidthMerelyGoban line width. A numberabout 1 + 1/42 by stone diameter
starRadiusSometimesGoban star point diameter. A numberabout 1.5 or 1/10 by by stone diameter
focusLineWidthMerelyLine width of token drawn on goban that shows point on focus when user navigates using a keyboard. A number2 by goban line width
silentFailSometimesIf 1, maxiGos doesn't display any visual effect when the user clicks on a point where there is nothing to display.0 or 10
gobanFontSometimesSpecifie the font used to display text on the gobana font nameArial

Note: to change goban background color, goban line color, stone radius, color or size of icon navigation buttons, it's better to use css (see "Style" chapter).

"Goto" component

ParameterUseDescriptionValuesDefault value
gotoBoxOnOftenIf 1, maxiGos displays a move bar in the component box.

Otherwise, maxiGos doesn't display the component box.
0 or 10
gotoInputOnOftenIf 1, maxiGos adds an input field for changing the last displayed move (require "Diagram" component).0 or 10
gotoInputPositionSometimesIf gotoInputOn is 1, maxiGos inserts the input field for changing the last displayed move at the value of gotoInputPosition in the navigation bar."left","right","center""center"
adjustGotoWidthSometimes If 1, maxiGos adjusts component box width to goban width. If equal to another box name, maxiGos adjusts the component box height to this other box height. 0, 1 or box name0

"Guess" component

canPlaceGuessOftenIf 1, maxiGos places the user move if it is in the sgf tree. This parameter is ignored if "canPlaceVariation" is 1. 0 or 10
guessBoxOnOftenIf 1, maxiGos displays a guess meter in the component box that indicates the distance between the user click and continuation moves found in the sgf. 0 or 10

"Header" component

ParameterUseDescriptionValuesDefault value
headerBoxOnMerelyIf 1, display header in component box (header is the concatenation of sgf information properties: EV, RO, DT, PC, ...).

If 0, header can be displayed over goban by a click on "Header" button (this button is visible in component box only if headerBtnOn is 1), or header can be displayed in comment box if headerInComment is 1.
0 or 10
headerBtnOnSometimesIf 1, maxiGos displays "Header" button in component box instead of header content itself. A click on this button displays header over goban. This parameter is ignored if headerBoxOn is 1.0 or 10
adjustHeaderWidthSometimes If 1, maxiGos adjusts the component box width to goban width. If equal to another box name, maxiGos adjusts the component box width to this other box width. This parameter is ignored if headerBoxOn is 0. 0, 1 or box name0
adjustHeaderHeightMerely If 1, maxiGos adjusts the component box height to goban height. If equal to another box name, maxiGos adjusts the component box height to this other box height. This parameter is ignored if headerBoxOn is 0. 0, 1 or box name0
headerLabel_<xy>Sometimes"Header" button label. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). If the language code contains a "-" (such as "zh-tw"), replace it by "_". String"Header" (or its translation)
hideTitleMerelyIf 1, maxiGos doesn't display title.0 or 10
hideBlackMerelyIf 1, maxiGos doesn't display black name and level.0 or 10
hideWhiteMerelyIf 1, maxiGos doesn't display white name and level.0 or 10
hideDateMerelyIf 1, maxiGos doesn't display date.0 or 10
hidePlaceSometimesIf 1, maxiGos doesn't display place.0 or 10
hideRulesSometimesIf 1, maxiGos doesn't display rules type.0 or 10
hideTimeLimitsSometimesIf 1, maxiGos doesn't display time limits.0 or 10
hideKomiMerelyIf 1, maxiGos doesn't display komi.0 or 10
hideHandicapMerelyIf 1, maxiGos doesn't display handicap.0 or 10
hideResultMerelyIf 1, maxiGos doesn't display result.0 or 10
hideGeneralCommentSometimesIf 1, maxiGos doesn't display general comment.0 or 10
hideNumOfMoveLabelSometimesIf 1, maxiGos doesn't display "Number of move:" before the number of move.0 or 10
hideResultLabelSometimesIf 1, maxiGos doesn't display "Result:" before the result.0 or 10
hideNumOfMovesSometimesIf 1, maxiGos doesn't display number of move.0 or 10
concatKomiToResultSometimesIf 1, maxiGos concats komi to result.0 or 11
concatHandicapToResultSometimesIf 1, maxiGos concats handicap to result.0 or 10
concatNumOfMovesToResultSometimesIf 1, maxiGos concats number of move to result.0 or 10

Note 1: if headerBoxOn and headerBtnOn are both 0, maxiGos doesn't display "Header" component box. But it can still display header in "Comment" component box if "headerInComment" is set to 1.

Note 2: difference between "Header" component and "Info" component is that one can change header content using "Info" component while "Header" component just displays its content.

"Help" component

ParameterUseDescriptionValuesDefault value
helpBtnOnSometimesIf 1, display a "Help" button in its own component box.0 or 10
helpSource_<xy>AllwaysName of help file. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). If the language code contains a "-" (such as "zh-tw"), replace it by "_". Help files are supposed to be in "_maxigos/_help" folder. The help file name must start by "help". File name"undefined"

"Image" component

ParameterUseDescriptionValuesDefault value
imageBtnOnSometimesIf 1, display a "Image" button in its own component box.0 or 10

"Info" component

ParameterUseDescriptionValuesDefault value
infoBoxOnMerelyIf 1, maxiGos displays "Informations" form in component box ("Informations" form allows to modify sgf information properties: EV, RO, DT, PC, ...).

If 0, "Informations" form can be displayed over goban by a click on "Info"button (this button is visible in component box only if infoBtnOn is 1), or using "Header" tool of "Edit" component.
0 or 10
infoBtnOnMerelyIf 1, maxiGos displays "Info" button in its own component box instead of "Informations" form itself. A click on this button displays "Informations" form over goban. This parameter is ignored if infoBoxOn is 1.0 or 10
adjustInfoWidthMerely If 1, maxiGos adjusts the component box width to goban width. If equal to another box name, maxiGos adjusts the component box width to this other box width. This parameter is ignored if infoBoxOn is 0. 0, 1 or box name0
adjustInfoHeightMerely If 1, maxiGos adjusts the component box height to goban height. If equal to another box name, maxiGos adjusts the component box height to this other box height. This parameter is ignored if infoBoxOn is 0. 0, 1 or box name0
infoLabel_<xy>MerelyLabel of "Info" button. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). If the language code contains a "-" (such as "zh-tw"), replace it by "_". String"Info" (or its translation)

Note 1: if infoBoxOn and infoBtnOn are both 0, maxiGos doesn't display "Info" component box. But it can still display "Informations" form over goban using the "Header" tool of "Edit" component.

Note 2: difference between "Header" component and "Info" component is that one can change header content using "Info" component while "Header" component just displays its content.

"Lesson" component

ParameterUseDescriptionValuesDefault value
adjustLessonWidthMerely If 1, maxiGos adjusts the component box width to goban width. If equal to another box name, maxiGos adjusts the component box width to this other box width. 0, 1 or box name0
adjustLessonHeightOften If 1, maxiGos adjusts the component box height to goban height. If equal to another box name, maxiGos adjusts the component box height to this other box height. 0, 1 or box name0

"Loop" component

ParameterUseDescriptionValuesDefault value
loopBtnOnSometimesIf 1, maxiGos displays a "Loop" button in the navigation bar.0 or 10
loopTimeMerelyReference time used to compute iddle time between the display of two sgf nodes. Iddle time T is longer when a comment of L bytes length is found in the node in order to let the user enough time to read the comment. T is computed by the following formula: T=L*loopTime/20+loopTime Number1000
initialLoopTimeMerelyReference time to compute iddle time of the initial node. This iddle time is computed by the following formula: T=initialLoopTime*loopTime/1000.

If this parameter is undefined, one used the same iddle time as for other nodes.
Number"undefined"
finalLoopTimeMerelyReference time to compute iddle time of the final node. This iddle time is computed by the following formula: T=finalLoopTime*loopTime/1000.

If this parameter is undefined, one used the same iddle time as for other nodes.
Number"undefined"
mainVariationOnlyLoopSometimesIf 1, maxiGos displays only the main variation.0 or 10
loopBtnPositionSometimesIf loopBtnOn is 1, maxiGos inserts "Loop" button in navigation bar at the position specified by loopBtnPosition."left","right","center""right"

"Menu" component

ParameterUseDescriptionValuesDefault value
menusAlwaysMenu list (values among "File","Edit","View" ... "Window").

If "File" is in the list, "File" component must be in use.

If "Edit" is in the list, "Edit" component must be in use.

If "View" is in the list, "View" component must be in use.
Comma-separated string (classic one is "File,Edit,View,Window")Empty string
menuTimeoutSometimes The amount of time in milliseconds that the submenus remain visible. a positive integer5000

"Navigation" component

ParameterUseDescriptionValuesDefault value
navigationBtnFsMerelyNavigation button font size. This parameter is merely used. In practice, it's better to set the css "font-size" property of the navigation button canvas tag (for instance in a css file). Css font size"undefined"
navigationBtnColorMerelyNavigation button color. This parameter is merely used. In practice, since this color is by default the css color property of the navigation button canvas tag, it is more elegant to set this css property (for instance in a css file). Css color value"undefined"
adjustNavigationWidthSometimes If 1, maxiGos adjusts the component box width to goban width. If equal to another box name, maxiGos adjusts the component box width to this other box width. 0, 1 or box name0
navigationsOftenList of buttons to include in navigation bar ("First", "TenPred", "Pred", "Next", ...). It's posible to include that are not navigation buttons as well such as "Option", "Sgf", ... Comma-separated string"First,TenPred,Pred,Next,TenNext,Last"
reduceNavigationButtonsThresholdSometimes If the navigation bar width is less than reduceNavigationButtonsThreshold, maxiGos hides "TenPred" and "TenNext" buttons. a number400

"NotSeen" component

ParameterUseDescriptionValuesDefault value
adjustNotSeenWidthOften If 1, maxiGos adjusts the component box width to goban width. If equal to another box name, maxiGos adjusts the component box width to this other box width. 0, 1 or box name0

"Options" component

ParameterUseDescriptionValuesDefault value
optionBtnOnSometimesIf 1, maxiGos displays "Options" button in component box instead of "Options" form itself. A click on this button displays "Options" form over goban. This parameter is ignored if optionBoxOn is 1.0 or 10
optionLabel_<xy>Sometimes"Options" button label. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). If the language code contains a "-" (such as "zh-tw"), replace it by "_". String"Options" (or its translation)
optionBoxOnSometimesIf 1, maxiGos displays "Options" form in component box.

If optionBoxOn is 0 and optionBtnOn is 1, this form can still be displayed over goban by a click on "Options" button.
0 or 10
hideMarkOnLastOnMerelyIf 1, maxiGos hides "markOnLastOn" checkbox.0 or 10
hideNumberingOnMerelyIf 1, maxiGos hides "numberingOn" checkbox.0 or 10
hideMarksAndLabelsOnMerelyIf 1, maxiGos hides "marksAndLabelsOn" checkbox.0 or 10
hideAsInBookOnMerelyIf 1, maxiGos hides "asInBookOn" checkbox.0 or 10
hideVariationMarksOnMerelyIf 1, maxiGos hides "variationMarksOn" checkbox.0 or 10
hideSiblingsOnMerelyIf 1, maxiGos hides "siblingsOn" checkbox.0 or 10
hideIndicesOnMerelyIf 1, maxiGos hides "indicesOn" checkbox.0 or 10
hideIn3dOnMerelyIf 1, maxiGos hides "in3dOn" checkbox.0 or 10
hideVariationOrGuessMerelyIf 1, maxiGos hides "canPlaceVariation" and "canPlaceGuess" radio buttons.0 or 10
hideLoopTimeMerelyIf 1, maxiGos hides "loopTime" text input.0 or 10
hideAnimatedStoneOnMerelyIf 1, maxiGos hides "animatedStoneOn" checkbox.0 or 10
hideAnimatedStoneTimeMerelyIf 1, maxiGos hides "animatedStoneTime" text input.0 or 10

"Pass" component

ParameterUseDescriptionValuesDefault value
passBtnOnSometimesIf 1, display a "Pass" button in its own component box.0 or 10
passLabel_<xy>Sometimes"Pass" button label. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). If the language code contains a "-" (such as "zh-tw"), replace it by "_". String"Pass" (or its translation)
canPassOnlyIfPassInSgfMerelyIf 1, maxiGos enables "Pass" button only if there is a possible pass in sgf record as next move.0 or 10

"Sgf" component

ParameterUseDescriptionValuesDefault value
sgfBtnOnSometimesIf 1, display a "SGF" button in its own component box.0 or 10
noSgfDialogSometimesIf 1, maxiGos dowloads sgf without displaying any dialog when the user clicks on sgf button.0 or 10
sgfLabel_<xy>Sometimes"Pass" button label. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). If the language code contains a "-" (such as "zh-tw"), replace it by "_". String"SGF" (or its translation).
toCharsetMerelyValues of this parameter are charset codes ("UTF-8", "Big5", "GB13080", "Shift_JIS", ...). This parameter is used only to generate sgf (its value replaces the initial value of the CA property in the sgf). It does nothing when reading or displaying a sgf. Its value can be different from the charset of the page. In practice, it is better that its value be "UTF-8" (the best choice) or evenly the charset of the page. A charset code"UTF-8"
noSgfDialogSometimesIf 1, maxiGos allows to modify sgf in the sgf component dialog box.0 or 10

"Score" component

ParameterUseDescriptionValuesDefault value
scoreBtnOnSometimesIf 1, display a "Score" button in its own component box.0 or 10
ephemeralScoreOnOftenIf 1, remove territory marks ("TB" and "TW") when ending score mode.0 or 10

"Solve" component

ParameterUseDescriptionValuesDefault value
canRetryOftenIf 1, maxiGos displays a retry button.0 or 10
canUndoOftenIf 1, maxiGos displays an undo button.0 or 10
canContinuationSometimesIf 1, maxiGos displays a continuation button. A click on this button shows moves of the first branch of the sgf tree from the current position. When this button is present, it is usually a good idea to set "numberingOn" parameter to 1.0 or 10
initialMessage_<xy>Sometimes Text displayed in comment box if the current node has no C property and if the initial position is shown. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). If the language code contains a "-" (such as "zh-tw"), replace it by "_". String"undefined"
nowhereMessage_<xy>Sometimes Text displayed in comment box if the user clicks on a point which is not a continuation in the sgf. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). If the language code contains a "-" (such as "zh-tw"), replace it by "_". String"undefined"
endMessage_<xy>Sometimes Text displayed in comment box if the user clicks on the goban and there is no follow up in the sgf. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). If the language code contains a "-" (such as "zh-tw"), replace it by "_". String"undefined"
forbiddenMessage_<xy>Sometimes Text displayed in comment box if the user tries to play a forbidden move (occupied point, suicide and simple ko only). <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). If the language code contains a "-" (such as "zh-tw"), replace it by "_". String"undefined"
failMessage_<xy>Sometimes Text displayed in comment box if the current node has no C property and is the last one, and if the last move was play by maxiGos. If for some reason, you don't want that this message displays for one specific node only, just add a C property to this node in the sgf. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). If the language code contains a "-" (such as "zh-tw"), replace it by "_". String"undefined"
successMessage_<xy>Sometimes Text displayed in comment box if the current node has no C property and is the last one, and if the last move was play by the user. If for some reason, you don't want that this message displays for one specific node only, just add a C property to this node in the sgf. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). If the language code contains a "-" (such as "zh-tw"), replace it by "_". String"undefined"
specialMoveMatchSometimes In theory, the standard way to represent a move played elsewhere (i.e. a tenuki) is to put in the sgf two consecutive moves of the opposite color. However, for historical reasons, some sgf files use other methods to do that such as inserting pass moves, or moves played in the invisible part of the goban, or moves played outside the goban. This parameter is designed to address these cases.

If 0, maxiGos places the user move if it matches one of the continuation moves in the sgf or if two consecutive moves of the opposite color are found in the sgf.

If 1, maxiGos places the user move if it matches one of the continuation moves in the sgf or if two consecutive moves of the opposite color are found in the sgf or if one move in the sgf coordinates are outside the goban (such B[zz] or W[zz] on a 19x19 for instance).

If 2, maxiGos places the user move if it matches one of the continuation moves in the sgf or if two consecutive moves of the opposite color are found in the sgf or if one move in the sgf coordinates are outside the goban (such B[zz] or W[zz] on a 19x19 for instance) or in the invisble part of the goban (when a VW property is used).

If 3, maxiGos places the user move if it matches one of the continuation moves in the sgf or if two consecutive moves of the opposite color are found in the sgf or if one move in the sgf coordinates are outside the goban (such B[zz] or W[zz] on a 19x19 for instance) or in the invisble part of the goban (when a VW property is used) or is a pass.

0, 1, 2 or 30
adjustSolveWidthSometimes If 1, maxiGos adjusts the component box width to goban width. If equal to another box name, maxiGos adjusts the component box width to this other box width. 0, 1 or box name0

"Speed" component

ParameterUseDescriptionValuesDefault value
adjustSpeedBarWidthOften If 1, maxiGos adjusts the component box width to goban width. If equal to another box name, maxiGos adjusts the component box width to this other box width. 0, 1 or box name0

"Title" component

ParameterUseDescriptionValuesDefault value
titleBoxOnOftenIf 1, display title in component box. One uses 0 when one needs to use functions of the component but not the component itself.0 or 10
translateTitleOnSometimesIf 1, maxiGos try to translate the title.0 or 10
hideEmptyTitleMerelyIf 1, maxiGos hides title box if it contains an empty string.0 or 10

"Tree" component

ParameterUseDescriptionValuesDefault value
treeFocusColorOftenBackground color in the tree of the node under focus. Css color"#f00"
markCommentOnTreeMerelyIf 1, maxiGos replaces in the tree commented move numbers by a ?. 0 or 10
adjustTreeWidthSometimes If 1, maxiGos adjusts the component box width to goban width. If equal to another box name, maxiGos adjusts the component box width to this other box width. 0, 1 or box name0
adjustTreeHeightSometimes If 1, maxiGos adjusts the component box height to goban height. If 2, maxiGos adjusts the parent component box height to the parent goban box height. If equal to another box name, maxiGos adjusts the component box height to this other box height. 0, 1, 2 or box name0
scrollInTreeContentMerely If 1, maxiGos assumes that the element of class "mxTreeContentDiv" is scrollable. Otherwise, it assumes that the element of class "mxTreeDiv" is scrollable. Set this parameter to 1 when the element of class "mxTreeContentDiv" has scrollbars. 0 or 10

"Variations" component

ParameterUseDescriptionValuesDefault value
variationMarksOnOftenIf 1, maxiGos displays mark on variation. If 0, it hides them. If "undefined", maxiGos displays mark on variation as specifyied by the SGF ST property.0, 1 or "undefined""undefined"
siblingsOnMerelyIf 1, maxiGos displays variations of current node, otherwise of the next node. If "undefined", maxiGos displays variations as specified by the SGF ST property. 0, 1 or "undefined""undefined"
variationsBoxOnOftenDisplay variation bar.0 or 10
hideSingleVariationMarkOnOftenIf 1, maxiGos doesn't display mark on variation when there is only one variation. If 0, maxiGos displays mark on variation even if there is only one variation.0 or 10
variationColorOftenText color of variation mark.Css colorColor of goban line
variationOnFocusColorOftenText color of the variation on focus mark.Css colorvariationColor
variationBkOftenBackground color of variation mark.Css color"transparent"
variationOnFocusBkOftenBackground color of the variation on focus mark.Css colorvariationBk
variationStrokeBkMerelyBackground stroke color of variation mark.Css color"transparent"
variationOnFocusStrokeBkMerelyBackground stroke color of the variation on focus mark.Css colorvariationStrokeBk
variationStrokeColorMerelyStroke color of variation mark.Css color"transparent"
variationOnFocusStrokeColorMerelyStroke color of variation on focus mark.Css colorvariationStrokeColor
variationFontWeightOftenFont weight of variation mark."normal" or "bold""normal"
variationOnFocusFontWeightMerelyFont weight of variation on focus mark."normal" or "bold"variationFontWeight
canPlaceVariationOftenIf 1, when the user clicks on an intersection, maxiGos places a move on this intersection if there is such a move in the sgf tree. If the move is not in the sgf tree ( and if ST value is even), maxiGos adds the move in the sgf tree. If 0, a user click on an intersection doesn't place a move on it. 0 or 10
variationMarkSeedSometimesFirst variation mark. By default, maxiGos uses number as variation mark starting with 1. To use letter as variation mark, just set this parameter value to "a" or "A". Character"1"
adjustVariationsWidthSometimes If 1, maxiGos adjusts the component box width to goban width. If equal to another box name, maxiGos adjusts the component box width to this other box width. 0, 1 or box name0

"Version" component

ParameterUseDescriptionValuesDefault value
adjustVersionWidthSometimes If 1, maxiGos adjusts the component box width to goban width. If equal to another box name, maxiGos adjusts the component box width to this other box width. 0, 1 or box name0
adjustVersionHeightSometimes If 1, maxiGos adjusts the component box height to goban height. If equal to another box name, maxiGos adjusts the component box height to this other box height. 0, 1 or box name0

"View" component

ParameterUseDescriptionValuesDefault value
viewBoxOnMerelyIf 1, display a box with buttons of the "View" menu. Most of the time, these box is not used and "View" buttons are displayed in the box of "Menu" component. 0 or 10

Style

Overview

MaxiGos is provided with some style sheets, but it's common to replace them by custom ones.

To include a custom style sheet, use something like $gosParam["Style"][]="xyz.css"; in configuration file (simple), or add in the head part of the page something like <link rel="stylesheet" type="text/css" href="chemin/xyz.css"> (not always possible, but more efficient).

By default, when css file name is set in configuration file, maxiGos looks for it in maxiGos "_css" folder. But it can be anywhere else (in this case, add a relative path from "_css" folder to css file location as a prefix of css file name).

It's useful to give a value to "globalBox" parameter in configuration file different from its default one ("GlobalBox") to avoid confusion when displaying several maxiGos with different styles in the same page.

Each maxiGos component displays its content in a <div> html tag, excepting "Title" that displays in a <h1>.

Components can be grouped in boxes, each grouping box displays in a <div> html tag.

Finally, all boxes are grouped in a global <div> html tag.

All these <div> have css classes (the class name for the <div> of a component named "Xxx" is "mxXxxDiv"). And some internal tags of the components have also css classes. As a result, one can use css to modify almost everything in maxiGos (see samples to learn more about that).

The goban is drawn in a <canvas></canvas> tag. To change its style, use "div.mxGobanDiv canvas" in css files. For instance, to change goban background color, goban line color and stone radius, use something like (assuming "globalBox" parameter value is "BasicGlobalBox" thus .mxBasicGlobalBoxDiv is the class name of the global box):

.mxBasicGlobalBoxDiv div.mxGobanDiv canvas {background-color:#f00;color:#fff;font-size:12px;}

The navigation button tags are <button><div><span>...</span></div></button>. To change its style, use "div.mxNavigationDiv button" in css files.

The "NotSeen" move list is a succession of <div><img ...><span>...</span></div>, where img tag encloses each numbered stone image and span tag encloses coordinates that follows each stone image.

As in "Navigation" component, buttons are displayed using <button><div><span>...</span></div></button> or <input> tags.

Class list

The css classes used by maxiGos are:

1) Global box

The global box <div> may have one, two or all of the following classes:
- div.mxGlobalBoxDiv (always).
- mx + "globalBox" parameter value + Div if "globalBox" parameter value is not "globalBox".
- mxIn3d if "in3dOn" is 1 or mxIn2d if "in3dOn" is 0.

2) Grouping box

div.mxAaaBoxDiv
...
div.mxZzzBoxDiv

3) Component tags and internal tags (some classes may be not listed)

div.mxAboutDiv
button span (if aboutBtnOn is 1)
div.mxBackToMainDiv
button span (if backToMainBtnOn is 1)
div.mxCommentDiv
div.mxCommentContentDiv
span.mxMoveNumberSpan (only if allInComment is 1)
"Header" tags (only if headerInComment is 1)
div.mxCutDiv
button span (if cutBtnOn is 1)
div.mxEditDiv
div.mxEditToolBarDiv
button canvas, button img, input + (.mxUnselectedEditTool or .mxSelectedEditTool) (tool bar tools)
div.mxEditCommentToolDiv textarea
div.mxFileDiv
button span
div.mxGobanDiv
div.mxInnerGobanDiv
canvas ("Goban" canvas)
div.mxGotoDiv
canvas (cursor)
div.mxGuessDiv
canvas (part of the bar which changes of size)
div.mxHeaderDiv
button span (if headerBtnOn is 1)
div.mxShowContentDiv h1 (if headerBoxOn is 1)
div.mxShowContentDiv div.mxP span.mxHeaderSpan (if headerBoxOn is 1)
div.mxHelpDiv
button span (if helpBtnOn is 1)
div.mxImageDiv
button span (if imageBtnOn is 1)
div.mxInfoDiv
button span (if infoBtnOn is 1)
div.mxInfoContentDiv div.mxInfoPageMenuDiv button.mxInfoPageBtn (if infoBoxOn is 1)
div.mxInfoContentDiv div.mxInfoPageMenuDiv button.mxInfoSelectedPageBtn (if infoBoxOn is 1)
div.mxInfoContentDiv div.mxInfoPageDiv label or input or textarea (if infoBoxOn is 1)
div.mxLessonDiv+(.mxBM, .mxDO, .mxIT, .mxTE or rien)
div.mxBalloonDiv div.mxBalloonContentDiv
img.mxAssistantImg
div.mxMenuDiv
div.mxOneMenuDiv
button span
div.mxSubMenuDiv
button span
div.mxMoveInfoDiv
img
div.mxNavigationDiv
button div span
input (type=text), the one inserted by "Goto" in "Navigation" to show or change move numbers
div.mxNotSeenDiv
div img followed by a span
div.mxOptionsDiv
button span (if optionBtnOn is 1)
h1 (if optionBoxOn is 1)
div.mxP input (if optionBoxOn is 1)
div.mxP label (if optionBoxOn is 1)
div.mxPassDiv
button.mxPassBtn span (if passBtnOn is 1)
button.mxJustPlayedPassBtn span
button.mxOnFocusPassBtn span
button.mxOnVariationPassBtn span
div.mxSgfDiv
button span (if sgfBtnOn is 1)
div.mxSolveDiv
button span
div.mxSpeedDiv
button.mxSpeedPlusBtn (the "+")
div.mxSpeedBarDiv canvas (the cursor)
button.mxSpeedMinusBtn (the "-")
h1.mxTitleH1
div.mxTreeDiv
div.mxVersionDiv
span
div.mxViewDiv (if "viewBoxOn" is 1)
button span

Warning: some components such as "animatedStone", "diagram" and "loop" have no box, and some other component boxes are displayed over other boxes (see below).

4) Popup boxes displayed over another box (.mxGobanDiv by default)

div.mxColorsDiv form
div.mxShowContentDiv
h1
div.mxP label
div.mxP label input
div.mxOKDiv button span
div.mxNumberingDiv
div.mxShowContentDiv
h1
div.mxP label
div.mxP input
div.mxOKDiv button span
div.mxNewDiv
div.mxShowContentDiv
h1
div.mxP label
div.mxP input
div.mxOKDiv button span
div.mxOpenDiv form
div.mxShowContentDiv
h1
div.mxP label
div.mxP input
div.mxOKDiv button span
div.mxSaveDiv form
div.mxShowContentDiv
h1
div.mxP label
div.mxP input
div.mxOKDiv button span
div.mxSendDiv form
div.mxShowContentDiv
h1
div.mxP label
div.mxP 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
div.mxP input
div.mxOKDiv button span
div.mxShowSgfDiv
div.mxShowContentDiv
div.mxP (if "allowEditSgf" is 0)
textarea (if "allowEditSgf" is 1)
div.mxOKDiv button span

5) Miscellaneous

div.mxDebugDiv
div.mxWaitDiv

Component hints

Some components may alter some styles and classes.

Goban

Its main box is div.mxGobanDiv and contains div.mxInnerGobanDiv which contains a canvas (<canvas></canvas>). The goban itself displays in the canvas using HTML5 canvas functions.

The background of the goban is given by "background", "background-image", ... properties of this canvas and can be changed by modifying them using css rules.

The color of the goban lines is the "color" of this canvas and can be changed by modifying this property value using css rules.

The size of the stones are computed using the "font-size" value of this canvas, and can be changed by modifying this value using css rules.

The div.mxInnerGobanDiv box and the goban canvas sizes are set by maxiGos (and are exactly the same). Don't try to set them in css rules.

In some cases, div.mxInnerGobanDiv is smaller than div.mxGobanDiv (9x9 goban, partial view of the goban, ...). In these cases, maxiGos centers div.mxInnerGobanDiv in div.mxGobanDiv using "position:relative", "top" and "left" css properties on div.mxInnerGobanDiv.

To set a shadow arround the goban, always use "box-shadow" on div.mxInnerGobanDiv and not on the canvas itself (otherwise some browsers bug).

Comment

Its main box is div.mxCommentDiv and contains div.mxCommentContentDiv.

When "adjustCommentWidth" (or "adjustCommentHeight") is set to 1, maxiGos compute the width (or height) of div.mxCommentDiv to fit the goban width (or height). In such a case, using css to set div.mxCommentDiv width (or height) is useless. To be able to set div.mxCommentDiv width (or height) using css rules, "adjustCommentWidth" (or "adjustCommentHeight") must be set to 0.

When "Comment" displays besides "Goban", the simplest way to set "Comment" height is to use "adjustCommentHeight=1;" in maxiGos configuration files.

When "Comment" displays above or below "Goban", the simplest way to set "Comment" width is to use "adjustCommentWidth=1;" in maxiGos configuration files.

Goban

Avoid to set horizontal margins to div.mxGobanDiv, parent of div.mxGobanDiv and div.mxGlobalBoxDiv other than 0 or auto if the "fitParent" parameter is not 0.

Pass

It has only one tag: button.

This button has .mxBtn and .mxPassBtn as class, but some other classes can be added to it depending of the situation:

As a result, one can style the pass button according to the situation.

Styles and classes modified by maxiGos

Warning: maxiGos modifies some styles and classes.

Encoding

Encoding of your page

MaxiGos works in "UTF-8", but can be included in a page which is not in "UTF-8".

When using a maxiGos stand-alone player script or an internationalization script in a page which is not in "UTF-8", just add charset="UTF-8" to any <script> tag that includes maxiGos scripts in your page.

For instance:

<script data-maxigos-l="en" charset="UTF-8" src="/_maxigos/_alone/maxigos-basic.js">

When using a launcher (sgfplayer.php or mgosLoader.js/sgfmultipleplayer.php), there is nothing to do, because the launcher indicates to your page that maxiGos works in UTF-8 (using the php function header()), and the end user browser does all what is necessary to produce the correct output automatically.

Custom launcher

MaxiGos has a default launcher, sgfplayer.php, which is convenient in almost all cases. This script can be found in "_mgos" folder.

But it is not very difficult for an advanced user to create its own launcher.

A custom launcher is a php file that calls "gosStart()" php function defined in "gosLib.php" script. This script can be found in "_php" folder.

Some maxiGos samples have their own launchers. See them to learn more about custom launcher.

Encoding of sgf files

MaxiGos can well display sgf files encoded in different charsets if the sgf CA property in these sgf files is properly set. In this case, maxiGos catches the value of the CA property then changes the encoding of the sgf file to "UTF-8". If a sgf file has no charset, maxiGos assumes that the charset is "ISO-8859-1" which is the defaut value of the CA property according to the sgf standard. Unfortunately, the CA property is often missing even when the actual charset of the file is not "ISO-8859-1", especially for sgf files encoded in asian charsets. And maxiGos doesn't (cannot?) try to guess what is the correct charset when there is no CA property in the sgf file. The only way for the moment to solve this problem is to use a text editor to add the correct CA property in the sgf file.

Note that when the actual charset of the sgf file is "UTF-8", the value of the CA property must be set "UTF-8" too (a missing CA property is not an option).

If one inserts some sgf record as is in the code of a page using a text editor, maxiGos assumes that the encoding of this record is the same as the encoding of the page (it is always the case in theory) and therefore ignores the CA property.

When maxiGos produces a sgf record, the result is always in UTF-8.

Even if in theory maxiGos can be included in a page which is not in "UTF-8" and read sgf files that are not in "UTF-8", the best is to use UTF-8 everywhere when possible.

Encoding and language

Encoding and language are different. "UTF-8" is convenient for any(?) language, so it is the best choice as encoding when you can use it. When it is not possible, take care since some encoding cannot display some caracters of some languages. For instance, japanese words of a sgf file in Shift-JIS cannot be transformed automatically and displayed in a page in "ISO-8859-1", but it can be transformed automatically and displayed in a page in "UTF-8". Don"t use charset names such as "UTF-8", "ISO-8859-1", "Shift-JIS", "Big5", "GB18030" as value of $mxL. Use language codes instead, such as "en", "fr", "ja", zh", "zh-tw"....

Annexe 1: file list of "_maxigos" folder

Main folders

"_mgos" content

"_php" content

Annexe 2: questions and answers

Question: what is the minimum I have to do to include a maxiGos player in one of my web page using a stand-alone script?

  1. Display in a browser the dowload page.
  2. Download the "maxigos-neo-classic-basic.js" stand-alone player.
  3. Create at the root of your website a "maxiGos" folder and copy "maxigos-neo-classic-basic.js to it.
  4. Insert in the page to the place where you want the player displays <script> and </script> tags with src value set to "/maxiGos/maxigos-neo-classic-basic.js", and insert between these tags a sgf record. For instance:
    <script data-maxigos-l="en" 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: what is the minimum I have to do to include a maxiGos player in one of my web page using the launcher "sgfplayer.php"?

  1. Download maxiGos archive (a file called "_maxigosnnn.zip" where nnn is the maxiGos version number).
  2. Uncompress maxiGos archive. It creates a folder called "_maxigos".
  3. Copy "_maxigos/" folder and its content to the root of your web site (you can put it anywhere, but in this case, you will have to adapt all the following paths accordingly).
  4. Assume your page is "page1.php" and is in a subfolder of the site root called "_pages".
  5. Assume the sgf file is "game1.sgf", represents a game and is in a subfolder of the site root called "_sgf".
  6. Insert in "page1.php" to the place where you want the player displays something the following line:
    <script data-maxigos-l="en" src="../_maxigos/_mgos/sgfplayer.php?sgf=<?php print urlencode("../_sgf/game1.sgf");?>"></script>
  7. Et voilà!

Question: is maxiGos working with any browsers?

In theory, maxiGos works with almost all browsers including internet explorer (from v9), firefox (from v4), safari (from v5) and chrome (however some features may be not available with some old browsers). It doesn't work at all with internet explorer v8 and older.

Question: maxiGos displays nothing. Why?

Verify if you well copied the "_maxigos" folder to the rigth place on the web server.

Verify paths in the lines where a call to maxiGos is done.

Question: maxiGos displays an empty goban. Why?

Verify that the sgf file is on the rigth place on the web server.

Otherwise the path of the sgf file (for instance in the launcher URL) is probably wrong.

It's also possible that maxiGos has not the right to open the sgf file. In this case, put your sgf files in another place or change their access rights. (however the writting right is never required).

Question: even if several components should be visible, maxiGos displays only the goban and the navigation bar. Why?

When maxiGos doesn't find the configuration file, it uses a default configuration that displays only the goban and the navigation bar.

The path or the name of the configuration file (in the launcher URL for instance) is probably wrong.

Question: how can I change the goban size?

There are several methods to do that. The easiest way is to change the value of the css "font-size" parameter of the html element of the goban. For instance, if you use a player of "Basic" type, to set the "font-size" to "12px", add somewhere in a css file:

.mxBasicGlobalBoxDiv div.mxGobanDiv canvas {font-size:12px !important;}

For a player of "Xxx" type, replace "Basic" in "mxBasicGlobalBoxDiv" by "Xxx.

Question: what about "responsive design"?

There are two way to make maxiGos responsive.

The first way is to set "fitParent" to 1, 2 or 3 (for instance in the configuration file of the maxiGos player). In this case, maxiGos will resize the goban and/or the navigation buttons according to the width of the html element that contains the player.

If the goban width is the player width (vertical design), and if one makes maxiGos adjusting the width of other components automatically (using adjustXxxWidth parameters), this is a convenient way to make maxiGos responsive.

The second way is to modify the goban and navigation buttons size using css. To make them responsive, assuming the theme is "Xxx" and the configuration is "YYY" (i.e there is $gosParam["theme"]="XXX"; and $gosParam["config"]="YYY"; in the configuration file), insert in your css file lines such as the following (adapt them if necessary):

.mxYYYGlobalBoxDiv.mxXXXGlobalBoxDiv div.mxGobanDiv canvas {font-size:12px;}
.mxYYYGlobalBoxDiv.mxXXXGlobalBoxDiv div.mxNavigationDiv button {font-size:18px;}

@media (max-width:449px)
{
.mxYYYGlobalBoxDiv.mxXXXGlobalBoxDiv div.mxGobanDiv canvas {font-size:10px;}
.mxYYYGlobalBoxDiv.mxXXXGlobalBoxDiv div.mxNavigationDiv button {font-size:16px;}
}

@media (max-width:359px)
{
.mxYYYGlobalBoxDiv.mxXXXGlobalBoxDiv div.mxGobanDiv canvas {font-size:9px;}
.mxYYYGlobalBoxDiv.mxXXXGlobalBoxDiv div.mxNavigationDiv button {font-size:14px;}
}

@media (max-width:319px)
{
.mxYYYGlobalBoxDiv.mxXXXGlobalBoxDiv div.mxGobanDiv canvas {font-size:8px;}
.mxYYYGlobalBoxDiv.mxXXXGlobalBoxDiv div.mxNavigationDiv button {font-size:12px;}
}

Using this way, you can make maxiGos responsive in any situation, but this is far more complicated than the first way. See "classic" samples to see the result.

In both cases, in order to force the page to fit a mobile screen, don't forget to add in the <head> part of the page a ligne such as:

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

Question: I use a maxiGos stand-alone script which displays all its texts in french and it is the latest thing I want. What can I do?

Read again the "Internationalization" chapter. Maybe you missed something.

If you need to use a language that has no internationalization file in "_i18n" folder, see next question.

Question: I want to translate maxiGos in another language. How can I process?

Duplicate "_maxigos/_i18n/mgos-i18n-ja.js" and replace the two last letters of the file name by the code of the new language (if possible a ISO 639 language code). Replace all "ja" strings by the code of the new language at the beginning of the file. Translate all japanese texts of this file in the new language (their equivalents in english are in front of them), and rewrite or create or evenly remove functions whose name starts by "build" or "translate" (these functions are "buildDate", "buildRank", "buildMove", "buildNumOfMoves", "buildRules", "buildTimeLimits", "buildKomi", "buildResult" and "transalteTitle"). If one of these functions is missing, maxiGos uses default functions to produce an acceptable output so you can drop the rewritting of these functions if it appears too complicated. Finally, save the file in UTF-8.

Question: I want to use maxiGos in a page which is not in UTF-8. What is the correct way to insert it?

If you use a stand-alone player, add charset="UTF-8" to any maxiGos script tag (if you use a launcher such as sgfplayer.php, there is nothing to do: the launcher does all what is necessary).

For instance:

<script charset="UTF-8" src="_alone/maxigos-minimal-basic.js">../_sgf/game/blood-vomit.sgf</script>.

Aknowledgements to Adachi K., Alfredo Pernin, Chantal Gajdos, Julien Payrat, Lao Lilin, Mickaël Simon, Motoki Noguchi, Olivier Besson, Olivier Dulac, Patrice Fontaine, Tony Yamanaka and many others for their advices or contributions to this project!

EnglishFrançais