Page 3 of 6

Re: HTML+JavaScript diagram builder

Posted: Fri Mar 22, 2013 1:37 am
by Charlie
This is very cool.

Can you add a "Copy to Clipboard" button at the bottom, right of the text output?

Re: HTML+JavaScript diagram builder

Posted: Fri Mar 22, 2013 7:59 am
by HermanHiddema
Charlie wrote:This is very cool.

Can you add a "Copy to Clipboard" button at the bottom, right of the text output?


I looked into this, but it turns out you can't really do this from javascript. I would have to add a Flash component to make it work, which I am reluctant to do. I'll look into other solutions, such as auto-selecting all the diagram code when clicked.

Re: HTML+JavaScript diagram builder

Posted: Fri Mar 22, 2013 8:06 am
by Kirby
I haven't looked into it much, but regarding the ipad issue, http://stackoverflow.com/questions/1079 ... k-for-ipad suggests binding to 'blur' in the javascript. I don't know if this applies to Herman's implementaion (I'm using an ipad now and don't see the source :)).

Re: HTML+JavaScript diagram builder

Posted: Fri Mar 22, 2013 8:09 am
by Kirby
Another workaround that's being referenced is to use onclick="".

Again, I don't know if this applies here, but it seems worth mentioning: http://stackoverflow.com/questions/1016 ... rk-on-ipad

Finally, one more idea: http://stackoverflow.com/questions/1361 ... art-events

Re: HTML+JavaScript diagram builder

Posted: Fri Mar 22, 2013 8:24 am
by HermanHiddema
@Kirby: Thanks for the links. The main problem right now is that I don't have an iPad to test with, really. I've installed a library that binds the tablet touch events to fire the relevant mouse click events, but apparently it doesn't work (this library is also recommended in one of your links, BTW). I'll try to get hold of a tablet somewhere, but until then I'm working blind. :)

Re: HTML+JavaScript diagram builder

Posted: Fri Mar 22, 2013 11:39 am
by tj86430
If I change the color from top-right, all the numbered stones already on board invert their color. Non-numbered stones stay the same. Is this intentional?

Re: HTML+JavaScript diagram builder

Posted: Fri Mar 22, 2013 3:29 pm
by HermanHiddema
tj86430 wrote:If I change the color from top-right, all the numbered stones already on board invert their color. Non-numbered stones stay the same. Is this intentional?


Yes. The way the diagram format works, the colors have to alternate. You cannot have :b1: and :b2: on the same board. If 1 is black, 2 is white. The top right color choice only changes whether odd move are black, and even moves white, or vice-versa, and therefore all the moves already on the board switch color too.

Re: HTML+JavaScript diagram builder

Posted: Fri Mar 22, 2013 3:31 pm
by HermanHiddema
ez4u wrote:
HermanHiddema wrote:
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.

Yes I did. I also tried using Chrome, Opera Mini, Atomic Web Browser, and Mercury (iOS alternatives). None work.


I tried it today on a Samsung Galaxy Tab 7.0, and that works, so it seems to be an iPad/iOS specific problem not immediately related to the touch vs. click difference. I'll try to get my hands on an iPad for testing.

Re: HTML+JavaScript diagram builder

Posted: Fri Mar 22, 2013 3:57 pm
by HermanHiddema
tj86430 wrote:One more suggestion: How about adding the "prisoners": line (or did I miss that too)?


Yes, good point, I need to add a field that allows you to set the caption.

Re: HTML+JavaScript diagram builder

Posted: Fri Mar 22, 2013 4:29 pm
by ez4u
This is what the page looks like in Safari on the iPad. As mentioned, only the drop-down boxes 'work' in that they drop down and I can select a number. But nothing else functions. Also note that the handles for adjusting the board size do not appear at all.
image.jpg
image.jpg (155.52 KiB) Viewed 8352 times

Re: HTML+JavaScript diagram builder

Posted: Fri Mar 22, 2013 5:06 pm
by Kirby
If you don't want to buy an ipad for testing, maybe you can use the ipad dev kit with xcode to test it out with the emulator.

Re: HTML+JavaScript diagram builder

Posted: Fri Mar 22, 2013 11:02 pm
by Kirby
HermanHiddema wrote:
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:


Is this to say that you would not be opposed to L19 using your diagram builder directly?

Re: HTML+JavaScript diagram builder

Posted: Sat Mar 23, 2013 4:10 am
by HermanHiddema
Kirby wrote:Is this to say that you would not be opposed to L19 using your diagram builder directly?

Yes.

You can find the source on github:
https://github.com/HermanHiddema/diagrammer

And I've just put an MIT licence on it, which basically means: Do whatever you want with it, no restrictions.

Re: HTML+JavaScript diagram builder

Posted: Sat Mar 23, 2013 6:51 am
by Bonobo
HermanHiddema wrote:[..] The way the diagram format works, the colors have to alternate. You cannot have :b1: and :b2: on the same board. If 1 is black, 2 is white. The top right color choice only changes whether odd move are black, and even moves white, or vice-versa, and therefore all the moves already on the board switch color too.
Forgive the n00b question (I’ve never created diagrams, only enjoyed them)—how does this handle passing?

Re: HTML+JavaScript diagram builder

Posted: Sat Mar 23, 2013 6:57 am
by Bonobo
HermanHiddema wrote:
Kirby wrote:Is this to say that you would not be opposed to L19 using your diagram builder directly?

Yes.

You can find the source on github:
https://github.com/HermanHiddema/diagrammer

And I've just put an MIT licence on it, which basically means: Do whatever you want with it, no restrictions.
:bow: