prototype for new go diagram format

dfan · **#21**

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 · **#22**

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 · **#23**

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

Kirby · **#24**

Alright, here is a poll incorporating some of the suggestions made in this thread:
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 · **#25**

Kirby wrote:

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 · **#26**

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 · **#27**

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 · **#28**

skydyr wrote:

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 · **#29**

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.

Click Here To Show Diagram Code: [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]

Click Here To Show Diagram Code: [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]

Click Here To Show Diagram Code: [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]

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 · **#30**

Hi Kirby,

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

Kirby · **#31**

Cool. Will make more updates in a bit.

Kirby · **#32**

I made a couple more updates:
* Made numbers thinner.
* Added outline around circles.
* The bug with the $$W tag should be fixed.
* Changed padding of div to have text aligned on bottom if it exists (right now diagrams have 5 pixels of space below the text if you annotate the diagram).
* Changed text color of text for two of the schemes.

Here are examples using the diagram I've been repeating all over the place:

Click Here To Show Diagram Code: [go-beta]$$Wcm1 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]

Click Here To Show Diagram Code: [go-beta]$$Wcm1 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]

Click Here To Show Diagram Code: [go-beta]$$Wcm1 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]

Here are some examples from the Relentless thread that died a little while ago:

Click Here To Show Diagram Code: [go-beta]$$B $$ +---------------------------------------+ $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . O . . . . . . . . . . . . b . . | $$ | . . . , . 0 . . . 6 . 7 . . . X . . . | $$ | . . X . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . 2 . 3 . . . . a . . | $$ | . . . . . 9 . . . . 4 5 . . . . . . . | $$ | . . . 8 . . . X . O . 1 . . . . . . . | $$ | . . X O . X . . O . . . . . . . . . . | $$ | . . . , . X . O . , . . . . . , . c . | $$ | . . O . . . X O X X X . X X X X X . . | $$ | . . . O . X O O X O X . X O O O O O . | $$ | . . . O X . O O O O X O O . . . . . . | $$ | . . . O X . . O X X O O X O X . X . . | $$ | . O O X X . O X X . O X X . . . . . . | $$ | . X X O . X O X O , O O . . O , X . . | $$ | . X O . O X X X . O . X . O . X . X . | $$ | . X O . X O X . . . . . . . . . X O . | $$ | . O . . O O . . . . . . . . . . . . . | $$ +---------------------------------------+[/go-beta]

Click Here To Show Diagram Code: [go-beta]$$B $$ +---------------------------------------+ $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . O . . . . . . . . . . . . b . . | $$ | . . . , . 0 . . . 6 . 7 . . . X . . . | $$ | . . X . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . 2 . 3 . . . . a . . | $$ | . . . . . 9 . . . . 4 5 . . . . . . . | $$ | . . . 8 . . . X . O . 1 . . . . . . . | $$ | . . X O . X . . O . . . . . . . . . . | $$ | . . . , . X . O . , . . . . . , . c . | $$ | . . O . . . X O X X X . X X X X X . . | $$ | . . . O . X O O X O X . X O O O O O . | $$ | . . . O X . O O O O X O O . . . . . . | $$ | . . . O X . . O X X O O X O X . X . . | $$ | . O O X X . O X X . O X X . . . . . . | $$ | . X X O . X O X O , O O . . O , X . . | $$ | . X O . O X X X . O . X . O . X . X . | $$ | . X O . X O X . . . . . . . . . X O . | $$ | . O . . O O . . . . . . . . . . . . . | $$ +---------------------------------------+[/go-beta]

Click Here To Show Diagram Code: [go-beta]$$B $$ +---------------------------------------+ $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . O . . . . . . . . . . . . b . . | $$ | . . . , . 0 . . . 6 . 7 . . . X . . . | $$ | . . X . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . 2 . 3 . . . . a . . | $$ | . . . . . 9 . . . . 4 5 . . . . . . . | $$ | . . . 8 . . . X . O . 1 . . . . . . . | $$ | . . X O . X . . O . . . . . . . . . . | $$ | . . . , . X . O . , . . . . . , . c . | $$ | . . O . . . X O X X X . X X X X X . . | $$ | . . . O . X O O X O X . X O O O O O . | $$ | . . . O X . O O O O X O O . . . . . . | $$ | . . . O X . . O X X O O X O X . X . . | $$ | . O O X X . O X X . O X X . . . . . . | $$ | . X X O . X O X O , O O . . O , X . . | $$ | . X O . O X X X . O . X . O . X . X . | $$ | . X O . X O X . . . . . . . . . X O . | $$ | . O . . O O . . . . . . . . . . . . . | $$ +---------------------------------------+[/go-beta]

---

I looked into making the circles "anti-aliased", but haven't had much success. From what I've read, anti-aliasing, at least using the canvas arc in javascript, depends on the browser - so some browsers might anti-alias, and some might not.

1.) Is thinner text for the stone numbers preferred, or was the old thicker text better?
2.) Any other updates on appearance to these? Are they readable?

If there is more work to do on #1 and #2, above, I'll do that first. Otherwise, I'll move on to adding coordinate functionality.

dfan · **#33**

These are looking nice! I like the orange and brown boards better than the yellow one, which has less contrast.

The stone numbers (and the letters) don't seem perfectly centered. They are slightly higher up than they should be, and perhaps a touch too far left (except for the 10, which is a little too far right). I don't know what system you are using; when I had to do something similar I was able to find the bounding box of the number and place it so that its center aligned exactly with the center of the circle.

Bonobo · **#34**

Quote:

1.) Is thinner text for the stone numbers preferred, or was the old thicker text better?

looks good for me

Quote:

2.) Any other updates on appearance to these? Are they readable?

I was about to write about justification of the numbers, but when the page reappeared after I “liked” your last comment, I saw that dfan already had beat me to it

EdLee · **#35**

Hi Kirby,

It's looking nice. I'm on Safari iOS, tiny iPhone 4S screen.

Feature request, if possible.

Current: zero gaps between rook-adjacent stones:

Click Here To Show Diagram Code: [go]$$B $$ +---------------------------------------+ $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . O . . . . . . . . . . . . . . . | $$ | . . . , . 0 . . . 6 . 7 . . . X . . . | $$ | . . X . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . 2 . 3 . . . . . . . | $$ | . . . . . 9 . . . . 4 5 . . . . . . . | $$ | . . . 8 . . . X . O . 1 . . . . . . . | $$ | . . X O . X . . O . . . . . . . . . . | $$ | . . . , . X . O . , . . . . . , . . . | $$ | . . O . . . X O X X X . X X X X X . . | $$ | . . . O . X O O X O X . X O O O O O . | $$ | . . . O X . O O O O X O O . . . . . . | $$ | . . . O X . . O X X O O X O X . X . . | $$ | . O O X X . O X X . O X X . . . . . . | $$ | . X X O . X O X O , O O . . O , X . . | $$ | . X O . O X X X . O . X . O . X . X . | $$ | . X O . X O X . . . . . . . . . X O . | $$ | . O . . O O . . . . . . . . . . . . . | $$ +---------------------------------------+[/go]

Beta: gaps between rook-adjacent stones: ( also, beta bug: odd numbered stones, :b1:

should be all Black ; even White

)

Click Here To Show Diagram Code: [go-beta]$$B $$ +---------------------------------------+ $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . O . . . . . . . . . . . . . . . | $$ | . . . , . 0 . . . 6 . 7 . . . X . . . | $$ | . . X . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . 2 . 3 . . . . . . . | $$ | . . . . . 9 . . . . 4 5 . . . . . . . | $$ | . . . 8 . . . X . O . 1 . . . . . . . | $$ | . . X O . X . . O . . . . . . . . . . | $$ | . . . , . X . O . , . . . . . , . . . | $$ | . . O . . . X O X X X . X X X X X . . | $$ | . . . O . X O O X O X . X O O O O O . | $$ | . . . O X . O O O O X O O . . . . . . | $$ | . . . O X . . O X X O O X O X . X . . | $$ | . O O X X . O X X . O X X . . . . . . | $$ | . X X O . X O X O , O O . . O , X . . | $$ | . X O . O X X X . O . X . O . X . X . | $$ | . X O . X O X . . . . . . . . . X O . | $$ | . O . . O O . . . . . . . . . . . . . | $$ +---------------------------------------+[/go-beta]

Feature request, if feasible: could you make the gap exactly 1 pixel wide, regardless of the browser ?
Or, could it be a user preference ? Zero pixel, unchanged from current, zero gaps ; or 1 pixel, etc. ?
( I'm not sure which looks better, yet.
I'm pretty sure 1+ pixel gaps start to look strange...

Beta bug:

dfan · **#36**

For what it's worth, I have printed books with both the small-gap style and the stones-touching style. The small-gap style appears to be a bit more popular.

Kirby · **#37**

Will look into the pixel thing. About the bug, not all diagram formats are implemented - initially wanted to see how people liked the look. I'll start to prioritize functionality now.

Maybe tomorrow- have an AYD game tonight.

EdLee · **#38**

Hi Kirby,

No hurry at all -- all this is bonus for us ! Thanks. The beta already looks much better.

What is AYD ?

EdLee · **#39**

Hi Kirby, dfan,

Just for reference. ( Big screenshots -- this post ; Small screenshots -- next post )
( It's understood that there are differences when we're playing -- on a big board -- versus viewing/studying, on smaller boards ).
gIGo (1-pixel ? gaps), 1024x1027:

GoPanda2 (1-pixel ? gaps ; grid lines too heavy ?), Windows 8.1, 1580x1080:

MultiGo (1+ pixel gaps too wide), 902x904:

EdLee · **#40**

Hi Kirby,

For reference, "similar"-sized diagrams ( Firefox, Windows 8.1 ):

Current: zero gaps between rook-adjacent stones:

Click Here To Show Diagram Code: [go]$$B $$ +---------------------------------------+ $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . O . . . . . . . . . . . . . . . | $$ | . . . , . 0 . . . 6 . 7 . . . X . . . | $$ | . . X . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . 2 . 3 . . . . . . . | $$ | . . . . . 9 . . . . 4 5 . . . . . . . | $$ | . . . 8 . . . X . O . 1 . . . . . . . | $$ | . . X O . X . . O . . . . . . . . . . | $$ | . . . , . X . O . , . . . . . , . . . | $$ | . . O . . . X O X X X . X X X X X . . | $$ | . . . O . X O O X O X . X O O O O O . | $$ | . . . O X . O O O O X O O . . . . . . | $$ | . . . O X . . O X X O O X O X . X . . | $$ | . O O X X . O X X . O X X . . . . . . | $$ | . X X O . X O X O , O O . . O , X . . | $$ | . X O . O X X X . O . X . O . X . X . | $$ | . X O . X O X . . . . . . . . . X O . | $$ | . O . . O O . . . . . . . . . . . . . | $$ +---------------------------------------+[/go]

Beta: gaps between rook-adjacent stones: ( also, beta bug with stone colors < Fixed by post 45 > )

Click Here To Show Diagram Code: [go-beta]$$B $$ +---------------------------------------+ $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . O . . . . . . . . . . . . . . . | $$ | . . . , . 0 . . . 6 . 7 . . . X . . . | $$ | . . X . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . 2 . 3 . . . . . . . | $$ | . . . . . 9 . . . . 4 5 . . . . . . . | $$ | . . . 8 . . . X . O . 1 . . . . . . . | $$ | . . X O . X . . O . . . . . . . . . . | $$ | . . . , . X . O . , . . . . . , . . . | $$ | . . O . . . X O X X X . X X X X X . . | $$ | . . . O . X O O X O X . X O O O O O . | $$ | . . . O X . O O O O X O O . . . . . . | $$ | . . . O X . . O X X O O X O X . X . . | $$ | . O O X X . O X X . O X X . . . . . . | $$ | . X X O . X O X O , O O . . O , X . . | $$ | . X O . O X X X . O . X . O . X . X . | $$ | . X O . X O X . . . . . . . . . X O . | $$ | . O . . O O . . . . . . . . . . . . . | $$ +---------------------------------------+[/go-beta]

gIGo 440x441:

Attachment:

gaps_gIGo_440x441.jpg [ 151.96 KiB | Viewed 10104 times ]

GoPanda2 440x440:

Attachment:

gaps_GoPanda2_440x440.jpg [ 156.28 KiB | Viewed 10104 times ]

MultiGo 440x440:

Attachment:

gaps_MultiGo_440x440.jpg [ 165.48 KiB | Viewed 10104 times ]

prototype for new go diagram format

Who is online