HTML+JavaScript diagram builder

[Charlie]

This is very cool.

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

[HermanHiddema]

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.

[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 ).

[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

[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.

[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?

[HermanHiddema]

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 and 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.

[HermanHiddema]

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.

[HermanHiddema]

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.

[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 (155.52 KiB) Viewed 8348 times

[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.

[Kirby]

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.

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

[HermanHiddema]

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.

[Bonobo]

[..] The way the diagram format works, the colors have to alternate. You cannot have and 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?

[Bonobo]

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.