Life In 19x19
http://www.lifein19x19.com/

HTML+JavaScript diagram builder
http://www.lifein19x19.com/viewtopic.php?f=18&t=8124		 Page 1 of 5
Author:  HermanHiddema [ Wed Mar 20, 2013 2:39 pm ]
Post subject:  HTML+JavaScript diagram builder
There was some talk recently of people wishing there was an easier way to create diagrams.

Presenting: http://hiddema.nl/diagrammer/

(beta version, no guarantees, this was only tested in Firefox)

Easy access to the full scala of what is available in the SL diagram format used here, with easy to copy/paste output.

Try it out!

Some tips:
- You can drag any corner or edge of the board to resize the view port, thus creating partial board diagrams.
- Clicking the stone with 1 on it on the far right of the toolbar changes the starting color.
- Move numbers move up automatically (but can be set manually). Right-click the last move to undo it.
- When the tool is the blac stone, right click makes white stones, and vice-versa.

Also, if you want to try a different size board, add #WxH after the url (e.g. http://hiddema.nl/diagrammer/#9x9 for 9x9)

Bug reports & feature requests welcome!

Future features already planned:
- Change the starting move number
- Easier board size change
- Paste existing diagrams to initialize
- Turn on/off coordinates markers
- Maybe create diagrams from SGF (for now, there is http://senseis.xmp.net/tools/sgf2diagram.php for that).

Let me know what you think! :)
Author:  mw42 [ Wed Mar 20, 2013 5:40 pm ]
Post subject:  Re: HTML+JavaScript diagram builder
That's really fantastic. Thanks!
Author:  ez4u [ Wed Mar 20, 2013 7:05 pm ]
Post subject:  Re: HTML+JavaScript diagram builder
Wonderful! :clap: :tmbup: :clap: :tmbup: Just what I had in mind.

Quickie - How about a 'clear all' button for the idiots among us? :blackeye:

Not so quickie maybe - What would it take to make it work with the touch screen on an iPad?
Author:  Kirby [ Wed Mar 20, 2013 7:42 pm ]
Post subject:  Re: HTML+JavaScript diagram builder
You, my friend, are awesome.
Author:  Mage [ Wed Mar 20, 2013 10:12 pm ]
Post subject:  Re: HTML+JavaScript diagram builder
Thanks ! It's very nice :clap:
Author:  tj86430 [ Thu Mar 21, 2013 1:13 am ]
Post subject:  Re: HTML+JavaScript diagram builder
Excellent!

Some suggestions for further development, if I may:
- possibility to "import" a diagram in output format
- labels could (optionally) increment a->b->c etc as markers do
- stones without labels could (optionally) alternate colors (as stones with markers do)
Author:  tj86430 [ Thu Mar 21, 2013 1:15 am ]
Post subject:  Re: HTML+JavaScript diagram builder
ez4u wrote:
Quickie - How about a 'clear all' button for the idiots among us? :blackeye:

And by "idiot" you mean those who don't know that reloading the page accomplishes that?
Author:  ez4u [ Thu Mar 21, 2013 1:51 am ]
Post subject:  Re: HTML+JavaScript diagram builder
tj86430 wrote:
ez4u wrote:
Quickie - How about a 'clear all' button for the idiots among us? :blackeye:

And by "idiot" you mean those who don't know that reloading the page accomplishes that?

Exactly! For people like me. :salute:
Author:  HermanHiddema [ Thu Mar 21, 2013 2:18 am ]
Post subject:  Re: HTML+JavaScript diagram builder
ez4u wrote:
Wonderful! :clap: :tmbup: :clap: :tmbup: Just what I had in mind.

Quickie - How about a 'clear all' button for the idiots among us? :blackeye:

Not so quickie maybe - What would it take to make it work with the touch screen on an iPad?


Well, first I'd have to get an iPad. :lol:

But seriously, I'll put it on the list and look into it.
Author:  HermanHiddema [ Thu Mar 21, 2013 2:21 am ]
Post subject:  Re: HTML+JavaScript diagram builder
tj86430 wrote:
Excellent!

Some suggestions for further development, if I may:
- possibility to "import" a diagram in output format
- labels could (optionally) increment a->b->c etc as markers do
- stones without labels could (optionally) alternate colors (as stones with markers do)


- Import was already on the wish list. That one is important, as often people will be responding to other's diagrams.
- Incrementing labels automatically sounds like a good idea, I'll put it on the list.
- I prefer the current left click -> black, right click -> white thing, but I could make it a preference setting.
Author:  xed_over [ Thu Mar 21, 2013 3:26 am ]
Post subject:  Re: HTML+JavaScript diagram builder
HermanHiddema wrote:
Some tips:
- You can drag any corner or edge of the board to resize the view port, thus creating partial board diagrams.
- Clicking the stone with 1 on it on the far right of the toolbar changes the starting color.
- Move numbers move up automatically (but can be set manually). Right-click the last move to undo it.
- When the tool is the blac stone, right click makes white stones, and vice-versa.

Also, if you want to try a different size board, add #WxH after the url (e.g. http://hiddema.nl/diagrammer/#9x9 for 9x9)

can you put these tips directly on that page?
Author:  tj86430 [ Thu Mar 21, 2013 3:34 am ]
Post subject:  Re: HTML+JavaScript diagram builder
HermanHiddema wrote:
- I prefer the current left click -> black, right click -> white thing

That's fine too, I had missed that.

Of course, having more preferences is always positive (as long as they are easy to find and use)
Author:  murksomat [ Thu Mar 21, 2013 4:02 am ]
Post subject:  Re: HTML+JavaScript diagram builder
Great tool, but I can't use the pasted output because there are linefeed in there. I am using firefox on a linux system.
Author:  HermanHiddema [ Thu Mar 21, 2013 4:33 am ]
Post subject:  Re: HTML+JavaScript diagram builder
@xed_over: I've added a "show help" tab at the top.

@murksomat: I see what you mean. Fixed!

@ez4u: Can you check whether it works on the iPad now?
Author:  daal [ Thu Mar 21, 2013 5:19 am ]
Post subject:  Re: HTML+JavaScript diagram builder
This is really very good. Next step is to integrate it into L19...
Author:  HermanHiddema [ Thu Mar 21, 2013 5:39 am ]
Post subject:  Re: HTML+JavaScript diagram builder
daal wrote:
This is really very good. Next step is to integrate it into L19...


Yes, this is one of the goals of the project. Because it is completely written in HTML+JS, it can easily be integrated into any site via some sort of overlay or popup. Good option both for L19 and for Sensei's Library. :tmbup:
Author:  lobotommy [ Thu Mar 21, 2013 7:19 am ]
Post subject:  Re: HTML+JavaScript diagram builder
Hi Herman, very nice thing :)

However does not work on mobile WebKit internet browsers (ipad/iphone, android phones/tablets probably too because everything are webkit now).
Author:  ez4u [ Thu Mar 21, 2013 7:28 am ]
Post subject:  Re: HTML+JavaScript diagram builder
Still no action on the iPad. The drop-down lists for labels and moves do drop down when touched. However, nothing else on the page reacts, not even the 'show help' tab.
Author:  HermanHiddema [ Thu Mar 21, 2013 7:54 am ]
Post subject:  Re: HTML+JavaScript diagram builder
ez4u wrote:
Still no action on the iPad. The drop-down lists for labels and moves do drop down when touched. However, nothing else on the page reacts, not even the 'show help' tab.


Just to make sure: Did you do a reload on the page? Otherwise it might use a cached version.
Author:  murksomat [ Thu Mar 21, 2013 8:00 am ]
Post subject:  Re: HTML+JavaScript diagram builder
HermanHiddema wrote:
@xed_over: I've added a "show help" tab at the top.

@murksomat: I see what you mean. Fixed!



Thanks but,I forgot the word "NO". I can't use the output, because there are NO linefeeds!

After pasting, it looks like this

Code:
$$W $$ +---------------------------------------+ $$ | . . . . . . . . . . . . . . . . . . . | $$


and I need:
Code:
$$W $$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
Page 1 of 5 All times are UTC - 8 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/