Howto use gnomego and make congress TV as seen on EGC2007

While attending the European Go Congress 2007 in Villach - I was part of the team - the idea to broadcast the top 3 boards on to big television screen in the main hall came up - so I hacked something. A lot of people where impressed and asked about a howto - so here it is.

The client

The rendering is done by a webbrowser, we used Firefox for that. Just fullscreen it and connect the VGA to the projector, television whatever. Thats was the easy part.

The server

Is not difficult either. A Linux server with apache and samba was used fot that purpose. We used glGo to record the games on each board. The games where saved on the samba share of the server using fixed names (b1.sgf, b2.sgf and b3.sgf - for boards 1, 2 and 3). Whenever a moved happens the recording person places the stone in glGo and saves the file. On the server the following shell script runs (in a screen if you like). SGFTHUMBER is the sgf-thumbnailer programm from the gnomego distribution. This program is executed in the public_html directory of some user and creates html files included by the main html file.

					
LOCALPATH=/home/egc2007/public_html/
SGFTHUMBER="./sgf-thumbnailer 320 file://${LOCALPATH}/"

# DO THAT ONCE, AT THE BEGINNING
rm *sgf

rm -f b1r.html b2r.html b3r.html
touch b1r.html
touch b2r.html
touch b3r.html

# blank.sgf_ survived :)
${SGFTHUMBER}/blank.sgf_ blank.png


while true;
do
        mv  b1.sgf b1_old.sgf
        mv  b2.sgf b2_old.sgf
        mv  b3.sgf b3_old.sgf

        cp /srv/sgf_dump/b1.sgf b1.sgf
        cp /srv/sgf_dump/b2.sgf b2.sgf
        cp /srv/sgf_dump/b3.sgf b3.sgf

        if [ -e b1.sgf ] ; then
                if ! diff -q b1_old.sgf b1.sgf; then
                        ${SGFTHUMBER}/b1.sgf b1_tmp.png
                        #any result?
                        python sgf-info b1.sgf result 2>/dev/null > b1r.html
                        mv b1_tmp.png b1.png
                fi
        else
                echo "Blanking B1"
                cp blank.png b1.png
        fi


        if [ -e b2.sgf ] ; then
                if ! diff -q b2_old.sgf b2.sgf; then
                        ${SGFTHUMBER}/b2.sgf b2_tmp.png
                        python sgf-info b2.sgf result 2>/dev/null > b2r.html
                        mv b2_tmp.png b2.png
                fi
        else
                cp blank.png b2.png
        fi

        if [ -e b3.sgf ] ; then
                if ! diff -q b3_old.sgf b3.sgf; then
                        ${SGFTHUMBER}/b3.sgf b3_tmp.png
                        python sgf-info b3.sgf result 2>/dev/null > b3r.html
                        mv b3_tmp.png b3.png
                fi
        else
                cp blank.png b3.png
        fi
        sleep 1
done

The main html file (index.shtml) looked like this. When configuring apache2 do not forget to enabled server side includes by # a2enmod includes (as root). The files p1.shtml , p2.shtml and p3.shtml contained informations about the players.

				
<html>
        <head>
                <meta http-equiv="refresh" content="1; URL=index.shtml"/>
        </head>

                <body style="overflow: -moz-scrollbars-none">
                <table width="100%">
                        <tr>
                        <td><img src="egc_logo.png" width="200"/></td>
                        <td><h2>Live top 3 board broadcast</h2></td>
                        <td>GnomeGo powered<br/>(c) Roland Lezuo<br/>http://freshmeat.net/projects/gnomego/</td>
                        </tr>
                </table>
                <table width="100%">
                        <tr>
                        <td><img src="b1.png"/></td>
                        <td><img src="b2.png"/></td>
                        <td><img src="b3.png"/></td>
                        </tr>
                        <tr>
                        <td valign="top"> <!--#include file="p1.shtml"--> </td>
                        <td valign="top"> <!--#include file="p2.shtml"--> </td>
                        <td valign="top"> <!--#include file="p3.shtml"--> </td>
                        </tr>
                </table>
        </body>
</html>

Here is the content of the p1.shtml file.

			
Board 1   <b><!--#include file="b1r.html"--></b><br/>
<div style="font-size:1.9em";>
Roland Lezuo (b)
<br/>
Christopher Dräger (w)
</div>
<table>
<tr>
        <td><img width="150" src="lezuo.jpg"/></td>
        <td><img width="150" src="draeger.jpg"/></td>
</tr>
</table>

You may ask how does the output look like? Look there in my blog (in german) and scroll down a bit to see images from the broadcast.