Graphics

7 replies [Last post]
Keith Moss
Offline
White BeltYellow BeltGreen BeltRed BeltBlack Belt
Joined: 2013-06-15
Posts:
Points: 99
I have a need for a very simple graphics front for a few AV’s but this is my weak area, I’m rubbish at graphics. I took a look for a solution and found Kinetic.js and after hacking one of their examples thought that I had the solution only to there is a problem with style sheets. Is their anyone who knows why they their own version of style sheets and how do convert a standard css file to a kss file. If nobody knows the answer to that problem perhaps you could enlighten me as to the capabilities of the graph API and whether it supports dragging the nodes of a graph. And my final question relates to the documentation for JSAV where do I get /build/jsav-min.js please Regards Keith Moss
shaffer
shaffer's picture
Offline
White BeltYellow BeltGreen BeltRed BeltBlack Belt
Joined: 2009-05-28
Posts:
Points: 2019
Re: Graphics
Unfortunately, I do not know anything about Kinetic, and can’t answer your question regarding their CSS files.

But I can help you with JSAV (which I do recommend that you use).

If you pull JSAV from its github repository, the documentation is at doc/api.html
Or you can see it at our public developer link: http://algoviz.org/OpenDSA/dev/OpenDSA/JSAV/doc/api.html

We don’t distribute derived files with the sourcecode. You need to run "make" to generate the consolidated and minimized jsav-min.js file.

Alternatively, you can just link to http://algoviz.org/OpenDSA/dev/OpenDSA/JSAV/build/JSAV-min.js for the latest "developer’s" release, or to 
http://algoviz.org/OpenDSA/JSAV/build/JSAV-min.js for the "stable" release.

Since you ask about dragging nodes of a graph, you might be interested in our graph editor. See: http://algoviz.org/OpenDSA/dev/OpenDSA/AV/Development/graphEditor.html


Keith Moss
Offline
White BeltYellow BeltGreen BeltRed BeltBlack Belt
Joined: 2013-06-15
Posts:
Points: 99
Re: Graphics
Yes I had a look at the your graph editor and whilst it could do what I wanted it doesn’t engage the user as much an editor that has dragging enabled. Being able to drag shapes around doers lead to getting the required form for a graph much quicker and much easier. So I stuck with Kinetic and I have the interface I wanted and now I have show the algorithm I’m interested. The interface took a long while but as I’m going to use it a number of times it was worth it.
ville
ville's picture
Offline
White BeltYellow BeltGreen BeltRed BeltBlack Belt
Joined: 2009-05-28
Posts:
Points: 559
Re: Graphics
It should be relatively easy to add dragging of nodes to the graph editor, at least from the JSAV point of view. I could add it, but I’m assuming it’s a student project so I probably shouldn’t.

Ville Karavirta, Aalto University, http://villekaravirta.com/

Keith Moss
Offline
White BeltYellow BeltGreen BeltRed BeltBlack Belt
Joined: 2013-06-15
Posts:
Points: 99
Re: Graphics
 Well consider me a student then as I don’t have time to learn new tricks but I appreciate other’s.
shaffer
shaffer's picture
Offline
White BeltYellow BeltGreen BeltRed BeltBlack Belt
Joined: 2009-05-28
Posts:
Points: 2019
Re: Graphics
 Ville, please send me a description of a good way to implement this node dragging. I will see if I an get Thomas to add that.

ville
ville's picture
Offline
White BeltYellow BeltGreen BeltRed BeltBlack Belt
Joined: 2009-05-28
Posts:
Points: 559
Re: Graphics
 Sorry about forgetting to check back on this thread..

Adding dragging to move the nodes in a JSAV graph with manual layout is even easier than I though. If you already have all the graph nodes, this should do the trick:
 $( ".jsavnode" ).draggable({
    drag: function( event, ui ) {
      g.layout({record: false}); // layout graph, don't record this into JSAV animation
    }
  });

assuming g is a JSAV graph. This uses the draggable function of jQuery UI

In the graph editor, you might want to do this in the function where moveMode is enabled.

shaffer
shaffer's picture
Offline
White BeltYellow BeltGreen BeltRed BeltBlack Belt
Joined: 2009-05-28
Posts:
Points: 2019
Re: Graphics
 Thanks, Ville! We’ll see about adding this to the graph editor.