[Contents] [Intro] [Reference] [Tutorial] [Question [New [Index]
Overview -> Tutorial -> Using the Graph-Editor

Section 5: Using the Graph Editor

This tutorial section covers the following exercises:

Starting the Graph Editor

The graph editor is an external application which communicates with daVinci by using the
API. With the editor you can interactively edit the structure of a graph which is currently loaded in daVinci, e.g. to insert or delete nodes and edges. The responsibility of the graph editor application (and any other daVinci application) is to maintain the structure of the graph, whereas daVinci can only visualize the graph without permission to manipulate the graph's structure on its own. This topic is discussed in detail in the API introduction.

The user does not see anything of this system architecture with two different processes communicating with eachother. The users controls the application (i.e. the graph editor in this case) from inside the daVinci user interface, so the easiest way is to think about the graph editor application as a "plug-in" to extend the basic functionality of daVinci.

Before using the graph editor, you have to connect it to the daVinci API. This can be done in daVinci at runtime by using menu File/Connect Application... (another method is to start daVinci with option -graphedit). By using this menu, a file browser appears to let you select the binary file of the application that should be connected. The filename of the graph editor binary is grapheditor. You can find it in directory daVinci_V2.0/grapheditor/ of the daVinci distribution. If you do not know where daVinci is installed on your computer, type echo $DAVINCIHOME in a UNIX shell to display this location.

Now move to the graph editor directory with the file browser and double-click on file grapheditor there. This will start and connect the editor. Afterwards you should see a status message "GraphEditor V2.0" in the lower right footer area of the daVinci base window and six new graph editor icons on the icon bar of the daVinci base window. Do not worry, the usual daVinci icons are still available! You can switch between the daVinci icons and the graph editor icons by using the small arrows (, ) which are at the lower end of the icon bar.

Building a new Graph from Scratch

With the connected graph editor application we can now interactively construct our own graph in daVinci. Start with a root node by selecting menu Edit/Node/Insert Root. This creates a single node, more precisely a white box with text "Node 1". Like all inserted nodes, the new node is automatically selected after creation (i.e. it has a black shadow). Lets turn the selected node into a parent by using menu Edit/Node/Insert Child. This is a context sensitive menu which means that the currently selected node will become the parent of the new inserted node by creating an edge as well. Insert some more child nodes such that you will get this graph:
If you have made a mistake with your graph, you can always delete a single node with menu Edit/Node/Delete Node or a node together with its subgraph using menu Edit/Node/Delete Subgraph (refer to this link if you want to know what exactly a "subgraph" is).

Now we will create some edges between existing nodes. First select "Node 4" and then select "Node 5" such that only these two nodes are selected. The order is important, so click "Node 4" first! Hint: you have to hold down the Shift key for multiple selection. With two selected nodes, menu Edit/Edge/Insert Edge becomes available. Select this menu to create a directed edge pointing from parent "Node 4" to child "Node 5".

What would have been happened in this situation if you had selected "Node 5" first and then "Node 4"? Try it by removing the previously inserted edge to go back to the old graph shown above. To do so, select this edge and use menu Edit/Edge/Delete Edge. Insert the edge again, but do not forget to select "Node 5" first and "Node 4" afterwards at this time. As you can see, the parent and child node of the inserted edge are now exchanged. This will result in a completely different visualization for a hierarchical graph drawing where edges are always pointing downwards from the parents to the childs.

By the way, you already might have been noticed that you can also use the graph editor icons on the icon bar of the daVinci base window for quick access to the six most frequently used operations of the graph editor.

Modifying existing Graphs

After getting familiar with the basic editing operations, we will now come to some more advanced features of the graph editor. They will be explained based on one of the example graphs of the daVinci distribution, to see how modification of an existing graph works. You should now save your current graph before with menu File/Save As... if you want to keep it for a later session. After doing this, load file graph_example.daVinci in the example_graphs/ directory of the daVinci distribution (remember: environment variable $DAVINCIHOME points you to the location).

Now you should see a large graph in the daVinci base window. You can modify the structure of this graph with the basic editing operations described above. But here is something new: select an arbitrary node in this graph and choose menu Edit/Node/Attributes... afterwards. A dialog window will appear where you can modify all attributes of this specific node. You can also select the third graph editor icon or simply double-click on a node to get this dialog. Play a little bit with the dialog items of this window and press the Apply button to consider your modifications for the graph visualization. For more convenience, the window will remain open until you press the Cancel button. When you select a new node in the graph, the window is updated to show the attributes of the current selection. You can even modify the attributes of many selected nodes in one step.

For example, change the shape to Icon for one specific node and enter the string mfr.xbm in the Icon File: field which will become enabled. Do the same with another node, but use the string mawe.xbm this time. Wow, you can see photos of the two daVinci developers! By the way, this is not a built-in easteregg. Both .xbm files are in the icons/ directory of the daVinci distribution, which is part of the icon search path by default (refer to environment variable $DAVINCI_ICONDIR).

Different colors are also available to be used as node attribute. If you do not like the given palette, then you could set your own preferences with the color editor which appears after double-clicking on one of the colors. Next, change the text of a particular node with the attribute dialog. You can even get nodes with multi-line text by typing return characters in the text entry field. As you have already seen, newly inserted nodes get a default text. You can specify the pattern for this text with menu Edit/Node/Naming Scheme..., whereby the special character # is a placeholder for the current node number.

Edges also have attributes. Double-click on one of the edges in the graph to get the edge attribute dialog. Modify the attributes of some edges to see what happens.

End of section 5
Go back to the Tutorial Overview


daVinci V2.0 Online Documentation - Page update: Jul 3, 1996