HTML+JavaScript diagram builder

[hyperpape]

How long until Herman realizes he's creating an SGF viewer?

https://github.com/HermanHiddema/sgfparser/tree/v0.1

You are replacing so much of the half-finished crap I have on my computer.

[HermanHiddema]

YAMU! (Yet Another Major Update).

Now with:
- visual coordinates
- edit the board (remove intersections to create holes).
- set starting move number
- follow-up diagrams start at the next move after the highest in the current diagram
- all round improvements to the interface interaction
- labels move up automatically

To change the move number, first move color or first move number, click the move tool again after selecting it for an options drop-down. Same to change the label.

http://hiddema.nl/diagrammer/

Nearing feature completion now. Most important thing to do: initialize from a pasted diagram. Watch this space

Oh, and of course bug reports and feature requests are still welcome!

[Mage]

Woot ! The updates look great !

I was also curious about your "SGFparser". Is it a cross-platform SGF viewer under development ?

[HermanHiddema]

Woot ! The updates look great !

I was also curious about your "SGFparser". Is it a cross-platform SGF viewer under development ?

Well, it isn't really anything yet. I made it because I was thinking about making an SGF viewer/editor, or maybe a game database search tool. I thought I'd start off with an important core component and worry about interface issues later. Maybe something based on Tk, maybe Pygame, maybe something web-based with Django. I don't really have enough time to give a project like that the attention it deserves, but now it might come in handy as a back-end component to the diagram editor to create diagrams from SGF.

Anyway, I've just added an MIT license to the SGF parser as well, in case anyone wants to use it to make something cool.

[ez4u]

YAMU! (Yet Another Major Update).

Now with:
- visual coordinates
- edit the board (remove intersections to create holes).
- set starting move number
- follow-up diagrams start at the next move after the highest in the current diagram
- all round improvements to the interface interaction
- labels move up automatically

To change the move number, first move color or first move number, click the move tool again after selecting it for an options drop-down. Same to change the label.

http://hiddema.nl/diagrammer/

Nearing feature completion now. Most important thing to do: initialize from a pasted diagram. Watch this space

Oh, and of course bug reports and feature requests are still welcome!

It now half-way works on my iPad. Was that deliberate? I can input stones (double tapping for white), numbered stones, markers, and captions. I can not change the color of numbered stones. The drop down menu appears but tapping the change buttons does nothing. The help menu does not appear. What still kills the whole thing is that highlighting the diagram and 'copying' does not, in fact, put anything on the iPad clip board.

Herman iPad1.PNG (121.55 KiB) Viewed 9004 times

[HermanHiddema]

It now half-way works on my iPad. Was that deliberate? I can input stones (double tapping for white), numbered stones, markers, and captions. I can not change the color of numbered stones. The drop down menu appears but tapping the change buttons does nothing. The help menu does not appear. What still kills the whole thing is that highlighting the diagram and 'copying' does not, in fact, put anything on the iPad clip board.

It was not deliberate, but some of the code clean-up I did may have helped.

I've now added a few additional fixes that may fix the iPad bugs:

1. It seems that adding "cursor:pointer" to elements that are supposed to be clickable helps iOS figure out whether a tap should mean "click" or "hover", so I've liberally sprinkled that on anything that should be clickable.

2. As to the copying, turns out iOS has a known bug where it can't copy from a readonly textarea I've added a bit of browser detection to the code that removes the readonly attribute from the textarea under iOS. Downside is that it'll now probably pop up a keyboard when you click the textarea, but we'll call that the lesser of two evils

Could you give it a spin and see if it works now?

[HermanHiddema]

I tried it on a friend's iPhone, and there the "Show Help" as well as copying the output did work, so hopefully it'll work on the iPad too now.

[ez4u]

I tried it on a friend's iPhone, and there the "Show Help" as well as copying the output did work, so hopefully it'll work on the iPad too now.

Let's see...

$$B Directly generated - Can't change the color...
$$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . , . . . . . X . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . T . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . 2 . . |
$$ | . . . . . . . . . . . . . . . 0 . . . |
$$ | . . S , . . . . . , . . . . . 6 1 . . |
$$ | . . . . . . . . . . . . . . 8 7 9 . . |
$$ | . . . C . . . . . . . . . . . 4 5 . . |
$$ | . . . . . . . . . . . . . . . . 3 . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . , . . . . . , X . . |
$$ | . . . . . . . . . . . . . . X . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ +---------------------------------------+

Click Here To Show Diagram Code

[go]$$B Directly generated - Can't change the color...
$$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . , . . . . . X . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . T . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . 2 . . |
$$ | . . . . . . . . . . . . . . . 0 . . . |
$$ | . . S , . . . . . , . . . . . 6 1 . . |
$$ | . . . . . . . . . . . . . . 8 7 9 . . |
$$ | . . . C . . . . . . . . . . . 4 5 . . |
$$ | . . . . . . . . . . . . . . . . 3 . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . , . . . . . , X . . |
$$ | . . . . . . . . . . . . . . X . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ +---------------------------------------+[/go]

$$W Amending by hand...
$$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . , . . . . . X . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . T . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . 2 . . |
$$ | . . . . . . . . . . . . . . . 0 . . . |
$$ | . . S , . . . . . , . . . . . 6 1 . . |
$$ | . . . . . . . . . . . . . . 8 7 9 . . |
$$ | . . . C . . . . . . . . . . . 4 5 . . |
$$ | . . . . . . . . . . . . . . . . 3 . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . , . . . . . , X . . |
$$ | . . . . . . . . . . . . . . X . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ +---------------------------------------+

Click Here To Show Diagram Code

[go]$$W Amending by hand...
$$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . , . . . . . X . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . T . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . 2 . . |
$$ | . . . . . . . . . . . . . . . 0 . . . |
$$ | . . S , . . . . . , . . . . . 6 1 . . |
$$ | . . . . . . . . . . . . . . 8 7 9 . . |
$$ | . . . C . . . . . . . . . . . 4 5 . . |
$$ | . . . . . . . . . . . . . . . . 3 . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . , . . . . . , X . . |
$$ | . . . . . . . . . . . . . . X . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ +---------------------------------------+[/go]

The Show Help menu now works.

[HermanHiddema]

I tried it on a friend's iPhone, and there the "Show Help" as well as copying the output did work, so hopefully it'll work on the iPad too now.

Let's see...

Can't change the color...

The Show Help menu now works.

Ok, so color change still needs to be fixed.

On the iPhone I managed to change the viewport, but it wasn't very easy. I'll look into improvements on that front.

Also it showed no handles for the viewport, so I still need to look into that.

Anyway, it's come a long way on the iPad, which is good

In the future, I hope to dive into tablet support some more. For example, using pinch to resize the viewport would be cool. And there are probably other ways in which I can use the tablet's features better.

[ez4u]

...

On the iPhone I managed to change the viewport, but it wasn't very easy. I'll look into improvements on that front.

Also it showed no handles for the viewport, so I still need to look into that...

Although the handles are invisible, they work...

$$B Invisible handles
$$ +--------------------
$$ | . . . . . . . . . .
$$ | . . . . . . . . . .
$$ | . . . . . O . . . .
$$ | . . . X . . . . . ,
$$ | . . . . . . . . . .
$$ | . . X . . . . . . .
$$ | . . . . . . . . . .
$$ | . . . . . . . . . .
$$ | . . . . . . . . . .
$$ | . . . , . . . . . ,

Click Here To Show Diagram Code

[go]$$B Invisible handles
$$ +--------------------
$$ | . . . . . . . . . .
$$ | . . . . . . . . . .
$$ | . . . . . O . . . .
$$ | . . . X . . . . . ,
$$ | . . . . . . . . . .
$$ | . . X . . . . . . .
$$ | . . . . . . . . . .
$$ | . . . . . . . . . .
$$ | . . . . . . . . . .
$$ | . . . , . . . . . ,[/go]

When you touch and drag the handle, the screen updates more slowly than on a PC with a mouse. However, it functions quite well. Of course the iPad screen is much larger than an iPhone so that may make it easier.

[macelee]

I am quite impressed by this work. It seems this script is the perfect tool to generate SL diagram code from scratch, while http://senseis.xmp.net/tools/sgf2diagram.php can be used to generate diagrams from existing SGF files.

I am trying to complement these works by allowing diagrams to be generated from professional games hosted at Go4Go.net so that people can discuss pro game positions more easily. This is certainly a function I find very useful.

After some preliminary study, I found that the diagrams can be generated very easily from the server side. This is because I already have existing code to generate the thumbnail board images used throughout the Go4Go site. [edit removed a broken URL]

The next step is to integrate this with the existing page, such as http://www.go4go.net/go/games/sgfview/20081 showing the same game. I have relatively little experience writing client side code using Javascript or JQuery. I wonder if anyone can suggest a good way forward in term of presentation and client-side coding. Maybe it is possible to reuse some code from HermanHiddema's work.

[macelee]

Following my previous post and some feedback, I believe after all it is a better idea to generate the diagram code from client side. I have just created a new SGF viewer for Go4Go.net and implemented the "diagram code" in it. See the attached screen captures. I hope this works well and complements the existing works.

[*] Generate diagram from existing SGF files: http://senseis.xmp.net/tools/sgf2diagram.php
[*] Create diagram from scratch (HermanHiddema's work): http://hiddema.nl/diagrammer/
[*] Generate diagram from pro games: http://www.go4go.net (on any game page)

screen1.png (138.72 KiB) Viewed 8794 times

screen2.png (102.75 KiB) Viewed 8794 times

[HermanHiddema]

One of the features that is high on my todo list is to accept diagram code as input for editing. Once that is done, you could embed my editor and open the diagram code directly in the editor, allowing people to easily edit it before using it.

[macelee]

One of the features that is high on my todo list is to accept diagram code as input for editing. Once that is done, you could embed my editor and open the diagram code directly in the editor, allowing people to easily edit it before using it.

Nice. I was about to suggest changing your front page to dynamic, accepting data POSTed to it. The integration should be easy.

[jts]

Thanks again to both of you for workking on this. One note about the SL sgf2diagram tool: it only works on 19x19 and puts 9x9 in the top left corner of a 19x19 board. If this is an easy fix, you might want to fix the L19 tool before using it on a permanent basis as part of the diagram tool. Thanks!