Author Archives: Joonas Pihlajamaa

jGoBoard 2.1 now available

2 Replies

New jGoBoard version is out! The API has not changed much, but new version has some nice additions:

  • There is a new autodiv.js which enables you to just embed a div with some special attributes and jGoBoard will generate a SGF viewer for you with no additional JavaScript!
  • I compiled a single minified all-min.js with Google’s Closure Compiler so you only need one, fast-loading script tag. Nice!

Basically all you need to do is to head to Download page and grab it, and look at the source of embedding demo and you should have a pretty clear idea how to embed jGoBoard to your blog, website, or whatever. Have fun!

Oh, one final remark: Remote SGF loading uses JSONP service I have created that fetches an SGF file, parses it’s structure and returns it to your script in parsed form. To avoid abuse, I’ve put quotas on the amount that one domain can use the service – 1000 requests a day and max 10 MB data in or out. So if you are expecting to exceed this, either put your SGF files in a place you can reference them locally (i.e. no need for http:// in the URL), cache them that way or contact me to negotiate a bigger quota. :)

Using hover markers and .each()

2 Replies

A common need in interactive applications is to provide some kind of visual feedback to the user where he’s going to place a stone next. For this purpose, two special “hover” markers are provided: “<” for black stones and “>” for white stones. They do not display anything when the mouse cursor is not above them, but when mouse enters the marker area, a semi-transparent stone with no shadow is displayed. You can learn more about markers in my previous post.

This way of combining hover functionality with markers has some disadvantages – for example, you cannot have a hover on an intersection which also contains a marker, and if you have an application that places black and white stones in turn, you may need to change 350 markers on each move. However, based on testing it only seems to take around 1ms to change the markers on a modern browser, and because I did not want to add another 361 divs to jGoBoard in addition to the existing 1160, it’s just the way it’s currently done – adding a new hover layer can easily be done by more demanding applications, as long as you pass any mouse clicks to board.click handler if you want to retain that functionality.

Having said all that, here’s how you make a coordinate show a black stone when mouse cursor moves on top of it:

board.mark(new JGOCoordinate("H14"), "<");

Now let’s say you want to make all empty intersections have a white stone hover effect. One way to achieve this would be to make two for-loops to go through all coordinates, but to avoid creating such structure over and over again in the code, JGOBoard object provides an each() method very similar to the one in jQuery to call a function for every coordinate of the board. Similar to jQuery, the special this variable is set to board object in the function, so you can use all board methods easily in the function:

// Mark all empty intersections with white hover
board.each(function(coordinate) {
  if(this.get(coordinate) == JGO_CLEAR)
    this.mark(coordinate, '>');
});

That’s it! Note that the markers remain on board even when you add stones, so if you for example have a web page where the user is always providing moves for white player, after initial marking, you only need to update markers areas where stones are placed or removed.

Using markers with jGoBoard 2.0

Leave a reply

The most significant addition in jGoBoard 2.0 is the ability to place markers on the board. This enables applications utilizing jGoBoard to display about 99,5 % of SGF files out there. Markers can also be used to indicate the last move, or a ko that is taking place.
Basic design decision in jGoBoard 2 was to create separate layers above the board:

  1. Top layer that contains the markers
  2. Middle layer that contains the stones
  3. Bottom layer that contains the shadows cast by stones

So how to create a marker? It’s very simple. Remember how we made the board object:
Continue reading →

jGoBoard 2.0 released!

6 Replies

A substantially improved version of jGoBoard library is now available. The basic usage is the same, but some notable changes include:

  • New board image with less distortion than the previous one
  • Correct “descending” order for board letter coordinates (A1 is bottom left, not top left corner :)
  • New stone graphics and shadows make a cleaner look (some may like the old ones more, but I’m not redoing these until I get my hands on slate & shell stones)
  • Board is now a <div> instead of <table>, and stones are absolutely positioned divs – should be more straightforward to render for a browser (although it’s 1160 divs for a 19×19 board, talk about heavy)
  • Complete support for standard SGF markers (circle, square, cross, triangle, number and letter labels)
  • Territory markers which highlight underlying stones “dead”
  • Some additional nifty code under hood, such as <pre>board.each</pre> iteration functionality

I’ll be doing some documentation soon on how to use all of this new functionality, but meanwhile you can download jGoBoard 2 and take a look at the internals, of give it a spin on the renewed SGF viewer with support for markers and territory display!

If you’re anxious to see the territory markers and don’t want to locate a SGF file from the net with markers or make your own, fast forward this one to the end and also see the second last move with markers: example.sgf (sorry for the bad play :).