jGoBoard - photorealistic web go board

[jokkebk]

Is there any way to resize the board? With my smallish laptop screen, I can just barely fit the board. Adding sound would be cool too. I love it...

The library comes also with small and large versions of the board, but they require a different CSS to be used. I think switching CSS files can be done in JavaScript, so I might implement changing board size in SGF viewer when I have the time. Sound seems to be slightly problematic with JavaScript, I did a quick Google and seemed like you'd need to either make it browser-specific or use Flash. Yuck.

There may be a problem with the SGF parser - the viewer demo doesn't look right with this SGF file:

http://www.jgoboard.com/sgf.html?url=ht ... rechen.sgf

Yes I had not yet implemented SGF properties AW, AE or coordinate ranges with setup properties. I fixed that his morning and now it should work with all types of setup nodes. Also found a bug - you could press the disabled "previous move" -link to remove stones placed in the root node (i.e. handicap stones and initial board setup) and never get them back.

[jokkebk]

If you want to avoid reinventing the wheel in terms of functionality, you could almost certainly use stylesheets to apply your look to an eidogo player. If you want some prior art to crib off of, take a look at my wordpress plugin which includes a mini-mode for eidogo done using a stylesheet.

EidoGo player has tons of functionality and it would require quite a lot of effort to support all its use cases with the graphics from jGoBoard - I think I'll leave that to someone else who might benefit from the results. I'm planning to use the library for a DGS-type game server so I just want a good-looking board with minimum dependencies on other projects.

For someone who is interested, board graphics and stones are also licensed under Creative Commons and it should be easy to scale them and use with EidoGo. Shadows might be a pain though, because they will be larger than the intersection squares and need to be positioned between the board and stones (with different sizing along board edges) - tweaking EidoGo to add new placeholders in DOM would likely be necessary.

[EdLee]

jokkebk,

Very pretty, thanks! Questions:

1. would you like to have high-resolution photos of nice slate & shell stones...
2. ...so that the shell stones can have different grain patterns and rotated randomly;
3. could you fix the shadow -- right now the light source seems to be coming from the lower right corner.
the shadow is definitely nice, but could you move the light source to the upper-right corner instead?

Thanks, great job!

[jokkebk]

I made some additional updates to the SGF viewer, it now has additional options to switch between three board sizes: large, normal, and small.

1. would you like to have high-resolution photos of nice slate & shell stones...
2. ...so that the shell stones can have different grain patterns and rotated randomly;
3. could you fix the shadow -- right now the light source seems to be coming from the lower right corner.
the shadow is definitely nice, but could you move the light source to the upper-right corner instead?

Thanks for the offer (and kind words I edited out for the sake of brevity)!

1. If you want, you (or anyone else interested) could download the jgoboard-1.0.zip from website and redo the jgo/large images - if you keep the same dimensions, no CSS editing or anything else is needed (to test the images, you need to replace "jgoboard.css" with "jgoboard_large.css" in demo.html though). Let me know if the results are good, I would be glad to make different "themes" available at jgoboard.com

2. Rotation will be a problem with HTML+CSS, I wouldn't count on proper browser support for CSS3 element rotation any time soon (even the browsers that support it are currently painfully slow and ugly with rotated elements) - the most feasible option would be to have 3-5 different stone images for white stones which have different angles and grain patterns, and just randomly use them.

3. LOL, I wouldn't say the shadow is "broken", because the viewpoint is basically from above the board. But you're right though that human eye is accustomed to light coming from above, so it's a good improvement, I'll try to address that at some point.

[jokkebk]

Of course one could make a text box where you could paste SGF contents, but that would perhaps be a bit cumbersome for most users.

That would work for me.

I actually found a way to load files in Firefox 3.6 which supports a new File API defined by W3C. It's now implemented in sgf.html.

If you want to view the whole thing offline, you need to download the http://www.jgoboard.com/data/jgoboard-1.0.zip, unzip it and augment it with the following two files:

http://www.jgoboard.com/sgf.html (put it alongside with demo.html)
http://www.jgoboard.com/css/style.css (put it in css/ -folder with demo.css)

After this, just open sgf.html with Firefox 3.6 or later, and you should be able to load any UTF-8 encoded SGF file offline.

[tj86430]

Holy ghost, I just realised who you are! Well done!

[Magicwand]

Holy ghost, I just realised who you are! Well done!

who is he?

[tj86430]

Holy ghost, I just realised who you are! Well done!

who is he?

He is a Finnish player who I know well IRL. We've played against each other quite a few times.

[jokkebk]

Just thought to advertise here that the 2.0 version of the library is now available. Some highlights include full support for markers and marking territory, also in the new SGF viewer, and renewed graphics, which are clearer, but perhaps not so photo-like.

I also updated the web site to run on WordPress, so you can subscribe to RSS feed to keep up to date on changes to the library.

http://jgoboard.com (library web site)
http://static.jgoboard.com/sgf2.html?url=http://static.jgoboard.com/sgf/example.sgf (rewind to end and check also the previous move to get a glimpse on the marker functionality)

Based on the feedback on this thread, the new SGF viewer also shows the last move marked with a circle.

[HermanHiddema]

When I go to the node with all the markers, then click "start", the markers are not reset.

Nice job, BTW

[jokkebk]

When I go to the node with all the markers, then click "start", the markers are not reset.

Well noticed. I had forgotten to put the marker removal code on that function.

Nice job, BTW

Thanks! It has been a fun project so far, and now the capabilities start to be on the level that I want.

[lorill]

Based on the feedback on this thread, the new SGF viewer also shows the last move marked with a circle.

This is really nice when stones are aligned, but ugly when shuffled. Could you use another kind of marker or keep the circle centered on the stone when shuffled ?

Not a major feature, but it would be nice.

[jokkebk]

Based on the feedback on this thread, the new SGF viewer also shows the last move marked with a circle.

This is really nice when stones are aligned, but ugly when shuffled. Could you use another kind of marker or keep the circle centered on the stone when shuffled ?

Done. The shuffle feature is a hack, but it was simple to alter marker coordinates too as they are identical to stone coordinates.

Don't look too closely on the shadows, though

[jokkebk]

jGoBoard 2.1 is now out, and the biggest changes are a single, minified .js file that is simpler to include and quicker to load to web pages, and embeddable <div> viewers for SGF files, much like EidoGo has. So now you can embed a jGoBoard viewer to your blog, website or whatever just by having the <style> and <script> elements in place and doing this in HTML:

<div class="jgo_auto" sgf="/my/game.sgf"></div>

See the jGoBoard site for details or head straight to embedding demo.