Go to:  Davar site entry | Davar site contents | Davar site index | Go selection | Text bottom

Go  Position  Presentation

Once Go presentation elements are defined and developed the task of presentation of any Go position can be easily accomplished.  It requires only a text editor (my long time preference is QuickEdit), and a very basic understanding of HTML.

Go position is a compound image that is combined using a set of 20 basic medium size elements.  (Both small size and large size elements can be used the same way the medium size usage is described here.)

RTL RT ET RTR
ETL BS ETR
EL HS RR
RL EC ER
EBL WS EBR
EB
RBL RB RBR
File Names of 20 Medium Elements (All Extensions Are JPG)
RTL   bordeR Top Left
RT   bordeR Top
RTR   bordeR Top Right
ETL   Empty Top Left
ET   Empty Top
ETR   Empty Top Right
EL   Empty Left
BS   Black Stone
HS   HoSi
RR   bordeR Right
RL   bordeR Left
EC   Empty Center
WS   White Stone
ER   Empty Right
EBL   Empty Bottom Left
EB   Empty Bottom
EBR   Empty Bottom Right
RBL   bordeR Bottom Left
RB   bordeR Bottom
RBR   bordeR Bottom Right

Compound image of Go position gets presented as HTML table consisting of the cells each of which contains an image of appropriate Go element (reference to a *.JPG file from the table above).  In order for the compound image to be a contiguous one the table border display, padding of cells with extra space, and inserting additional space between table cells should be explicitly suppressed by setting the corresponding <TABLE> parameters to zero.

It is beneficial (though tedious) to specify the size of each cell (obviously being equal to the size of the corresponding element image).  Browser can derive cell size from the image size, but this slows page loading.  There are only two linear dimension characteristics for the medium set shown above 33 and 8 pixels and it is pretty obvious what dimension is what in an application to every individual element.

Most elements are specified as table cell foregrounds.  The only reason for the preference over specifying them as backgrounds is the fact that keyword SRC happens to be shorter than the keyword BACKGROUND; otherwise the choice makes no difference at all in most cases.  However, if it is necessary to overlay a symbol over the image, the latter should go into the background in order to leave foreground for the symbol being overlaid.  HTML code below presents Go position as a contiguous table of Go elements.


    <CENTER>
      <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
        <TR>
          <TD><IMG SRC="RL.JPG" WIDTH= 8 HEIGHT=33></TD>
          <TD><IMG SRC="EL.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
        </TR>
        <TR>
          <TD><IMG SRC="RL.JPG" WIDTH= 8 HEIGHT=33></TD>
          <TD><IMG SRC="EL.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="BS.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD BACKGROUND="WS.JPG" WIDTH=33 HEIGHT=33 ALIGN=Center><B>A</B></TD>
          <TD><IMG SRC="BS.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
        </TR>
        <TR>
          <TD><IMG SRC="RL.JPG" WIDTH= 8 HEIGHT=33></TD>
          <TD><IMG SRC="EL.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="BS.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
        </TR>
        <TR>
          <TD><IMG SRC="RL.JPG" WIDTH= 8 HEIGHT=33></TD>
          <TD><IMG SRC="BS.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="BS.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="BS.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
        </TR>
        <TR>
          <TD><IMG SRC="RL.JPG" WIDTH= 8 HEIGHT=33></TD>
          <TD BACKGROUND="WS.JPG" WIDTH=33 HEIGHT=33 ALIGN=Center><B>B</B></TD>
          <TD><IMG SRC="EB.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EB.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD BACKGROUND="WS.JPG" WIDTH=33 HEIGHT=33 ALIGN=Center><B>C</B></TD>
          <TD BACKGROUND="WS.JPG" WIDTH=33 HEIGHT=33 ALIGN=Center><B>D</B></TD>
          <TD><IMG SRC="BS.JPG" WIDTH=33 HEIGHT=33></TD>
          <TD><IMG SRC="EB.JPG" WIDTH=33 HEIGHT=33></TD>
        </TR>
        <TR>
          <TD><IMG SRC="RBL.JPG" WIDTH= 8 HEIGHT= 8></TD>
          <TD><IMG SRC= "RB.JPG" WIDTH=33 HEIGHT= 8></TD>
          <TD><IMG SRC= "RB.JPG" WIDTH=33 HEIGHT= 8></TD>
          <TD><IMG SRC= "RB.JPG" WIDTH=33 HEIGHT= 8></TD>
          <TD><IMG SRC= "RB.JPG" WIDTH=33 HEIGHT= 8></TD>
          <TD><IMG SRC= "RB.JPG" WIDTH=33 HEIGHT= 8></TD>
          <TD><IMG SRC= "RB.JPG" WIDTH=33 HEIGHT= 8></TD>
          <TD><IMG SRC= "RB.JPG" WIDTH=33 HEIGHT= 8></TD>
          <TD></TD>
        </TR>
      </TABLE>
    </CENTER>
  

The HTML code above gets displayed by the browser as follows (presuming that all images are in the same directory with the HTML text being browsed):

A
B C D

While being simple and straightforward the direct HTML presentation of Go position has an obvious drawback of being excessively bulky.  This bulk of repetitive HTML text complicates coding and results in long transfers.

In order to have a fully functional Go board position description facility, while avoiding massive HTML code repetitions, the POSITION JavaScript was developed as a substitute for the corresponding HTML (designed to work with the medium size elements only).  Script generates HTML text for the table that gets displayed by the browser as a position of stones on a piece of Go board.  Position is described as a series of arguments each of which represents a list of board row elements (names of corresponding *.JPG files).  Each element might be accompanied by a foreground text to be overlaid on it and optional alignment attributes for this foreground.  The order of elements is straightforward: left to right and top to bottom exactly the way you see them when board position gets displayed.  On the picture below elements of the table that represents Go position are separated to make that point clear.

A
B C D

File with POSITION JavaScript function has to be included into HTML text <HEAD> (normally at its end) using the following operator (example below presumes that HTML text and POSITION.JS are in the same directory; otherwise directory level should be adjusted accordingly):


    <SCRIPT LANGUAGE=JavaScript SRC=POSITION.JS></SCRIPT>
  

Included function is used in the <BODY> of HTML to display Go board position in a way shown below in this text.  What follows here is the description extract from POSITION JavaScript function definition text.


    Generates HTML table of Go board position presentation to be used
    in texts that discuss those positions.  Serves merely as a shorthand
    to save typing as well as page loading time by eliminating massive
    HTML repetitions.

    The position description is a straightforward one - each argument
    is a string corresponding to one row of Go board elements that are
    listed from left to right (delimited by "_") being the data items
    of the cells of a table representing required position.

    Two types of items are possible:

    1. Simple item:  Image
                     Image is a Foreground occupying the entire cell

    2. Complex item: Image-Foreground[-Alignment]
                     Image is a Background for the specified Foreground
                     (Used to mark board elements with symbols,
                      E.g.: mark stones with move numbers)

       Where: Image      - Name of JPG file representing required image
                           E.g.: ETL  - Empty Top Left corner of Go board
                           Note: Though it is not a requirement, it makes
                                 sense to have images in HTML text directory
                                 to avoid specification of their paths.
              Foreground - Specification of Foreground to be overlaid
                           on the Background Image
                           E.g.: <FONT COLOR=Red><B>5</B></FONT>
              Alignment  - Specification of horizontal and vertical alignments
                           of specified Foreground within Image background
                           (HTML defaults: ALIGN=Right VALIGN=Center)
                           E.g.: ALIGN=Center to achieve both horizontal and
                                              vertical centering of specified
                                              Foreground over Image background
                           Note: When both horizontal and vertical alignments
                                 are specified they should be separated by " ".

       Note:  In a complex item alignment specification is optional,
              while foreground should always be present.

       E.g.:  document.write(POSITION("EL_EC_EC_EC",
                                      "BS_BS_BS_EC",
                                      "WS_WS_BS_EC",
                                      "EBL-<FONT COLOR=Red>A</FONT>-ALIGN=Center_WS_BS_EB",
                                      "RB_RB_RB_RB"))
       Notes:

        - Each argument describes position row; it should be contained
          within ONE line of HTML text.
        - Symbols "_" and "-" are reserved as delimiters within an argument.
  

The code below is functionally identical to the full HTML position description (HTML table code), but it is substantially shorter (note, that each argument should be contained within one line of text):


    <CENTER>
      <NOSCRIPT>Please enable JavaScript in your browser and reload this page</NOSCRIPT>
      <SCRIPT LANGUAGE=JavaScript>
        <!--
          document.write(POSITION("RL_EL_EC_EC_EC_EC_EC_EC",
                                  "RL_EL_BS_WS-<B>A</B>-ALIGN=Center_BS_EC_EC_EC",
                                  "RL_EL_EC_BS_EC_EC_EC_EC",
                                  "RL_BS_EC_EC_BS_BS_EC_EC",
                                  "RL_WS-<B>B</B>-ALIGN=Center_EB_EB_WS-<B>C</B>-ALIGN=Center_WS-<B>D</B>-ALIGN=Center_BS_EB",
                                  "RBL_RB_RB_RB_RB_RB_RB_RB"))
        //-->
      </SCRIPT>
    </CENTER>
  
A
B C D

The table of separated elements is placed right below their listing as POSITION function arguments to make correlation between the two obvious.  The code above gets displayed by the browser in the form identical to the full HTML presentation:


As it can be seen from the above example, the POSITION JavaScript provides a complete substitute for directly written HTML, and permits to keep a fully functional Go board description within a reasonable size, saving both coding and transfer time.

 

Diagram on the left shows various ways of marking stones and empty board points.  Letters C, D and E on that diagram appear to be too close to the lower edge points that they mark.  To avoid this it is possible either to mark such points at the center (point X), or to decrease the size of marking font from 3 (default) to 2 as shown on the diagram on the right.

 

The code below is used to generate the left diagram above.  It is shown here as a complete example of handling color and various types of alignment for marking symbols that can be used in Go position description.  Long lines can't be split, since each JavaScript function argument should be contained within one line, so horizontal scrolling is required to review this code.


    <SCRIPT LANGUAGE=JavaScript>
      <!--
        document.write(POSITION("RL_EL-<FONT COLOR=Red><B>Z</B></FONT>-ALIGN=Center_EC_EC_EC_EC",
                                "RL_EL-<FONT COLOR=Red><B>A</B></FONT>_BS-<FONT COLOR=White><B>12</B></FONT>-ALIGN=Center_EC-<FONT COLOR=Red><B>O</B></FONT>-ALIGN=Center_WS-<B>123</B>-ALIGN=Center_EC-<FONT COLOR=Red><B>Y</B></FONT>-ALIGN=Center",
                                "RL_EBL-<FONT COLOR=Red><B>B</B></FONT>-VALIGN=Bottom_EB-<FONT COLOR=Red><B>C</B></FONT>-ALIGN=Center VALIGN=Bottom_EB-<FONT COLOR=Red><B>X</B></FONT>-ALIGN=Center_EB-<FONT COLOR=Red><B>D</B></FONT>-ALIGN=Center VALIGN=Bottom_EB-<FONT COLOR=Red><B>E</B></FONT>-ALIGN=Center VALIGN=Bottom",
                                "RBL_RB_RB_RB_RB_RB"))
      //-->
    </SCRIPT>
  

To summarize it all, in order to use Go content presentation tools available from this site, it is necessary to have some (only basic) understanding of HTML, be capable of using any text editor (even dumb NotePad will do the job), and to do the following:

Technical details of POSITION function code are presented in the JavaScript section.


View Go Glossary (built with POSITION.JS) or view [and save] POSITION.TXT text
(Use [Back] button or [Alt]+[CL] to return here from page/text view)
To make text executable rename it to *.JS and make a global change of "&lt;" into "<" signs.
Go to:  Davar site entry | Davar site contents | Davar site index | Go selection | Text top