English
FrançaisCopyright 1998-2022 - FM&SH
MaxiGos is a set of sgf viewers to display go diagrams, games or problems in a web page.
You can use maxiGos free of charge on your website (BSD type license).
The end user browser must be HTML5 compliant, with javascript enabled.
If you use only maxiGos stand-alone viewers (that are in javascript), there are no pre-requisite on the server where maxiGos is installed.
However, if you are using the full version of maxiGos (which uses javascript, css and php), it may be necessary to have php available on the server.
Download one of the maxiGos viewers from this page, for instance "maxigos-neo-classic-game.js"
Move or copy it somewhere on your website.
If the sgf file you want to display is called "blood-vomit-en.sgf", insert in the <body> part of a html page where you want the viewer displays a code as:
<script src="ppp/maxigos-neo-classic-game.js" data-maxigos-l="en">
qqq/blood-vomit-en.sgf
</script>
Replace "ppp/" by a relative path between the html page and the "maxigos-neo-classic-game.js" maxiGos script.
Replace "qqq/" by a relative path between the html page and the "blood-vomit-en.sgf" sgf file.
You should get the result below:
The attribute data-maxigos-l="en" indicates that maxiGos displays its labels, messages, etc. in english. You can omit this attribute if one of the ancestors of the maxiGos global tag has its lang attribute set to "en".
To see more samples, click here!
To install the full version of maxiGos, download maxiGos archive, unzip and copy it anywhere in your web site. No database required.
If you don't want to install the full version of maxiGos, you can just download one stand-alone viewer. See Using a stand-alone viewer chapter for more details.
To test the full version, launch _maxigos/_sample/ page in a browser.
The end user has nothing to do on his device. He has just to let javascript enable in his browser.
The basic way to insert maxiGos in a web page is:
But we can also use:
Use a stand-alone viewer if you want to keep things simple.
A stand-alone viewer is a maxiGos viewer where all the code and ressources are in a single javascript file.
These files are stored in "_alone" folders of the samples provided with maxiGos. These samples can be found in the "_sample" folder.
Include in your web page, where you want the viewer displays something, <script> and </script> tags with the javascript file name of a stand-alone viewer as value of the "src" attribute, and put between the tags a sgf file name or a sgf record or an url that generates a sgf record.
If one uses a sgf file name, the code is for instance:
<script src="xxx/maxigos-neo-classic-problem.js" data-maxigos-l="en">
yyy/myFirstSgf.sgf
</script>
Another way is to use the "data-maxigos-sgf" attribute which value is the sgf file name. For instance:
<script src="xxx/maxigos-neo-classic-problem.js" data-maxigos-l="en" data-maxigos-sgf="yyy/myFirstSgf.sgf">
</script>
Of course, you have to adapt the path (here "xxx") before "maxigos-problem.js" script which contains the code of a stand-alone viewer, taking into account where you stored it, and where your web page is. It's a relative path between your web page and the folder that contains the script file.
You have to adapt the path (here "yyy") before the sgf file name, taking into account where you stored it, and where your web page is. It's a relative path between your web page and the folder that contains the file.
If one uses a sgf record, the code is for instance:
<script src="xxx/maxigos-neo-classic-problem.js" data-maxigos-l="en">
(;FF[4]GM[1]SZ[19]VW[aa:ii]FG[1]AW[ee]AB[de][fe][ed];B[ef]C[Correct!])
</script>
Note: when one inserts directly a sgf record in a page as in above samples, the CA property is useless and ignored if present, since the sgf record charset is necessarily the same as the charset of the page.
If one uses the "data-maxigos-sgf" attribute, the code is for instance:
<script src="xxx/maxigos-neo-classic-problem.js"
data-maxigos-l="en"
data-maxigos-sgf="(;FF[4]GM[1]SZ[19]VW[aa:ii]FG[1]AW[ee]AB[de][fe][ed];B[ef]C[Correct!])">
</script>
If one uses an url that generates a sgf record, one must add the "data-maxigos-source-filter" attribute which value is a regular expression that matches the url. The code is for instance:
<script src="xxx/maxigos-neo-classic-problem.js" data-maxigos-l="en" data-maxigos-source-filter="/download/file\.php\?id=[0-9]+$">
/download/file.php?id=23
</script>
If one uses the "data-maxigos-sgf" attribute, the code is for instance:
<script src="xxx/maxigos-neo-classic-problem.js" data-maxigos-l="en" data-maxigos-source-filter="/download/file\.php\?id=[0-9]+$" data-maxigos-sgf="/download/file.php?id=23">
</script>
The url must respect the "same origin" policy (i.e. same protocol, same domain, same port as the calling page).
Note 1: one doesn't need to install all maxiGos files on the server to use a stand-alone viewer. One just has to copy (anywhere) on the web server the viewer script file. If the language is not english or french, one also has to include the internationalization file of this language (one of those stored in "_i18n" folder).
Note 2: in theory, a stand-alone viewer should not use external resources (images, ...). If an external resource is required, maxiGos looks for it at the place where this ressource is in the full version.
Customization can be done by using "data-maxigos-xxx" attributes, where "xxx" is a maxiGos parameter (see "Component parameters" chapter to learn more about maxiGos parameters). Because only lower case letters are allowed in attribute names, replace any upper case letter by its lower case form prefixed by "-". For instance the attribute name for "in3dOn" maxiGos parameter is "data-maxigos-in3d-on".
Many things can be changed using attributes. For instance, below is a way to display a diagram without 3D effects using a neo-classic viewer that initially displays with 3D effects:
<script src="xxx/maxigos-neo-classic-diagram.js" data-maxigos-l="en" data-maxigos-in3d-on="0">
(;FF[4]GM[1]SZ[19]VW[aa:ii]FG[1]AW[ee]AB[de][fe][ed])
</script>
It is also possible to make some changes in the css file (as for goban background in the above sample).
See the plugin pages (for joomla or for wordpress) for more details.
See the BBCode page for more details.
Use a maker when you need to heavily customize the viewer.
The maker is a php script that generates "on the fly" the javascript code of a maxiGos viewer, using data found in its code.
Include in your web page where you want the viewer displays something a line such as:
<script src="xxx/classic/_maker/basic.php" data-maxigos-l="en">
yyy/myFirstSgf.sgf
</script>
Of course, you have to adapt the path (here "ppp") before the php script (here "classic/_maker/basic.php") which is called a maker, taking into account where you installed maxiGos, and where your web page is. It's a relative path between the folder where your web page is and the folder where the maker script file is.
The sgf can be specified as for stand-alone viewers.
The customization of makers can be done as for stand-alone viewers.
Use a loader when you need to insert sgf data between other html tag such as <div> and </div>. This method is notably slower than others.
Insert for instance in your web page several <div> and </div> tags with one attribute named "data-maxigos" which value is a maxiGos configuration name (the corresponding configuration file name is the concatenantion of the configuration name and ".cfg").
Insert a sgf file name or a sgf record or an url that can generate a sgf record between each of these tags.
Insert "mgosLoader.js" script in the web page after all these tags. This script will replace each <div> and </div> tags contents by a maxiGos viewer that displays those contents.
For instance:
<div data-maxigos-l="en" data-maxigos="problem">
(;FF[4]GM[1]SZ[19]VW[aa:lh]FG[1]AW[ee]AB[de][fe][ed];B[ef]C[Correct!])
</div>
<div data-maxigos-l="en" data-maxigos="basic">
(;FF[4]GM[1]SZ[19];B[qd])
</div>
<script src="ppp/_mgos/mgosLoader.js"></script>
Of course, you have to adapt the path (here "ppp/") before "_mgos/mgosLoader.js", taking into account where you installed maxiGos, and where your web page is. It's a relative path between your web page and the "loader" script file.
As for stand-alone players, customization of loaders can be done by adding "data-maxigos-xxx" attributes to the tag where the viewer displays, and where "xxx" is a maxiGos parameter.
The default language for maxiGos is the language of the tag where it displays (i.e. the language specified by the html "lang" attribute of the tag, or by the html lang attribute of one of the ancestors of the tag).
In practice, the lang attribute is often specified for the html tag itself.
If no lang attribute is specified, maxiGos tries to use the language of the navigator or english.
You can change it very easily to english by adding data-maxigos-l="en" to each tag where a maxiGos viewer will display.
For instance:
<script src="ppp/maxigos-neo-classic-basic.js" data-maxigos-l="en">
qqq/myFirstSgf.sgf
</script>
Note that maxiGos doesn't translate sgf content. It can just change the language of its own messages, button labels, …
To set another language, insert before the first call to maxiGos scripts an internationalization script for this other language. For instance, for japanese, you can insert the "maxigos-i18n-ja.js" script found in "_i18n" folder using something like (replace "ppp" by a relative path between your web page and "_i18n" folder):
<script src="ppp/_i18n/maxigos-i18n-ja.js"></script>
If you can't or don't want to insert this ligne each time in your web page, you can simply add the code which is inside the internationalization script of the desired language at the beginning of the script of the viewer you are using.
Then add data-maxigos-l="ja" to each tag where a maxiGos viewer will display such as:
<script data-maxigos-l="ja" src="ppp/maxigos-neo-classic-basic.js">qqq/myFirstSgf.sgf</script>
All internationalization scripts delivered with maxiGos are in "_i18n" folder. If the internationalization script for a language doesn't exist, you can try to create it (try to do it from the japanese one).
Note 1: if you create an internationalization file, it is a good pratice to choose a ISO 639 language code (for instance "ja" for japanese, not "jp").
Note 2: when using a "maker" (see the corresponding chapter) the easiest way is to use the "lang" parameter of the maker to change the language.
MaxiGos works in "UTF-8", but can be included in a page which is not in "UTF-8".
When using a maxiGos stand-alone viewer script or an internationalization script in a page which is not in "UTF-8", just add charset="UTF-8" to any <script> tag that includes maxiGos scripts in your page.
For instance:
<script data-maxigos-l="en" charset="UTF-8" src="/_maxigos/_alone/maxigos-basic.js">
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 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 "lang" attribute or "data-maxigos-l" parameter. Use language codes instead, such as "en", "fr", "ja", zh-hans", "zh-hant"....
MaxiGos javascript code is split in several file scripts. Five of them, mgos_lib.js, mgos_rls.js, mgos_prs.js, mgos_src.js and mgos.js, share common functions. Other javascript scripts contain component codes (usually 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.
Each component has parameters than can be set using "data-maxigos-xxx" attributes (where "xxx" is a parameter name).
The components are:
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| allowFileAsSource | data-maxigos-allow-file-as-source | If 1, maxiGos accepts sgf files as data input. | (0,1) | 1 |
| allowStringAsSource | data-maxigos-allow-string-as-source | If 1, maxiGos accepts sgf string records as data input. | (0,1) | 1 |
| htmlParenthesis | data-maxigos-html-parenthesis | If 1, maxiGos replace "(" and ")" by "(" and ")" in sgf source when it is inserted between html tags where the viewer displays. This parameter is useful for instance when using maxiGos in a forum powered by phpBB3 which has an editor that replaces "(" and ")" by "(" and ")". | (0,1) | 0 |
| initMethod | data-maxigos-init-method | 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), or advance of n nodes in the game tree. | "first", "last", "loop" or an integer | "first" |
| sgfLoadCoreOnly | data-maxigos-sgf-load-core-only | 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,1) | 0 |
| sgfLoadMainOnly | data-maxigos-sgf-load-main-only | If 1, one keeps main variation only when decoding sgf. | (0,1) | 0 |
| sgfSaveCoreOnly | data-maxigos-sgf-save-core-only | 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,1) | 0 |
| sgfSaveMainOnly | data-maxigos-sgf-load-main-only | If 1, one keeps main variation only when encoding sgf. | (0,1) | 0 |
| sourceFilter | data-maxigos-source-filter | A regular expression that the sgf source has to match when it is inserted between html tags where the sgf viewer displays. This parameter is useful for instance to discard unwanted data source inserted by a user on a forum. | Regular expression | ^[^?]+\\.sgf$ |
This component contains the "About" button in its box, which allows the user to display some information about the viewer.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| aboutAlias | data-maxigos-about-alias | Specify what element of the translation array one has to use to display the label of the "About" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "About" on the button. | A string | null |
| aboutBtnOn | data-maxigos-about-btn-on | If 1, display a "About" button in its own component box. | (0,1) | 0 |
This component moves the stones from the corner of the goban to their final location.
| Parameter | Use | Description | Values | Default value |
|---|---|---|---|---|
| animatedStoneOn | data-maxigos-animated-stone-on | If 1, maxiGos animates the stone placement. | (0,1) | 0 |
| animatedStoneTime | data-maxigos-animated-stone-time | Reference 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. |
Number | 1000 |
This component displays a button to allow the user to go back to the game after entering some variations.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| backToGameAlias | data-maxigos-back-to-game-alias | Specify what element of the translation array one has to use to display the label of the "BackToGame" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Back to game" on the button. | A string | null |
| backToGameBtnOn | data-maxigos-back-to-game-btn-on | If 1, display a "BackToGame" button in its own component box. | (0,1) | 0 |
This component displays a cartouche for each player, with his name, his rank, etc.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| bowlOn | data-maxigos-bowl-on | If 1, maxiGos displays bowls in cartouches. | (0,1) | 1 |
| cartoucheBoxOn | data-maxigos-cartouche-box-on | If 1, maxiGos displays cartouches. | (0,1) | 0 |
| prisonerOn | data-maxigos-prisoner-on | If 1, maxiGos displays the number of prisoners of each players in cartouches. | (0,1) | 1 |
| shortHeaderOn | data-maxigos-short-header-on | If 1, maxiGos displays in cartouches for each player a stone of his color, his name and his level. | (0,1) | 1 |
This component displays sgf comments in its box.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| allInComment | data-maxigos-all-in-comment | If 1, maxiGos concats all comment from game root to current move and displays it in comment box. | (0,1) | 0 |
| canCommentFocus | data-maxigos-can-comment-focus | If 1, comment box can take the focus. When one are sure that the whole comment can be displayed without scrollbars, this parameter should be set to 0. |
(0,1) | 0 |
| commentLabelOn | data-maxigos-comment-label-on | If 1, maxiGos displays the title of the comment box. | (0,1) | 0 |
| headerInComment | data-maxigos-header-in-comment |
If 1, maxiGos displays the header in comment box. The Header component has to be in use too, otherwise this parameter has no effect. |
(0,1) | 0 |
This component displays a button to allow the user to cut the curent variation.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| cutAlias | data-maxigos-cut-alias | Specify what element of the translation array one has to use to display the label of the "Cut" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Cut" on the button. | A string | null |
| cutBtnOn | data-maxigos-cut-btn-on | If 1, display a "Cut" button in its own component box. | (0,1) | 0 |
This component contains two sub-components: "EditToolBar" and "EditCommentTool".
This component displays a tool bar and a comment editor.
It doesn't have any parameters.
This component displays a menu to manage files ("New", "Open", "Save", etc.)
It is used with Menu component.
It doesn't have any parameters.
This component displays the goban.
It is the only one mandatory component.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| asInBookOn | data-maxigos-as-in-book-on | If 1, maxiGos displays stones as in books
(i.e. prisoners are left on the goban).
If 0, maxiGos removes prisoners from the goban.
If null, maxiGos looks at sgf FG property
to determine what to do. This parameter is useful to display diagrams, figures and kifus. |
(0,1,null) | null |
| eraseGridUnder | data-maxigos-erase-grid-under | If 1, maxiGos erases grid under marks and labels. | (0,1) | 0 |
| gBoxParent | data-maxigos-g-box-parent | Specify a box name on which dialog boxes will be displayed
(to change options, show sgf, show help, etc.) In practice, one uses it to specify an ancestor of "Goban" when "Goban" is too small. |
string | "Goban" |
| gridMargin | data-maxigos-grid-margin | Grid margin. | A real integer | 0 |
| gridPadding | data-maxigos-grid-padding | Grid padding. | A real number | 0 |
| gobanMargin | data-maxigos-goban-margin | Goban margin. | A real number | 0 |
| gobanPadding | data-maxigos-goban-padding | Goban padding. | A real number | 0 |
| in3dOn | data-maxigos-in3d-on | If 1, maxiGos displays stones with a 3d effect. Even if this component is mainly used by Goban component, it is also used by Cartouche, MoveInfo and NotSeen components. |
(0,1) | 1 |
| indicesOn | data-maxigos-indices-on | If 1, maxiGos displays indices. If 0, maxiGos hides indices. If null, maxiGos looks for sgf FG property to determine if indices have to be displayed. | (0,1,null) | null |
| japaneseIndicesOn | data-maxigos-japanese-indices-on | If 1, maxiGos displays "iroha" indices. indicesOn should be set to 1. |
(0,1) | 0 |
| magicParentNum | data-maxigos-magic-parent-num | If pointsNumMax is not null, this parameter specifies for which ancestor box of goban one must apply a shrinking for gobans smaller than a reference goban (a goban with pointsNumMax vertical lines). This parameter is merely required. | positive interger | 0 |
| marksAndLabelsOn | data-maxigos-marks-and-labels-on | If 1, maxiGos displays marks and labels. | (0,1) | 0 |
| markOnLastOn | data-maxigos-mark-on-last-on | If 1, maxiGos displays a mark on the last played move. | (0,1) | 0 |
| numAsMarkOnLastOn | data-maxigos-num-as-mark-on-last-on | If 1, maxiGos displays a number as mark on last played move. markOnLastOn should be set to 1. |
(0,1) | 0 |
| numberingOn | data-maxigos-numbering-on | If 2, maxiGos displays numbers on stones modulo 100. If 1, maxiGos displays numbers on stones. If 0, maxiGos hides numbers on stones. If null, maxiGos looks for FG, MN et PM sgf properties to determine how to display numbers on stones. | (0,1,2,null) | null |
| oldJapaneseIndicesOn | data-maxigos-old-japanese-indices-on | If 1, maxiGos uses kanjis to display indices. indicesOn has to be set to 1. |
(0,1) | 0 |
| oldJapaneseNumberingOn | data-maxigos-old-japanese-numbering-on | If 1, maxiGos uses kanjis to number stones. numberingOn parameter should be set to 1. |
(0,1) | 0 |
| pointsNumMax | data-maxigos-points-num-max | This parameter is useful when one wants to display gobans (or part of gobans) with different numbers of lines in the same page. If 0, maxiGos displays gobans (or part of gobans) as large as possible inside its container. Otherwise, maxiGos compute the width of a reference goban which has pointsNumMax vertical lines. Then it displays all gobans with the same distance between their lines. Gobans with more than pointsNumMax intersections are not concerned. | A positive integer | 0 |
| specialStoneOn | data-maxigos-special-stone-on | If 1, maxiGos draws grey curves on white stones
(to imitate shell stones)
and a different glint on black stones
(to imitate slate stones). This is notably slower than the default display. in3dOn parameter should be set to 1. |
(0,1) | 0 |
| stoneShadowOn | data-maxigos-stone-shadow-on | If 1, maxiGos displays a shadow around the stones. | (0,1) | 0 |
| stretching | data-maxigos-stretching | Specify how many pixels have to be added around the stones.
Number #1 : pixels (svg coordinates) to add horizontally if 3d is on. Number #2 : pixels (svg coordinates) to add vertically if 3d is on. Number #3 : pixels (svg coordinates) to add horizontally if 2d is on. Number #4 : pixels (svg coordinates) to add vertically if 2d is on. |
list of four real numbers | "0,0,1,1" |
| territoryMark | data-maxigos-territory-mark | Territory mark shape
(specified by sgf TB and TW properties).
"MA": cross "MS": small stones |
("MA","MS") | "MS" |
This component can insert a text input field in the navigation bar to displays the current move number and to allow the user to change the current move.
It can also display a slider in its own box to allow the user to move in the sgf tree.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| gotoBoxOn | data-maxigos-goto-box-on | If 1, maxiGos displays a slider in the component box to move in the sgf tree. | (0,1) | 0 |
| gotoInputOn | data-maxigos-goto-input-on | If 1, maxiGos inserts an text input field call "moveTo" in the navigation bar. This text input field displays the current move number and allows the user to change this current move by entering another move number. | (0,1) | 0 |
| gotoInputBefore | data-maxigos-goto-input-before | If its value is the name of a button of the navigation bar, maxiGos inserts "moveTo" text input field after this button in the navigation bar. Otherwise it inserts the field at the end of the navigation bar. | A string (which is a button name) | "" |
This component allows the user to click on the goban and place a move if this move is in the sgf.
It can also display a guess meter in its own box that indicates the distance between the user last click and the nearest continuation move found in the sgf.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| guessBoxOn | data-maxigos-guess-box-on | if 1, maxiGos displays a guess meter in the component box that indicates the distance between the user last click and the nearest continuation move found in the sgf. | (0,1) | 0 |
| canPlaceGuess | data-maxigos-can-place-guess | If 1, maxiGos place a move after a click of the user
on a point of the goban
only if there is a move at this point in the sgf.
If 0 and canPlaceVariation
is 1, maxiGos place a move after a click of the user
on a point of the goban even if there is no move at this point in the sgf.
If both parameters are 0, maxiGos doesn't place anything
on the goban. This parameter is ignored if canPlaceVariation is 1. |
(0,1) | 0 |
This component can displays the sgf header in its own box.
It can also display a button that allows the user to display the header on the goban.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| canHeaderFocus | data-maxigos-can-header-focus | If 1, header box can take the focus. When one are sure that the whole header can be displayed without scrollbars, this parameter should be set to 0. |
(0,1) | 0 |
| concatDateToTitle | data-maxigos-concat-date-to-title | If 1, maxiGos displays the date after the title. | (0,1) | 0 |
| concatTeamToPlayer | data-maxigos-concat-team-to-player | If 1, maxiGos displays the team name after the players' name. | (0,1) | 0 |
| concatKomiToResult | data-maxigos-concat-komi-to-result | If 1, maxiGos displays the komi after the result. | (0,1) | 0 |
| concatHandicapToResult | data-maxigos-concat-handicap-to-result | If 1, maxiGos displays the handicap after the result. | (0,1) | 0 |
| concatNumOfMovesToResult | data-maxigos-concat-num-of-moves-to-result | If 1, maxiGos displays the number of moves after the result. | (0,1) | 0 |
| headerAlias | data-maxigos-header-alias | Specify what element of the translation array one has to use to display the label of the "Header" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Header" on the button. | A string | null |
| headerBoxOn | data-maxigos-header-box-on | If 1, maxiGos displays the sgf header in the component box (values of sgf EV, RO, DT, PC etc. properties). | (0,1) | 0 |
| headerBtnOn | data-maxigos-header-btn-on | If 1, maxiGos displays an "Informations" button in the component box instead of displaying the header itself. A click on this button displays the header on the goban. This parameter is ignored if headerBoxOn is 1. | (0,1) | 0 |
| hideBlack | data-maxigos-hide-black | If 1, maxiGos doesn't display Black name and level. | (0,1) | 0 |
| hideDate | data-maxigos-hide-date | If 1, maxiGos doesn't display the date. | (0,1) | 0 |
| hideGeneralComment | data-maxigos-hide-general-comment | If 1, maxiGos doesn't display the general comment. | (0,1) | 0 |
| hideHandicap | data-maxigos-hide-handicap | If 1, maxiGos doesn't display the handicap. | (0,1) | 0 |
| hideKomi | data-maxigos-hide-komi | If 1, maxiGos doesn't display the komi. | (0,1) | 0 |
| hideNumOfMoves | data-maxigos-hide-num-of-moves | If 1, maxiGos doesn't display the number of moves. | (0,1) | 0 |
| hideNumOfMovesLabel | data-maxigos-hide-num-of-moves-label | If 1, maxiGos doesn't display "Number of moves:" before the number of moves. | (0,1) | 0 |
| hidePlace | data-maxigos-hide-place | If 1, maxiGos doesn't display the place. | (0,1) | 0 |
| hideResult | data-maxigos-hide-result | If 1, maxiGos doesn't display the result. | (0,1) | 0 |
| hideResultLabel | data-maxigos-hide-result-label | If 1, maxiGos doesn't display "Result:" before the result. | (0,1) | 0 |
| hideRules | data-maxigos-hide-rules | If 1, maxiGos doesn't display the rules name. | (0,1) | 0 |
| hideTimeLimits | data-maxigos-hide-time-limits | If 1, maxiGos doesn't display the time limits. | (0,1) | 0 |
| hideTitle | data-maxigos-hide-title | If 1, maxiGos doesn't display the title. | (0,1) | 0 |
| hideWhite | data-maxigos-hide-white | If 1, maxiGos doesn't display White name and level. | (0,1) | 0 |
Note 1: if headerBoxOn and headerBtnOn are both 0, maxiGos doesn't display "Header" component box. But it can still display header in "Comment" component box if "headerInComment" is set to 1.
Note 2: difference between "Header" component and "Info" component is that one can change header content using "Info" component while "Header" component just displays its content.
This component displays a button in its own box to allows the user to display help on the goban.
It is designed to be used in Edit configuration.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| helpBtnOn | data-maxigos-help-btn-on | If 1, maxiGos displays "Help" button. | (0,1) | 0 |
| helpAlias | data-maxigos-help-alias | Specify what element of the translation array one has to use to display the label of the "Help" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Help" on the button. | A string | null |
This component contains two sub-components: "PNG" and "SVG".
Each of them can display a button in their own box to make a PNG image or a SVG image of the current state of the goban.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| pngAlias | data-maxigos-png-alias | Specify what element of the translation array one has to use to display the label of the "Png" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "PNG" on the button. | A string | null |
| pngBtnOn | data-maxigos-png-btn-on | If 1, maxiGos displays "Png" button.. | (0,1) | 0 |
| svgAlias | data-maxigos-svg-alias | Specify what element of the translation array one has to use to display the label of the "Svg" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Svg" on the button. | A string | null |
| svgBtnOn | data-maxigos-svg-btn-on | If 1, maxiGos displays "Svg" button. | (0,1) | 0 |
This component displays forms on the goban to edit sgf properties such as EV, RO, DT, PC, PB, PW, etc.
It is designed to be used in Edit configuration.
It doesn't have any parameters.
This component displays in its own box an assistant and a bubble containing sgf comments.
It doesn't have any parameter.
This component can display "Auto" and "Pause" buttons in the navigation bar, to allow a user to start or stop the display on a loop.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| loopTime | data-maxigos-loop-time | Reference time (in milliseconds) 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. | A positive integer | 1000 |
| initialLoopTime | data-maxigos-loop-time | Reference time (in milliseconds) to compute iddle time of the initial node. This iddle time is computed by the following formula: T=initialLoopTime*loopTime/1000. | A positive integer | 0 |
| finalLoopTime | data-maxigos-loop-time | Reference time (in milliseconds) to compute iddle time of the final node. This iddle time is computed by the following formula: T=finalLoopTime*loopTime/1000. | A positive integer | 0 |
| mainVariationOnlyLoop | data-maxigos-main-variation-only-loop | If 1, maxiGos displays only the main variation. | (0,1) | 0 |
This component displays a list of menus in its own box.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| menus | data-maxigos-menus | List of menus displayed by Menu
component. Available menus are: "File" (require File component), "Edit" (require Edit component), "View" (require View component) and "Windows". |
Comma-separated list of string | "" |
| menuTimeout | data-maxigos-menu-timeout | The amount of time (in milliseconds) that the submenus remain visible. | A positive integer | 10000 |
This component displays the current move number and its coordinates in its own box.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| onlyMoveNumber | data-maxigos-only-move-number | if 1, maxiGos displays the move number only. | (0,1) | 0 |
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| navigations | data-maxigos-navigations | List of buttons displayed by
Navigation component. Buttons are: "First", "TenPred", "Pred", "Next, "TenNext", "Last", "Auto" and "Pause". "Auto" and "Pause"require Loop component. |
Comma-separated list of string | "First,TenPred,Pred,Next,TenNext,Last" |
This component displays the list of moves not visible on the goban.
This is useful when asInBookOn parameter is set to 1.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| notSeenTwinStonesOn | data-maxigos-not-seen-twin-stones-on | If 1, maxiGos displays on what stone a move is played whenever possible. If 0, it displays the coordinates of the move. | (0,1) | 1 |
This component displays a dialog to change options.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| hideAnimatedStoneOn | data-maxigos-hide-animated-stone-on | If 1, maxiGos hides animatedStoneOn checkbox. | (0,1) | 0 |
| hideAnimatedStoneTime | data-maxigos-hide-animated-stone-time | If 1, maxiGos hides animatedStoneTime text input. | (0,1) | 0 |
| hideAsInBookOn | data-maxigos-as-in-book-on | If 1, maxiGos hides asInBookOn checkbox. | (0,1) | 0 |
| hideCanGuess | data-maxigos-can-guess | If 1, maxiGos hides canGuess radio button. | (0,1) | 0 |
| hideCanVariation | data-maxigos-can-variation | If 1, maxiGos hides canVariation radio button. | (0,1) | 0 |
| hideIn3dOn | data-maxigos-hide-in3d-on | If 1, maxiGos hides in3dOn checkbox. | (0,1) | 0 |
| hideIndicesOn | data-maxigos-hide-indices-on | If 1, maxiGos hides indicesOn checkbox. | (0,1) | 0 |
| hideLoopTime | data-maxigos-hide-loop-time | If 1, maxiGos hides loopTime text input. | (0,1) | 0 |
| hideMarksAndLabelsOn | data-maxigos-hide-marks-and-labels-on | If 1, maxiGos hides marksAndLabelsOn checkbox. | (0,1) | 0 |
| hideMarkOnLastOn | data-maxigos-hide-mark-on-last-on | If 1, maxiGos hides markOnLastOncheckbox. | (0,1) | 0 |
| hideNumberingOn | data-maxigos-hide-numbering-on | If 1, maxiGos hides numberingOn checkbox. | (0,1) | 0 |
| hideScoreMethod | data-maxigos-hide-score-method | If 1, maxiGos hide scoreMethod radio buttons. | (0,1) | 0 |
| hideSiblingsOn | data-maxigos-hide-siblings-on | If 1, maxiGos hides siblingsOn checkbox. | (0,1) | 0 |
| hideVariationMarksOn | data-maxigos-hide-variation-marks-on | If 1, maxiGos hides variationMarksOn checkbox. | (0,1) | 0 |
| optionAlias | data-maxigos-option-alias | Specify what element of the translation array one has to use to display the label of the "Option" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Options" on the button. | A string | null |
| optionBoxOn | data-maxigos-option-box-on | If 1, maxiGos displays "Option" dialog in the component box. | (0,1) | 0 |
| optionBtnOn | data-maxigos-option-btn-on | If 1, maxiGos displays "Option" button in the component box. | (0,1) | 0 |
This component displays "Pass" button in its own box.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| canPassOnlyIfPassInSgf | data-maxigos-can-pass-only-if-in-sgf | If 1, maxiGos enables "Pass" button only if one of the next moves in the sgf is a pass. | (0,1) | 0 |
| passAlias | data-maxigos-pass-alias | Specify what element of the translation array one has to use to display the label of the "Pass" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Pass" on the button. | A string | null |
| passBtnOn | data-maxigos-pass-btn-on | If 1, maxiGos displays "Pass" button in the component box. | (0,1) | 0 |
This component displays "Score" button in its own box.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| ephemeralScore | data-maxigos-ephemeral-score | If 1, maxiGos doesn't register TB or TW added by Score component in the Sgf. | (0,1) | 0 |
| scoreAlias | data-maxigos-score-alias | Specify what element of the translation array one has to use to display the label of the "Score" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Score" on the button. | A string | null |
| scoreBtnOn | data-maxigos-score-btn-on | If 1, maxiGos displays "Score" button in the component box. | (0,1) | 0 |
| scoreDefaultRules | data-maxigos-score-default-rules | Default rules if no rules found in the Sgf. | A string (AGA, Chinese, Japanese, etc.) | null |
| scoreMethod | data-maxigos-score-method | Specify the method to add/remove TB and TW : trivial: a click on a stone adds or removes a TB or a TW of the opposite color of that stone. A click on an empty point adds, swaps or removes a TB or a TW. counting: a click on a stone adds or removes a TB or a TW of the opposite color of that stone, as well as on all empty points and stones of the same color next to this stone. A click on an empty point adds or removes a TB or TW as well as on all empty points next to this point, if these points are surrounded by stones of the same color. |
("trivial","counting") | "trivial" |
| scoreInComment | data-maxigos-score-in-comment | If 1, maxiGos displays the score in a comment box if any. | (0,1) | 0 |
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| sgfAction | data-maxigos-sgf-action | Action when one clicks on "Sgf" button. If "Show", the sgf is display in a box over the goban. If "Download", the sgf is downloaded (if it is possible with the device in use). | "Show" or "Download" | "Show" |
| sgfAlias | data-maxigos-sgf-alias | Specify what element of the translation array one has to use to display the label of the "Sgf" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Sgf" on the button. | A string | null |
| sgfBtnOn | data-maxigos-sgf-btn-on | If 1, maxiGos displays "Sgf" button in the component box. | (0,1) | 0 |
| toCharset | data-maxigos-to-charset | This parameter takes the value of a charset ("UTF-8", "Big5", "GB18030", "Shift_JIS" ...). It specifies the charset used to encode sgf files (the value of the sgf CA property is replaced by the value of this parameter). It is not used when reading or displaying a sgf, and it can be different from the page charset. In practice, the best is to use "UTF-8" whenever possible or to use the charset of the page. | A string which is a charset code | "UTF-8" |
This component displays a list of buttons to retry, undo, show a hint or pass.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| canPlaceSolve | data-maxigos-can-place-solve | If 1, maxiGos places the user move it is in the sgf, and answers this move. | (0,1) | 1 |
| oldSolveBtnOn | data-maxigos-old-solve-btn-on | If 1, maxiGos displays "Retry" button as "First" button, "Undo" button as "Pred" button, and "Hint" button as "Next" button. | (0,1) | 0 |
| solves | data-maxigos-solves | List of buttons to display in the component box among "Retry", "Undo", "Pass" and "Hint". | Comma-separated list of string | "Retry,Undo" |
| specialMoveMatch | data-maxigos-special-move-match | 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,3) | 0 |
This component show a slider and two buttons to change the loop speed (i.e. loopTime parameter).
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| loopTimeMax | data-maxigos-loop-time-max | Maximal time (in millisecondes) between two moves. | A positive real number | 10000 |
This component displays the title of the sgf (made from EV and RO sgf properties).
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| titleBoxOn | data-maxigos-title-box-on | If 1, maxiGos displays the title in the component box. | (0,1) | 0 |
| translateTitleOn | data-maxigos-translate-title-on | If 1, maxiGos tries to translate the title,
using translation functions in "_i18n" scripts files. The title is built from sgf EV and RO properties. EV should be "x t" with x as "1st" or "2nd" or "3rd" or "nth", n a number, and t a title name such as "Honinbo", "Meijin", "Ing Cup", ... RO should be "n" or "n (s)", n a number, and s a string among "final", "semi-final", "quarter-final", "playoff", "round" or "game". |
(0,1) | 0 |
This component displays the moves tree.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| canTreeFocus | data-maxigos-can-tree-focus | If 1, tree box can take the focus. When one are sure that the whole tree can be displayed without scrollbars, this parameter should be set to 0. |
(0,1) | 0 |
| hideTreeNumbering | data-maxigos-hide-tree-numbering | If 1, maxiGos hides numbers on tree stones. | (0,1) | 1 |
| markCommentOnTree | data-maxigos-mark-comment-on-tree | If 1, maxiGos replaces numbers of commented moves by a "?" in the tree. | (0,1) | 1 |
| treeLabelOn | data-maxigos-tree-label-on | If 1, maxiGos displays the title of the tree box. | (0,1) | 0 |
This component allows to display variations.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| canPlaceVariation | data-maxigos-can-place-variation | If 1, maxiGos place a move on the point where the user just clicked, event if the move is not in the sgf. | (0,1) | 0 |
| hideSingleVariationMarkOn | data-maxigos-hide-single-variation-marks-on | If 1, maxiGos displays variation marks only if there are at least two marks. | (0,1) | 0 |
| siblingsOn | data-maxigos-siblings-on | If 1, maxiGos displays variations of current node, otherwise of the next node. If "null", maxiGos displays variations as specified by the sgf ST property. | (0,1,null) | null |
| variationBoxOn | data-maxigos-variation-box-on | If 1, maxiGos displays a list of variation buttons in the component box. | (0,1) | 0 |
| variationMarkSeed | data-maxigos-variation-mark-seed | By default, maxiGos generates variation marks starting at "1". To use something else as variation marks, set this parameter to a list of characters. For instance, to use some hiraganas as mark, set this parameter to "あ,い,う,え,お,か,き,く,け,こ,た,ち,つ,て,と,さ,し,す,せ,そ". | A list of characters | null |
| variationMarksOn | data-maxigos-variation-marks-on | If 1, maxiGos displays mark on variation. If 0, it hides them. If "null", maxiGos displays mark on variation as specified by the sgf ST property. | (0,1,null) | null |
This component displays maxiGos version in its box.
| Parameter | Attribute | Description | Possible values | Default value |
|---|---|---|---|---|
| versionBoxOn | data-maxigos-version-box-on | If 1, maxiGos displays its version in component box. | (0,1) | 0 |
This component displays a menu (used with the "Menu" component) to modify some display parameters such as the "in3dOn" parameter, the "shadowOn" parameter, etc.
It doesn't have any parameters.
Each maxiGos theme has its own css style sheet stored in "_css" folder of the samples.
This style sheet is automatically included to the page by maxiGos.
It is not necessary to add it in the <head> tag of the page.
Most html tag of maxiGos have an id and a class.
Tags are:
Each viewer has an id starting by "d", followed by a number ("1" for the first viewer of the page, "2" for the second, etc.)
Each component <div> id is prefixed by its viewer id and followed by the component name and the tag name. For instance the goban component <div> id of the third viewer in the page is "d3GobanDiv".
Each class is prefixed by "mx" instead of the id of the viewer.
The name of the global <div> is "GlobalBox". Therefore its id is "dnGlobalBoxDiv", and its class is "mxGlobalBoxDiv".
As a result, the whole tags of the third viewer in a page are in:
<div class="mxGlobalBoxDiv" id="d3GlobalBoxDiv">...</div>
Some other classes are added by maxiGos.
A class called "mx" + name of a theme + "Theme" is added to the global <div>.
A class called "mx" + name of a configuration + "Config" is added to the global <div>.
If in3dOn parameter is set to 1, a class called "mxIn3dOn" is added to the global <div>. Otherwise, a class called "mxIn2dOn" is added to the global <div>.
Warning: some components such as "animatedStone", "loop", ... have no box, and some other component boxes are displayed over other boxes (see below).
It is possible to make your own viewer, using a "maker".
A maker is a php script that generates a javascript script.
It contains:
This is a php line that uses the header() function:
header("content-type:application/x-javascript;charset=UTF-8");One has to include at least the following scripts: "mgos_lib.js" (utilities), "mgos_rls.js" (go rules management), "mgos_prs.js" (sgf parser), "mgos_scr.js" (svg builder), "mgos.js" (main code) and "mgosGoban.js" (goban code).
For instance, to include the goban, the php code is:
include "../../../_js/mgosGoban.js";
mxG.G.prototype.createCute=function()
{
return "<div>I am here!</div>";
};include "../../../_js/mgosCute.js";
In this part, one adds the javascript instructions to create the viewer object. First, one has to incremente the viewer counter mxG.K by one. Then one has to specify what are the boxes we want to display, in which order, and evenly if they have to be grouped together. Then one creates the object. Then one sets its theme and its configuration.
For instance, to create a viewer of "Ephemeral" theme, "Simple" configuration, that has a goban, a navigation bar and allows variations, the code is:
mxG.K++;
mxG.B=[["Goban"],"Navigation","Variation"];
mxG.D[mxG.K]=new mxG.G(mxG.K,mxG.B);
mxG.D[mxG.K].theme="Ephemeral";
mxG.D[mxG.K].config="Simple";
This line is:
include "../../_php/insertCss.php";
The "insertCss.php" script expects that there is an existing css style sheet named "_common.css" in a folder "_css" which is in the same folder as the parent directory of the make is.
For instance, if the maker is in a folder called "_maker", and the "_common.css" in a folder called "_css", both "_maker" and "_css" folders have to be in the same folder.
In this part, on sets the parameters of the components.
For instance, to set in3dOn parameter to 1, on adds in this part:
mxG.D[mxG.K].a.in3dOn=1;
Just add the following line:
mxG.D[mxG.K].start();
The "maker" php code:
<?php
header("content-type:application/x-javascript;charset=UTF-8");
include "../../../_js/mgos_lib.js";
include "../../../_js/mgos_prs.js";
include "../../../_js/mgos_rls.js";
include "../../../_js/mgos_scr.js";
include "../../../_js/mgos.js";
include "../../../_js/mgosGoban.js";
include "../../../_js/mgosNavigation.js";
include "../../../_js/mgosVariation.js";
?>
mxG.K++;
mxG.B=[["Goban"],"Navigation","Variation"];
mxG.D[mxG.K]=new mxG.G(mxG.K,mxG.B);
mxG.D[mxG.K].theme="Ephemeral";
mxG.D[mxG.K].config="Simple";
<?php
include "../../_php/insertCss.php";
?>
mxG.D[mxG.K].a.eraseGridUnder=1;
mxG.D[mxG.K].a.in3dOn=1;
mxG.D[mxG.K].a.hideSingleVariationMarkOn=1;
mxG.D[mxG.K].a.canPlaceVariation=1;
mxG.D[mxG.K].start();The css style sheet code:
.mxEphemeralTheme.mxSimpleConfig
{
max-width:30em;
}
.mxEphemeralTheme.mxSimpleConfig .mxGobanDiv svg
{
background:#9cf;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv
{
display:flex;
justify-content:space-between;
margin-top:0.5em;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv button
{
border:0;
background:none;
padding:0;
margin:0 5%;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv button svg
{
width:100%;
height:auto;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv button[disabled] svg
{
fill:#0007;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv button:focus:not([disabled]) svg,
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv button:hover:not([disabled]) svg
{
fill:red;
}
.mxEphemeralTheme.mxSimpleConfig button::-moz-focus-inner
{
padding:0;border:0;
}
.mxEphemeralTheme.mxSimpleConfig .mxInnerGobanDiv,
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv,
.mxEphemeralTheme.mxSimpleConfig .mxNavigationDiv button
{
outline:none;
}Et voilà!
Question: what is the minimum I have to do to include a maxiGos viewer in one of my web page using a stand-alone script?
<script data-maxigos-l="en" src="/maxiGos/maxigos-basic.js">(;FF[4]CA[UTF-8]GM[1]SZ[19];B[pd];W[dc];B[pp];W[fp];B[de];W[ee];B[ef];W[ed];B[dg];W[co])</script>
Question: is maxiGos working with any browsers?
In theory, maxiGos works with most browsers, but not with internet explorer.
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 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: how can I change the goban size?
The width of a maxiGos viewer is the width of its container, so the easiest way is to change the width of the container!
However a maxiGos viewer has a maximal width set in its css, through the "--gobanMaxWidth" css variable. Changing the value of this variable is another way to consider.
Question: how can I change the goban background?
There are various ways to achieve this.
Th common way is to change the background of the svg that draws the goban, or one of its ancestor (if they have the same size) using css. For instance, for the minimalist theme:
div.mxMinimalistTheme .mxGobanDiv svg
{
background-color:#9cf;
}Another way is to change the fill value of the .mxWholeRect svg rect. For instance, for the minimalist theme:
div.mxMinimalistTheme .mxWholeRect
{
fill:#9cf;
}Question: what about "responsive design"?
In theory, maxiGos does all the job.
But don't forget the magic <meta> tag:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Question: I use a maxiGos stand-alone script which displays all its texts in french and it is the latest thing I want. What can I do?
Read again the "Internationalization" chapter. Maybe you missed something.
If you need to use a language that has no internationalization file in "_i18n" folder, see next question.
Question: I want to translate maxiGos in another language. How can I process?
Duplicate "_maxigos/_i18n/maxigos-i18n-ja.js" and replace the two last letters of the file name by the code of the new language (if possible a ISO 639 language code). Replace all "ja" strings by the code of the new language at the beginning of the file. Translate all japanese texts of this file in the new language (their equivalents in english are in front of them), and rewrite or create or evenly remove functions whose name starts by "build" or "translate" (these functions are "buildDate", "buildRank", "buildMove", "buildNumOfMoves", "buildRules", "buildTimeLimits", "buildKomi", "buildResult" and "transalteTitle"). If one of these functions is missing, maxiGos uses default functions to produce an acceptable output so you can drop the rewritting of these functions if it appears too complicated. Finally, save the file in UTF-8.
Question: I want to use maxiGos in a page which is not in UTF-8. What is the correct way to insert it?
If you use a stand-alone viewer, add charset="UTF-8" to any maxiGos script tag.
For instance:
<script charset="UTF-8" src="_alone/maxigos-minimal-basic.js">
../_sgf/game/blood-vomit.sgf
</script>