HomeEnglishFrançais

Documentation for maxiGos v7

Copyright 1998-2021 - François Mizessyn

Click here to go to the download page

What is maxiGos?

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).

What are the pre-requisites?

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.

How to quick start?

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!

How to install the full version of maxiGos?

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

If you don't want to 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.

How to use maxiGos?

The basic way to insert maxiGos in a web page is:

But we can also use:

Using a stand-alone viewer

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.

The code to insert in your web page

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 necessary the same as the charset of the page.

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

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

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

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

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

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

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

Note 1: 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

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).

Using a "plugin""

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

Using a "BBCode""

See the BBCode page for more details.

Using a "maker" in php

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.

The line to insert in your web page

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.

Customization

The customization can be done as for stand-alone viewers.

Using a "loader" in javascript

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

The code to insert in your web page

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

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

Insert "mgosLoader.js" script in the web page after all these tags. This script will replace each <div> and </div> tags contents by a maxiGos 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.

Customization

As for stand-alone players, customization can be done by adding "data-maxigos-xxx" attributes to the tag where the viewer displays, and where "xxx" is a maxiGos parameter.

Internationalization

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.

Encoding

Encoding of your page

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

When using a maxiGos stand-alone 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">

Encoding of sgf files

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

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

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

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

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

Encoding and language

Encoding and language are different. "UTF-8" is convenient for any(?) language, so it is the best choice as encoding when you can use it. When it is not possible, take care since some encoding cannot display some caracters of some languages. For instance, japanese words of a sgf file in Shift-JIS cannot be transformed automatically and displayed in a page in "ISO-8859-1", but it can be transformed automatically and displayed in a page in "UTF-8".

Don't use charset names such as "UTF-8", "ISO-8859-1", "Shift-JIS", "Big5", "GB18030" as value of "lang" attribute or "data-maxigos-l" parameter. Use language codes instead, such as "en", "fr", "ja", zh-hans", "zh-hant"....

Advanced usage

Components

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 attribues" (where "xxx" is a parameter name).

The components are:

Global parameters

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 "&#40;" and "&#41;" 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 "&#40;" and "&#41;". (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$

About component

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

AnimatedStone component

This component moves the stones from the corner of the goban to their final location.

ParameterUseDescriptionValuesDefault 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.
Number1000

BackToGame component

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

Cartouche component

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

Comment component

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

Cut component

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

Edit component

This component displays a tool bar in its box.

It doesn't have any parameters.

File component

This component displays a menu to manage files ("New", "Open", "Save", etc.)

It is used with Menu component.

It doesn't have any parameters.

Goban component

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"

Goto component

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) ""

Guess component

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

Header component

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.

Help component

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

Image component

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

Info component

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.

Lesson component

This component displays in its own box an assistant and a bubble containing sgf comments.

It doesn't have any parameter.

Loop component

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

Menu component

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

MoveInfo component

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

Navigation component

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"

NotSeen component

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

Options component

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. (0,1) 0
hideCanScore data-maxigos-can-score If 1, maxiGos hides canScore radio. (0,1) 0
hideCanVariation data-maxigos-can-variation If 1, maxiGos hides canVariation radio. (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
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

Pass component

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

Score component

This component displays "Score" button in its own box.

Parameter Attribute Description Possible values Default value
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

Sgf component

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"

Solve component

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

Speed component

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

Title component

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

Tree component

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

Variations component

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

Composant Version

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

View component

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.

Css classes and tags used by maxiGos

Overview

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

Class and tag list

Global box

div.mxGlobalBoxDiv,
div.mx + theme name + Theme,
div.mx + configuration name + Config,
div.mxIn3d or div.mxIn2d according to in3dOn value.

Grouping boxes

div.mx + component name + ParentDiv
div.mx + component name + GrandParentDiv
div.mx + component name + GreatGrandParentDiv
div.mx + component name + GreatGreatGrandParentDiv
...

Components

div.mxAboutDiv
button.mxBtn span (if aboutBtnOn is set to 1)
div.mxBackToMainDiv
button.mxBtn span (if backToMainBtnOn is set to 1)
div.mxCommentDiv
div.mxCommentContentDiv
span.mxMoveNumberSpan (if allInComment is set to 1)
Balises du composant Header (if headerInComment is set to 1)
div.mxCommentLabelDiv (if commentLabelOn is set to 1)
div.mxCutDiv
button.mxBtn span (if cutBtnOn is set to 1)
div.mxEditDiv
div.mxEditToolBarDiv
button svg, and input + (.mxUnselectedEditTool or .mxSelectedEditTool)
div.mxEditCommentToolDiv textarea
div.mxGobanDiv
div.mxInnerGobanDiv
svg (to draw the goban)
Internal tags
div.mxGotoDiv svg
div.mxGuessDiv svg
div.mxHeaderDiv
button.mxBtn span (if headerBtnOn is set to 1)
div.mxShowContentDiv h1 (if headerBoxOn is set to 1)
div.mxShowContentDiv div.mxP span.mxHeaderSpan (if headerBoxOn is set to 1)
div.mxHelpDiv
button.mxBtn span (if helpBtnOn is set to 1)
div.mxLessonDiv+(.mxBM, .mxDO, .mxIT, .mxTE or rien)
div.mxBalloonDiv div.mxBalloonContentDiv
img.mxAssistantImg
div.mxMenuDiv
div.mxOneMenuDiv
button span
div.mxSubMenuDiv
button span
div.mxMoveInfoDiv svg
div.mxNavigationDiv
button.mxBtn span svg
input (type=text), inserted by Goto to show or set a move number
div.mxNotSeenDiv
div.mxInnerNotSeenDiv svg
div.mxOptionsDiv
button span (if optionBtnOn is set to 1)
h1 (if optionBoxOn is set to 1)
div.mxP input (if optionBoxOn is set to 1)
div.mxP label (if optionBoxOn is set to 1)
div.mxPassDiv
button.mxPassBtn span (if passBtnOn is set to 1)
button.mxJustPlayedPassBtn span
button.mxOnVariationPassBtn span
button.mxOnFocusPassBtn span
div.mxPngDiv (in Image component)
button.mxBtn span (if pngBtnOn is set to 1)
div.mxScoreDiv
button.mxBtn span (if scoreBtnOn is set to 1)
div.mxSgfDiv
button.mxBtn span (if sgfBtnOn is set to 1)
div.mxSolveDiv
button.mxBtn span svg
div.mxSpeedDiv
button.mxSpeedPlusBtn, the "+"
div.mxSpeedBarDiv svg, bar and cursor
button.mxSpeedMinusBtn, le "-"
div.mxSvgDiv (in Image component)
button span (if svgBtnOn the set to 1)
h1.mxTitleH1
div.mxTreeDiv
div.mxTreeContentDiv
svg
div.mxTreeLabelDiv (if treeLabelOn is set to 1)
div.mxVersionDiv span

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

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

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

Custom viewer

It is possible to make your own viewer, using a "maker".

What is a "maker"?

A maker is a php script that generates a javascript script.

It contains:

The line that specifies that the output is a javascript script

This is a php line that uses the header() function:

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

The part where one includes some maxiGos components

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";
You can also create your own component. For instance, to create a component called "Cute", just make a javascript script that contains at least the following code:
mxG.G.prototype.createCute=function()
{
	return "<div>I am here!</div>";
};
Save the code in a file called "mgosGoban.js", then include it in the maker using for instance:
include "../../../_js/mgosCute.js";

The part where one inserts some javascript instructions to create a viewer object

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";

The line that inserts the style sheet in the code of the viewer

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.

The part where one sets some parameters

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;

The line to start the viewer

Just add the following line:

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

Full sample

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à!

Annexes

Folders and files

Questions and answers

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?

  1. Go to the dowload page.
  2. Download "maxigos-neo-classic-basic.js" stand-alone viewer.
  3. Create at the root of your website a "maxiGos" folder and copy "maxigos-neo-classic-basic.js to it.
  4. Insert in the page to the place where you want the viewer displays <script> and </script> tags with src value set to "/maxiGos/maxigos-neo-classic-basic.js", and insert between these tags a sgf record. For instance:
    <script data-maxigos-l="en" src="/maxiGos/maxigos-basic.js">(;FF[4]CA[UTF-8]GM[1]SZ[19];B[pd];W[dc];B[pp];W[fp];B[de];W[ee];B[ef];W[ed];B[dg];W[co])</script>
  5. Et voilà!

Question: 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>
Aknowledgements to Adachi K., Alfredo Pernin, Chantal Gajdos, Julien Payrat, Lao Lilin, Mickaël Simon, Motoki Noguchi, Olivier Besson, Olivier Dulac, Patrice Fontaine, Tony Yamanaka and many others for their advices or contributions to this project!

EnglishFrançais