HomeEnglishFrançais

Documentation for maxiGos v6.56

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

What is maxiGos?

MaxiGos is a tool to insert sgf go games or problems in a web page. It can be used in various ways such as a player with or without comments, with or without the moves tree, with ou without editing functionalities....

It's a set of php and javascript scripts, and css style sheets (note: stand-alone maxiGos players do not need php).

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

What are the pre-requisites?

The end user navigator must be HTML5 compliant.

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

If one uses the full version of maxiGos, it must be installed on a web server with php available (version 5 or higher).

How to quick start?

Download maxigos-neo-classic-basic.js, which is a basic maxiGos stand-alone player (see a sample using this player).

Move or copy "maxigos-neo-classic-basic.js" somewhere on your website.

In the page where you want to use maxigos, assuming the sgf file you want to display is named "myFirstSgf.sgf", assuming this sgf file is in the same folder as the page, and assuming "maxigos-minimal-basic.js" is in a folder named "scripts" at the site root, insert the following line:

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

If "myFirstSgf.sgf" is in another folder, just add a relative path between the page folder and the folder where you stored this sgf file in front of its name. If "maxigos-neo-classic-basic.js" is elsewhere, adapt the path in front of its name accordingly.

The attribute data-maxigos-l="en" indicates that maxiGos displays in "english".

Evenly, try also one of the following players:

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?

Just download maxiGos archive, unzip it and copy all its contents 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:

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 and if you don't have very complicate needs.

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" attribut, and put between the tags a sgf record. For instance:

<script data-maxigos-l="en" src="xxx/maxigos-problem.js">
(;FF[4]CA[UTF-8]GM[1]SZ[19]VW[aa:lh]
EV[N° 1 .|. Level #1]
FG[1]ST[2]
AW[ab][bb][cb][db][da]
AB[bc][cc][dc][ec][eb][gb][be]
C[Black to play]
;B[ba]C[Correct!])
</script>

Another way is to insert a sgf file name between the <script> tags. For instance:

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

Some stand-alone players built using "classic style" maxiGos configurations can be found in "_alone" folder.

These players are:

Other stand-alone players can be found in "_alone" folder of several samples of maxiGos.

Note 1: one can insert a url that can generate a sgf record between <script> and </script> tags of a stand-alone player only if one uses the attribute data-maxigos-source-filter with a regular expression that matches the url.

Note 2: an advanced user can make his own stand-alone player using the "makeAlone()" function defined in "_mgos/_php/GGosLib.php" script. See "aloneMaker.php" script in "_alone/" folder.

Note 3: 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 get a localization file (one of those stored in "_local" folder).

Note 4: in theory, a stand-alone player cannot use external resources (js or php scripts, image, ...). When an external resource is missing, a stand-alone player works as below:
"Kifu" button if any is just hidden (to use it anyway, one needs to put on the server "_alone/maxigos-kifu.js", assuming that the stand-alone player is in the place where it was built. One can put the script and the player elswhere, but in this case, on must change the path in the line mxG.D[mxG.K]._alone="../_alone/"; in the code of the stand-alone player),
"Help" button if any is just hidden (to use it anyway, one needs to put on the server a convenient help file in "_help/", assuming that the stand-alone player is in the place where it was built. One can put the help file and the player elswhere, but in this case, on must change the path in the line mxG.D[mxG.K]._alone="../_help/"; in the code of the stand-alone player).

Note 5: from maxiGos 6.50, html tags in sgf are displayed as text.

Customization

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

Almost everything can be changed using attributs. For instance, below is a way to display a diagram without 3D effects and with a transparent goban:

<script data-maxigos-l="en" src="../../_alone/maxigos-diagram.js" data-maxigos-in3d-on="0" data-maxigos-goban-bk="transparent">
(;FF[4]CA[UTF-8]GM[1]SZ[19]VW[al:ls]
AB[cp]ST[2]FG[1]
;W[ep];B[eq];W[fq];B[dq];W[fp];B[cn];W[jp])
</script>

It is also possible to make some changes in the css file (as for goban background in the above sample), but in this case, these changes will be applied to all players of the same kind.

Using a "launcher" in php

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

Insert one line of php/html in your web page where a player has to display.

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/_mgos/sgfplayer.php?sgf=xxx.sgf&cfg=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 your web page and the launcher script file.

A default launcher called "sgfPlayer.php" is provided with maxiGos. It can be found in "_mgos" folder.

In most cases, you don't need to use another launcher.

The url of this launcher can have three parameters: "sgf", "cfg", and "mxL" (see below).

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 "sgf" parameter in the url of the launcher specifies a sgf file name.

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

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

The sgf file can be anywhere. If the file name is prefixed by a path, it's a good idea to use the "urlencode()" php function. For instance, if the sgf file is in the parent folder of the launcher folder, use:

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

The path is the relative path between the launcher and the sgf file.

You can also use an url (check if your web server allows this: it's not always the case).

For instance:

sgf=<?php print urlencode("http://xxx.org/sgf/file.php?id=77");?>

Finally, you can also just add a sgf record as this parameter value.

For instance:

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

Any valid sgf record can be used. 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).

The "cfg" parameter

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

MaxiGos is provided with several configuration files for various usages (look at the samples to learn more about configuration files).

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.

The "mxL" parameter

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

The default language is french.

Customization

As for stand-alone players, customization can be done by using "data-maxigos-xxx" attributs in the tag where the player displays, 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 <div> and </div> tags. This method is notably slower than others.

The code to insert in your web page

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

Insert a sgf record or a sgf file name (but not an url that can generate a sgf record) between 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-l="en" data-maxigos="problem">
(;FF[4]CA[UTF-8]GM[1]SZ[19]VW[aa:lh]
EV[N° 1 .|. Level #1]
FG[1]ST[2]
AW[ab][bb][cb][db][da]
AB[bc][cc][dc][ec][eb][gb][be]
C[Black to play]
;B[ba]C[Correct!])
</div>
<div data-maxigos-l="en" data-maxigos="problem">
(;GM[1]FF[4]ST[2]SZ[19]VW[aa:lh]
EV[N° 2 .|. Level #1]
AW[da][ea][fb][dc][ec][fc][ad][bd][cd]
AB[ba][cb][db][eb][ac][bc][cc]
C[Black to play]
;B[ab]C[Correct!])
</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 "_maxigos/_mgos/_cfg"). 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 "minimalComment.cfg" in "_maxigos/_sample/minimal/_cfg" folder, use:

<div data-maxigos="../_sample/minimal/_cfg/minimalComment">

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

<script src="ppp/_local/mgos-loc-ja.js"></script>

Customization

As for stand-alone players, customization can be done by using "data-maxigos-xxx" attributs in 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 plugin

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

Using a BBCode

See the BBCode page for more details.

Localization

The default language for maxiGos is french.

You can set the default language to english by adding data-maxigos-l="en" as attribute of the <script> tag that calls any maxiGos player (or by using the mxL parameter when using the launcher sgfplayer.php).

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

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

<script src="ppp/_local/mgos-loc-ja.js"></script>

If you can't or don't want to have to insert this ligne each time in your web page, you can simply add the code which is inside the localization script of the language you want at the beginning of "_mgos/_js/mgos_lib.js" (if you use the full version of maxiGos) and/or at the beginning of javascript scripts stored in "_alone" folder (if you use them instead of the full version). The script "addLocalization.php" can do it for you automatically (help can be found inside the script itself).

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

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

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

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

Note 2: when using a launcher (see the corresponding chapter) the easiest way is to let french as the default language and use the "mxL" parameter of the launcher to change the language. In this case, you don't need to insert a localization file such as "mgos-loc-ja.js" explicitly in the page (the launcher does it automatically for you).

Advanced usage

This chapter is for advanced users only.

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 "GGosLib.php" script. This script can be found in "_mgos/_php" folder.

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

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"][]="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)."first", "last" or "loop""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 folderundefined
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.
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
htmlParenthesisMerelyIf 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
sourceFilterMerelyA regular expression that the sgf source has to match when it is inserted between HTML tags where the player displays (useful for instance to discard unwanted sgf source inserted by a user in a forum). Regular expressionEmpty string
htmlInSgfOnMerelyIf 1, maxiGos allows to display html tags found in sgf data (for instance in comment properties) as html instead of simple text. In such a case, be sure that sgf data don't contain malicious code. In practice, if you use this option, avoid to allow uploading of unkown sgf file and avoid to allow modifying sgf file by unkown users, or add a procedure that automatically checks sgf files before displaying them online (remove any javascript code found in sgf files).

If 0, html tags are displayed as is, excepting <br> which is displayed as in html by a line break.
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

"Comment" component

ParameterUseDescriptionValuesDefault value
adjustCommentWidthOftenIf 1, maxiGos adjusts component box width to goban width.0 or 10
adjustCommentHeightOftenIf 1, maxiGos adjusts component box height to goban height.0 or 10
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

"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 2undefined
indicesOnOftenIf 1, maxiGos displays indices arround the goban. If undefined, maxiGos gets its value from the sgf FG property0, or 1undefined
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 1undefined
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 undefinedundefined
selectColorSometimesColor used for half-transparency when selecting part of the goban. Css color Color of goban line

"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
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"
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
classicShadowSometimesIf 1, when the goban background comes from "gobanBk" parameter (using a configuration file or "data-maxigos-goban-bk" parameter for instance) or is modified using javascript (using menu "Colors" in "View" component for instance), maxiGos displays a "classic" shadow arround the goban.0 or 10

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"
adjustGotoWidthSometimesIf 1, maxiGos adjusts component box width to goban width.0 or 10

"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
headerBtnOnOftenIf 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
adjustHeaderWidthSometimesIf 1, maxiGos adjusts component width to goban width. This parameter is ignored if headerBoxOn is 0.0 or 10
adjustHeaderHeightMerelyIf 1, maxiGos adjusts component height to goban height. This parameter is ignored if headerBoxOn is 0.0 or 10
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 (mxHeaderDiv). But it can still display header in comment box.

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

"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 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
adjustInfoWidthMerelyIf 1, maxiGos adjusts component width to goban width. This parameter is ignored if infoBoxOn is 0.0 or 10
adjustInfoHeightMerelyIf 1, maxiGos adjusts component height to goban height. This parameter is ignored if infoBoxOn is 0.0 or 10
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
adjustLessonWidthMerelyIf 1, maxiGos adjusts component box width to goban width.0 or 10
adjustLessonHeightOftenIf 1, maxiGos adjusts component box height to goban height.0 or 10

"Loop" component

ParameterUseDescriptionValuesDefault value
loopBtnOnOftenIf 1, maxiGos displays a "Loop" button in component box.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.
Numberundefined
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.
Numberundefined
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

"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 sizeNone
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 valueValue of the css color property of the navigation button canvas
adjustNavigationWidthSometimesIf 1, maxiGos adjusts component box width to goban width.0 or 10

"NotSeen" component

ParameterUseDescriptionValuesDefault value
adjustNotSeenWidthOftenIf 1, maxiGos adjusts component box width to goban width.0 or 10

"Options" component

ParameterUseDescriptionValuesDefault value
optionBtnOnOftenIf 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
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
sgfBtnOnOftenIf 1, display a "SGF" button in the component box. One uses 0 when one needs to use functions of the component only. (for instance when one uses the "Kifu" component).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

"Solve" component

ParameterUseDescriptionValuesDefault value
canRetryOftenIf 1, maxiGos displays a retry button.0 or 10
canUndoOftenIf 1, maxiGos displays an undo button.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 "_". Stringundefined
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 "_". Stringundefined
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 "_". Stringundefined
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 "_". Stringundefined
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 "_". Stringundefined
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 "_". Stringundefined
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
adjustSolveWidthSometimesIf 1, maxiGos adjusts component box width to goban width.0 or 10

"Title" component

ParameterUseDescriptionValuesDefault value
titleBoxOnOftenIf 1, display title in component box. One uses 0 when one needs to use functions of the component only. (for instance when one uses the "Kifu" component).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
adjustTreeWidthSometimesIf 1, maxiGos adjusts component box width to goban width. 0 or 10
adjustTreeHeightSometimesIf 1, maxiGos adjusts parent component box height to parent goban box height. 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"
adjustVariationsWidthSometimesIf 1, maxiGos adjusts component box width to goban width. 0 or 10

"Version" component

ParameterUseDescriptionValuesDefault value
versionBoxOnMerelyIf 1, hide the component. In practice, one uses it only when using a stand-alone player that has this component, and that one want to hide it using an attribut in the tag where the player displays (for instance <script src="maxigos-basic.js" data-maxigos-version-box-on="0">) avoiding to re-build another stand-alone player juste for that purpose. 0 or 11

"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><canvas></canvas></button>. To change its style, use "div.mxNavigationDiv button canvas" in css files. For instance, to change icon color and size of navigation buttons, use something like (assuming "globalBox" parameter value is "BasicGlobalBox" thus .mxBasicGlobalBoxDiv is the class name of the global box):

.mxBasicGlobalBoxDiv div.mxNavigationDiv button canvas {color:#f00;font-size:12px;}

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.

Excepting in "Navigation" component, buttons are displayed using <button><span>...</span></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".
- mxIn3dOn if "in3dOn" is 1 or mxIn2dOn if "in3dOn" is 0.

2) Grouping box

div.mxAaaBoxDiv
...
div.mxZzzBoxDiv

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

div.mxBackToMainDiv
button span
div.mxCommentDiv
div.mxCommentContentDiv
span.mxMoveNumberSpan (only if allInComment is 1)
"Header" tags (only if headerInComment is 1)
div.mxCutDiv
button span
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
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.mxImageDiv
button span
div.mxKifuDiv
button span
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 canvas
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
button.mxOnFocusPassBtn span
button.mxOnVariationPassBtn span
button.mxOnFocusAndOnVariationPassBtn span
div.mxSgfDiv
button span
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.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

Component hints

Some components may change their styles and classes themselves.

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.

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 a localization 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.

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

"_mgos" 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. 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/_alone/" folder and its content to the root of your web site (you can create it anywhere, but in this case, you will have to adapt all the following paths accordingly).
  4. Insert in a page to the place where you want the player displays something <script> and </script> tags with src value set to a maxiGos stand-alone player script name (the scripts are those in "_maxigos/_alone/") and between the tags a sgf record. For instance:
    <script data-maxigos-l="en" src="/_maxigos/_alone/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. See "minimalist style" sample to see the result.

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

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

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

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

@media (max-width:319px)
{
.mxMyGlobalBoxDiv div.mxGobanDiv canvas {font-size:8px;}
.mxMyGlobalBoxDiv 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="initial-scale=1.0,maximum-scale=4.0,minimum-scale=1.0,user-scalable=yes">

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 "Localization" chapter. Maybe you missed something.

If you need to use a language that has no localization file in "_maxigos/_local", see next question.

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

Duplicate "_maxigos/_local/mgos-loc-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 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!

HomeEnglishFrançais