English
FrançaisCopyright 1998-2013 - François Mizessyn - francois.mizessyn@orange.fr
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, an editor, display only the final position of the main variation....
It's a set of php and javascript scripts, and css style sheets.
You can use maxiGos free of charge on your website (BSD type license).
MaxiGos can be installed on a web server with php available (version 5 or higher).
Just download maxiGos archive, unzip it and copy all its contents anywhere in your web site.
Browse your web site to find "_maxigos/en/documentation.php" page (the same as this one, 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.
The default language for maxiGos is french.
You can set the language to english by inserting the following line in your web page before any call to other maxiGos scripts:
<script>mxL="en";</script>
If you don't want to have to insert this ligne each time in your web page, you can simply add mxL="en"; at the beginning of "_mgos/_js/mgos_lib.js" (always) and any javascript scripts in "_alone" (only if you use them explicitly in your web pages).
To localize in another language, include before any call to other maxiGos scripts a localization script for this other language. For instance, for japanese, you can include the "mgos-loc-jp" script found in "_local/" using something like (replace "ppp" by a relative path between your web page and "_maxigos" folder):
<script src="ppp/_local/mgos-loc-jp"></script>
If you 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" (always) and any javascript scripts in "_alone" (only if you use them explicitly in your web pages). The script "addLocalization.php" can do it for you automatically.
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.
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 src="ppp/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>
Of course, you have to adapt the path (here "ppp") before "maxigos-problem.js" script which contains the code of a stand-alone player, taking into account where you installed it, and where your web page is. It's a relative path between your web page and the script file.
Some stand-alone players are delivered with maxiGos and can be found in "_alone" folder.
These players are:
Note 1: one can insert a sgf file name (but not an url that can generate a sgf record) instead of a sgf record between <script> and </script> tags.
Note 2: an advanced user can make his own stand-alone player using the "makeAlone()" function defined in "_mgos/_php/GGosLib.php" script. See fmMaker.php sample in "_sample/fm/" folder.
Note 3: one doesn't need to install all maxiGos files on the server to use a stand-alone player. One just needs to copy (anywhere) on the web server the "_alone" folder, evenly the "_local" folder and if one use "maxigos-edit.js" the "_help" folder.
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 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 posible 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.
Insert one line of php/html in your web page where a player has to display.
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 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 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 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 in the url of the launcher specifies the language of maxiGos ("en" for english, "fr" for french...).
The default language is french.
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).
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 value of the javascript variable mxC which is "_cfg/" by default, 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="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="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 change the default configuration folder with a small script inserted before "mgosLoader.js" which sets the value of the javascript variable mxC. For instance:
<script>mxC="../_sample/_cfg/";</script>
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).
This chapter is for advanced users only.
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.
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.
The component list is:
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).
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
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| globalBox | Always | Name 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" |
| initMethod | Often | Initial 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" |
| customStone | Merely | If 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 |
| sgfLoadCoreOnly | Sometimes | If 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 1 | 0 |
| sgfSaveCoreOnly | Sometimes | If 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 1 | 0 |
| sgfLoadMainOnly | Sometimes | If 1, one keeps main variation only when decoding sgf. | 0 or 1 | 0 |
| sgfSaveMainOnly | Sometimes | If 1, one keeps main variation only when encoding sgf. | 0 or 1 | 0 |
"Comment" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| adjustCommentWidth | Often | If 1, maxiGos adjusts component box width to goban width. | 0 or 1 | 0 |
| adjustCommentHeight | Often | If 1, maxiGos adjusts component box height to goban height. | 0 or 1 | 0 |
| headerInComment | Often | If 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 1 | 0 |
| allInComment | Merely | If 1, maxiGos concats all comment from game root to current move and displays it in comment box. | 0 or 1 | 0 |
"Diagram" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| numberingOn | Often | If 1, maxiGos displays numbering. If 2, maxiGos displays numbering modulo 100. If undefined, maxiGos gets its value from the sgf PM property | 0, 1 or 2 | undefined |
| indicesOn | Often | If 1, maxiGos displays indices arround the goban. If undefined, maxiGos gets its value from the sgf FG property | 0, or 1 | undefined |
| asInBookOn | Often | If 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 property | 0 or 1 | undefined |
| marksAndLabelsOn | Often | If 1, maxiGos displays marks and labels | 0 or 1 | 0 |
| numAsMarkOnLastOn | Merely | If 1, maxiGos the move number as mark on last move. | 0 or 1 | 0 |
"Edit" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| checkRulesOn | Often |
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 |
| selectColor | Sometimes | Color used for half-transparency when selecting part of the goban. | Css color | Color of goban line |
"File" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| openOnly | Sometimes | If 1, maxiGos displays only the "Open" button. | 0 or 1 | 0 |
| hideNew | Merely | If 1, maxiGos hides "new" button. | 0 or 1 | 0 |
| hideOpen | Merely | If 1, maxiGos hides "open" button. | 0 or 1 | 0 |
| hideSave | Merely | If 1, maxiGos hides "Save" button. | 0 or 1 | 0 |
| hideSend | Merely | If 1, maxiGos hides "Send" button. | 0 or 1 | 0 |
"Goban" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| maximizeGobanWidth | Often | If 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 1 | 0 |
| maximizeGobanHeight | Often | If 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 1 | 0 |
| markOnLastOn | Often | If 1, maxiGos displays a mark on the last move | 0 or 1 | 0 |
| markOnLastColor | Often | Color of the mark on the last move. | Css color | "#000" on white stone or "fff" on black stone |
| in3dOn | Always | If 1, maxiGos displays the stones with a 3d effect | 0 or 1 | 0 |
| stretchOn | Always | If 1, the goban height is 10% more than its width | 0 or 1 | 0 |
| gobanFs | Merely | Goban font size. This parameter is merely used. In practice, it's better to set the css "font-size" property of the goban canvas via a css file. | Css font size | None |
| gobanBk | Merely | Goban background color. This parameter is merely used. In practice, it's better to let this color set to transparent, and to use the css background property of the goban canvas. | Css color | "transparent" |
| lineColor | Merely | Line color. This parameter is merely used. In practice, it's better to let this color set to black, and to use the css color property of the goban canvas. | Css color | Value of the css color property of the goban canvas |
| starColor | Merely | Color of hoshi. | Css color | Color of goban line |
| outsideColor | Merely | Color of indice character. | Css color | Color of goban line |
| outsideBk | Merely | Color of indice background. | Css color | "transparent" |
| outsideFontWeight | Merely | Font weight of indice character. | "normal" or "bold" | "normal" |
| silentFail | Sometimes | If 1, maxiGos doesn't display any visual effect when the user clicks on a point where there is nothing to display. | 0 or 1 | 0 |
| classicShadow | Sometimes | If 1, when the goban background is modified using javascript, maxiGos displays a "classic" shadow arround the goban. | 0 or 1 | 0 |
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
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| gotoBoxOn | Often | If 1, maxiGos displays a move bar in the component box. Otherwise, maxiGos doesn't display the component box. | 0 or 1 | 0 |
| gotoInputOn | Often | If 1, maxiGos adds an input field for changing the last displayed move. | 0 or 1 | 0 |
| gotoInputPosition | Sometimes | If 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" |
"Guess" component
| canPlaceGuess | Often | If 1, maxiGos places the user move if it is in the sgf tree. This parameter is ignored if "canPlaceVariation" is 1. | 0 or 1 | 0 |
| guessBoxOn | Often | If 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 1 | 0 |
"Header" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| headerBoxOn | Merely | If 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 1 | 0 |
| headerBtnOn | Often | If 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 1 | 0 |
| adjustHeaderWidth | Sometimes | If 1, maxiGos adjusts component width to goban width. This parameter is ignored if headerBoxOn is 0. | 0 or 1 | 0 |
| adjustHeaderHeight | Merely | If 1, maxiGos adjusts component height to goban height. This parameter is ignored if headerBoxOn is 0. | 0 or 1 | 0 |
| headerLabel_<xy> | Sometimes | "Header" button label. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). | String | "Header" (or its translation) |
| hideTitle | Merely | If 1, maxiGos doesn't display title. | 0 or 1 | 0 |
| hideBlack | Merely | If 1, maxiGos doesn't display black name and level. | 0 or 1 | 0 |
| hideWhite | Merely | If 1, maxiGos doesn't display white name and level. | 0 or 1 | 0 |
| hideDate | Merely | If 1, maxiGos doesn't display date. | 0 or 1 | 0 |
| hidePlace | Sometimes | If 1, maxiGos doesn't display place. | 0 or 1 | 0 |
| hideRules | Sometimes | If 1, maxiGos doesn't display rules type. | 0 or 1 | 0 |
| hideTimeLimits | Sometimes | If 1, maxiGos doesn't display time limits. | 0 or 1 | 0 |
| hideKomi | Merely | If 1, maxiGos doesn't display komi. | 0 or 1 | 0 |
| hideHandicap | Merely | If 1, maxiGos doesn't display handicap. | 0 or 1 | 0 |
| hideNumOfMove | Sometimes | If 1, maxiGos doesn't display number of move. | 0 or 1 | 0 |
| hideResult | Merely | If 1, maxiGos doesn't display result. | 0 or 1 | 0 |
| hideGeneralComment | Sometimes | If 1, maxiGos doesn't display general comment. | 0 or 1 | 0 |
| hideNumOfMoveLabel | Sometimes | If 1, maxiGos doesn't display "Number of move:" before the number of move. | 0 or 1 | 0 |
| hideResultLabel | Sometimes | If 1, maxiGos doesn't display "Result:" before the result. | 0 or 1 | 0 |
| concatKomiToResult | Sometimes | If 1, maxiGos concats komi to result. | 0 or 1 | 0 |
| concatHandicapToResult | Sometimes | If 1, maxiGos concats handicap to result. | 0 or 1 | 0 |
| concatNumOfMovesToResult | Sometimes | If 1, maxiGos concats number of move to result. | 0 or 1 | 0 |
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
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| helpSource_<xy> | Allways | Name of help file. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). One must add a relative path between "_maxigos" folder and actual folder of help files as a prefix of its file name. The help file name must start by "help". | File name | undefined |
"Info" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| infoBoxOn | Merely | If 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 1 | 0 |
| infoBtnOn | Merely | If 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 1 | 0 |
| adjustInfoWidth | Merely | If 1, maxiGos adjusts component width to goban width. This parameter is ignored if infoBoxOn is 0. | 0 or 1 | 0 |
| adjustInfoHeight | Merely | If 1, maxiGos adjusts component height to goban height. This parameter is ignored if infoBoxOn is 0. | 0 or 1 | 0 |
| infoLabel_<xy> | Merely | Label of "Info" button. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). | 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
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| adjustLessonWidth | Merely | If 1, maxiGos adjusts component box width to goban width. | 0 or 1 | 0 |
| adjustLessonHeight | Often | If 1, maxiGos adjusts component box height to goban height. | 0 or 1 | 0 |
"Loop" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| loopBtnOn | Often | If 1, maxiGos displays a "Loop" button in component box. | 0 or 1 | 0 |
| loopTime | Merely | Reference 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 | Number | 1000 |
| initialLoopTime | Merely | Reference 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 |
| finalLoopTime | Merely | Reference 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 |
| mainVariationOnlyLoop | Sometimes | If 1, maxiGos displays only the main variation. | 0 or 1 | 0 |
| loopBtnPosition | Sometimes | If loopBtnOn is 1, maxiGos inserts "Loop" button in navigation bar at the position specified by loopBtnPosition. | "left","right","center" | "right" |
"Menu" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| menus | Always | Menu 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
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| navigationBtnFs | Merely | Navigation 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 via a css file. | Css font size | None |
| navigationBtnColor | Merely | Navigation button color. This parameter is merely used. In practice, it's better to let this color set to black, and to set the css color property of the navigation button canvas via a css file. | Css color value | Value of the css color property of the navigation button canvas |
"NotSeen" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| adjustNotSeenWidth | Often | If 1, maxiGos adjusts component box width to goban width. | 0 or 1 | 0 |
"Options" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| optionBtnOn | Often | If 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 1 | 0 |
| optionLabel_<xy> | Sometimes | "Options" button label. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). | String | "Options" (or its translation) |
| optionBoxOn | Sometimes | If 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 1 | 0 |
| hideMarkOnLastOn | Merely | If 1, maxiGos hides "markOnLastOn" checkbox. | 0 or 1 | 0 |
| hideNumberingOn | Merely | If 1, maxiGos hides "numberingOn" checkbox. | 0 or 1 | 0 |
| hideMarksAndLabelsOn | Merely | If 1, maxiGos hides "marksAndLabelsOn" checkbox. | 0 or 1 | 0 |
| hideAsInBookOn | Merely | If 1, maxiGos hides "asInBookOn" checkbox. | 0 or 1 | 0 |
| hideVariationMarksOn | Merely | If 1, maxiGos hides "variationMarksOn" checkbox. | 0 or 1 | 0 |
| hideSiblingsOn | Merely | If 1, maxiGos hides "siblingsOn" checkbox. | 0 or 1 | 0 |
| hideIndicesOn | Merely | If 1, maxiGos hides "indicesOn" checkbox. | 0 or 1 | 0 |
| hideIn3dOn | Merely | If 1, maxiGos hides "in3dOn" checkbox. | 0 or 1 | 0 |
| hideVariationOrGuess | Merely | If 1, maxiGos hides "canPlaceVariation" and "canPlaceGuess" radio buttons. | 0 or 1 | 0 |
"Pass" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| passLabel_<xy> | Sometimes | "Pass" button label. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). | String | "Pass" (or its translation) |
| canPassOnlyIfPassInSgf | Merely | If 1, maxiGos enables "Pass" button only if there is a possible pass in sgf record as next move. | 0 or 1 | 0 |
"Sgf" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| sgfBtnOn | Often | If 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 1 | 0 |
| noSgfDialog | Sometimes | If 1, maxiGos dowloads sgf without displaying any dialog when the user clicks on sgf button. | 0 or 1 | 0 |
"Solve" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| canRetry | Often | If 1, maxiGos displays a retry button. | 0 or 1 | 0 |
| canUndo | Often | If 1, maxiGos displays an undo button. | 0 or 1 | 0 |
| 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"...). | String | undefined |
| endMessage_<xy> | Sometimes | Texte 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"...). | String | undefined |
| forbiddenMessage_<xy> | Sometimes | Texte displayed in comment box if the user tries to play a forbidden move. <xy> is a language code similar to those used in "mxL" (for instance "en", "fr"...). | String | undefined |
"Title" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| titleBoxOn | Often | If 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 1 | 0 |
| translateTitleOn | Sometimes | If 1, maxiGos try to translate the title. | 0 or 1 | 0 |
"Tree" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| treeFocusColor | Often | Background color in the tree of the node under focus. | Css color | "#f00" |
| markCommentOnTree | Merely | If 1, maxiGos replaces in the tree move numbers by a ?. | 0 or 1 | 0 |
| adjustTreeWidth | Sometimes | If 1, maxiGos adjusts component box width to goban width. | 0 or 1 | -0 |
| adjustTreeHeight | Often | If 1, maxiGos adjusts parent component box height to parent goban box height. | 0 or 1 | -0 |
"Variations" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| variationMarksOn | Often | If 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 |
| siblingsOn | Merely | If 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 |
| variationsBoxOn | Often | Display variation bar. | 0 or 1 | 0 |
| hideSingleVariationMarkOn | Often | If 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 1 | 0 |
| variationColor | Often | Text color of variation mark. | Css color | Color of goban line |
| variationBk | Often | Background color of variation mark. | Css color | "transparent" |
| variationFontWeight | Often | Font weight of variation mark. | "normal" or "bold" | "normal" |
| canPlaceVariation | Often | If 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 1 | 0 |
| variationMarkSeed | Sometimes | First 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" |
"View" component
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| viewBoxOn | Merely | If 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 1 | 0 |
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.
The css classes used by maxiGos are:
1) Global box
The global box <div> may have one, two or all of the following classes:2) Grouping box
3) Component tags and internal tags (some classes may be not listed)
Warning: "diagram" and "loop" components have no box, and some other components are displayed over "Goban" (see below).
4) Boxes displayed over "Goban"
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 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.
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, it 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.
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?
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"?
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: what about "responsive design"?
The main point is to modify the goban and navigation buttons size. 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;}
}
See also "chinese style" or "japanese style" samples.
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?
Add in your page before your call to the maxiGos stand-alone script a call to a maxiGos localization file. For instance, if you want maxiGos texts in english and if the localization files are in "_maxigos/_local" in your web site, add <script src="/_maxigos/_local/mgos-loc-en.js"></script> (if you use always this language, you can also just add the content of the localization script file at the beginning of the stand-alone script file to avoid to add this line each time in your pages: you can also run the script "addLocalization.php" to do this add).
If you need to use a language that has no localization file, see next question.
Question: I want to translate maxiGos in another language. How can I process?
Duplicate "_maxigos/_local/mgos-loc-jp.js" and replace the two last letters of the file name by the code of the new language. Replace all "jp" 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 a default function to produce an output.
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!