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

Go Diagram Graphics
http://prod.lifein19x19.com/viewtopic.php?f=14&t=8033
Page 1 of 2

Author:  Kirby [ Wed Mar 06, 2013 11:36 pm ]
Post subject:  Go Diagram Graphics

What do people think about revamping the graphics for the images generated for the go diagrams? Right now we use a kind of standard, since Senseis Library, for example, uses the same type of code.

But the diagrams look kind of old to me. I wonder if it'd be cooler to get some better graphics for the images (but keep the diagram code input format the same).

What do L19ers think?

Author:  EdLee [ Wed Mar 06, 2013 11:46 pm ]
Post subject: 

Kirby, how about an option for people who want to keep the current graphics completely unchanged (default),
and a new option for prettier graphics (could be a setting under User Preferences) ? :)
Attachment:
GoPanda2.jpg
GoPanda2.jpg [ 73.35 KiB | Viewed 19321 times ]

Author:  PeterPeter [ Thu Mar 07, 2013 3:16 am ]
Post subject:  Re: Go Diagram Graphics

I like the current graphics. They are very clear, which is the main thing.

Author:  ez4u [ Thu Mar 07, 2013 3:56 am ]
Post subject:  Re: Go Diagram Graphics

Rather than an improvement in the appearance, I would ask whether it is possible to add some sort of widget to construct a diagram. Making diagrams from scratch isn't much fun, but I find diagrams much easier to discuss than SGF files. It would be great to create diagrams with a mouse (not to mention a touch screen)!

Author:  Kirby [ Thu Mar 07, 2013 8:11 am ]
Post subject:  Re: Go Diagram Graphics

ez4u wrote:
Rather than an improvement in the appearance, I would ask whether it is possible to add some sort of widget to construct a diagram. Making diagrams from scratch isn't much fun, but I find diagrams much easier to discuss than SGF files. It would be great to create diagrams with a mouse (not to mention a touch screen)!


This is a very interesting idea. I am thinking about how this could work. Currently, the main method of input when a user makes a post is to use a text box. We have buttons for various options, but it comes down to making a text box.

To make something interactive might mean adjusting this method of input.

I'll have to think about this a little bit more.

Author:  skydyr [ Thu Mar 07, 2013 8:27 pm ]
Post subject:  Re: Go Diagram Graphics

Honestly a stand-alone editor on a separate page that spits out the diagram code or something might be enough.

Author:  hyperpape [ Fri Mar 08, 2013 5:22 am ]
Post subject:  Re: Go Diagram Graphics

Yeah, I was messing around with code to pop up an eidogo window and use it to create diagrams. What you want is also the ability to use an existing diagram as the base--that is, open the editor with that diagram's stones already entered.

Author:  Kirby [ Fri Mar 08, 2013 10:34 pm ]
Post subject:  Re: Go Diagram Graphics

hyperpape wrote:
Yeah, I was messing around with code to pop up an eidogo window and use it to create diagrams. What you want is also the ability to use an existing diagram as the base--that is, open the editor with that diagram's stones already entered.


That kind of feature sounds a lot easier to implement. You could have a button to reply to a diagram, for example, which would be the same as a reply, but have the text of the diagram already populated.

Author:  jts [ Sat Mar 09, 2013 12:18 am ]
Post subject:  Re: Go Diagram Graphics

Sensei's already has this tool:

http://senseis.xmp.net/tools/sgf2diagram.php

Maybe what we want is a tag like [sgf2diagram] that will take an sgf file and spit out the diagram? That wouldn't be as helpful for editing other people's diagrams, or making diagrams from scratch, but it seems like ez4u originally had in mind situations where he wanted to create a variation in an sgf and then display it as a diagram.

Author:  Bill Spight [ Sat Mar 09, 2013 12:42 am ]
Post subject:  Re: Go Diagram Graphics

jts wrote:
Sensei's already has this tool:

http://senseis.xmp.net/tools/sgf2diagram.php

Maybe what we want is a tag like [sgf2diagram] that will take an sgf file and spit out the diagram? That wouldn't be as helpful for editing other people's diagrams, or making diagrams from scratch, but it seems like ez4u originally had in mind situations where he wanted to create a variation in an sgf and then display it as a diagram.


People may have noticed that of late I have relied more and more on SGFs and less and less on diagrams. At first, it was a practical matter. Starting from an SGF file, instead of converting it to one or more diagrams, it was quicker and easier just to embed the SGF file. I like the look of diagrams better, though. But once I had started doing that, I felt freer to include more variations and comments in the SGF files. Now I go back and forth, depending mostly on what I want to show and how, but also on convenience. For instance, I presented my recent tsumego problem in an SGF file, but discussed it with diagrams. :)

Author:  PeterPeter [ Fri Mar 22, 2013 12:03 pm ]
Post subject:  Re: Go Diagram Graphics

On a vaguely related point, if a post contains more than one diagram, it is sometimes not clear whether a paragraph of text relates to the previous diagram, or the next one. Is there a way of linking a diagram to a paragraph, such as captioning it, or aligning the paragraph to the right of the diagram?

Author:  schultz [ Fri Mar 22, 2013 12:59 pm ]
Post subject:  Re: Go Diagram Graphics

PeterPeter wrote:
On a vaguely related point, if a post contains more than one diagram, it is sometimes not clear whether a paragraph of text relates to the previous diagram, or the next one. Is there a way of linking a diagram to a paragraph, such as captioning it, or aligning the paragraph to the right of the diagram?

You meaning something like this?

Click Here To Show Diagram Code
[go]$$c Hey PeterPeter! This is a label for the diagram.\nYou can even put newlines in it!
$$ -------------
$$ | . . . . . .
$$ | . . . . . .
$$ | . . . . . .
$$ | . . . , . .
$$ | . . . . . .
$$ | . . . . . .[/go]


Not everyone uses this method, though, because it's a little easier to just put the text outside the diagrams. Mostly comes down to a conventions thing. But I do understand your request. "Does this person put the comments after the diagram? Or before? Wait...which diagram are we talking about?"

Author:  hyperpape [ Fri Mar 22, 2013 1:10 pm ]
Post subject:  Re: Go Diagram Graphics

schultz wrote:
PeterPeter wrote:
On a vaguely related point, if a post contains more than one diagram, it is sometimes not clear whether a paragraph of text relates to the previous diagram, or the next one. Is there a way of linking a diagram to a paragraph, such as captioning it, or aligning the paragraph to the right of the diagram?

You meaning something like this?

Click Here To Show Diagram Code
[go]$$c Hey PeterPeter! This is a label for the diagram.\nYou can even put newlines in it!
$$ -------------
$$ | . . . . . .
$$ | . . . . . .
$$ | . . . . . .
$$ | . . . , . .
$$ | . . . . . .
$$ | . . . . . .[/go]


Not everyone uses this method, though, because it's a little easier to just put the text outside the diagrams. Mostly comes down to a conventions thing. But I do understand your request. "Does this person put the comments after the diagram? Or before? Wait...which diagram are we talking about?"
I sometimes use it for short comments "Black is better", but I don't think it works nicely for long comments like we often wish to make.

Author:  schultz [ Fri Mar 22, 2013 1:36 pm ]
Post subject:  Re: Go Diagram Graphics

hyperpape wrote:
schultz wrote:
...

Not everyone uses this method, though, because it's a little easier to just put the text outside the diagrams. Mostly comes down to a conventions thing. But I do understand your request. "Does this person put the comments after the diagram? Or before? Wait...which diagram are we talking about?"
I sometimes use it for short comments "Black is better", but I don't think it works nicely for long comments like we often wish to make.

I agree, just trying to help show some of the features that PeterPeter may not have been aware of.

From his initial question, I'm still not sure if he's talking about his own diagrams, or seeking change within the entirety of the forums to make it easier to associate other peoples paragraph explanations and their diagrams. I'm assuming the latter - and that's not an easy fix. That comes down more to the conventions of how people format their own posts.

Author:  PeterPeter [ Fri Mar 22, 2013 1:39 pm ]
Post subject:  Re: Go Diagram Graphics

schultz wrote:
From his initial question, I'm still not sure if he's talking about his own diagrams, or seeking change within the entirety of the forums to make it easier to associate other peoples paragraph explanations and their diagrams. I'm assuming the latter - and that's not an easy fix. That comes down more to the conventions of how people format their own posts.

Yes, the latter.

I suspect the technical side of it is much easier than everyone remembering to use it.

Author:  oca [ Wed Mar 12, 2014 7:52 am ]
Post subject:  Re: Go Diagram Graphics

Hello,

regarding to go diagram, I'm currently working on a quick javascript/html5 hack wich allow me to play them.
still very buggy, but you may get an idea here :

*** WARN, works with CHROME and Firefox only ***

http://picshell.ovh.org/go/test.html


click on next / prev to play the "numbered" moves
click on the diagram to add a black stone (if click on a black stone, the color toggle)
remove a stone not done yet...


I'have also done a chrome extension which allows me to play all the diagram of the forum the same way...

Image

I may share the code or give more explanations if someone is interested.

Author:  Bonobo [ Wed Mar 12, 2014 3:36 pm ]
Post subject:  Re: Go Diagram Graphics

oca wrote:
[..]

I'have also done a chrome extension which allows me to play all the diagram of the forum the same way... [..]

I may share the code or give more explanations if someone is interested.
Very interesting. I’m not a coder but I might like such an extension :-)

Greetz, Tom

Author:  oca [ Fri Mar 14, 2014 3:33 am ]
Post subject:  Re: Go Diagram Graphics

So here is the extension for chrome.

What it does :

After installing the extension in Chrome, when you click on the link below go diagram "Click Here To Show Diagram Code", you will see another diagram with buttons that allow to play the "numbered" moves one at time.

The diagram is also "playable", the behaviour is a bit too basic but that's better than nothing... if you click on an empty place, that will place a black stone, if you click on a black stone, it will toggle to a white stone, and if you click a white stone, it will be removed...

A warn first
Once the extension is installed, keep in mind that the rendered "playable" diagram is not under the responsability of "life in 19x19", so if there is something wrong in the diagram and you talk about that, people may even not know what you are talking about...

How to install :

You first need to donwload the extension for chrome, which come in a file called "godiag.crx"

but before you go the download page, I need to tell you that I wrote the plugin myself and I can grant you that it is free from any commercial, spyware, malware or what ever you may not like .. only go stuff inside.

The crx file is a zip file which can be opened with editor like "winzip or 7zip" so you can verify that for yourself in the code itself (but you will then need some understanding of javascript :scratch: ...)

Well, if your still interested :tmbup: ... here is the link to the plugin : (I tryied to attache the file to that post but .crx files are not accepted... so I just put a quick link on a web page of mine).

http://picshell.ovh.org/go/

Just click on the link, chrome may tell you that it can't directly install it from that site, but that's ok, you just need to get the file for now and then follow these steps :

once you got the file, go to chrome extension page (just type "chrome://extensions/" as a url to go there) and drop the "godiag.crx" file to the extension page, that's it !

How to uninstall :
You can remove it whenever you want from the extension page of chrome, by clicking on the trashcan icon.

Are there known problems
The extension will run on your computer (not on the server side, which even doestn't know you are using an extension...), so it will not slow down the server. I didn't noticed any problem using it myself. The extension is written to be the lightest as possible so it should not disturbe your journey, even with page that contains multiple diagrams.

Limitations
The extension doesn't cover all the functionalities of the go diagram (and will probably never do).
That's close enougth for me at least...simple one should work just fine.
Feel free to tell me if something is wrong or missing.

Hope you will like it.


PS : to admins, Hope it's ok for you too as nothing append on the server side... but if you just don't like that idea of plugin, for any reason, just tell me and I will remove everything related to this plugin.

Author:  Jordus [ Fri Mar 14, 2014 4:18 am ]
Post subject:  Re: Go Diagram Graphics

I have no problem with the plug-in whatsoever. I'd actually like to take a look at the code if you are willing to show it.

:salute: :tmbup:

Author:  oca [ Fri Mar 14, 2014 4:54 am ]
Post subject:  Re: Go Diagram Graphics

Jordus wrote:
I have no problem with the plug-in whatsoever. I'd actually like to take a look at the code if you are willing to show it.


thanks, that's nice ! here are some more technical details :

The plugin contains two files :

- manifest.json is a manifest that tells chrome on what url the plugin is active
- script.js is a script file (javascript) that do the job.

Code can be seen here (I just changed extension to .txt so that the code will appear directly in the browser)

http://picshell.ovh.org/go/manifest.txt
http://picshell.ovh.org/go/script.txt

Note that you can also see the code by just "unziping" the crx file is actually just a plain zip file containing these two files.

There are not that much to say about the manifest file.

For the script file, it was a bit more tricky to write, as I had to "inject" my javascript function in the DOM of the page, that's why it's so difficult to read with all that '\' stuff at the end of lines

A better way to see that code and try it is to go here

http://picshell.ovh.org/go/test.html

and then use the " show code source" option of chrome to see the code.

This code is the same in a "non plugin" form. (Actully I write my code using that file, and then convert it to the plugin form using another transformation script)

basicly, the script is working like that :

find all html "code" tags, if they contains a "[go]" tag, then process their content to draw a new goban with the added functionality using an html5 canvas .

Page 1 of 2 All times are UTC - 8 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/