prototype for new go diagram format

[Kirby]

Probably will revert to the old diagrams for unsupported scenarios. The existing diagrams require Javascript already, by the way.

Cool, I had no idea they required JS.

Yeah. To give some background, the way godiscussions.com did this was a little different, and it was somewhat of a blocker for getting L19 running. According to the owner of godiscussions.com, the capacity they had was being overrun on the server due to amount of images that were stored on the server, and it caused response time to be very slow. I have no idea if this is actually the reason for the slowness or not, but in order to make a comparable site, we needed to get diagrams working in phpBB. Jordus let me know about this, and I'm the one that set this part of L19 up initially.

I don't know how they did it on godiscussions.com, but basically, instead of storing an image on the server with a particular filename or something and retrieving it for display, the method I used was to generate the image on the fly by passing the diagram code through the URL. So you can technically create diagram images by making your own URL and passing it as a variable.

The contents of what phpBB sees from a post has different data than what the script expects. For example, when you post, you have "br" line breaks which should be newline characters, etc., and these need to be in html format to pass through the URL. I use javascript to convert the text from the post into this format so that it can be sent through the URL to generate an image.

Anyway, the current stuff I'm messing with basically increases the javascript content that occurs and decreases the use of php. In fact, I'm still using the php script to generate the SGF that you can download when you click on the diagram. Since I'm concerned mainly with adjusting the way the diagram looks, I don't see a reason to do away with the part that generates the SGF itself.

[Kirby]

Okay, I tried to compile some of the suggestions on board appearance. Here are the same examples with the updates (or you can look at the OP):

[go-beta]$$Wcm31 Example using some of the existing markups
$$ ---------------------------------------
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . X X X . . A . * . V . . O O O . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . B . . . . . C . . . . . W . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . # . . . . . S . . . . . @ . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . Y . . . . . T . . . . . Q . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . Z . . . . . M . . . . . P . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . 1 . 2 . 3 . 4 . 5 . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . , . . . . . , . . . . . , . . . |
$$ | . . . a . b . c . d . x . y . z . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ ---------------------------------------[/go-beta]

[go-beta]$$Bcm61 Prisoners:
$$ ---------------------------------------
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . O . X . . O . . . . X . . . . |
$$ | . O . O . . . . X O . X . . . , X O . |
$$ | . . O O X X . . X O . . . . . . X . . |
$$ | . O . . O X . . . . O . . . . . . . . |
$$ | . X O O O X . O O . . . . . . . . . . |
$$ | . . X X X X X . . . . . . . . . . . . |
$$ | . . . . . O . . O . . . . . . . . . . |
$$ | . . . X X . X 1 2 , . . . . . , . . . |
$$ | . . O O O O . . O . . . . . . X . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . O X . . . . . . . . . . . . . . . |
$$ | . . O . . . . . . X . . . O . . O . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . O . X . X . . . , . . . . . O . . . |
$$ | . . X . . . . . . X . . . X . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ ---------------------------------------[/go-beta]

FWIW, here is what things looked like with the texture that I was working on preloading:


As you can see, the textured image has a lot more stuff, but perhaps it's too distracting for a diagram.

I'm not a graphics expert, but in my opinion right now, it's not clear to me whether the white stones need an outline like in the existing diagrams. Based on feedback in this thread, we should get rid of the surrounding circle, but what do you think given what it looks like here?

[Kirby]

Any other thoughts on improving appearance? Should white stones have an outline? Any other textured effects? Anything else?

[dfan]

For 2D stones, I would add a thin outline.

[Bonobo]

Oh I must confess that when I wrote that I preferred the “old color scheme”, I confused that with the Eidogo color scheme (which my eyes really like).

[dfan]

Also, for what it's worth, I think I liked the original board color (I can't see it any more) more than the revised one, IIRC, your original board color was more of a light brown, and now it's more of an orange (which matches L19's current diagrams, I think?).

[Bill Spight]

I like the textured image, and, 2-D or 3-D, I like a blonder board (less blue, maybe). I also think that in 2-D the White stones need a border, to help distinguish them from the board. Less eye strain. Also, I like the darker shading on shaded areas of the board.

BTW, on my computer my board color is Red 255, Green 228, Blue 150.

[Kirby]

Ok. Tonight I will throw together a few different options for direct comparison, and then I'll make a poll.

[Kirby]

Alright, here is a poll incorporating some of the suggestions made in this thread:
http://lifein19x19.com/forum/viewtopic.php?f=14&t=13820

Please vote for an option. If you have further recommendations for any of the options there, please leave them either in this thread or in the other. Once we establish a nice looking format, I will move forward to make this less of a prototype and more of an actual feature on the forum.

[hyperpape]

I don't know how they did it on godiscussions.com, but basically, instead of storing an image on the server with a particular filename or something and retrieving it for display, the method I used was to generate the image on the fly by passing the diagram code through the URL. So you can technically create diagram images by making your own URL and passing it as a variable.
...
Anyway, the current stuff I'm messing with basically increases the javascript content that occurs and decreases the use of php. In fact, I'm still using the php script to generate the SGF that you can download when you click on the diagram. Since I'm concerned mainly with adjusting the way the diagram looks, I don't see a reason to do away with the part that generates the SGF itself.

I had read this to believe that the new approach avoids a call to the server to render the diagram. Is that not the case?

[Kirby]

We could do without a call to server with the new approach if I write code to generate the SGF file link from the diagram text. Right now I still use the php for that.

But you are correct - it could happen entirely client side.

[skydyr]

I'm not sure if it's the antialiasing or something else, but all of the examples most recently provided seem fuzzy and out of focus to me. It makes it hard to look at the diagrams for too long at once.

To be clear, it's the board lines specifically that I find disconcerting.

[Kirby]

I'm not sure if it's the antialiasing or something else, but all of the examples most recently provided seem fuzzy and out of focus to me. It makes it hard to look at the diagrams for too long at once.

To be clear, it's the board lines specifically that I find disconcerting.

Originally, the lines were set to 1px line width and no transparency. Based on some of the first feedback, I heard that the lines were too thick. Since I don't know how to make lines less than 1px in thickness, I set the lines to be partially transparent, which is the reason for the blurriness.

I'll see if I can find out a better way to make crisp thin lines.

I'll probably work on this today. I was a little depressed over the weekend, and didn't get much more done on it since the last update.

I'm in a better mood now, so I'll probably make some updates in a little bit (have to get something done for my day job first).

[Kirby]

I made a couple of updates, including making the lines crisper. It turns out that canvas starts drawing at 0.5 mark, so drawing from 0 to 1 is different than drawing from 0.5 to 1.5 in terms of line thickness.

I also adjusted the fonts.

Stone borders are still fuzzy and non-aliased, which I'll work on later. There are bugs here and there.

But a small update, anyway.

[go-beta]$$Wcm31 Example using some of the existing markups
$$ ---------------------------------------
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . X X X . . A . * . V . . O O O . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . B . . . . . C . . . . . W . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . # . . . . . S . . . . . @ . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . Y . . . . . T . . . . . Q . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . Z . . . . . M . . . . . P . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . 1 . 2 . 3 . 4 . 5 . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . , . . . . . , . . . . . , . . . |
$$ | . . . a . b . c . d . x . y . z . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ ---------------------------------------[/go-beta]


[go-beta2]$$Wcm31 Example using some of the existing markups
$$ ---------------------------------------
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . X X X . . A . * . V . . O O O . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . B . . . . . C . . . . . W . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . # . . . . . S . . . . . @ . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . Y . . . . . T . . . . . Q . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . Z . . . . . M . . . . . P . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . 1 . 2 . 3 . 4 . 5 . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . , . . . . . , . . . . . , . . . |
$$ | . . . a . b . c . d . x . y . z . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ ---------------------------------------[/go-beta2]


[go-beta3]$$Wcm31 Example using some of the existing markups
$$ ---------------------------------------
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . X X X . . A . * . V . . O O O . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . B . . . . . C . . . . . W . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . # . . . . . S . . . . . @ . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . Y . . . . . T . . . . . Q . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . Z . . . . . M . . . . . P . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . 1 . 2 . 3 . 4 . 5 . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . , . . . . . , . . . . . , . . . |
$$ | . . . a . b . c . d . x . y . z . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ ---------------------------------------[/go-beta3]

I'm abandoning updates on the textured version, since it's not popular.

Also, I might end up releasing tags where you can specify your own color scheme (i.e. board color, background div color, and text color). That way, you can tweak the color as you'd like.

[EdLee]

Hi Kirby,

The crisp grid lines are nice, the new (sans serif) font is nice ( more readable, esp. on tiny phone screens. )